diff --git a/.DS_Store b/.DS_Store
index f44179a17a..a15e3d5558 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/.github/workflows/publish-lowcoder-cli.yml b/.github/workflows/publish-lowcoder-cli.yml
new file mode 100644
index 0000000000..17eafa909c
--- /dev/null
+++ b/.github/workflows/publish-lowcoder-cli.yml
@@ -0,0 +1,47 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Publish Lowcoder CLI
+
+on:
+  push:
+    branches: [ "dev" ]
+
+jobs:
+  publish-package:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Check version changes
+        uses: EndBug/version-check@v1
+        id: check
+        with:
+          diff-search: true
+          file-name: client/packages/lowcoder-cli/package.json
+
+      - name: Version update detected
+        if: steps.check.outputs.changed == 'true'
+        run: 'echo "Version change found! New version: ${{ steps.check.outputs.version }} (${{ steps.check.outputs.type }})"'
+      
+      - name: Set up Node.js for NPM
+        if: steps.check.outputs.changed == 'true'
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+
+      - name: Install dependencies
+        if: steps.check.outputs.changed == 'true'
+        uses: borales/actions-yarn@v4.2.0
+        with:
+          cmd: install
+          dir: client/packages/lowcoder-cli
+      
+      - name: Publish package to NPM
+        if: steps.check.outputs.changed == 'true'
+        run: npm publish
+        working-directory: client/packages/lowcoder-cli
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.LOWCODERNPMBOT }}
\ No newline at end of file
diff --git a/.github/workflows/publish-lowcoder-comps.yml b/.github/workflows/publish-lowcoder-comps.yml
new file mode 100644
index 0000000000..40eb567e01
--- /dev/null
+++ b/.github/workflows/publish-lowcoder-comps.yml
@@ -0,0 +1,49 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Publish Lowcoder Comps
+
+on:
+  push:
+    branches: [ "dev" ]
+
+jobs:
+  publish-package:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Check version changes
+        uses: EndBug/version-check@v1
+        id: check
+        with:
+          diff-search: true
+          file-name: client/packages/lowcoder-comps/package.json
+
+      - name: Version update detected
+        if: steps.check.outputs.changed == 'true'
+        run: 'echo "Version change found! New version: ${{ steps.check.outputs.version }} (${{ steps.check.outputs.type }})"'
+      
+      - name: Set up Node.js for NPM
+        if: steps.check.outputs.changed == 'true'
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+
+      - name: Install dependencies
+        if: steps.check.outputs.changed == 'true'
+        uses: borales/actions-yarn@v4.2.0
+        with:
+          cmd: install
+          dir: client/packages/lowcoder-comps
+
+      - name: Publish
+        if: steps.check.outputs.changed == 'true'
+        uses: borales/actions-yarn@v4.2.0
+        with:
+          cmd: build_publish
+          dir: client/packages/lowcoder-comps
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.LOWCODERNPMBOT }}
\ No newline at end of file
diff --git a/.github/workflows/publish-lowcoder-core.yml b/.github/workflows/publish-lowcoder-core.yml
new file mode 100644
index 0000000000..5d36c46c7a
--- /dev/null
+++ b/.github/workflows/publish-lowcoder-core.yml
@@ -0,0 +1,47 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Publish Lowcoder Core
+
+on:
+  push:
+    branches: [ "dev" ]
+
+jobs:
+  publish-package:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Check version changes
+        uses: EndBug/version-check@v1
+        id: check
+        with:
+          diff-search: true
+          file-name: client/packages/lowcoder-core/package.json
+
+      - name: Version update detected
+        if: steps.check.outputs.changed == 'true'
+        run: 'echo "Version change found! New version: ${{ steps.check.outputs.version }} (${{ steps.check.outputs.type }})"'
+      
+      - name: Set up Node.js for NPM
+        if: steps.check.outputs.changed == 'true'
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+
+      - name: Install dependencies
+        if: steps.check.outputs.changed == 'true'
+        uses: borales/actions-yarn@v4.2.0
+        with:
+          cmd: install
+          dir: client/packages/lowcoder-core
+
+      - name: Publish package to NPM
+        if: steps.check.outputs.changed == 'true'
+        run: npm publish
+        working-directory: client/packages/lowcoder-core
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.LOWCODERNPMBOT }}
\ No newline at end of file
diff --git a/.github/workflows/publish-lowcoder-sdk.yml b/.github/workflows/publish-lowcoder-sdk.yml
new file mode 100644
index 0000000000..40d93e71a7
--- /dev/null
+++ b/.github/workflows/publish-lowcoder-sdk.yml
@@ -0,0 +1,54 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Publish Lowcoder SDK
+
+on:
+  push:
+    branches: [ "dev" ]
+
+jobs:
+  publish-package:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Check version changes
+        uses: EndBug/version-check@v1
+        id: check
+        with:
+          diff-search: true
+          file-name: client/packages/lowcoder-sdk/package.json
+
+      - name: Version update detected
+        if: steps.check.outputs.changed == 'true'
+        run: 'echo "Version change found! New version: ${{ steps.check.outputs.version }} (${{ steps.check.outputs.type }})"'
+      
+      - name: Set up Node.js for NPM
+        if: steps.check.outputs.changed == 'true'
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+
+      - name: Install dependencies
+        if: steps.check.outputs.changed == 'true'
+        uses: borales/actions-yarn@v4.2.0
+        with:
+          cmd: install
+          dir: client/packages/lowcoder-sdk
+      
+      - name: Build Package
+        if: steps.check.outputs.changed == 'true'
+        uses: borales/actions-yarn@v4.2.0
+        with:
+          cmd: build
+          dir: client/packages/lowcoder-sdk
+
+      - name: Publish package to NPM
+        if: steps.check.outputs.changed == 'true'
+        run: npm publish
+        working-directory: client/packages/lowcoder-sdk
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.LOWCODERNPMBOT }}
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 2e1b56cd59..86b0cc02da 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,4 @@ client/node_modules/
 client/packages/lowcoder-plugin-demo/.yarn/install-state.gz
 client/packages/lowcoder-plugin-demo/yarn.lock
 client/packages/lowcoder-plugin-demo/.yarn/cache/@types-node-npm-16.18.68-56f72825c0-094ae9ed80.zip
+.DS_Store
diff --git a/README.md b/README.md
index 91c71b72f3..19e28e3784 100644
--- a/README.md
+++ b/README.md
@@ -96,4 +96,4 @@ You can access Lowcoder from [cloud-hosted version](https://app.lowcoder.cloud/)
 Accelerate the growth of Lowcoder and unleash its potential with your Sponsorship – together, we're shaping the future of Lowcode for everyone!
 [Be a Sponsor](https://github.com/sponsors/lowcoder-org)
 
-Like ... @CHSchuepfer. Thank you very much!
\ No newline at end of file
+Like ... @CHSchuepfer & @spacegoats-io. Thank you very much!!
\ No newline at end of file
diff --git a/client/config/test/jest.config.js b/client/config/test/jest.config.js
index 958f1d2538..90fb745727 100644
--- a/client/config/test/jest.config.js
+++ b/client/config/test/jest.config.js
@@ -36,7 +36,7 @@ export default {
     path.resolve(currentDir, "../../packages/lowcoder-design/src"),
   ],
   setupFiles: [path.resolve(currentDir, "./jest.setup.js")],
-  setupFilesAfterEnv: [path.resolve(currentDir, "./jest.setup-after-env.js")],
+  setupFilesAfterEnv: [path.resolve(currentDir, "./jest.setup-after-env.js"), 'jest-canvas-mock'],
   transform: {
     "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": path.resolve(currentDir, "./transform/babelTransform.js"),
     "^.+\\.css$": path.resolve(currentDir, "./transform/cssTransform.js"),
diff --git a/client/config/test/jest.setup-after-env.js b/client/config/test/jest.setup-after-env.js
index b031316de2..f332f518b9 100644
--- a/client/config/test/jest.setup-after-env.js
+++ b/client/config/test/jest.setup-after-env.js
@@ -21,3 +21,36 @@ window.ResizeObserver = function () {
     disconnect: () => {},
   };
 };
+
+Object.defineProperty(window, 'ImageData', { value: 'yourValue' });
+Object.defineProperty(window, 'MediaStreamTrack', { value: 'yourValue' });
+Object.defineProperty(window, 'URL', {
+  writable: true,
+  value: {
+    createObjectURL: jest.fn(),
+  }
+});
+Object.defineProperty(window, "navigator", {
+  writable: true,
+  value: {
+    mediaDevices: {
+      enumerateDevices: jest.fn(),
+    },
+    userAgent: '',
+    language: '',
+    browserLanguage: '',
+  },
+});
+
+class Worker {
+  constructor(stringUrl) {
+    this.url = stringUrl;
+    this.onmessage = () => {};
+  }
+
+  postMessage(msg) {
+    this.onmessage(msg);
+  }
+}
+
+window.Worker = Worker;
\ No newline at end of file
diff --git a/client/package.json b/client/package.json
index 3798025a0b..2f49baf8c4 100644
--- a/client/package.json
+++ b/client/package.json
@@ -25,9 +25,6 @@
     "@babel/preset-typescript": "^7.18.6",
     "@rollup/plugin-typescript": "^8.5.0",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/user-event": "^13.2.1",
-    "@types/ali-oss": "^6.16.4",
     "@types/file-saver": "^2.0.5",
     "@types/jest": "^29.2.2",
     "@types/mime": "^2.0.3",
@@ -37,10 +34,8 @@
     "@types/react-resizable": "^3.0.5",
     "@types/react-router-dom": "^5.3.2",
     "@types/shelljs": "^0.8.11",
-    "@types/styled-components": "^5.1.19",
     "@types/stylis": "^4.0.2",
     "@types/tern": "0.23.4",
-    "@types/toposort": "^2.0.3",
     "@types/ua-parser-js": "^0.7.36",
     "@welldone-software/why-did-you-render": "^6.2.3",
     "add": "^2.0.6",
@@ -48,6 +43,7 @@
     "babel-preset-react-app": "^10.0.1",
     "husky": "^8.0.1",
     "jest": "^29.5.0",
+    "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.5.0",
     "lint-staged": "^13.0.1",
     "lowcoder-cli": "workspace:^",
@@ -66,7 +62,7 @@
   },
   "packageManager": "yarn@3.6.4",
   "resolutions": {
-    "@types/react": "^17",
+    "@types/react": "^18",
     "moment": "2.29.2",
     "canvas": "https://registry.yarnpkg.com/@favware/skip-dependency/-/skip-dependency-1.2.1.tgz",
     "react-virtualized@^9.22.3": "patch:react-virtualized@npm%3A9.22.3#./.yarn/patches/react-virtualized-npm-9.22.3-0fff3cbf64.patch",
@@ -74,6 +70,9 @@
   },
   "dependencies": {
     "@lottiefiles/react-lottie-player": "^3.5.3",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/styled-components": "^5.1.34",
     "antd-mobile": "^5.28.0",
     "chalk": "4",
     "number-precision": "^1.6.0",
diff --git a/client/packages/lowcoder-cli-template-typescript/.gitignore b/client/packages/lowcoder-cli-template-typescript/.gitignore
index e732f2271e..7dc34c5d97 100644
--- a/client/packages/lowcoder-cli-template-typescript/.gitignore
+++ b/client/packages/lowcoder-cli-template-typescript/.gitignore
@@ -1,2 +1,4 @@
 *.tgz
-/node_modules
\ No newline at end of file
+.DS_Store
+node_modules
+*.zip
\ No newline at end of file
diff --git a/client/packages/lowcoder-cli-template-typescript/README.md b/client/packages/lowcoder-cli-template-typescript/README.md
index e95b8830e8..e11110bd63 100644
--- a/client/packages/lowcoder-cli-template-typescript/README.md
+++ b/client/packages/lowcoder-cli-template-typescript/README.md
@@ -1,5 +1,27 @@
-# lowcoder-cli-template-typescript
+# Lowcoder Demonstrator Plugin Sourcecode
 
-This is the official typescript template of lowcoder-cli.
+## Overview
 
-This template will be used by default.
+This repository contains the demonstrator code for a Component Plugin in Lowcoder. It serves as a practical example and a reference for developers looking to build their own Component Plugins within the Lowcoder framework.
+
+This repository is not about to integrate the Plugin like other NPM repositories. However, for the Lowcoder Component Plugin Creator we wanted to publish the Demonstrator Plugin code sources.
+
+### The Lowcoder App Editor
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/App%20Editor%20%7C%20Main%20Screeen%20clean.png" alt="Lowcoder App Editor">
+</p>
+
+### Purpose
+
+The primary goal of this repository is to showcase best practices, demonstrate the structure, and provide a clear example of how to develop Component Plugins for Lowcoder. It is intended to be a learning resource rather than a production-ready solution.
+
+## Getting Started
+
+To explore this demonstrator plugin, install and test it in action you can use the "Lowcoder Component Plugin Builder". https://www.npmjs.com/package/create-lowcoder-plugin
+
+### The Lowcoder Component Plugin Builder and Preivew
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/Component%20Plugin%20Builder%20%7C%20Preview.png" alt="Lowcoder Plugin Preview">
+</p>
\ No newline at end of file
diff --git a/client/packages/lowcoder-cli-template-typescript/icons/hills.svg b/client/packages/lowcoder-cli-template-typescript/icons/hills.svg
new file mode 100644
index 0000000000..95eb1fb19d
--- /dev/null
+++ b/client/packages/lowcoder-cli-template-typescript/icons/hills.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1200 1200" style="enable-background:new 0 0 1200 1200;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#9B9B9B;}
+</style>
+<g>
+	<path d="M443.7,797.6L624,531.3c86.3-127.4,213.3-129.7,300.8-5.2l191.3,271.5L443.7,797.6z"/>
+	<path d="M652.9,447.4C551,331,415.2,343,320.8,482.7L107.4,797.6h292l192.3-283.8C609.5,487.3,630.2,464.9,652.9,447.4L652.9,447.4
+		z"/>
+</g>
+<circle class="st0" cx="334.8" cy="476.1" r="54"/>
+<circle class="st0" cx="976.8" cy="600" r="68.1"/>
+<circle class="st0" cx="238.9" cy="600" r="54"/>
+<circle class="st0" cx="779.9" cy="434.2" r="54"/>
+</svg>
diff --git a/client/packages/lowcoder-cli-template-typescript/index.html b/client/packages/lowcoder-cli-template-typescript/index.html
index 12f0761f4c..6f14c9ea27 100644
--- a/client/packages/lowcoder-cli-template-typescript/index.html
+++ b/client/packages/lowcoder-cli-template-typescript/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Lowcoder Comp Playground</title>
+    <title>Lowcoder Component Plugin Preview</title>
     <style>
       #root {
         height: 100vh;
diff --git a/client/packages/lowcoder-cli-template-typescript/index.tsx b/client/packages/lowcoder-cli-template-typescript/index.tsx
index b446b08b82..e5e2ef29a9 100644
--- a/client/packages/lowcoder-cli-template-typescript/index.tsx
+++ b/client/packages/lowcoder-cli-template-typescript/index.tsx
@@ -1,8 +1,7 @@
-import ReactDOM from "react-dom";
+import { createRoot } from 'react-dom/client';
 import { CompIDE } from "lowcoder-sdk";
 import { name, version, lowcoder } from "./package.json";
 import compMap from "./src/index";
-
 import "lowcoder-sdk/dist/style.css";
 
 function CompDevApp() {
@@ -15,5 +14,6 @@ function CompDevApp() {
     />
   );
 }
-
-ReactDOM.render(<CompDevApp />, document.querySelector("#root"));
+const container = document.querySelector("#root") as Element | DocumentFragment;
+const root = createRoot(container);
+root.render(<CompDevApp />);
diff --git a/client/packages/lowcoder-cli-template-typescript/locales/en.json b/client/packages/lowcoder-cli-template-typescript/locales/en.json
deleted file mode 100644
index 312f48725c..0000000000
--- a/client/packages/lowcoder-cli-template-typescript/locales/en.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "helloWorldCompName": "Hello World"
-}
diff --git a/client/packages/lowcoder-cli-template-typescript/locales/zh_CN.json b/client/packages/lowcoder-cli-template-typescript/locales/zh_CN.json
deleted file mode 100644
index 0283c17ed6..0000000000
--- a/client/packages/lowcoder-cli-template-typescript/locales/zh_CN.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "helloWorldCompName": "你好，世界"
-}
diff --git a/client/packages/lowcoder-cli-template-typescript/package.json b/client/packages/lowcoder-cli-template-typescript/package.json
index a970d4c1d1..50b495d7fb 100644
--- a/client/packages/lowcoder-cli-template-typescript/package.json
+++ b/client/packages/lowcoder-cli-template-typescript/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-cli-template-typescript",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "type": "module",
   "scripts": {
     "start": "vite",
@@ -8,22 +8,30 @@
     "build_publish": "lowcoder-cli build --publish"
   },
   "lowcoder": {
-    "description": "",
+    "description": "A Demo Hillchart Component Plugin",
     "comps": {
-      "hello_world": {
-        "name": "__i18n_helloWorldCompName__",
-        "icon": "./icons/demo-icon.svg"
+      "hillcharts": {
+        "name": "Hillcharts Demo",
+        "icon": "./icons/hills.svg",
+        "description": "Hillchart Plugin Demo Component"
       }
     }
   },
   "devDependencies": {
-    "lowcoder-cli": "workspace:^",
-    "lowcoder-sdk": "workspace:^",
-    "typescript": "^4.8.4",
-    "vite": "^4.3.9"
+    "@observablehq/runtime": "^4.8.2",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "lowcoder-cli": "^0.0.30",
+    "lowcoder-sdk": "^2.1.10",
+    "prop-types": "^15.7.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-resize-detector": "^7.0.0",
+    "typescript": "5.3.3",
+    "vite": "^5.0.10"
   },
   "keywords": [
-    "Lowcoder, Component, Template, Plugin"
+    "Lowcoder, Component, Template, Plugin, Demonstrator"
   ],
   "license": "MIT"
 }
diff --git a/client/packages/lowcoder-cli-template-typescript/src/HelloWorldComp.tsx b/client/packages/lowcoder-cli-template-typescript/src/HelloWorldComp.tsx
deleted file mode 100644
index c06b43c6ea..0000000000
--- a/client/packages/lowcoder-cli-template-typescript/src/HelloWorldComp.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import {
-  antd,
-  UICompBuilder,
-  numberExposingStateControl,
-  Section,
-  withDefault,
-  withExposingConfigs,
-  NumberControl,
-  NameConfig,
-  eventHandlerControl,
-  withMethodExposing,
-} from "lowcoder-sdk";
-
-import styles from "./styles.module.css";
-
-const { Button } = antd;
-
-const childrenMap = {
-  value: numberExposingStateControl("value", 10),
-  step: withDefault(NumberControl, 1),
-  onEvent: eventHandlerControl([
-    {
-      label: "onChange",
-      value: "change",
-      description: "",
-    },
-  ]),
-};
-
-const HelloWorldCompBase = new UICompBuilder(childrenMap, (props: any) => {
-  const currentValue = props.value.value;
-  return (
-    <div className={styles.wrapper}>
-      <Button
-        onClick={() => {
-          props.value.onChange(currentValue - props.step);
-          props.onEvent("change");
-        }}
-      >
-        -
-      </Button>
-      <span style={{ padding: "0 8px" }}>{currentValue}</span>
-      <Button
-        onClick={() => {
-          props.value.onChange(currentValue + props.step);
-          props.onEvent("change");
-        }}
-      >
-        +
-      </Button>
-    </div>
-  );
-})
-  .setPropertyViewFn((children: any) => {
-    return (
-      <>
-        <Section name="Basic">
-          {children.value.propertyView({ label: "Initial Value" })}
-          {children.step.propertyView({ label: "Step" })}
-        </Section>
-        <Section name="Interaction">{children.onEvent.propertyView()}</Section>
-      </>
-    );
-  })
-  .build();
-
-const HelloWorldCompTemp = withMethodExposing(HelloWorldCompBase, [
-  {
-    method: {
-      name: "random",
-      params: [],
-    },
-    execute(comp: any) {
-      comp.children.value.getView().onChange(Math.floor(Math.random() * 100));
-    },
-  },
-]);
-
-export default withExposingConfigs(HelloWorldCompTemp, [
-  new NameConfig("value", ""),
-  new NameConfig("step", ""),
-]);
diff --git a/client/packages/lowcoder-cli-template-typescript/src/HillchartsComp.tsx b/client/packages/lowcoder-cli-template-typescript/src/HillchartsComp.tsx
new file mode 100644
index 0000000000..f5cb2de307
--- /dev/null
+++ b/client/packages/lowcoder-cli-template-typescript/src/HillchartsComp.tsx
@@ -0,0 +1,142 @@
+import {
+  UICompBuilder,
+  NameConfig,
+  NumberControl,
+  Section,
+  withDefault,
+  withExposingConfigs,
+  eventHandlerControl,
+  styleControl,
+  toJSONObjectArray,
+  jsonControl,
+  AutoHeightControl,
+  EditorContext,
+} from "lowcoder-sdk";
+
+import styles from "./styles.module.css";
+
+import { i18nObjs, trans } from "./i18n/comps";
+
+import { Chart } from './vendors'
+import { useContext, useEffect, useRef, useState } from "react";
+
+
+export const CompStyles = [
+  {	
+    name: "margin",	
+    label: trans("style.margin"),
+    margin: "margin",	
+  },
+  {	
+    name: "padding",	
+    label: trans("style.padding"),
+    padding: "padding",	
+  },
+  {	
+    name: "textSize",
+    label: trans("style.textSize"),
+    textSize: "textSize",	
+  },
+  {	
+    name: "backgroundColor",
+    label: trans("style.backgroundColor"),
+    backgroundColor: "backgroundColor",	
+  },
+  {	
+    name: "border",
+    label: trans("style.border"),
+    border: "border",	
+  },
+  {
+    name : "radius",
+    label : trans("style.borderRadius"),
+    radius : "radius",
+  },
+  {
+    name : "borderWidth",
+    label : trans("style.borderWidth"),
+    borderWidth : "borderWidth",
+  }
+] as const;
+
+
+
+// const HillchartsCompBase = new UICompBuilder(childrenMap, (props: any) => {
+let HillchartsCompBase = (function () {
+
+  const childrenMap = {
+    styles: styleControl(CompStyles),
+    autoHeight: withDefault(AutoHeightControl, "auto"),
+    data: jsonControl(toJSONObjectArray, i18nObjs.defaultData),
+    onEvent: eventHandlerControl([
+      {
+        label: "onChange",
+        value: "change",
+        description: "Triggers when Chart data changes",
+      },
+    ]),
+  };
+  
+  return new UICompBuilder(childrenMap, (props: { onEvent: (arg0: string) => void; styles: { backgroundColor: any; border: any; radius: any; borderWidth: any; margin: any; padding: any; textSize: any; }; data: any[] | null | undefined; }) => {
+  const handleDataChange = () => {
+    props.onEvent("change");
+  };
+
+  const conRef = useRef<HTMLDivElement>(null);
+  const [dimensions, setDimensions] = useState({ width: 400, height: 250 });
+
+  useEffect(() => {
+    if (conRef.current) {
+      setDimensions({
+        width: conRef.current.clientWidth,
+        height: conRef.current.clientHeight
+      });
+    }
+  }, []);
+
+  return (
+      <div ref={conRef} className={styles.wrapper} style={{
+          display: "flex",
+          justifyContent: "center",
+          height: `100%`,
+          width: `100%`,
+          backgroundColor: `${props.styles.backgroundColor}`,
+          borderColor: `${props.styles.border}`,
+          borderRadius: `${props.styles.radius}`,
+          borderWidth: `${props.styles.borderWidth}`,
+          margin: `${props.styles.margin}`,
+          padding: `${props.styles.padding}`,
+          fontSize: `${props.styles.textSize}`,
+        }}>
+        <Chart data={props.data} height={dimensions.height} width={dimensions.width} onDataChange={handleDataChange}/>
+      </div>
+  );
+})
+.setPropertyViewFn((children: any) => {
+  return (
+    <>
+      <Section name="Basic">
+        {children.data.propertyView({ label: "Data" })}
+      </Section>
+      <Section name="Interaction">
+        {children.onEvent.propertyView()}
+      </Section>
+      <Section name="Styles">
+        {children.autoHeight.getPropertyView()}
+        {children.styles.getPropertyView()}
+      </Section>
+    </>
+  );
+})
+.build();
+})();
+
+HillchartsCompBase = class extends HillchartsCompBase {
+  autoHeight(): boolean {
+    return this.children.autoHeight.getView();
+  }
+};
+
+export default withExposingConfigs(HillchartsCompBase, [
+  new NameConfig("data", trans("component.data")),
+]);
diff --git a/client/packages/lowcoder-cli-template-typescript/src/README.md b/client/packages/lowcoder-cli-template-typescript/src/README.md
new file mode 100644
index 0000000000..cb357bba5e
--- /dev/null
+++ b/client/packages/lowcoder-cli-template-typescript/src/README.md
@@ -0,0 +1,35 @@
+# Using Lowcoder Component Plugin
+
+## Prerequisites
+Before you start, ensure you have a running Lowcoder installation. Alternatively, you can use it online at [https://app.lowcoder.cloud](https://app.lowcoder.cloud).
+
+## Steps to Use the Plugin
+1. **Open the App Editor**: Navigate to the App Editor within your Lowcoder application.
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/App%20Editor%20%7C%20Main%20Screeen%20clean.png" alt="Lowcoder App Editor">
+</p>
+
+1. **Access Components Panel**: In the App Editor, locate the right panel where components are listed.
+
+2. **Switch to Extensions**: Find and switch on the "Extensions" toggle. This option allows you to add additional components to your project.
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/App%20Editor%20%7C%20Import%20Component%20Plugin%201.png" alt="Lowcoder App Editor">
+</p>
+
+3. **Load the Plugin**: Here you have the option to load a Lowcoder Component Plugin from NPM. For example, to load the "hill charts" plugin, type `lowcoder-comp-hillcharts` in the provided field.
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/App%20Editor%20%7C%20Import%20Component%20Plugin%202.png" alt="Lowcoder App Editor">
+</p>
+
+4. **Start Using the Plugin**: After loading the plugin, it will be available for use within your Lowcoder project. You can now integrate and customize the component as per your application's needs.
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/App%20Editor%20%7C%20Import%20Component%20Plugin%203.png" alt="Lowcoder App Editor">
+</p>
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/App%20Editor%20%7C%20Import%20Component%20Plugin%204.png" alt="Lowcoder App Editor">
+</p>
\ No newline at end of file
diff --git a/client/packages/lowcoder-cli-template-typescript/src/i18n/comps/index.tsx b/client/packages/lowcoder-cli-template-typescript/src/i18n/comps/index.tsx
new file mode 100644
index 0000000000..452f3327ba
--- /dev/null
+++ b/client/packages/lowcoder-cli-template-typescript/src/i18n/comps/index.tsx
@@ -0,0 +1,30 @@
+import { getI18nObjects, getValueByLocale, Translator } from "lowcoder-sdk";
+import * as localeData from "./locales";
+import { I18nObjects } from "./locales/types";
+
+export const { trans, language } = new Translator<typeof localeData.en>(
+  localeData,
+  REACT_APP_LANGUAGES
+);
+
+export const i18nObjs = getI18nObjects<I18nObjects>(localeData, REACT_APP_LANGUAGES);
+
+export function getEchartsLocale() {
+  return getValueByLocale("EN", (locale) => {
+    switch (locale.language) {
+      case "en":
+        return "EN";
+      case "zh":
+        return "ZH";
+    }
+  });
+}
+
+export function getCalendarLocale() {
+  switch (language) {
+    case "zh":
+      return "zh-cn";
+    default:
+      return "en-gb";
+  }
+}
diff --git a/client/packages/lowcoder-cli-template-typescript/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-cli-template-typescript/src/i18n/comps/locales/en.ts
new file mode 100644
index 0000000000..159776065b
--- /dev/null
+++ b/client/packages/lowcoder-cli-template-typescript/src/i18n/comps/locales/en.ts
@@ -0,0 +1,30 @@
+export const en = {
+  "style": {
+    "textColor": "Text Color",
+    "contrastText": "Contrast Text Color",
+    "accent": "Accent",
+    "border": "Border Color",
+    "borderRadius": "Border Radius",
+    "borderWidth": "Border Width",
+    "backgroundColor": "Background Color",
+    "headerBackground": "Header Background",
+    "footerBackground": "Footer Background",
+    "checkedBackground": "Checked Background",
+    "uncheckedBackground": "Unchecked Background",
+    "uncheckedBorder": "Unchecked Border",
+    "indicatorBackground": "Indicator Background",
+    "toolbarBackground": "Toolbar Background",
+    "margin": "Margin",
+    "padding": "Padding",
+    "marginLeft": "Margin Left",
+    "marginRight": "Margin Right",
+    "marginTop": "Margin Top",
+    "marginBottom": "Margin Bottom",
+    "minWidth": "Minimum Width",
+    "aspectRatio": "Aspect Ratio",
+    "textSize": "Text Size"
+  },
+  "component": {
+    "data": "Hillchart Data",
+  },
+};
diff --git a/client/packages/lowcoder-cli-template-typescript/src/i18n/comps/locales/enObj.tsx b/client/packages/lowcoder-cli-template-typescript/src/i18n/comps/locales/enObj.tsx
new file mode 100644
index 0000000000..eb51bc9214
--- /dev/null
+++ b/client/packages/lowcoder-cli-template-typescript/src/i18n/comps/locales/enObj.tsx
@@ -0,0 +1,40 @@
+import { I18nObjects } from "./types";
+
+export const enObj: I18nObjects = {
+  defaultData: [
+    {
+      id : 1,
+      color: 'gray',
+      description: 'Validation: Salesforce Integration',
+      x: 25,
+      size: 15
+    },
+    { 
+      id : 2,
+      color: 'maroon', 
+      description: 'Renewals', 
+      x: 80, 
+      size: 10 },
+    {
+      id : 3,
+      color: 'maroon',
+      description: 'Refactor: Fancy Pants',
+      x: 35,
+      size: 10
+    },
+    {
+      id : 4,
+      color: 'cyan',
+      description: 'Refactor: Lighthouse Orbs',
+      x: 45,
+      size: 10
+    },
+    {
+      id : 5,
+      color: 'yellow',
+      description: 'Migration & Legacy Data Updates',
+      x: 50,
+      size: 20
+    }
+  ],
+};
diff --git a/client/packages/lowcoder-cli-template-typescript/src/i18n/comps/locales/index.ts b/client/packages/lowcoder-cli-template-typescript/src/i18n/comps/locales/index.ts
new file mode 100644
index 0000000000..ab1abfb2c2
--- /dev/null
+++ b/client/packages/lowcoder-cli-template-typescript/src/i18n/comps/locales/index.ts
@@ -0,0 +1,7 @@
+// file examples: en, enGB, zh, zhHK
+// fallback example: current locale is zh-HK, fallback order is zhHK => zh => en
+export * from "./en";
+export * from "./zh";
+
+export * from "./enObj";
+export * from "./zhObj";
diff --git a/client/packages/lowcoder-cli-template-typescript/src/i18n/comps/locales/types.tsx b/client/packages/lowcoder-cli-template-typescript/src/i18n/comps/locales/types.tsx
new file mode 100644
index 0000000000..8f61d94c55
--- /dev/null
+++ b/client/packages/lowcoder-cli-template-typescript/src/i18n/comps/locales/types.tsx
@@ -0,0 +1,13 @@
+import { JSONObject } from "lowcoder-sdk";
+
+export type JSONValue = string | number | boolean | JSONObject | JSONArray | null;
+
+export interface JSONObject {
+  [x: string]: JSONValue | undefined;
+}
+
+export type I18nObjects = {
+  defaultData: JSONObject[];
+};
+
+export type JSONArray = Array<JSONValue>;
\ No newline at end of file
diff --git a/client/packages/lowcoder-cli-template-typescript/src/i18n/comps/locales/zh.ts b/client/packages/lowcoder-cli-template-typescript/src/i18n/comps/locales/zh.ts
new file mode 100644
index 0000000000..b22412dd8e
--- /dev/null
+++ b/client/packages/lowcoder-cli-template-typescript/src/i18n/comps/locales/zh.ts
@@ -0,0 +1,3 @@
+export const zh = {
+    
+};
\ No newline at end of file
diff --git a/client/packages/lowcoder-cli-template-typescript/src/i18n/comps/locales/zhObj.tsx b/client/packages/lowcoder-cli-template-typescript/src/i18n/comps/locales/zhObj.tsx
new file mode 100644
index 0000000000..7ab7f251d3
--- /dev/null
+++ b/client/packages/lowcoder-cli-template-typescript/src/i18n/comps/locales/zhObj.tsx
@@ -0,0 +1,4 @@
+import { I18nObjects } from "./types";
+
+export const zhObj: I18nObjects | undefined = undefined;
+
diff --git a/client/packages/lowcoder-cli-template-typescript/src/index.ts b/client/packages/lowcoder-cli-template-typescript/src/index.ts
index ae1b4b53e4..77a4c4c7f5 100644
--- a/client/packages/lowcoder-cli-template-typescript/src/index.ts
+++ b/client/packages/lowcoder-cli-template-typescript/src/index.ts
@@ -1,5 +1,5 @@
-import HelloWorldComp from "./HelloWorldComp";
+import HillchartsComp from "./HillchartsComp";
 
 export default {
-  hello_world: HelloWorldComp,
-};
+  hillcharts: HillchartsComp
+};
\ No newline at end of file
diff --git a/client/packages/lowcoder-cli-template-typescript/src/vendors/Chart.jsx b/client/packages/lowcoder-cli-template-typescript/src/vendors/Chart.jsx
new file mode 100644
index 0000000000..ca36718e11
--- /dev/null
+++ b/client/packages/lowcoder-cli-template-typescript/src/vendors/Chart.jsx
@@ -0,0 +1,210 @@
+import React from 'react';
+import PropTypes from 'prop-types'
+import { Runtime, Inspector } from '@observablehq/runtime';
+
+function Chart(props) {
+  const [chartRef, setChartRef] = React.useState();
+
+  function define(runtime, observer) {
+    const main = runtime.module();
+
+    // Define your variables but don't attach observers to all of them
+    main.variable().define('data', () => props.data);
+    main.variable().define('width', () => props.width);
+    main.variable().define('height', () => props.height);
+    main.variable().define('onDataChange', () => props.onDataChange);
+    main.variable().define('translateXtoY', function() {
+      return x => 50 * Math.sin((Math.PI / 50) * x - (1 / 2) * Math.PI) + 50;
+    });
+    main.variable().define('d3', ['require'], function(require) {
+      return require('https://d3js.org/d3.v5.min.js');
+    });
+
+    // Define the HillChart class
+    main.variable().define('HillChart', ['d3', 'DOM', 'translateXtoY'], function(d3, DOM, translateXtoY) {
+      return class HillChart {
+        constructor(chart_height, chart_width, items) {
+          this.chart_height = chart_height;
+          this.chart_width = chart_width;
+          this.items = items;
+      
+          this.svg = d3.select(DOM.svg(this.chart_width, this.chart_height)).attr('viewBox', `-20 -20 ${this.chart_width + 80} ${this.chart_height + 20}`);
+        }
+        
+      
+        render() {
+          const xScale = d3
+            .scaleLinear()
+            .domain([0, 100])
+            .range([0, this.chart_width - 10]);
+      
+          const yScale = d3
+            .scaleLinear()
+            .domain([0, 100])
+            .range([this.chart_height - 40, 10]);
+      
+          // HILL LINE
+          const hillData = d3.range(0, 100, 0.1).map(i => ({
+            x: i,
+            y: translateXtoY(i)
+          }));
+      
+          const hillLine = d3
+            .line()
+            .x(d => xScale(d.x))
+            .y(d => yScale(d.y));
+      
+           // MIDDLE LINE
+           this.svg
+           .append('line')
+           .attr('class', 'middle')
+           .attr('x1', xScale(50))
+           .attr('y1', yScale(0))
+           .attr('x2', xScale(50))
+           .attr('y2', yScale(100))
+           .attr('stroke', '#dddddd')
+           .attr('stroke-width', 1)
+           .attr('stroke-dasharray', 10);
+     
+         // BOTTOM AXIS
+         this.svg
+           .append('line')
+           .attr('class', 'middle')
+           .attr('x1', xScale(0))
+           .attr('y1', yScale(-5))
+           .attr('x2', xScale(100))
+           .attr('y2', yScale(-5))
+           .attr('stroke', '#dddddd')
+           .attr('stroke-width', 1);
+
+          this.svg
+            .append('path')
+            .attr('class', 'line')
+            .datum(hillData)
+            .attr('fill', 'none')
+            .attr('stroke', '#cccccc')
+            .attr('stroke-width', 2)
+            .attr('d', hillLine);
+      
+          // PLOT POINTS
+          const dragFn = d3.drag()
+            .on('drag', function(d) {
+              let xPoint = d.x + xScale.invert(d3.event.dx);
+        
+              if (xPoint < 0) {
+                xPoint = 0;
+              } else if (xPoint > 100) {
+                xPoint = 100;
+              }
+        
+              d.x = xPoint;
+        
+              d3.select(this).attr(
+                'transform',
+                `translate(${xScale(xPoint)}, ${yScale(translateXtoY(xPoint))})`
+              );
+
+            }).on('end', function(event, d) {
+              props.onDataChange();
+            });
+      
+          const group = this.svg
+            .selectAll('.group')
+            .data(this.items)
+            .enter()
+            .append('g')
+            .attr('class', 'group')
+            .attr('transform', d => {
+              return `translate(${xScale(d.x)}, ${yScale(
+                translateXtoY(d.x)
+              )})`;
+            })
+            .call(dragFn);
+      
+          group
+            .append('circle')
+            .attr('fill', d => d.color)
+            .attr('stroke', '#ffffff')
+            .attr('stroke-width', 2)
+            .attr('style', 'cursor: move')
+            .attr('cx', 0)
+            .attr('cy', 0)
+            .attr('r', d => d.size);
+      
+          group
+            .append('line')
+            .attr('stroke', d => d.color)
+            .attr('stroke-width', 1)
+            .attr('x1', 10)
+            .attr('y1', 0)
+            .attr('x2', 20)
+            .attr('y2', 0);
+      
+          group
+            .append('text')
+            .attr('style', 'font-family: Tahoma; font-size: 14px;')
+            .text(d => d.description)
+            .attr('x', 25)
+            .attr('y', 5);
+      
+          // AXIS LABELS
+          this.svg
+            .append('text')
+            .attr('class', 'text')
+            .attr('style', 'font-family: Tahoma; font-size: 14px;')
+            .attr('fill', '#999999')
+            .text('FIGURING THINGS OUT')
+            .attr('x', xScale(0))
+            .attr('y', this.chart_height - 5);
+      
+          this.svg
+            .append('text')
+            .attr('class', 'text')
+            .attr('style', 'font-family: Tahoma; font-size: 14px;')
+            .attr('fill', '#999999')
+            .text('MAKING IT HAPPEN')
+            .attr('x', xScale(70))
+            .attr('y', this.chart_height - 5);
+    
+
+          return this.svg.node();
+        }
+      };
+    });
+
+    // Attach an observer only to the chart rendering part
+    main.variable(observer('chart')).define(['HillChart', 'height', 'width', 'data'], function(HillChart, height, width, data) {
+      return new HillChart(height, width, data).render();
+    });
+
+    return main;
+  }
+
+  const useChartRef = React.useCallback(ref => {
+    setChartRef(ref);
+  }, []);
+  
+  const [runtime] = React.useState(() => new Runtime());
+
+  React.useEffect(() => {
+    if (chartRef) {
+      // Clear the chart 
+      chartRef.innerHTML = '';
+
+      // Render an updated chart
+      runtime.module(define, Inspector.into(chartRef), 'chart');
+    }
+  }, [chartRef, props.data]);
+
+  return <div ref={useChartRef} style={{ height: "100%" }} />;
+}
+
+
+Chart.propTypes = {
+  width: PropTypes.number,
+  height: PropTypes.number,
+  data: PropTypes.array,
+  onDataChange: PropTypes.func
+}
+
+export default Chart;
diff --git a/client/packages/lowcoder-cli-template-typescript/src/vendors/index.jsx b/client/packages/lowcoder-cli-template-typescript/src/vendors/index.jsx
new file mode 100644
index 0000000000..c67311d23a
--- /dev/null
+++ b/client/packages/lowcoder-cli-template-typescript/src/vendors/index.jsx
@@ -0,0 +1 @@
+export { default as Chart } from './Chart'
\ No newline at end of file
diff --git a/client/packages/lowcoder-cli/actions/build.js b/client/packages/lowcoder-cli/actions/build.js
index b59ae51b57..04e754e991 100644
--- a/client/packages/lowcoder-cli/actions/build.js
+++ b/client/packages/lowcoder-cli/actions/build.js
@@ -1,7 +1,7 @@
 import { execSync } from "child_process";
 import fsExtra from "fs-extra";
 import { build } from "vite";
-import { writeFileSync, existsSync, readFileSync } from "fs";
+import { writeFileSync, existsSync, readFileSync, readdirSync } from "fs";
 import { resolve } from "path";
 import paths from "../config/paths.js";
 import "../util/log.js";
@@ -45,6 +45,12 @@ function validPackageJSON() {
   }
 }
 
+function findReadmeFileName(directory) {
+  const files = readdirSync(directory);
+  const readmeFile = files.find(file => file.toLowerCase() === 'readme.md');
+  return readmeFile ? `${directory}/${readmeFile}` : null;
+}
+
 /**
  * 1. webpack production build
  * 2. generate package.json
@@ -94,6 +100,16 @@ export default async function buildAction(options) {
     }
   });
 
+  // copy readme file
+  const readmePath = findReadmeFileName(paths.appPath + '/src');
+  if (readmePath) {
+    const destinationPath = resolve(paths.appOutPath, 'readme.md');
+    copySync(readmePath, destinationPath);
+    console.log(`Copied README file to: ${destinationPath}`);
+  } else {
+    console.warn('README.md file not found.');
+  }
+
   if (options.publish) {
     // publish
     execSync("npm publish", {
diff --git a/client/packages/lowcoder-cli/package.json b/client/packages/lowcoder-cli/package.json
index fd106f6ab6..5e87b44833 100644
--- a/client/packages/lowcoder-cli/package.json
+++ b/client/packages/lowcoder-cli/package.json
@@ -1,7 +1,7 @@
 {
   "name": "lowcoder-cli",
   "description": "CLI tool used to start build publish lowcoder components",
-  "version": "0.0.27",
+  "version": "0.0.30",
   "license": "MIT",
   "bin": "./index.js",
   "type": "module",
@@ -29,8 +29,8 @@
     "commander": "^9.4.1",
     "cross-spawn": "^7.0.3",
     "fs-extra": "^10.1.0",
-    "react": "^17",
-    "react-dom": "^17",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-json-view": "^1.21.3",
     "rollup-plugin-external-globals": "^0.7.1",
     "vite": "^4.3.9",
diff --git a/client/packages/lowcoder-comps/index.tsx b/client/packages/lowcoder-comps/index.tsx
index b446b08b82..a424ca6bdb 100644
--- a/client/packages/lowcoder-comps/index.tsx
+++ b/client/packages/lowcoder-comps/index.tsx
@@ -1,4 +1,4 @@
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { CompIDE } from "lowcoder-sdk";
 import { name, version, lowcoder } from "./package.json";
 import compMap from "./src/index";
@@ -16,4 +16,6 @@ function CompDevApp() {
   );
 }
 
-ReactDOM.render(<CompDevApp />, document.querySelector("#root"));
+const container = document.querySelector("#root");
+const root = createRoot(container!);
+root.render(<CompDevApp />);
diff --git a/client/packages/lowcoder-comps/jest.config.js b/client/packages/lowcoder-comps/jest.config.js
index 89a76bd411..23b80ec574 100644
--- a/client/packages/lowcoder-comps/jest.config.js
+++ b/client/packages/lowcoder-comps/jest.config.js
@@ -2,5 +2,5 @@ import config from "../../config/test/jest.config.js";
 
 export default {
   ...config,
-  setupFiles: [...config.setupFiles, 'jest-canvas-mock'],
+  setupFiles: [...config.setupFiles],
 };
diff --git a/client/packages/lowcoder-comps/package.json b/client/packages/lowcoder-comps/package.json
index 2fe76ae1b7..b054a2df77 100644
--- a/client/packages/lowcoder-comps/package.json
+++ b/client/packages/lowcoder-comps/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-comps",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "type": "module",
   "license": "MIT",
   "dependencies": {
@@ -11,16 +11,16 @@
     "@fullcalendar/moment": "^6.1.6",
     "@fullcalendar/react": "^6.1.6",
     "@fullcalendar/timegrid": "^6.1.6",
-    "@types/react": "17",
-    "@types/react-dom": "17",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
     "big.js": "^6.2.1",
     "echarts-extension-gmap": "^1.6.0",
     "echarts-wordcloud": "^2.1.0",
     "lowcoder-cli": "workspace:^",
     "lowcoder-sdk": "workspace:^",
-    "mermaid": "^10.2.4",
-    "react": "17",
-    "react-dom": "17",
+    "mermaid": "^10.6.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "typescript": "4.8.4"
   },
   "lowcoder": {
@@ -69,7 +69,6 @@
   },
   "devDependencies": {
     "jest": "29.3.0",
-    "jest-canvas-mock": "^2.5.2",
     "vite": "^4.3.9",
     "vite-tsconfig-paths": "^3.6.0"
   }
diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx
index 37c15507f1..72f292ece4 100644
--- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx
@@ -22,7 +22,8 @@ import {
   CalendarDeleteIcon,
   Tooltip,
 } from "lowcoder-sdk";
-import { Input, Form } from "antd";
+import { default as Form } from "antd/es/form";
+import { default as Input } from "antd/es/input";
 import { trans, getCalendarLocale } from "../../i18n/comps";
 import { createRef, useContext, useRef, useState } from "react";
 import FullCalendar from "@fullcalendar/react";
@@ -290,11 +291,11 @@ let CalendarBasicComp = (function () {
     return (
       <Wrapper
         ref={ref}
-        editable={editable}
+        $editable={editable}
         $style={style}
-        theme={theme?.theme}
+        $theme={theme?.theme}
         onDoubleClick={handleDbClick}
-        left={left}
+        $left={left}
         key={initialDate ? defaultView + initialDate : defaultView}
       >
         <FullCalendar
diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx
index 0e33adf1e1..93c07c4628 100644
--- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx
@@ -24,13 +24,13 @@ import {
   SlotLabelContentArg,
   ViewContentArg,
 } from "@fullcalendar/core";
-import { Form } from "antd";
+import { default as Form } from "antd/es/form";
 
 export const Wrapper = styled.div<{
-  editable: boolean;
+  $editable: boolean;
   $style: CalendarStyleType;
-  theme?: ThemeDetail;
-  left?: number;
+  $theme?: ThemeDetail;
+  $left?: number;
 }>`
   position: relative;
   height: 100%;
@@ -205,9 +205,9 @@ export const Wrapper = styled.div<{
       flex-direction: inherit;
     }
     .fc-day-today .fc-daygrid-day-number {
-      background-color: ${(props) => props.theme.primary};
+      background-color: ${(props) => props.$theme.primary};
       color: ${(props) =>
-        contrastText(props.theme.primary || "", props.theme.textDark, props.theme.textLight)};
+        contrastText(props.$theme.primary || "", props.$theme.textDark, props.$theme.textLight)};
     }
     .fc-daygrid-day-events {
       padding: 1px 0 5px 0;
@@ -261,7 +261,7 @@ export const Wrapper = styled.div<{
     border-radius: 4px;
     box-shadow: 0 0px 10px 4px rgba(0, 0, 0, 0.25);
     overflow: hidden;
-    left: ${(props) => `min(${props.left}px, calc(100% - 210px)) !important`};
+    left: ${(props) => `min(${props.$left}px, calc(100% - 210px)) !important`};
     .fc-popover-body {
       padding: 4px 0;
       min-width: 200px;
@@ -368,7 +368,7 @@ export const Wrapper = styled.div<{
     }
     &:hover {
       .event-remove {
-        opacity: ${(props) => props.editable && 1};
+        opacity: ${(props) => props.$editable ? 1 : undefined};
       }
     }
   }
@@ -585,10 +585,10 @@ export const Wrapper = styled.div<{
     }
     .fc-day-today.fc-col-header-cell {
       background-color: ${(props) =>
-        isDarkColor(props.$style.background) ? "#ffffff19" : toHex(props.theme.primary!) + "19"};
+        isDarkColor(props.$style.background) ? "#ffffff19" : toHex(props.$theme.primary!) + "19"};
       a {
         color: ${(props) =>
-          !isDarkColor(props.$style.background) && darkenColor(props.theme.primary!, 0.1)};
+          !isDarkColor(props.$style.background) && darkenColor(props.$theme.primary!, 0.1)};
       }
     }
     .fc-col-header-cell-cushion {
diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/chartUrls.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/chartUrls.tsx
index 320bfc0c1f..ef8ada4b00 100644
--- a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/chartUrls.tsx
+++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/chartUrls.tsx
@@ -4,6 +4,6 @@ const echartsUrlLocale = language === "zh" ? "zh" : "en";
 export const optionUrl = `https://echarts.apache.org/${echartsUrlLocale}/option.html`;
 export const examplesUrl = `https://echarts.apache.org/examples/${echartsUrlLocale}/index.html`;
 export const xAxisTypeUrl = `${optionUrl}#xAxis.type`;
-export const googleMapsApiUrl = `https://maps.googleapis.com/maps/api/js?v=3.exp`;
+export const googleMapsApiUrl = `https://maps.googleapis.com/maps/api/js`;
 export const mapOptionUrl = `https://github.com/plainheart/echarts-extension-gmap`;
 export const mapExamplesUrl = `https://codepen.io/plainheart/pen/VweLGbR`;
\ No newline at end of file
diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts b/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts
index 2e784b56f0..8a1d912fe5 100644
--- a/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts
@@ -266,8 +266,8 @@ export function getSelectedPoints(param: any, option: any) {
   return [];
 }
 
-export function loadGoogleMapsScript(apiKey?: string) {
-  const mapsUrl = `${googleMapsApiUrl}&key=${apiKey}`;
+export function loadGoogleMapsScript(apiKey: string) {
+  const mapsUrl = `${googleMapsApiUrl}?key=${apiKey}`;
   const scripts = document.getElementsByTagName('script');
   // is script already loaded
   let scriptIndex = _.findIndex(scripts, (script) => script.src.endsWith(mapsUrl));
diff --git a/client/packages/lowcoder-comps/src/comps/imageEditorComp/imageEditorConstants.tsx b/client/packages/lowcoder-comps/src/comps/imageEditorComp/imageEditorConstants.tsx
index 968955f63f..c5aa552a0c 100644
--- a/client/packages/lowcoder-comps/src/comps/imageEditorComp/imageEditorConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/imageEditorComp/imageEditorConstants.tsx
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { Button } from "antd";
+import { default as Button } from "antd/es/button";
 import { EventConfigType } from "lowcoder-sdk";
 import { trans } from "i18n/comps";
 
diff --git a/client/packages/lowcoder-core/lib/index.d.ts b/client/packages/lowcoder-core/lib/index.d.ts
index 80c95aa33e..da0b0a4aec 100644
--- a/client/packages/lowcoder-core/lib/index.d.ts
+++ b/client/packages/lowcoder-core/lib/index.d.ts
@@ -664,7 +664,7 @@ declare class Translator<Messages extends object> {
     readonly language: string;
     constructor(fileData: object, filterLocales?: string, locales?: string[]);
     trans(key: NestedKey<Messages> | GlobalMessageKey, variables?: Record<string, VariableValue>): string;
-    transToNode(key: NestedKey<Messages> | GlobalMessageKey, variables?: Record<string, VariableValue>): {};
+    transToNode(key: NestedKey<Messages> | GlobalMessageKey, variables?: Record<string, VariableValue>): ReactNode;
     private getMessage;
 }
 declare function getI18nObjects<I18nObjects>(fileData: object, filterLocales?: string): I18nObjects;
diff --git a/client/packages/lowcoder-core/package.json b/client/packages/lowcoder-core/package.json
index 55ddc026cb..04fcd14aca 100644
--- a/client/packages/lowcoder-core/package.json
+++ b/client/packages/lowcoder-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-core",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "type": "module",
   "scripts": {
     "start": "rollup -c rollup.config.js --watch",
diff --git a/client/packages/lowcoder-design/src/components/Collapase.tsx b/client/packages/lowcoder-design/src/components/Collapase.tsx
index 63b849835c..c445ac4749 100644
--- a/client/packages/lowcoder-design/src/components/Collapase.tsx
+++ b/client/packages/lowcoder-design/src/components/Collapase.tsx
@@ -1,26 +1,20 @@
-import { Collapse as AntdCollapse, CollapseProps } from "antd";
+import { default as AntdCollapse, CollapseProps } from "antd/es/collapse";
 import { ReactComponent as UnFold } from "icons/icon-unfold.svg";
 import { ReactComponent as Folded } from "icons/icon-folded.svg";
 import { ReactComponent as Omit } from "icons/icon-omit.svg";
 import styled, { css } from "styled-components";
 import React, { ReactNode } from "react";
 
-const Panel = styled(AntdCollapse.Panel)`
-  .ant-collapse-header-text {
-    max-width: calc(100% - 14px);
-  }
-`;
-
-const Container = styled.div<{ optColor?: boolean; simple?: boolean }>`
+const Container = styled.div<{ $optColor?: boolean; $simple?: boolean }>`
   &&& {
-    background: ${(props) => (props.optColor ? "#f2f7fc" : null)};
+    background: ${(props) => (props.$optColor ? "#f2f7fc" : null)};
   }
 
   cursor: pointer;
-  padding-left: ${(props) => (props.simple ? 0 : "2px")};
+  padding-left: ${(props) => (props.$simple ? 0 : "2px")};
 
   &:hover {
-    background-color: ${(props) => (props.simple ? "#FFFFFF" : "#f2f7fc80")};
+    background-color: ${(props) => (props.$simple ? "#FFFFFF" : "#f2f7fc80")};
   }
 
   .ant-collapse > .ant-collapse-item > .ant-collapse-header {
@@ -39,12 +33,12 @@ const Container = styled.div<{ optColor?: boolean; simple?: boolean }>`
     font-weight: 500;
     font-size: 13px;
     line-height: 13px;
-    padding-left: ${(props) => (props.simple ? 0 : "6px")};
+    padding-left: ${(props) => (props.$simple ? 0 : "6px")};
     user-select: none;
   }
 
   .ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow {
-    margin-right: ${(props) => (props.simple ? 0 : "2px")};
+    margin-right: ${(props) => (props.$simple ? 0 : "2px")};
   }
 `;
 
@@ -106,7 +100,7 @@ export const Collapse = (props: Iprops) => {
 
   return (
     // <Contain $color={props.isSelected || Color!==""}>
-    <Container optColor={props.isSelected} simple={props.simple} className={props.className}>
+    <Container $optColor={props.isSelected} $simple={props.simple} className={props.className}>
       <AntdCollapse
         ghost
         expandIcon={getExpandIcon}
diff --git a/client/packages/lowcoder-design/src/components/CustomModal.tsx b/client/packages/lowcoder-design/src/components/CustomModal.tsx
index 9b13d8b431..ac513ea980 100644
--- a/client/packages/lowcoder-design/src/components/CustomModal.tsx
+++ b/client/packages/lowcoder-design/src/components/CustomModal.tsx
@@ -1,5 +1,5 @@
-import { ButtonProps, Modal as AntdModal } from "antd";
-import { ModalFuncProps, ModalProps as AntdModalProps } from "antd/lib/modal";
+import { ButtonProps } from "antd/es/button";
+import { default as AntdModal, ModalFuncProps, ModalProps as AntdModalProps } from "antd/es/modal";
 import { ReactComponent as PackUpIcon } from "icons/icon-Pack-up.svg";
 import React, { ReactNode, useState } from "react";
 import styled from "styled-components";
@@ -11,7 +11,7 @@ import { trans } from "i18n/design";
 import { modalInstance } from "components/GlobalInstances";
 
 type ModalWrapperProps = {
-  width?: string | number;
+  $width?: string | number;
 };
 
 type Model = {
@@ -22,7 +22,7 @@ type Model = {
 const ModalWrapper = styled.div<ModalWrapperProps>`
   display: flex;
   flex-direction: column;
-  width: ${(props) => (props.width ? props.width : "368px")};
+  width: ${(props) => (props.$width ? props.$width : "368px")};
   height: fit-content;
   background: #ffffff;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
@@ -217,25 +217,27 @@ const DEFAULT_PROPS = {
 function CustomModalRender(props: CustomModalProps & ModalFuncProps) {
   return (
     <Draggable handle=".handle" disabled={!props.draggable}>
-      <ModalWrapper width={props.width}>
-        <ModalHeaderWrapper className="handle" $draggable={props.draggable}>
-          <ModalHeader
-            title={props.title}
-            onCancel={props.onCancel}
-            showBackLink={props.showBackLink}
-            onBack={props.onBack}
-          />
-        </ModalHeaderWrapper>
+      <ModalWrapper $width={props.width}>
+        <>
+          <ModalHeaderWrapper className="handle" $draggable={props.draggable}>
+            <ModalHeader
+              title={props.title}
+              onCancel={props.onCancel}
+              showBackLink={props.showBackLink}
+              onBack={props.onBack}
+            />
+          </ModalHeaderWrapper>
 
-        <div style={{ padding: "0 16px", ...props.styles?.body }}>{props.children}</div>
+          <div style={{ padding: "0 16px", ...props.styles?.body }}>{props.children}</div>
 
-        {props.footer === null || props.footer ? (
-          props.footer
-        ) : (
-          <ModalFooterWrapper>
-            <ModalFooter {...props} />
-          </ModalFooterWrapper>
-        )}
+          {props.footer === null || props.footer ? (
+            props.footer
+          ) : (
+            <ModalFooterWrapper>
+              <ModalFooter {...props} />
+            </ModalFooterWrapper>
+          )}
+        </>
       </ModalWrapper>
     </Draggable>
   );
diff --git a/client/packages/lowcoder-design/src/components/Drawer.tsx b/client/packages/lowcoder-design/src/components/Drawer.tsx
index 4bd9449b00..89b152a64d 100644
--- a/client/packages/lowcoder-design/src/components/Drawer.tsx
+++ b/client/packages/lowcoder-design/src/components/Drawer.tsx
@@ -1,4 +1,4 @@
-import { Drawer as AntdDrawer, DrawerProps as AntdDrawerProps } from "antd";
+import { default as AntdDrawer, DrawerProps as AntdDrawerProps } from "antd/es/drawer";
 import Handle from "./Modal/handler";
 import { useEffect, useMemo, useState } from "react";
 import { Resizable, ResizeHandle } from "react-resizable";
diff --git a/client/packages/lowcoder-design/src/components/Dropdown.tsx b/client/packages/lowcoder-design/src/components/Dropdown.tsx
index e8d879cfb1..2dc6675a2f 100644
--- a/client/packages/lowcoder-design/src/components/Dropdown.tsx
+++ b/client/packages/lowcoder-design/src/components/Dropdown.tsx
@@ -1,4 +1,5 @@
-import { Segmented as AntdSegmented, SelectProps } from "antd";
+import { default as AntdSegmented } from "antd/es/segmented";
+import { SelectProps } from "antd/es/select";
 import { GreyTextColor } from "constants/style";
 import _ from "lodash";
 import { ReactNode } from "react";
@@ -10,11 +11,11 @@ import { Tooltip, ToolTipLabel } from "./toolTip";
 
 type ControlPlacement = "bottom" | "right" | "modal";
 
-export const DropdownContainer = styled.div<{ placement: ControlPlacement }>`
+export const DropdownContainer = styled.div<{ $placement: ControlPlacement }>`
   display: flex;
   height: 32px;
   width: ${(props) =>
-    props.placement === "right"
+    props.$placement === "right"
       ? "calc(100% - 96px)"
       : "bottom"
       ? "calc(100% - 112px)"
@@ -35,18 +36,18 @@ export const DropdownContainer = styled.div<{ placement: ControlPlacement }>`
   }
 
   > div {
-    width: 100%;
+    width: 100% !important;
   }
 
   ${(props) =>
-    props.placement === "bottom" &&
+    props.$placement === "bottom" &&
     `
     > div {
       width: 184px;
       flex-grow: 1;
     }
     
-    ::after {
+    &::after {
       content: "";
       width: 264px;
       flex-grow: 1;
@@ -60,21 +61,21 @@ const DropDownItemLabel = styled.div`
   line-height: 15px;
 `;
 
-const SegmentedWrapper = styled.div<{ placement: ControlPlacement }>`
+const SegmentedWrapper = styled.div<{ $placement: ControlPlacement }>`
   display: flex;
   height: 28px;
-  width: ${(props) => (props.placement === "right" ? "calc(100% - 96px)" : "100% - 112px")};
+  width: ${(props) => (props.$placement === "right" ? "calc(100% - 96px)" : "100% - 112px")};
   flex-grow: 1;
 
   ${(props) =>
-    props.placement === "bottom" &&
+    props.$placement === "bottom" &&
     `
     > div {
       width: 184px;
       flex-grow: 1;
     }
     
-    ::after {
+    &::after {
       content: "";
       width: 264px;
       flex-grow: 1;
@@ -120,9 +121,9 @@ const FlexDiv = styled.div`
   align-items: center;
 `;
 
-const LabelWrapper = styled.div<{ placement: ControlPlacement }>`
+const LabelWrapper = styled.div<{ $placement: ControlPlacement }>`
   flex-shrink: 0;
-  width: ${(props) => (props.placement === "right" ? "96px" : "bottom" ? "112px" : "136px")};
+  width: ${(props) => (props.$placement === "right" ? "96px" : "bottom" ? "112px" : "136px")};
 `;
 
 export type OptionType = {
@@ -159,14 +160,14 @@ export function Dropdown<T extends OptionsType>(props: DropdownProps<T>) {
   return (
     <FlexDiv style={props.style} className={props.className}>
       {props.label && (
-        <LabelWrapper placement={placement} style={props.labelStyle}>
+        <LabelWrapper $placement={placement} style={props.labelStyle}>
           <ToolTipLabel title={props.toolTip} label={props.label} />
         </LabelWrapper>
       )}
 
       {!props.radioButton && (
         <Tooltip title={!props.label ? props.toolTip : undefined}>
-          <DropdownContainer placement={placement} style={props.dropdownStyle}>
+          <DropdownContainer $placement={placement} style={props.dropdownStyle}>
             <CustomSelect
               open={props.open}
               listHeight={props.lineHeight}
@@ -231,7 +232,7 @@ export function Dropdown<T extends OptionsType>(props: DropdownProps<T>) {
       )}
 
       {props.radioButton && (
-        <SegmentedWrapper placement={placement}>
+        <SegmentedWrapper $placement={placement}>
           <Segmented
             block={true}
             onChange={(value) => props.onChange(value.toString())}
diff --git a/client/packages/lowcoder-design/src/components/ExternalLink.tsx b/client/packages/lowcoder-design/src/components/ExternalLink.tsx
index d496a497ee..51fcb3c8ed 100644
--- a/client/packages/lowcoder-design/src/components/ExternalLink.tsx
+++ b/client/packages/lowcoder-design/src/components/ExternalLink.tsx
@@ -9,7 +9,7 @@ export const ExternalLink = styled.a`
   display: inline-flex;
   align-items: center;
 
-  :hover {
+  &:hover {
     color: ${ActiveTextColor};
   }
 `;
diff --git a/client/packages/lowcoder-design/src/components/Input.tsx b/client/packages/lowcoder-design/src/components/Input.tsx
index 68b949e1ea..7fb9ced59a 100644
--- a/client/packages/lowcoder-design/src/components/Input.tsx
+++ b/client/packages/lowcoder-design/src/components/Input.tsx
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { Input as AntdInput, InputProps as AntdInputProps, InputRef } from "antd";
+import { default as AntdInput, InputProps as AntdInputProps, InputRef } from "antd/es/input";
 import { BorderActiveColor, BorderColor, BorderRadius, GreyTextColor } from "constants/style";
 import { ChangeEvent, useEffect, useRef, useState } from "react";
 import _ from "lodash";
diff --git a/client/packages/lowcoder-design/src/components/Label.tsx b/client/packages/lowcoder-design/src/components/Label.tsx
index c07eed08a5..0ec5cce40b 100644
--- a/client/packages/lowcoder-design/src/components/Label.tsx
+++ b/client/packages/lowcoder-design/src/components/Label.tsx
@@ -7,7 +7,7 @@ export const labelCss: any = css`
   font-size: 13px;
   color: #222222;
 
-  :hover {
+  &:hover {
     cursor: default;
   }
 `;
@@ -67,21 +67,21 @@ export const BlockLabel = (props: IBlocklabel) => {
 
 // Title text in each line of Collapse
 const LeftTitle = styled.span<{
-  color?: string;
-  line?: number;
-  hasChild?: boolean;
+  $color?: string;
+  $line?: number;
+  $hasChild?: boolean;
 }>`
   word-wrap: break-word;
   word-break: break-all;
   white-space: pre-wrap;
   user-select: none;
   font-size: 13px;
-  line-height: ${(props) => (props.line ? props.line : 23)}px;
-  color: ${(props) => (props.color ? props.color : "#333333")};
+  line-height: ${(props) => (props.$line ? props.$line : 23)}px;
+  color: ${(props) => (props.$color ? props.$color : "#333333")};
   margin-right: 8px;
-  font-weight: ${(props) => (props.hasChild ? "600" : "normal")};
+  font-weight: ${(props) => (props.$hasChild ? "600" : "normal")};
 
-  :hover {
+  &:hover {
     cursor: pointer;
   }
 `;
@@ -97,7 +97,7 @@ interface ICollapseTitle {
 export const CollapseTitle = (props: ICollapseTitle) => {
   const { color, label, lineHeight, hasChild } = props;
   return (
-    <LeftTitle style={props.style} color={color} line={lineHeight} hasChild={hasChild}>
+    <LeftTitle style={props.style} $color={color} $line={lineHeight} $hasChild={hasChild}>
       {label}
     </LeftTitle>
   );
@@ -140,16 +140,16 @@ export const CommonGrayLabel = styled.p`
   margin: 0;
 `;
 
-export const CommonErrorLabel = styled.p<{ fontSize?: number }>`
-  font-size: ${(props) => (props.fontSize ? props.fontSize : 12)}px;
-  line-height: ${(props) => (props.fontSize ? props.fontSize : 12)}px;
+export const CommonErrorLabel = styled.p<{ $fontSize?: number }>`
+  font-size: ${(props) => (props.$fontSize ? props.$fontSize : 12)}px;
+  line-height: ${(props) => (props.$fontSize ? props.$fontSize : 12)}px;
   color: #f73131;
   margin: 0;
 `;
 
 export const CommonBlueLabel = styled.span`
   ${labelCss}
-  :hover {
+  &:hover {
     cursor: pointer;
   }
 
diff --git a/client/packages/lowcoder-design/src/components/Loading.tsx b/client/packages/lowcoder-design/src/components/Loading.tsx
index 97adc72329..21718bd07b 100644
--- a/client/packages/lowcoder-design/src/components/Loading.tsx
+++ b/client/packages/lowcoder-design/src/components/Loading.tsx
@@ -2,9 +2,9 @@ import styled, { css } from "styled-components";
 import { CSSProperties } from "react";
 
 type LoadingContainerProps = {
-  backgroundColor: string;
-  color: string;
-  size: number;
+  $backgroundColor: string;
+  $color: string;
+  $size: number;
 };
 
 const LoadingWrapper = styled.div`
@@ -16,8 +16,8 @@ const LoadingWrapper = styled.div`
 
 // Loading
 const ContainerX = styled.div<LoadingContainerProps>`
-  height: ${(props) => props.size}px;
-  width: ${(props) => props.size}px;
+  height: ${(props) => props.$size}px;
+  width: ${(props) => props.$size}px;
   animation: circle infinite 1.75s linear;
   @keyframes circle {
     0% {
@@ -29,14 +29,14 @@ const ContainerX = styled.div<LoadingContainerProps>`
   }
 `;
 const Container = styled.div<LoadingContainerProps>`
-  height: ${(props) => props.size / 2}px;
-  width: ${(props) => props.size}px;
-  background-color: ${(props) => props.backgroundColor};
+  height: ${(props) => props.$size / 2}px;
+  width: ${(props) => props.$size}px;
+  background-color: ${(props) => props.$backgroundColor};
   overflow: hidden;
 `;
 const loadcss = css<LoadingContainerProps>`
-  width: ${(props) => props.size}px;
-  height: ${(props) => props.size}px;
+  width: ${(props) => props.$size}px;
+  height: ${(props) => props.$size}px;
   border: solid 2.5px transparent;
   border-radius: 999px;
   background-origin: border-box;
@@ -46,19 +46,19 @@ const loadcss = css<LoadingContainerProps>`
 const Load1 = styled.div<LoadingContainerProps>`
   ${loadcss};
   background-image: linear-gradient(
-      ${(props) => props.backgroundColor},
-      ${(props) => props.backgroundColor}
+      ${(props) => props.$backgroundColor},
+      ${(props) => props.$backgroundColor}
     ),
-    linear-gradient(to left, ${(props) => props.color}, ${(props) => props.color}91);
+    linear-gradient(to left, ${(props) => props.$color}, ${(props) => props.$color}91);
 `;
 const Load2 = styled.div<LoadingContainerProps>`
   ${loadcss};
-  transform: translateY(-${(props) => props.size / 2}px);
+  transform: translateY(-${(props) => props.$size / 2}px);
   background-image: linear-gradient(
-      ${(props) => props.backgroundColor},
-      ${(props) => props.backgroundColor}
+      ${(props) => props.$backgroundColor},
+      ${(props) => props.$backgroundColor}
     ),
-    linear-gradient(to right, ${(props) => props.color}a3, ${(props) => props.color}1a);
+    linear-gradient(to right, ${(props) => props.$color}a3, ${(props) => props.$color}1a);
 `;
 
 type LoadingProps = {
@@ -71,9 +71,9 @@ type LoadingProps = {
 
 export const Loading = (props: LoadingProps) => {
   const loadingProps = {
-    backgroundColor: props.backgroundColor ?? "#315efb",
-    color: props.color ?? "#ffffff",
-    size: props.size ?? 14,
+    $backgroundColor: props.backgroundColor ?? "#315efb",
+    $color: props.color ?? "#ffffff",
+    $size: props.size ?? 14,
   };
   return (
     <LoadingWrapper className={props.className} style={props.style}>
diff --git a/client/packages/lowcoder-design/src/components/Menu.tsx b/client/packages/lowcoder-design/src/components/Menu.tsx
index 9fdfd79460..704c28d6be 100644
--- a/client/packages/lowcoder-design/src/components/Menu.tsx
+++ b/client/packages/lowcoder-design/src/components/Menu.tsx
@@ -1,4 +1,4 @@
-import { Menu as AntdMenu, MenuProps, SubMenuProps } from "antd";
+import { default as AntdMenu, MenuProps, SubMenuProps } from "antd/es/menu";
 import { NormalMenuIconColor, TabActiveColor } from "constants/style";
 import { ReactComponent as AddIcon } from "icons/icon-add.svg";
 import { ReactComponent as RecycleBinIcon } from "icons/icon-recycle-bin.svg";
@@ -107,7 +107,7 @@ const StyledCreateBtn = styled.button`
   cursor: pointer;
   height: 40px;
 
-  :hover {
+  &:hover {
     color: #315efb;
 
     svg g path {
diff --git a/client/packages/lowcoder-design/src/components/MenuItem.tsx b/client/packages/lowcoder-design/src/components/MenuItem.tsx
index 077a176357..9510c13d92 100644
--- a/client/packages/lowcoder-design/src/components/MenuItem.tsx
+++ b/client/packages/lowcoder-design/src/components/MenuItem.tsx
@@ -4,14 +4,14 @@ import { PointIcon, DragIcon, PencilIcon } from "icons";
 import { labelCss } from "./Label";
 
 interface IItem {
-  width?: number;
-  colorChange?: number;
+  $width?: number;
+  $colorChange?: number;
 }
 const Item = styled.div<IItem>`
-  width: ${(props) => (props.width ? props.width : 280)}px;
+  width: ${(props) => (props.$width ? props.$width : 280)}px;
   height: 32px;
   background: #f5f5f6;
-  background: ${(props) => (props.colorChange ? "#E1E3EB" : "#f5f5f6")};
+  background: ${(props) => (props.$colorChange ? "#E1E3EB" : "#f5f5f6")};
   border-radius: 4px;
   float: right;
   margin-right: 16px;
@@ -22,7 +22,7 @@ const IconCss = css`
   height: 16px;
   width: 16px;
   color: #8b8fa3;
-  :hover {
+  &:hover {
     cursor: pointer;
   }
 `;
@@ -49,7 +49,7 @@ interface IMenuItem {
 export const MenuItem = (props: IMenuItem) => {
   const { label, width, colorChange } = props;
   return (
-    <Item width={width} colorChange={colorChange}>
+    <Item $width={width} $colorChange={colorChange}>
       <StyledDragIcon />
       <Text>{label}</Text>
     </Item>
diff --git a/client/packages/lowcoder-design/src/components/Modal/handler.tsx b/client/packages/lowcoder-design/src/components/Modal/handler.tsx
index 8b22b96e30..c5c293ca31 100644
--- a/client/packages/lowcoder-design/src/components/Modal/handler.tsx
+++ b/client/packages/lowcoder-design/src/components/Modal/handler.tsx
@@ -26,9 +26,9 @@ const EdgeHandle = css`
   }
 `;
 
-const HorizontalHandle = css<{ axis: string }>`
+const HorizontalHandle = css<{ $axis: string }>`
   ${EdgeHandle}
-  ${(props) => (props.axis === "s" ? "bottom: -10px;" : "top: -10px;")}
+  ${(props) => (props.$axis === "s" ? "bottom: -10px;" : "top: -10px;")}
   /* left: -4px; */
   height: 12px !important;
   /* width: calc(100% + 8px) !important; */
@@ -42,9 +42,9 @@ const HorizontalHandle = css<{ axis: string }>`
   }
 `;
 
-const VerticalHandleStyles = css<{ axis: string }>`
+const VerticalHandleStyles = css<{ $axis: string }>`
   ${EdgeHandle}
-  ${(props) => (props.axis === "e" ? "right: -10px;" : "left: -10px;")}
+  ${(props) => (props.$axis === "e" ? "right: -10px;" : "left: -10px;")}
   width: 12px !important;
   top: 0px;
   /* height: calc(100% + 8px) !important; */
@@ -58,7 +58,7 @@ const VerticalHandleStyles = css<{ axis: string }>`
   }
 `;
 
-const CornerHandle = css<{ axis: string }>`
+const CornerHandle = css<{ $axis: string }>`
   position: absolute;
   z-index: 3;
   width: 10px !important;
@@ -68,23 +68,23 @@ const CornerHandle = css<{ axis: string }>`
     height: 10px !important;
     border: none !important;
   }
-  cursor: ${(props) => props.axis + "-resize"} !important;
-  ${(props) => (["nw", "ne"].indexOf(props.axis) >= 0 ? "top: -5px;" : "")};
-  ${(props) => (["sw", "se"].indexOf(props.axis) >= 0 ? "bottom: -5px;" : "")};
-  ${(props) => (["sw", "nw"].indexOf(props.axis) >= 0 ? "left: -5px;" : "")};
-  ${(props) => (["se", "ne"].indexOf(props.axis) >= 0 ? "right: -5px;" : "")};
+  cursor: ${(props) => props.$axis + "-resize"} !important;
+  ${(props) => (["nw", "ne"].indexOf(props.$axis) >= 0 ? "top: -5px;" : "")};
+  ${(props) => (["sw", "se"].indexOf(props.$axis) >= 0 ? "bottom: -5px;" : "")};
+  ${(props) => (["sw", "nw"].indexOf(props.$axis) >= 0 ? "left: -5px;" : "")};
+  ${(props) => (["se", "ne"].indexOf(props.$axis) >= 0 ? "right: -5px;" : "")};
 `;
 
-const ResizeHandle = styled.div<{ axis: string }>`
+const ResizeHandle = styled.div<{ $axis: string }>`
   position: absolute;
   background-image: none;
-  ${(props) => (["s", "n"].indexOf(props.axis) >= 0 ? HorizontalHandle : "")};
-  ${(props) => (["w", "e"].indexOf(props.axis) >= 0 ? VerticalHandleStyles : "")};
-  ${(props) => (["sw", "nw", "se", "ne"].indexOf(props.axis) >= 0 ? CornerHandle : "")};
+  ${(props) => (["s", "n"].indexOf(props.$axis) >= 0 ? HorizontalHandle : "")};
+  ${(props) => (["w", "e"].indexOf(props.$axis) >= 0 ? VerticalHandleStyles : "")};
+  ${(props) => (["sw", "nw", "se", "ne"].indexOf(props.$axis) >= 0 ? CornerHandle : "")};
 `;
 
 const Handle = (axis: ResizeHandleAxis, ref: ReactRef<HTMLDivElement>) => {
-  return <ResizeHandle ref={ref} axis={axis} className={`react-resizable-handle`}></ResizeHandle>;
+  return <ResizeHandle ref={ref} $axis={axis} className={`react-resizable-handle`}></ResizeHandle>;
 };
 
 export default Handle;
diff --git a/client/packages/lowcoder-design/src/components/Modal/index.tsx b/client/packages/lowcoder-design/src/components/Modal/index.tsx
index 91f35b88e9..1677bcb9bc 100644
--- a/client/packages/lowcoder-design/src/components/Modal/index.tsx
+++ b/client/packages/lowcoder-design/src/components/Modal/index.tsx
@@ -1,4 +1,4 @@
-import { Modal as AntdModal, ModalProps as AntdModalProps } from "antd";
+import { default as AntdModal, ModalProps as AntdModalProps } from "antd/es/modal";
 import { useEffect, useState } from "react";
 import { Resizable, ResizeHandle } from "react-resizable";
 import { useResizeDetector } from "react-resize-detector";
diff --git a/client/packages/lowcoder-design/src/components/Search.tsx b/client/packages/lowcoder-design/src/components/Search.tsx
index 2e97e8e98d..05249e3c12 100644
--- a/client/packages/lowcoder-design/src/components/Search.tsx
+++ b/client/packages/lowcoder-design/src/components/Search.tsx
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { Input, InputProps } from "antd";
+import { default as Input, InputProps } from "antd/es/input";
 import { ReactComponent as Icon } from "icons/icon-Search.svg";
 import React, { CSSProperties } from "react";
 
@@ -14,7 +14,7 @@ const SearchInput = styled(Input)`
   user-select: none;
   overflow: hidden;
 
-  :focus {
+  &:focus {
     outline: none;
     box-shadow: 0 0 0 3px #daecfc;
   }
diff --git a/client/packages/lowcoder-design/src/components/Section.tsx b/client/packages/lowcoder-design/src/components/Section.tsx
index e1c019bde8..869c0eabfe 100644
--- a/client/packages/lowcoder-design/src/components/Section.tsx
+++ b/client/packages/lowcoder-design/src/components/Section.tsx
@@ -5,8 +5,8 @@ import { ReactComponent as Packup } from "icons/icon-Pack-up.svg";
 import { labelCss } from "./Label";
 import { controlItem, ControlNode } from "./control";
 
-const SectionItem = styled.div<{ width?: number }>`
-  width: ${(props) => (props.width ? props.width : 312)}px;
+const SectionItem = styled.div<{ $width?: number }>`
+  width: ${(props) => (props.$width ? props.$width : 312)}px;
   border-bottom: 1px solid #e1e3eb;
 
   &:last-child {
@@ -21,7 +21,7 @@ const SectionLabel = styled.div`
   line-height: 46px;
   font-weight: 600;
 
-  :hover {
+  &:hover {
     cursor: pointer;
   }
 `;
@@ -39,7 +39,7 @@ const PackupIcon = styled(Packup)<Irotate>`
   color: #8b8fa3;
   transform: ${(props) => props.deg};
 
-  :hover {
+  &:hover {
     cursor: pointer;
   }
 `;
@@ -50,7 +50,7 @@ const SectionLabelDiv = styled.div`
   height: 46px;
   margin-left: 16px;
 
-  :hover {
+  &:hover {
     cursor: pointer;
   }
 
@@ -63,14 +63,14 @@ const SectionLabelDiv = styled.div`
   }
 `;
 
-const ShowChildren = styled.div<{ show?: string; noMargin?: boolean }>`
-  display: ${(props) => props.show || "none"};
+const ShowChildren = styled.div<{ $show?: string; $noMargin?: boolean }>`
+  display: ${(props) => props.$show || "none"};
   flex-direction: column;
   gap: 8px;
   transition: all 3s;
-  margin-left: ${(props) => (props.noMargin ? 0 : 16)}px;
+  margin-left: ${(props) => (props.$noMargin ? 0 : 16)}px;
   padding-bottom: 16px;
-  padding-right: ${(props) => (props.noMargin ? 0 : "16px")};
+  padding-right: ${(props) => (props.$noMargin ? 0 : "16px")};
 `;
 
 interface ISectionConfig<T> {
@@ -113,7 +113,7 @@ export const BaseSection = (props: ISectionConfig<ReactNode>) => {
   };
 
   return (
-    <SectionItem width={props.width} style={props.style}>
+    <SectionItem $width={props.width} style={props.style}>
       {props.name && (
         <SectionLabelDiv onClick={handleToggle} className={"section-header"}>
           <SectionLabel>{props.name}</SectionLabel>
@@ -123,7 +123,7 @@ export const BaseSection = (props: ISectionConfig<ReactNode>) => {
           </div>
         </SectionLabelDiv>
       )}
-      <ShowChildren show={open ? "flex" : "none"} noMargin={props.noMargin}>
+      <ShowChildren $show={open ? "flex" : "none"} $noMargin={props.noMargin}>
         {props.children}
       </ShowChildren>
     </SectionItem>
diff --git a/client/packages/lowcoder-design/src/components/SuspensionBox.tsx b/client/packages/lowcoder-design/src/components/SuspensionBox.tsx
index d1a6663401..d62ed39a45 100644
--- a/client/packages/lowcoder-design/src/components/SuspensionBox.tsx
+++ b/client/packages/lowcoder-design/src/components/SuspensionBox.tsx
@@ -2,8 +2,8 @@ import styled from "styled-components";
 import { ReactComponent as close } from "icons/icon-flokclose.svg";
 import { ScrollBar } from "../components/ScrollBar";
 
-const Container = styled.div<{ width: number }>`
-  width: ${(props) => props.width}px;
+const Container = styled.div<{ $width: number }>`
+  width: ${(props) => props.$width}px;
   background: #ffffff;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
   border-radius: 8px;
@@ -24,7 +24,7 @@ const CloseIcon = styled(close)`
   padding: 1px;
   color: #8b8fa3;
 
-  :hover {
+  &:hover {
     cursor: pointer;
   }
 
@@ -75,7 +75,7 @@ export const SuspensionBox = (props: Iprops) => {
     scrollable,
   } = props;
   return (
-    <Container width={width}>
+    <Container $width={width}>
       <TitleDiv>
         <TitleText>{title}</TitleText>
         {onClose && <CloseIcon onClick={onClose} />}
diff --git a/client/packages/lowcoder-design/src/components/Switch.tsx b/client/packages/lowcoder-design/src/components/Switch.tsx
index 09946f7aee..05f5b25772 100644
--- a/client/packages/lowcoder-design/src/components/Switch.tsx
+++ b/client/packages/lowcoder-design/src/components/Switch.tsx
@@ -27,20 +27,20 @@ const SwitchStyle: any = styled.input`
   transform: translateY(0);
   /* transition: all 0.4s ease; */
 
-  :hover {
+  &:hover {
     cursor: pointer;
   }
 
-  :checked {
+  &:checked {
     border-color: #636775;
     background-color: #636775;
   }
 
-  :checked::before {
+  &:checked::before {
     left: 10px;
   }
 
-  ::before {
+  &::before {
     content: "";
     left: 0;
     transition: left 0.4s;
@@ -55,13 +55,13 @@ const SwitchStyle: any = styled.input`
 `;
 
 const SwitchDiv = styled.div<{
-  placement?: ControlPlacement;
+  $placement?: ControlPlacement;
 }>`
   min-height: 21px;
   display: flex;
   align-items: center;
   ${(props) => {
-    if (props.placement === "bottom") {
+    if (props.$placement === "bottom") {
       return css`
         margin-left: 112px;
       `;
@@ -82,7 +82,7 @@ const IconCss = css`
   width: 20px;
   margin-top: 1px;
 
-  :hover {
+  &:hover {
     cursor: pointer;
   }
 
@@ -137,7 +137,7 @@ export const SwitchWrapper = (props: {
   const tooltip = props.tooltip;
   const label = props.label;
   return (
-    <SwitchDiv placement={props.placement}>
+    <SwitchDiv $placement={props.placement}>
       {props.children}
       {label ? (
         <LabelDiv>
diff --git a/client/packages/lowcoder-design/src/components/Tab.tsx b/client/packages/lowcoder-design/src/components/Tab.tsx
index 0ac9c88fa0..0c9df3216d 100644
--- a/client/packages/lowcoder-design/src/components/Tab.tsx
+++ b/client/packages/lowcoder-design/src/components/Tab.tsx
@@ -15,7 +15,7 @@ const IconCss = css`
   margin-bottom: 12px;
 `;
 
-const IconAndName = styled.div<{ isActive: boolean }>`
+const IconAndName = styled.div<{ $isActive: boolean }>`
   padding: 0;
   display: inline-block;
   margin-left: 17px;
@@ -24,7 +24,7 @@ const IconAndName = styled.div<{ isActive: boolean }>`
   vertical-align: top;
   height: 40px;
   transition: all 0.2s ease;
-  border-bottom: 2px solid ${(props) => (props.isActive ? "#222222" : "transparent")};
+  border-bottom: 2px solid ${(props) => (props.$isActive ? "#222222" : "transparent")};
 
   &:hover path {
     transition: all 0.2s ease;
@@ -40,13 +40,13 @@ const IconAndName = styled.div<{ isActive: boolean }>`
     ${IconCss};
 
     path {
-      fill: ${(props) => (props.isActive ? "#222222" : "#8b8fa3")};
+      fill: ${(props) => (props.$isActive ? "#222222" : "#8b8fa3")};
     }
   }
 `;
 
 const Text = styled.p<{
-  color: string;
+  $color: string;
 }>`
   user-select: none;
   display: inline-block;
@@ -56,7 +56,7 @@ const Text = styled.p<{
   line-height: 40px;
   margin-left: 5px;
   margin-bottom: 0;
-  color: ${(props) => props.color || "#222222"};
+  color: ${(props) => props.$color || "#222222"};
   vertical-align: top;
 `;
 
@@ -89,9 +89,9 @@ const Tabs = (props: ITabs) => {
         {props.tabsConfig.map((tab) => {
           const isActive = activeTab.key === tab.key;
           return (
-            <IconAndName key={tab.key} onClick={() => onChange(tab.key)} isActive={isActive}>
+            <IconAndName key={tab.key} onClick={() => onChange(tab.key)} $isActive={isActive}>
               {tab.icon}
-              <Text color={isActive ? "#222222" : "#8b8fa3"}>{tab.title}</Text>
+              <Text $color={isActive ? "#222222" : "#8b8fa3"}>{tab.title}</Text>
             </IconAndName>
           );
         })}
diff --git a/client/packages/lowcoder-design/src/components/Table.tsx b/client/packages/lowcoder-design/src/components/Table.tsx
index f3f9f35c40..82b38bf0b2 100644
--- a/client/packages/lowcoder-design/src/components/Table.tsx
+++ b/client/packages/lowcoder-design/src/components/Table.tsx
@@ -1,4 +1,4 @@
-import { Table } from "antd";
+import { default as Table } from "antd/es/table";
 import styled from "styled-components";
 
 const { Column } = Table;
diff --git a/client/packages/lowcoder-design/src/components/alert.tsx b/client/packages/lowcoder-design/src/components/alert.tsx
index 591f926b2c..bbc24b4372 100644
--- a/client/packages/lowcoder-design/src/components/alert.tsx
+++ b/client/packages/lowcoder-design/src/components/alert.tsx
@@ -1,4 +1,4 @@
-import { Alert as AntAlert, AlertProps } from "antd";
+import { default as AntAlert, AlertProps } from "antd/es/alert";
 import styled from "styled-components";
 
 const Container = styled.div`
diff --git a/client/packages/lowcoder-design/src/components/button.tsx b/client/packages/lowcoder-design/src/components/button.tsx
index a159ecae71..0001442b64 100644
--- a/client/packages/lowcoder-design/src/components/button.tsx
+++ b/client/packages/lowcoder-design/src/components/button.tsx
@@ -1,6 +1,6 @@
-import { Button, ButtonProps } from "antd";
+import Button, { ButtonProps } from "antd/es/button";
 import styled, { css } from "styled-components";
-import { LightLoading, Loading } from "./Loading";
+import { Loading } from "./Loading";
 import * as React from "react";
 import { CSSProperties, forwardRef } from "react";
 
@@ -12,13 +12,13 @@ const buttonStyleConfig = {
     color: #333333;
     /* padding: 4px; */
 
-    :focus {
+    &:focus {
       background: #f5f5f6;
       border: 1px solid #d7d9e0;
       color: #333333;
     }
 
-    :hover {
+    &:hover {
       background: #f5f5f6;
       border: 1px solid #d7d9e0;
       color: #333333;
@@ -35,33 +35,33 @@ const buttonStyleConfig = {
         color: #4965f2;
         border-color: #c9d1fc;
 
-        :hover {
+        &:hover {
           color: #315efb;
           background-color: #f5faff;
           border-color: #c2d6ff;
         }
 
-        :focus {
+        &:focus {
           color: #315efb;
           background-color: #f5faff;
           border-color: #c2d6ff;
         }
       }
 
-      :focus {
+      &:focus {
         background: #4965f2;
         border: 1px solid #4965f2;
         color: #ffffff;
       }
 
-      :hover {
+      &:hover {
         border: 1px solid #315efb;
         background: #315efb;
         color: #ffffff;
       }
 
       :disabled {
-        :hover {
+        &:hover {
           border: 1px solid #dbe1fd;
           background: #dbe1fd;
           color: #ffffff;
@@ -80,13 +80,13 @@ const buttonStyleConfig = {
     color: #4965f2;
     border-color: #c9d1fc;
 
-    :hover {
+    &:hover {
       color: #315efb;
       background-color: #f5faff;
       border-color: #c2d6ff;
     }
 
-    :focus {
+    &:focus {
       color: #315efb;
       background-color: #f5faff;
       border-color: #c2d6ff;
@@ -277,7 +277,7 @@ const StyledAddButton = styled.button`
   user-select: none;
   padding: 0;
 
-  :hover {
+  &:hover {
     color: #315efb;
     background: white;
 
@@ -286,7 +286,7 @@ const StyledAddButton = styled.button`
     }
   }
 
-  :focus {
+  &:focus {
     background: white;
     color: #315efb;
   }
diff --git a/client/packages/lowcoder-design/src/components/checkBox.tsx b/client/packages/lowcoder-design/src/components/checkBox.tsx
index 555b8c49ca..8c1c8e5167 100644
--- a/client/packages/lowcoder-design/src/components/checkBox.tsx
+++ b/client/packages/lowcoder-design/src/components/checkBox.tsx
@@ -1,4 +1,4 @@
-import { Checkbox as AntdCheckBox } from "antd";
+import { default as AntdCheckBox } from "antd/es/checkbox";
 import styled from "styled-components";
 
 const CheckBox = styled(AntdCheckBox)`
diff --git a/client/packages/lowcoder-design/src/components/colorSelect/index.tsx b/client/packages/lowcoder-design/src/components/colorSelect/index.tsx
index 71339c86f9..8e44156769 100644
--- a/client/packages/lowcoder-design/src/components/colorSelect/index.tsx
+++ b/client/packages/lowcoder-design/src/components/colorSelect/index.tsx
@@ -1,5 +1,5 @@
 import { RgbaStringColorPicker } from "react-colorful";
-import { Popover } from "antd";
+import { default as Popover } from "antd/es/popover";
 import { ActionType } from '@rc-component/trigger/lib/interface';
 import {
   alphaOfRgba,
@@ -45,7 +45,7 @@ export const ColorSelect = (props: ColorSelectProps) => {
           <div style={{ position: "relative" }}>
             <RgbaStringColorPicker color={pickerColor.current} onChange={throttleChange} />
             <AlphaDiv color={color?.substring(0, 7)}>
-              <BackDiv color={alphaOfRgba(toRGBA(color))}></BackDiv>
+              <BackDiv $color={alphaOfRgba(toRGBA(color))}></BackDiv>
             </AlphaDiv>
           </div>
           <ConstantDiv>
@@ -65,8 +65,8 @@ export const ColorSelect = (props: ColorSelectProps) => {
         </PopoverContainer>
       }
     >
-      <ColorBlock color={color?.substring(0, 7)}>
-        <BackDiv color={alphaOfRgba(toRGBA(color))}></BackDiv>
+      <ColorBlock $color={color?.substring(0, 7)}>
+        <BackDiv $color={alphaOfRgba(toRGBA(color))}></BackDiv>
       </ColorBlock>
     </Popover>
   );
@@ -80,7 +80,7 @@ const ConstantDiv = styled.div`
   flex-wrap: wrap;
 `;
 const ConstantBlock = styled.div.attrs<{ color: string }>((props) => ({
-  tabIndex: "0",
+  tabIndex: 0,
   style: {
     backgroundColor: props.color,
   },
@@ -159,9 +159,9 @@ const AlphaDiv = styled.div.attrs((props) => ({
   background-clip: content-box;
 `;
 
-const BackDiv = styled.div.attrs<{ color: string }>((props: { color: string }) => ({
+const BackDiv = styled.div.attrs<{ $color: string }>((props: { $color: string }) => ({
   style: {
-    opacity: 1 - parseFloat(props.color ? props.color : "1"),
+    opacity: 1 - parseFloat(props.$color ? props.$color : "1"),
   },
 }))`
   height: 100%;
@@ -169,8 +169,8 @@ const BackDiv = styled.div.attrs<{ color: string }>((props: { color: string }) =
   background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0dGVybiBpZD0icGF0dGVybi0xIiBwYXR0ZXJuVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiB4PSIwJSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSI+CiAgICAgICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI2ltYWdlLTIiIHRyYW5zZm9ybT0ic2NhbGUoMC41LDAuNSkiPjwvdXNlPgogICAgICAgIDwvcGF0dGVybj4KICAgICAgICA8aW1hZ2UgaWQ9ImltYWdlLTIiIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9wbmc7YmFzZTY0LGlWQk9SdzBLR2dvQUFBQU5TVWhFVWdBQUFEQUFBQUF3Q0FZQUFBQlhBdm1IQUFBQUFYTlNSMElBcnM0YzZRQUFBTE5KUkVGVWFBWHRtRUVLd3pBTUJPUCt5ZjkvZ0IvVjB1TWV4WkJ0QTVPYndKTGlHUXVNMTk3N2ZRMitjODRhTEwvdXJ2K2EvTXcvcm5VRHY3YWlBUTFBQWg0aENCQ25hd0FqaEFVZWIyQjByL25DdXZ0dU02My9lQU51QU00Z1R0Y0FSZ2dMYUFBQ3hPa2F3QWhoQVExQWdEaDlUZThldmd0aDVsbkFHVWdlL1VnRGZlYlpVUVBKb3g5cG9NODhPMm9nZWZRajM0WDZ6TE9qTTVBOCtwRUcrc3l6b3dhU1J6L1NRSjk1ZHRSQTh1aEhIeHRKRzVsckREVTlBQUFBQUVsRlRrU3VRbUNDIj48L2ltYWdlPgogICAgPC9kZWZzPgogICAgPGcgaWQ9Iumhtemdoi0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i572R5qC85bqV6ImyIj4KICAgICAgICAgICAgPHBvbHlnb24gaWQ9Iue7hOS7ti3ovpPlhaXmoYYiIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iLTkuMjgyNTc3MzdlLTE1IDAgMjQgMCAyNCAyNCAtOS4yODI1NzczN2UtMTUgMjQiPjwvcG9seWdvbj4KICAgICAgICAgICAgPHBvbHlnb24gaWQ9Iue7hOS7ti3ovpPlhaXmoYYiIGZpbGwtb3BhY2l0eT0iMC4yIiBmaWxsPSJ1cmwoI3BhdHRlcm4tMSkiIHBvaW50cz0iLTkuMjgyNTc3MzdlLTE1IDAgMjQgMCAyNCAyNCAtOS4yODI1NzczN2UtMTUgMjQiPjwvcG9seWdvbj4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==");
 `;
 // main block
-const ColorBlock = styled.div<{ color: string }>`
-  background-color: ${(props) => (isValidColor(props.color) ? props.color : "#FFFFFF")};
+const ColorBlock = styled.div<{ $color: string }>`
+  background-color: ${(props) => (isValidColor(props.$color) ? props.color : "#FFFFFF")};
   border: 1px solid rgba(0, 0, 0, 0.1);
   border-radius: 4px;
   height: 24px;
diff --git a/client/packages/lowcoder-design/src/components/control.tsx b/client/packages/lowcoder-design/src/components/control.tsx
index fb9f2480e2..e8f1f4ca1c 100644
--- a/client/packages/lowcoder-design/src/components/control.tsx
+++ b/client/packages/lowcoder-design/src/components/control.tsx
@@ -15,17 +15,17 @@ type ControlPlacement = "bottom" | "right" | "modal"; // set propertyView's posi
 // place common comps of control comps
 
 const Wrapper = styled.div<{
-  layout: ControlLayout;
-  placement: ControlPlacement;
+  $layout: ControlLayout;
+  $placement: ControlPlacement;
 }>`
   width: 100%;
   ${(props) => {
-    switch (props.layout) {
+    switch (props.$layout) {
       case "horizontal":
         return css`
           display: flex;
           flex-direction: row;
-          align-items: ${props.placement === "bottom" ? "baseline" : "center"};
+          align-items: ${props.$placement === "bottom" ? "baseline" : "center"};
           justify-content: space-between;
         `;
       case "vertical":
@@ -57,15 +57,15 @@ function getWidth(placement: ControlPlacement) {
 }
 
 const LabelWrapper = styled.div<{
-  layout: ControlLayout;
-  placement: ControlPlacement;
-  labelEllipsis?: boolean;
+  $layout: ControlLayout;
+  $placement: ControlPlacement;
+  $labelEllipsis?: boolean;
 }>`
   ${(props) => {
-    switch (props.layout) {
+    switch (props.$layout) {
       case "horizontal":
         return css`
-          flex: 0 0 ${getWidth(props.placement)}px;
+          flex: 0 0 ${getWidth(props.$placement)}px;
         `;
       case "vertical":
         return css`
@@ -74,10 +74,10 @@ const LabelWrapper = styled.div<{
     }
   }}
   ${(props) => {
-    if (props.labelEllipsis && props.layout === "horizontal") {
+    if (props.$labelEllipsis && props.$layout === "horizontal") {
       return css`
         .tooltipLabel {
-          width: ${getWidth(props.placement)}px;
+          width: ${getWidth(props.$placement)}px;
           padding-right: 2px;
           text-overflow: ellipsis;
           overflow: hidden;
@@ -87,10 +87,10 @@ const LabelWrapper = styled.div<{
     }
   }}
 `;
-const ChildrenWrapper = styled.div<{ layout: ControlLayout }>`
+const ChildrenWrapper = styled.div<{ $layout: ControlLayout }>`
   min-width: 0;
   ${(props) => {
-    switch (props.layout) {
+    switch (props.$layout) {
       case "horizontal":
         return `
             flex:1 1 auto;
@@ -148,12 +148,12 @@ export const ControlPropertyViewWrapper = (
   } = props;
 
   return (
-    <Wrapper layout={layout} placement={placement}>
+    <Wrapper $layout={layout} $placement={placement}>
       {label && (
         <LabelWrapper
-          layout={layout}
-          placement={placement}
-          labelEllipsis={labelEllipsis}
+          $layout={layout}
+          $placement={placement}
+          $labelEllipsis={labelEllipsis}
           style={labelStyle}
         >
           <ToolTipLabel
@@ -164,7 +164,7 @@ export const ControlPropertyViewWrapper = (
         </LabelWrapper>
       )}
       {preInputNode}
-      <ChildrenWrapper style={childrenWrapperStyle} layout={layout}>
+      <ChildrenWrapper style={childrenWrapperStyle} $layout={layout}>
         {children}
         {extraChildren}
       </ChildrenWrapper>
diff --git a/client/packages/lowcoder-design/src/components/customSelect.tsx b/client/packages/lowcoder-design/src/components/customSelect.tsx
index 8a5889b861..7f7ab99fbd 100644
--- a/client/packages/lowcoder-design/src/components/customSelect.tsx
+++ b/client/packages/lowcoder-design/src/components/customSelect.tsx
@@ -1,9 +1,9 @@
-import { Select as AntdSelect, SelectProps as AntdSelectProps } from "antd";
+import { default as AntdSelect, SelectProps as AntdSelectProps } from "antd/es/select";
 import { ReactComponent as PackUpIcon } from "icons/icon-Pack-up.svg";
 import styled from "styled-components";
 import React from "react";
 
-const SelectWrapper = styled.div<{ border?: boolean }>`
+const SelectWrapper = styled.div<{ $border?: boolean }>`
   .ant-select-open {
     .ant-select-arrow {
       transform: rotate(0deg);
@@ -15,9 +15,9 @@ const SelectWrapper = styled.div<{ border?: boolean }>`
   }
 
   .ant-select .ant-select-selector {
-    border: ${(props) => (props.border ? "1px solid transparent" : "1px solid #d7d9e0")};
+    border: ${(props) => (props.$border ? "1px solid transparent" : "1px solid #d7d9e0")};
     border-radius: 4px;
-    padding: ${(props) => (props.border ? "0px" : "0 0 0 12px")};
+    padding: ${(props) => (props.$border ? "0px" : "0 0 0 12px")};
     height: 100%;
     align-items: center;
     margin-right: 8px;
@@ -30,16 +30,16 @@ const SelectWrapper = styled.div<{ border?: boolean }>`
 
   .ant-select-focused.ant-select.ant-select-show-arrow {
     .ant-select-selector {
-      border: ${(props) => (props.border ? "1px solid transparent" : "1px solid #3377ff")};
+      border: ${(props) => (props.$border ? "1px solid transparent" : "1px solid #3377ff")};
       border-radius: 4px;
-      box-shadow: 0 0 0 2px ${(props) => (props.border ? "transparent" : "rgba(51,119,255,0.20)")};
+      box-shadow: 0 0 0 2px ${(props) => (props.$border ? "transparent" : "rgba(51,119,255,0.20)")};
     }
   }
 
   .ant-select:hover,
   .ant-select-disabled:hover {
     .ant-select-selector {
-      border: ${(props) => (props.border ? "1px solid transparent" : "1px solid #8b8fa3")};
+      border: ${(props) => (props.$border ? "1px solid transparent" : "1px solid #8b8fa3")};
       border-radius: 4px;
     }
   }
@@ -56,7 +56,7 @@ const SelectWrapper = styled.div<{ border?: boolean }>`
 
   .ant-select-disabled.ant-select {
     .ant-select-selector {
-      background: ${(props) => (props.border ? "#ffffff" : "#fdfdfd")};
+      background: ${(props) => (props.$border ? "#ffffff" : "#fdfdfd")};
       border-radius: 4px;
       color: #b8b9bf;
     }
@@ -93,7 +93,7 @@ const CustomSelect = React.forwardRef<HTMLDivElement, CustomSelectProps>((
     ...restProps
   } = props;
   return (
-    <SelectWrapper className={className} ref={ref} border={border}>
+    <SelectWrapper className={className} ref={ref} $border={border}>
       <AntdSelect
         popupClassName={popupClassName}
         popupMatchSelectWidth={false}
diff --git a/client/packages/lowcoder-design/src/components/edit.tsx b/client/packages/lowcoder-design/src/components/edit.tsx
index a4c7949469..8c703b8786 100644
--- a/client/packages/lowcoder-design/src/components/edit.tsx
+++ b/client/packages/lowcoder-design/src/components/edit.tsx
@@ -2,7 +2,7 @@ import styled from "styled-components";
 import { ReactComponent as Edit } from "icons/icon-text-edit.svg";
 import { CSSProperties, ReactNode, useEffect, useRef, useState } from "react";
 import { Input } from "../components/Input";
-import { InputProps, InputRef } from "antd";
+import { InputProps, InputRef } from "antd/es/input";
 
 const Wrapper = styled.div`
   position: relative;
@@ -14,13 +14,13 @@ const Prefix = styled.div`
   top: 6px;
 `;
 
-export const EditTextWrapper = styled.div<{ disabled?: boolean; hasPrefix?: boolean }>`
+export const EditTextWrapper = styled.div<{ disabled?: boolean; $hasPrefix?: boolean }>`
   font-weight: 500;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 8px 0 4px;
-  padding-left: ${(props) => (props.hasPrefix ? "28px" : "4px")};
+  padding-left: ${(props) => (props.$hasPrefix ? "28px" : "4px")};
   border-radius: 4px;
   width: 220px;
   height: 28px;
@@ -29,7 +29,7 @@ export const EditTextWrapper = styled.div<{ disabled?: boolean; hasPrefix?: bool
   font-size: 14px;
   cursor: ${(props) => !props.disabled && "pointer"};
 
-  :hover {
+  &:hover {
     background-color: ${(props) => !props.disabled && "#8b8fa34c"};
   }
 
@@ -72,7 +72,7 @@ const TextInput = styled(Input)<InputProps & { $hasPrefix?: boolean }>`
   line-height: 28px;
   font-size: 14px;
 
-  :focus {
+  &:focus {
     box-shadow: none;
   }
 `;
@@ -123,7 +123,7 @@ export const EditText = (props: EditTextProps) => {
         <EditTextWrapper
           style={props.style}
           disabled={props.disabled}
-          hasPrefix={!!props.prefixIcon}
+          $hasPrefix={!!props.prefixIcon}
           className="taco-edit-text-wrapper"
           onClick={() => !props.disabled && !props.forceClickIcon && setEditing(true)}
         >
diff --git a/client/packages/lowcoder-design/src/components/form.tsx b/client/packages/lowcoder-design/src/components/form.tsx
index 23487d8a31..ac66238b13 100644
--- a/client/packages/lowcoder-design/src/components/form.tsx
+++ b/client/packages/lowcoder-design/src/components/form.tsx
@@ -1,13 +1,10 @@
-import {
-  Form,
-  Input,
-  InputNumber,
-  InputNumberProps,
-  InputProps,
-  Radio,
-  Select,
-  SelectProps,
-} from "antd";
+import { default as Form } from "antd/es/form";
+import { default as AntdFormItem, FormItemProps as AntdFormItemProps } from "antd/es/form/FormItem";
+import { default as Input, InputProps } from "antd/es/input";
+import { default as TextArea, TextAreaProps } from "antd/es/input/TextArea";
+import { default as InputNumber, InputNumberProps } from "antd/es/input-number";
+import { default as Radio, RadioGroupProps } from "antd/es/radio";
+import { default as Select, SelectProps } from "antd/es/select";
 import { ReactNode } from "react";
 import { CheckBox } from "./checkBox";
 import { CustomSelect } from "./customSelect";
@@ -15,16 +12,13 @@ import { EllipsisTextCss, labelCss } from "./Label";
 import { ToolTipLabel } from "./toolTip";
 import styled from "styled-components";
 import { ReactComponent as Star } from "icons/icon-star.svg";
-import { FormItemProps as AntdFormItemProps } from "antd/lib/form/FormItem";
 import _ from "lodash";
 import { KeyValueList } from "./keyValueList";
 import { OptionsType, ValueFromOption } from "./Dropdown";
-import { RadioGroupProps } from "antd/lib/radio/interface";
-import { TextAreaProps } from "antd/lib/input";
 
 export type FormSize = "middle" | "small";
 
-const FormItem = styled(Form.Item)`
+const FormItem = styled(AntdFormItem)`
   min-width: 0;
   flex-grow: 1;
   margin: 0;
@@ -69,7 +63,7 @@ const FormInputPassword = styled(Input)`
   border-radius: 4px;
 `;
 
-const FormTextArea = styled(Input.TextArea)`
+const FormTextArea = styled(TextArea)`
   background: #ffffff;
 `;
 
@@ -86,13 +80,13 @@ const StartIcon = styled(Star)`
   margin-right: 4px;
   flex-shrink: 0;
 `;
-const LabelDiv = styled.div<{ width?: number }>`
+const LabelDiv = styled.div<{ $width?: number }>`
   display: flex;
   justify-content: flex-start;
   flex-wrap: nowrap;
   align-items: center;
   margin-right: 8px;
-  width: ${(props) => props.width || 122}px;
+  width: ${(props) => props.$width || 122}px;
   flex-shrink: 0;
 `;
 const FormItemContain = styled.div`
@@ -132,11 +126,11 @@ export const FormSectionLabel = styled.label`
   overflow: hidden;
   max-width: 100px;
 `;
-export const FormSection = styled.div<{ size?: FormSize }>`
+export const FormSection = styled.div<{ $size?: FormSize }>`
   width: 100%;
 
   .taco-form-item-wrapper {
-    padding-left: ${(props) => (props.size === "middle" ? "24px" : "0")};
+    padding-left: ${(props) => (props.$size === "middle" ? "24px" : "0")};
   }
 `;
 
@@ -153,7 +147,7 @@ const FormItemLabel = (props: Partial<FormItemProps>) => {
   const isRequired =
     props.required || !!props.rules?.find((i) => typeof i === "object" && i.required);
   return (
-    <LabelDiv width={props.labelWidth}>
+    <LabelDiv $width={props.labelWidth}>
       <StartIcon style={{ visibility: isRequired ? "visible" : "hidden" }} />
       <ToolTipLabel title={props.help} label={props.label} labelStyle={{ fontSize: "14px" }} />
     </LabelDiv>
@@ -263,7 +257,7 @@ const CustomCheckbox = (props: any) => {
 export const FormCheckboxItem = (props: FormItemProps) => {
   return (
     <FormItemContain className={"taco-form-item-wrapper"}>
-      <LabelDiv width={props.labelWidth} />
+      <LabelDiv $width={props.labelWidth} />
       <FormItem
         rules={props.rules}
         name={props.name}
diff --git a/client/packages/lowcoder-design/src/components/iconSelect/index.tsx b/client/packages/lowcoder-design/src/components/iconSelect/index.tsx
index 41f0bcf61e..eaae8bfe52 100644
--- a/client/packages/lowcoder-design/src/components/iconSelect/index.tsx
+++ b/client/packages/lowcoder-design/src/components/iconSelect/index.tsx
@@ -1,6 +1,6 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import type { IconDefinition } from "@fortawesome/free-regular-svg-icons";
-import { Popover } from "antd";
+import { default as Popover } from "antd/es/popover";
 import { ActionType } from '@rc-component/trigger/lib/interface';
 import { TacoInput } from "components/tacoInput";
 import { Tooltip } from "components/toolTip";
@@ -8,7 +8,7 @@ import { trans } from "i18n/design";
 import _ from "lodash";
 import { ReactNode, useEffect, useCallback, useMemo, useRef, useState } from "react";
 import Draggable from "react-draggable";
-import { List, ListRowProps } from "react-virtualized";
+import { default as List, ListRowProps } from "react-virtualized/dist/es/List";
 import styled from "styled-components";
 import { CloseIcon, SearchIcon } from "icons";
 
@@ -62,17 +62,17 @@ const IconListWrapper = styled.div`
 const IconList = styled(List)`
   scrollbar-gutter: stable;
 
-  ::-webkit-scrollbar {
+  &::-webkit-scrollbar {
     width: 6px;
   }
 
-  ::-webkit-scrollbar-thumb {
+  &::-webkit-scrollbar-thumb {
     background-clip: content-box;
     border-radius: 9999px;
     background-color: rgba(139, 143, 163, 0.2);
   }
 
-  ::-webkit-scrollbar-thumb:hover {
+  &::-webkit-scrollbar-thumb:hover {
     background-color: rgba(139, 143, 163, 0.36);
   }
 `;
@@ -82,7 +82,7 @@ const IconRow = styled.div`
   align-items: center;
   justify-content: space-between;
 
-  :last-child {
+  &:last-child {
     gap: 8px;
     justify-content: flex-start;
   }
diff --git a/client/packages/lowcoder-design/src/components/keyValueList.tsx b/client/packages/lowcoder-design/src/components/keyValueList.tsx
index 576fe616de..aea98fde7a 100644
--- a/client/packages/lowcoder-design/src/components/keyValueList.tsx
+++ b/client/packages/lowcoder-design/src/components/keyValueList.tsx
@@ -24,7 +24,7 @@ const DelIcon = styled(Bin)<{
     ${(props) => props.$forbidden && "stroke: #D7D9E0;"}
   }
 
-  :hover {
+  &:hover {
     cursor: ${(props) => (props.$forbidden ? "default" : "pointer")};
   }
 
@@ -50,13 +50,13 @@ const AddBtn = styled(TacoButton)`
   box-shadow: none;
   margin-bottom: 2px;
 
-  :hover {
+  &:hover {
     color: #315efb;
     border: none;
     background-color: #ffffff;
   }
 
-  :focus {
+  &:focus {
     color: #315efb;
     border: none;
     background-color: #ffffff;
diff --git a/client/packages/lowcoder-design/src/components/option.tsx b/client/packages/lowcoder-design/src/components/option.tsx
index fd822af9f9..90b34d2dba 100644
--- a/client/packages/lowcoder-design/src/components/option.tsx
+++ b/client/packages/lowcoder-design/src/components/option.tsx
@@ -31,25 +31,25 @@ const RowText = styled.span`
   margin-left: 4px;
   max-width: calc(100% - 56px);
 
-  :hover {
+  &:hover {
     cursor: pointer;
   }
 `;
 
-const OptionRow = styled.div<{ selected?: boolean }>`
+const OptionRow = styled.div<{ $selected?: boolean }>`
   color: #ffffff;
   width: 100%;
   height: 32px;
   border-bottom: 1px solid #d7d9e0;
   display: flex;
 
-  :hover {
+  &:hover {
     background-color: #fafafa;
     cursor: pointer;
   }
 
   ${(props) => {
-    if (props.selected) {
+    if (props.$selected) {
       return css`
         background-color: #fafafa;
 
@@ -59,7 +59,7 @@ const OptionRow = styled.div<{ selected?: boolean }>`
       `;
     }
   }}
-  :last-child {
+  &:last-child {
     border-bottom: none;
     height: 31px;
   }
@@ -76,7 +76,7 @@ const IconCss = css`
   height: 16px;
   width: 16px;
 
-  :hover {
+  &:hover {
     cursor: pointer;
   }
 `;
@@ -109,12 +109,12 @@ const StyledDragIcon = styled(DragIcon)`
   margin-left: 8px;
   color: #8b8fa3;
 
-  :hover {
+  &:hover {
     cursor: grab;
     outline: none;
   }
 
-  :focus {
+  &:focus {
     cursor: grab;
     outline: none;
   }
@@ -165,7 +165,7 @@ const OptionItem = (props: {
     transition,
   };
   const optionRow = (
-    <OptionRow ref={setNodeRef} style={style} selected={visible}>
+    <OptionRow ref={setNodeRef} style={style} $selected={visible}>
       {draggable && <StyledDragIcon {...attributes} {...listeners} />}
       <RowText>{title}</RowText>
       <OptionItemExtraWrapper>{optionExtra}</OptionItemExtraWrapper>
diff --git a/client/packages/lowcoder-design/src/components/popover.tsx b/client/packages/lowcoder-design/src/components/popover.tsx
index 2f9167fb2a..c7e745d06e 100644
--- a/client/packages/lowcoder-design/src/components/popover.tsx
+++ b/client/packages/lowcoder-design/src/components/popover.tsx
@@ -1,5 +1,5 @@
 import { SuspensionBox } from "./SuspensionBox";
-import { Popover, PopoverProps } from "antd";
+import { default as Popover, PopoverProps } from "antd/es/popover";
 import { Children, cloneElement, MouseEvent, ReactNode, useState } from "react";
 import styled from "styled-components";
 import { ActiveTextColor, GreyTextColor } from "constants/style";
@@ -11,9 +11,9 @@ const Wedge = styled.div`
   /* width: 88px; */
   min-width: 110px;
 `;
-const HandleText = styled.span<{ color?: string }>`
+const HandleText = styled.span<{ $color?: string }>`
   font-size: 13px;
-  color: ${(props) => (props.color ? props.color : "#333333")};
+  color: ${(props) => (props.$color ? props.$color : "#333333")};
   line-height: 13px;
   display: block;
 `;
@@ -29,7 +29,7 @@ const Handle = styled.div`
   padding: 0 8px;
   cursor: pointer;
 
-  :hover {
+  &:hover {
     background-color: #f2f7fc;
     border-radius: 4px;
     cursor: pointer;
@@ -181,7 +181,7 @@ const EditPopover = (props: EditPopoverProps) => {
                 hide();
               }}
             >
-              <HandleText color={item.type === "delete" ? "#F73131" : "#333333"}>
+              <HandleText $color={item.type === "delete" ? "#F73131" : "#333333"}>
                 {item.text}
               </HandleText>
             </Handle>
@@ -238,7 +238,7 @@ const EditPopover = (props: EditPopoverProps) => {
                 hide();
               }}
             >
-              <HandleText color={"#F73131"}>{trans("delete")}</HandleText>
+              <HandleText $color={"#F73131"}>{trans("delete")}</HandleText>
             </Handle>
           )}
           <Wedge />
diff --git a/client/packages/lowcoder-design/src/components/popupCard.tsx b/client/packages/lowcoder-design/src/components/popupCard.tsx
index 0d109c309c..5307ba9e9e 100644
--- a/client/packages/lowcoder-design/src/components/popupCard.tsx
+++ b/client/packages/lowcoder-design/src/components/popupCard.tsx
@@ -1,13 +1,14 @@
-import { Alert, Card } from "antd";
+import { default as Alert } from "antd/es/alert";
+import { default as Card } from "antd/es/card";
 import { CopyTextButton } from "./copyTextButton";
 import { CSSProperties, ReactNode, useState } from "react";
 import styled from "styled-components";
 import { ErrorIcon, SuccessIcon } from "icons";
 
-const StyledCard = styled(Card)<{ backcolor: string }>`
+const StyledCard = styled(Card)<{ $backcolor: string }>`
   z-index: 3;
   margin-top: 4px;
-  background-color: ${(props) => (props.backcolor ? props.backcolor : "#eff9f6")};
+  background-color: ${(props) => (props.$backcolor ? props.$backcolor : "#eff9f6")};
   border-color: #82bf99;
   color: #3b734f;
   border: none;
@@ -119,7 +120,7 @@ export function PopupCard(props: PopupCardProps) {
         <Contain>
           <StyledCard
             style={props.cardStyle}
-            backcolor={props.hasError ? "#FFF3F1" : "#EFF9F6"}
+            $backcolor={props.hasError ? "#FFF3F1" : "#EFF9F6"}
             title={
               <Alert
                 message={props.title}
diff --git a/client/packages/lowcoder-design/src/components/query.tsx b/client/packages/lowcoder-design/src/components/query.tsx
index 51b45aa344..6ff0ce9131 100644
--- a/client/packages/lowcoder-design/src/components/query.tsx
+++ b/client/packages/lowcoder-design/src/components/query.tsx
@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import { Alert } from "antd";
+import { default as Alert } from "antd/es/alert";
 import { ReactNode } from "react";
 import { AlertProps } from "antd/lib/alert";
 import { ToolTipLabel } from "./toolTip";
@@ -109,12 +109,12 @@ export const QueryConfigItemWrapper = styled.div<{ direction?: "row" | "column"
 
 type TutorialStyle = "dropdownRight" | "begin";
 
-const TutorialButtonWrapper = styled.div<{ styleName: TutorialStyle }>`
+const TutorialButtonWrapper = styled.div<{ $styleName: TutorialStyle }>`
   height: 100%;
   display: flex;
   align-items: center;
   ${(props) => {
-    if (props.styleName === "dropdownRight") {
+    if (props.$styleName === "dropdownRight") {
       return css`
         padding-left: 8px;
         width: 264px;
@@ -134,7 +134,7 @@ export const QueryTutorialButton = ({
   styleName: "dropdownRight" | "begin";
 }) =>
   url ? (
-    <TutorialButtonWrapper styleName={styleName}>
+    <TutorialButtonWrapper $styleName={styleName}>
       <DocLink href={url}>{label}</DocLink>
     </TutorialButtonWrapper>
   ) : (
diff --git a/client/packages/lowcoder-design/src/components/tacoInput.tsx b/client/packages/lowcoder-design/src/components/tacoInput.tsx
index 84445f4096..eaf9b19832 100644
--- a/client/packages/lowcoder-design/src/components/tacoInput.tsx
+++ b/client/packages/lowcoder-design/src/components/tacoInput.tsx
@@ -1,4 +1,4 @@
-import { Input as AntdInput, InputRef } from "antd";
+import { default as AntdInput, InputRef } from "antd/es/input";
 import { ReactComponent as MustFillStar } from "icons/icon-must-fill-star.svg";
 import { trans } from "i18n/design";
 import { CSSProperties, Ref, useEffect, useRef, useState } from "react";
@@ -17,15 +17,15 @@ const TacoInput = styled(AntdInput)`
   line-height: 13px;
   height: 32px;
 
-  :hover {
+  &:hover {
     border: 1px solid #8b8fa3;
   }
 
-  :focus {
+  &:focus {
     border: 1px solid #3377ff;
   }
 
-  ::placeholder {
+  &::placeholder {
     font-size: 13px;
     color: #b8b9bf;
     line-height: 13px;
@@ -93,7 +93,7 @@ const OptInputWrapper = styled.div`
   border: 1px solid #d7d9e0;
   border-radius: 8px;
 
-  :hover {
+  &:hover {
     border: 1px solid #8b8fa3;
   }
 
@@ -107,8 +107,8 @@ const OtpInput = styled(TacoInput)`
   border: none;
   box-shadow: none;
 
-  :focus,
-  :hover {
+  &:focus,
+  &:hover {
     border: none;
     box-shadow: none;
   }
@@ -122,12 +122,12 @@ const OtpSplit = styled.span`
   transform: scaleX(0.8);
 `;
 
-const StyledOtpButton = styled.button<{ isTiming: boolean }>`
+const StyledOtpButton = styled.button<{ $isTiming: boolean }>`
   flex-shrink: 0;
   width: 124px;
 
   font-size: 16px;
-  color: ${(props) => (props.isTiming ? "#8B8FA3" : "#4965f2")};
+  color: ${(props) => (props.$isTiming ? "#8B8FA3" : "#4965f2")};
   line-height: 16px;
   border: none;
   cursor: pointer;
@@ -208,11 +208,11 @@ const PhoneNumberInputWrapper = styled.div`
   border-radius: 4px;
   height: 40px;
 
-  :hover {
+  &:hover {
     border: 1px solid #8b8fa3;
   }
 
-  :focus-within {
+  &:focus-within {
     box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
     border: 1px solid #3377ff;
   }
@@ -227,7 +227,7 @@ const StyledPhoneNumberInput = styled(AntdInput)`
   border: unset;
   border-radius: 4px !important;
 
-  :focus {
+  &:focus {
     box-shadow: unset;
   }
 `;
@@ -513,7 +513,7 @@ const OtpFormInput = (props: {
             setTiming(true);
             onOtpSend();
           }}
-          isTiming={timing}
+          $isTiming={timing}
         >
           {timing ? `${count}s` : trans("verifyCodeInput.sendCode")}
         </StyledOtpButton>
diff --git a/client/packages/lowcoder-design/src/components/tacoPagination.tsx b/client/packages/lowcoder-design/src/components/tacoPagination.tsx
index 0164e0b2b2..d16b1b9f9a 100644
--- a/client/packages/lowcoder-design/src/components/tacoPagination.tsx
+++ b/client/packages/lowcoder-design/src/components/tacoPagination.tsx
@@ -1,5 +1,4 @@
-import { Pagination } from "antd";
-import { PaginationProps } from "antd/lib/pagination/Pagination";
+import { default as Pagination, PaginationProps } from "antd/es/pagination";
 import styled, { css } from "styled-components";
 import { ReactComponent as PackUpIcon } from "icons/icon-Pack-up.svg";
 
@@ -7,7 +6,7 @@ const packUpIconCss = css`
   height: 24px;
   width: 24px;
 
-  :hover:not([disabled]) {
+  &:hover:not([disabled]) {
     g path {
       fill: #315efb;
     }
diff --git a/client/packages/lowcoder-design/src/components/toolTip.tsx b/client/packages/lowcoder-design/src/components/toolTip.tsx
index 6e7ea4eb66..897cd4a34e 100644
--- a/client/packages/lowcoder-design/src/components/toolTip.tsx
+++ b/client/packages/lowcoder-design/src/components/toolTip.tsx
@@ -1,5 +1,5 @@
-import { Button, Tooltip as AntdTooltip } from "antd";
-import { TooltipProps } from "antd/lib/tooltip";
+import { default as Button } from "antd/es/button";
+import { default as AntdTooltip, TooltipProps } from "antd/es/tooltip";
 import { CSSProperties, ReactNode } from "react";
 import styled, { css } from "styled-components";
 import { labelCss } from "components/Label";
@@ -71,13 +71,13 @@ const PreButton = styled(Button)`
   ${buttonCss};
 
   &,
-  :focus {
+  &:focus {
     background-color: #6179f2;
     border-color: #6179f2;
     color: #ffffff;
   }
 
-  :hover {
+  &:hover {
     background-color: #798df2;
     border-color: #798df2;
     color: #ffffff;
@@ -88,13 +88,13 @@ const NextButton = styled(Button)`
   ${buttonCss};
 
   &,
-  :focus {
+  &:focus {
     color: #4965f2;
     border-color: #ffffff;
     background-color: #ffffff;
   }
 
-  :hover {
+  &:hover {
     color: #4965f2;
     border-color: #e6eaff;
     background-color: #e6eaff;
@@ -129,8 +129,8 @@ export const TooltipCodeBlock = (props: { text: string }) => {
 
 export const TooltipLink = styled.a`
   &,
-  :hover,
-  :focus {
+  &:hover,
+  &:focus {
     color: #ffffff;
     text-decoration: underline;
   }
@@ -158,10 +158,10 @@ function Tooltip(props: TooltipProps) {
   return <AntdTooltip color="#2c2c2c2" overlayInnerStyle={overlayInnerCss} {...props} />;
 }
 
-const Label = styled.div<{ border?: boolean }>`
+const Label = styled.div<{ $border?: boolean }>`
   span {
-    ${(props) => props.border && UnderlineCss}
-    line-height: ${(props) => props.border && "18px"};
+    ${(props) => props.$border && UnderlineCss}
+    line-height: ${(props) => props.$border ? "18px" : undefined};
   }
   ${labelCss};
   margin: 0;
@@ -180,7 +180,7 @@ function ToolTipLabel(
   return (
     <AntdTooltip
       color="#2c2c2c"
-      title={title && <TooltipTitleWrapper>{title}</TooltipTitleWrapper>}
+      title={title && <TooltipTitleWrapper><>{title}</></TooltipTitleWrapper>}
       overlayInnerStyle={{ maxWidth: "232px", whiteSpace: "break-spaces" }}
       arrow={{
         pointAtCenter: true
@@ -192,7 +192,7 @@ function ToolTipLabel(
       {...restProps}
     >
       {label ? (
-        <Label style={labelStyle} border={!!title} className="tooltipLabel">
+        <Label style={labelStyle} $border={!!title} className="tooltipLabel">
           <span>{label}</span>
         </Label>
       ) : (
diff --git a/client/packages/lowcoder-plugin-demo/index.tsx b/client/packages/lowcoder-plugin-demo/index.tsx
index 682c73d4f4..3da32f80e7 100644
--- a/client/packages/lowcoder-plugin-demo/index.tsx
+++ b/client/packages/lowcoder-plugin-demo/index.tsx
@@ -1,4 +1,4 @@
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { CompIDE } from "lowcoder-sdk";
 import { name, version, lowcoder } from "./package.json";
 import compMap from "./src/index";
@@ -16,4 +16,6 @@ function CompDevApp() {
   );
 }
 
-ReactDOM.render(<CompDevApp />, document.querySelector("#root"));
+const container = document.querySelector("#root");
+const root = createRoot(container!);
+root.render(<CompDevApp />);
diff --git a/client/packages/lowcoder-plugin-demo/package.json b/client/packages/lowcoder-plugin-demo/package.json
index 5ed0e9d7e2..357c4dee8e 100644
--- a/client/packages/lowcoder-plugin-demo/package.json
+++ b/client/packages/lowcoder-plugin-demo/package.json
@@ -6,8 +6,8 @@
   "dependencies": {
     "lowcoder-core": "^0.0.1",
     "lowcoder-design": "^0.0.1",
-    "react": "17",
-    "react-dom": "17"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.com"
@@ -30,8 +30,8 @@
     "build": "lowcoder-cli build"
   },
   "devDependencies": {
-    "@types/react": "17",
-    "@types/react-dom": "17",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
     "lowcoder-cli": "workspace:^",
     "lowcoder-sdk": "workspace:^",
     "typescript": "4.8.4",
diff --git a/client/packages/lowcoder-sdk/package.json b/client/packages/lowcoder-sdk/package.json
index 039db169c3..72f718a3c2 100644
--- a/client/packages/lowcoder-sdk/package.json
+++ b/client/packages/lowcoder-sdk/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-sdk",
-  "version": "2.1.10",
+  "version": "2.1.11",
   "type": "module",
   "files": [
     "src",
@@ -48,8 +48,8 @@
     "vite-tsconfig-paths": "^3.6.0"
   },
   "peerDependencies": {
-    "react": ">=17",
-    "react-dom": ">=17"
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "keywords": [
     "lowcoder"
diff --git a/client/packages/lowcoder-sdk/typedoc.json b/client/packages/lowcoder-sdk/typedoc.json
deleted file mode 100644
index 7c3d5a6d23..0000000000
--- a/client/packages/lowcoder-sdk/typedoc.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-    // Comments are supported, like tsconfig.json
-    "entryPoints": ["src/index.ts"],
-    "out": "docs"
-}
\ No newline at end of file
diff --git a/client/packages/lowcoder/package.json b/client/packages/lowcoder/package.json
index c4936531f8..f575d828d7 100644
--- a/client/packages/lowcoder/package.json
+++ b/client/packages/lowcoder/package.json
@@ -7,15 +7,14 @@
   "types": "src/index.sdk.ts",
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
-    "@ant-design/pro-form": "^1.52.9",
-    "@ant-design/pro-table": "^2.62.7",
-    "@codemirror/autocomplete": "^0.20.3",
-    "@codemirror/basic-setup": "^0.20.0",
-    "@codemirror/lang-css": "0.20",
-    "@codemirror/lang-html": "0.20",
-    "@codemirror/lang-javascript": "^0.20.1",
-    "@codemirror/lang-json": "0.20.0",
-    "@codemirror/lang-sql": "^0.20.4",
+    "@codemirror/autocomplete": "^6.11.1",
+    "@codemirror/commands": "^6.3.2",
+    "@codemirror/lang-css": "^6.2.1",
+    "@codemirror/lang-html": "^6.4.7",
+    "@codemirror/lang-javascript": "^6.2.1",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-sql": "^6.5.4",
+    "@codemirror/search": "^6.5.5",
     "@dnd-kit/core": "^5.0.1",
     "@dnd-kit/modifiers": "^5.0.0",
     "@dnd-kit/sortable": "^6.0.0",
@@ -25,24 +24,22 @@
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "latest",
     "@manaflair/redux-batch": "^1.0.0",
-    "@rjsf/antd": "^5.10.0",
-    "@rjsf/core": "^5.10.0",
-    "@rjsf/utils": "^5.10.0",
-    "@rjsf/validator-ajv8": "^5.10.0",
+    "@rjsf/antd": "^5.15.1",
+    "@rjsf/core": "^5.15.1",
+    "@rjsf/utils": "^5.15.1",
+    "@rjsf/validator-ajv8": "^5.15.1",
     "@types/lodash": "^4.14.194",
     "@types/node": "^16.7.13",
-    "@types/react": "^17.0.20",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
     "@types/react-signature-canvas": "^1.0.2",
     "@types/react-test-renderer": "^18.0.0",
     "@types/react-virtualized": "^9.21.21",
     "agora-access-token": "^2.0.4",
     "agora-rtc-sdk-ng": "^4.19.0",
     "agora-rtm-sdk": "^1.5.1",
-    "ali-oss": "^6.17.1",
-    "antd": "^5.12.2",
-    "antd-img-crop": "^4.12.2",
-    "axios": "^0.21.1",
+    "antd": "^5.12.5",
+    "axios": "^1.6.2",
     "buffer": "^6.0.3",
     "clsx": "^2.0.0",
     "cnchar": "^3.2.4",
@@ -66,10 +63,10 @@
     "papaparse": "^5.3.2",
     "qrcode.react": "^3.1.0",
     "rc-trigger": "^5.3.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-colorful": "^5.5.1",
     "react-documents": "^1.2.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-draggable": "^4.4.4",
     "react-grid-layout": "^1.3.0",
     "react-helmet": "^6.1.0",
@@ -84,6 +81,7 @@
     "react-router": "^5.2.1",
     "react-router-dom": "^5.3.0",
     "react-signature-canvas": "^1.0.6",
+    "react-sortable-hoc": "^2.0.0",
     "react-test-renderer": "^18.1.0",
     "react-use": "^17.3.2",
     "really-relaxed-json": "^0.3.2",
@@ -96,10 +94,9 @@
     "resize-observer-polyfill": "^1.5.1",
     "simplebar-react": "2.3.6",
     "sql-formatter": "^8.2.0",
-    "styled-components": "^5.3.3",
+    "styled-components": "^6.1.6",
     "stylis": "^4.1.1",
     "tern": "^0.24.3",
-    "toposort": "^2.0.2",
     "typescript-collections": "^1.3.3",
     "ua-parser-js": "^1.0.33",
     "uuid": "^9.0.0",
diff --git a/client/packages/lowcoder/src/api/apiUtils.test.ts b/client/packages/lowcoder/src/api/apiUtils.test.ts
index acfba0de23..50d1dc3336 100644
--- a/client/packages/lowcoder/src/api/apiUtils.test.ts
+++ b/client/packages/lowcoder/src/api/apiUtils.test.ts
@@ -7,7 +7,7 @@ import {
   doValidResponse,
   validateResponse,
 } from "./apiUtils";
-import { AxiosResponse } from "axios";
+import { AxiosHeaders, AxiosResponse } from "axios";
 import { ApiResponse } from "./apiResponses";
 import {
   createMessage,
@@ -23,8 +23,14 @@ beforeAll(() => {
   jest.spyOn(log, "error").mockImplementation(() => {});
 });
 
+const headers = new AxiosHeaders({
+  "Content-Type": "application/json",
+});
+
 test("apiRequestInterceptor", () => {
-  expect(apiRequestInterceptor({})).toHaveProperty("timer");
+  expect(apiRequestInterceptor({
+    headers,
+  })).toHaveProperty("timer");
 });
 
 test("apiSuccessResponseInterceptor", () => {
@@ -132,8 +138,8 @@ test("validateResponse", () => {
       status: 500,
       data: { success: false, code: 1, message: "fail", data: "" },
       statusText: "",
-      headers: [],
-      config: {},
+      headers,
+      config: { headers },
     })
   ).toThrowError(Error("fail"));
   expect(
@@ -141,8 +147,8 @@ test("validateResponse", () => {
       status: 500,
       data: { success: true, code: 1, message: "", data: "" },
       statusText: "",
-      headers: [],
-      config: {},
+      headers,
+      config: { headers },
     })
   ).toEqual(true);
 });
@@ -171,8 +177,8 @@ test("doValidResponse", () => {
       status: 500,
       data: { success: false, code: 1, message: "fail", data: "" },
       statusText: "",
-      headers: [],
-      config: {},
+      headers,
+      config: { headers },
     })
   ).toEqual(false);
   expect(
@@ -180,8 +186,8 @@ test("doValidResponse", () => {
       status: 500,
       data: { success: true, code: 1, message: "", data: "" },
       statusText: "",
-      headers: [],
-      config: {},
+      headers,
+      config: { headers },
     })
   ).toEqual(true);
 });
diff --git a/client/packages/lowcoder/src/api/apiUtils.ts b/client/packages/lowcoder/src/api/apiUtils.ts
index 61d9ff6e26..485264c813 100644
--- a/client/packages/lowcoder/src/api/apiUtils.ts
+++ b/client/packages/lowcoder/src/api/apiUtils.ts
@@ -10,7 +10,7 @@ import {
 import { AUTH_BIND_URL, OAUTH_REDIRECT } from "constants/routesURL";
 import log from "loglevel";
 import history from "util/history";
-import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from "axios";
+import axios, { AxiosError, AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig } from "axios";
 import { trans } from "i18n";
 import StoreRegistry from "redux/store/storeRegistry";
 import { logoutAction } from "redux/reduxActions/userActions";
@@ -20,7 +20,7 @@ const executeActionRegex = /query\/execute/;
 const timeoutErrorRegex = /timeout of (\d+)ms exceeded/;
 export const axiosConnectionAbortedCode = "ECONNABORTED";
 
-type AxiosRequestConfigWithTimer = AxiosRequestConfig & { timer: number };
+type AxiosRequestConfigWithTimer = InternalAxiosRequestConfig & { timer: number };
 
 export type AxiosResponseWithTimer = AxiosResponse<ApiResponse> & {
   config: AxiosRequestConfigWithTimer;
@@ -37,7 +37,7 @@ export type AxiosErrorWithTimer = AxiosError<ApiResponse> & {
 };
 
 function isAxiosErrorWithTimer(error: any): error is AxiosErrorWithTimer {
-  return axios.isAxiosError(error) && error?.config && "timer" in error.config;
+  return Boolean(axios.isAxiosError(error) && error?.config && "timer" in error.config);
 }
 
 const makeExecuteActionResponse = (response: any) => {
@@ -68,7 +68,7 @@ const notNeedBindPath = () => {
   return pathName === AUTH_BIND_URL || pathName === OAUTH_REDIRECT;
 };
 
-export const apiRequestInterceptor = (config: AxiosRequestConfig): AxiosRequestConfigWithTimer => ({
+export const apiRequestInterceptor = (config: InternalAxiosRequestConfig): AxiosRequestConfigWithTimer => ({
   ...config,
   timer: performance.now(),
 });
diff --git a/client/packages/lowcoder/src/api/datasourceApi.ts b/client/packages/lowcoder/src/api/datasourceApi.ts
index 647a87bc95..599c50dab3 100644
--- a/client/packages/lowcoder/src/api/datasourceApi.ts
+++ b/client/packages/lowcoder/src/api/datasourceApi.ts
@@ -102,6 +102,7 @@ export interface HttpConfig {
 
   authConfig: {
     type: AuthType;
+    authId?: string;
   } & (
     | {
         username: string; // basic auth
diff --git a/client/packages/lowcoder/src/app-env.d.ts b/client/packages/lowcoder/src/app-env.d.ts
index 2b02bb6169..2858df0504 100644
--- a/client/packages/lowcoder/src/app-env.d.ts
+++ b/client/packages/lowcoder/src/app-env.d.ts
@@ -4,7 +4,10 @@ declare module "*.svg" {
   import * as React from "react";
 
   export const ReactComponent: React.FunctionComponent<
-    React.SVGProps<SVGSVGElement> & { title?: string }
+    React.SVGProps<SVGSVGElement> & {
+      title?: string
+      $show?: boolean
+    }
   >;
 
   const src: string;
diff --git a/client/packages/lowcoder/src/app.tsx b/client/packages/lowcoder/src/app.tsx
index e05cb576e3..0e25e3a52e 100644
--- a/client/packages/lowcoder/src/app.tsx
+++ b/client/packages/lowcoder/src/app.tsx
@@ -1,4 +1,5 @@
-import { App, ConfigProvider } from "antd";
+import { default as App } from "antd/es/app";
+import { default as ConfigProvider } from "antd/es/config-provider";
 import {
   ALL_APPLICATIONS_URL,
   APP_EDITOR_URL,
@@ -21,7 +22,7 @@ import {
   USER_AUTH_URL,
 } from "constants/routesURL";
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { Helmet } from "react-helmet";
 import { connect, Provider } from "react-redux";
 import { Redirect, Route, Router, Switch } from "react-router-dom";
@@ -187,10 +188,11 @@ const AppIndexWithProps = connect(mapStateToProps, mapDispatchToProps)(AppIndex)
 export function bootstrap() {
   initApp();
   loadComps();
-  ReactDOM.render(
+  const container = document.getElementById("root");
+  const root = createRoot(container!);
+  root.render(
     <Provider store={reduxStore}>
       <AppIndexWithProps />
-    </Provider>,
-    document.getElementById("root")
+    </Provider>
   );
 }
diff --git a/client/packages/lowcoder/src/appView/AppViewInstance.tsx b/client/packages/lowcoder/src/appView/AppViewInstance.tsx
index 2bbbfbc057..b9e8457bed 100644
--- a/client/packages/lowcoder/src/appView/AppViewInstance.tsx
+++ b/client/packages/lowcoder/src/appView/AppViewInstance.tsx
@@ -4,7 +4,7 @@ import { RootComp } from "comps/comps/rootComp";
 import { setGlobalSettings } from "comps/utils/globalSettings";
 import { sdkConfig } from "constants/sdkConfig";
 import _ from "lodash";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { StyleSheetManager } from "styled-components";
 import { ModuleDSL, ModuleDSLIoInput } from "types/dsl";
 import { AppView } from "./AppView";
@@ -137,7 +137,8 @@ export class AppViewInstance<I = any, O = any> {
 
   private async render() {
     const data = await this.dataPromise;
-    ReactDOM.render(
+    const root = createRoot(this.node);
+    root.render(
       <StyleSheetManager target={this.node as HTMLElement}>
         <AppView
           appId={this.appId}
@@ -147,8 +148,7 @@ export class AppViewInstance<I = any, O = any> {
           onCompChange={(comp) => this.handleCompChange(comp)}
           onModuleEventTriggered={(eventName) => this.emit("moduleEventTriggered", [eventName])}
         />
-      </StyleSheetManager>,
-      this.node
+      </StyleSheetManager>
     );
   }
 
diff --git a/client/packages/lowcoder/src/base/codeEditor/codeEditor.tsx b/client/packages/lowcoder/src/base/codeEditor/codeEditor.tsx
index 0c463e46eb..b6ac336bd0 100644
--- a/client/packages/lowcoder/src/base/codeEditor/codeEditor.tsx
+++ b/client/packages/lowcoder/src/base/codeEditor/codeEditor.tsx
@@ -270,8 +270,8 @@ function clickCompNameCss(enableClickCompName?: boolean) {
 }
 
 const CodeEditorPanelContainer = styled.div<{
-  styleName?: StyleName;
-  enableClickCompName?: boolean;
+  $styleName?: StyleName;
+  $enableClickCompName?: boolean;
 }>`
   height: 100%;
   max-height: 100%;
@@ -326,7 +326,7 @@ const CodeEditorPanelContainer = styled.div<{
     padding-right: 16px;
   }
 
-  ${(props) => clickCompNameCss(props.enableClickCompName)}
+  ${(props) => clickCompNameCss(props.$enableClickCompName)}
 `;
 
 const CodeEditorWrapper = styled.div`
@@ -370,9 +370,9 @@ function CodeEditorForPanel(props: CodeEditorProps) {
   return (
     <CodeEditorCommon {...props} editor={editor} cardStyle={{ borderRadius: "8px" }}>
       <CodeEditorPanelContainer
-        styleName={props.styleName}
+        $styleName={props.styleName}
         ref={editor as MutableRefObject<HTMLDivElement>}
-        enableClickCompName={props.enableClickCompName}
+        $enableClickCompName={props.enableClickCompName}
       />
     </CodeEditorCommon>
   );
@@ -389,12 +389,12 @@ export function CodeEditor(props: CodeEditorProps) {
     <CodeEditorTooltipContainer>
       <CodeEditorCommon {...editorProps} editor={editor} disabled={disabled}>
         <Container
-          styleName={props.styleName}
-          bordered={props.bordered}
+          $styleName={props.styleName}
+          $bordered={props.bordered}
           disabled={disabled}
-          error={props.hasError}
+          $error={props.hasError}
           ref={editor as MutableRefObject<HTMLDivElement>}
-          enableClickCompName={props.enableClickCompName}
+          $enableClickCompName={props.enableClickCompName}
         >
           {expandable && (
             <CodeEditorPanel
@@ -411,32 +411,32 @@ export function CodeEditor(props: CodeEditorProps) {
 
 const Container = styled.div<{
   disabled?: boolean;
-  error?: boolean;
-  bordered?: boolean;
-  styleName?: StyleName;
-  enableClickCompName?: boolean;
+  $error?: boolean;
+  $bordered?: boolean;
+  $styleName?: StyleName;
+  $enableClickCompName?: boolean;
 }>`
   position: relative;
   height: 100%;
 
-  :hover {
+  &:hover {
     .code-editor-panel-open-button {
       display: block;
     }
   }
 
   .cm-editor:hover {
-    border: 1px solid ${(props) => (props.error ? "#f73131" : "#8B8FA3")};
+    border: 1px solid ${(props) => (props.$error ? "#f73131" : "#8B8FA3")};
   }
 
   .cm-editor.cm-focused {
-    border: 1px solid ${(props) => (props.error ? "#f73131" : "#3377ff")};
-    box-shadow: 0 0 0 2px ${(props) => (props.error ? "#feeaea" : "#d6e4ff")};
+    border: 1px solid ${(props) => (props.$error ? "#f73131" : "#3377ff")};
+    box-shadow: 0 0 0 2px ${(props) => (props.$error ? "#feeaea" : "#d6e4ff")};
   }
 
   .cm-editor {
-    border: 1px solid ${(props) => (props.error ? "#f73131" : "#d7d9e0")};
-    border-radius: ${(props) => (props.bordered ? "4px" : "")};
+    border: 1px solid ${(props) => (props.$error ? "#f73131" : "#d7d9e0")};
+    border-radius: ${(props) => (props.$bordered ? "4px" : "")};
   }
 
   .cm-line {
@@ -444,17 +444,17 @@ const Container = styled.div<{
   }
 
   .cm-editor {
-    min-height: ${(props) => getStyle(props.styleName).minHeight};
+    min-height: ${(props) => getStyle(props.$styleName).minHeight};
   }
   .cm-content,
   .cm-gutter {
-    min-height: ${(props) => getStyle(props.styleName).minHeight};
-    min-height: calc(${(props) => getStyle(props.styleName).minHeight} - 2px);
+    min-height: ${(props) => getStyle(props.$styleName).minHeight};
+    min-height: calc(${(props) => getStyle(props.$styleName).minHeight} - 2px);
   }
 
   .cm-editor {
     overflow: hidden;
-    max-height: ${(props) => getStyle(props.styleName).maxHeight};
+    max-height: ${(props) => getStyle(props.$styleName).maxHeight};
   }
 
   ${(props) => {
@@ -469,5 +469,5 @@ const Container = styled.div<{
       `;
     }
   }}
-  ${(props) => clickCompNameCss(props.enableClickCompName)}
+  ${(props) => clickCompNameCss(props.$enableClickCompName)}
 `;
diff --git a/client/packages/lowcoder/src/base/codeEditor/extensions/iconExtension.tsx b/client/packages/lowcoder/src/base/codeEditor/extensions/iconExtension.tsx
index ab1c3539d2..4982c0ec95 100644
--- a/client/packages/lowcoder/src/base/codeEditor/extensions/iconExtension.tsx
+++ b/client/packages/lowcoder/src/base/codeEditor/extensions/iconExtension.tsx
@@ -8,7 +8,7 @@ import {
   WidgetType,
 } from "@codemirror/view";
 import { useIcon } from "lowcoder-design";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import styled from "styled-components";
 
 const IconContainer = styled.div`
@@ -47,7 +47,8 @@ class IconWidget extends WidgetType {
 
   toDOM() {
     let wrap = document.createElement("span");
-    ReactDOM.render(<IconElement value={this.value} />, wrap);
+    const root = createRoot(wrap);
+    root.render(<IconElement value={this.value} />);
     return wrap;
   }
 
diff --git a/client/packages/lowcoder/src/components/ColorPicker.tsx b/client/packages/lowcoder/src/components/ColorPicker.tsx
index 6f06b82c39..a647657389 100644
--- a/client/packages/lowcoder/src/components/ColorPicker.tsx
+++ b/client/packages/lowcoder/src/components/ColorPicker.tsx
@@ -182,7 +182,7 @@ export default function ColorPicker(props: ColorConfigProps) {
       )} 
       {colorKey === "borderRadius" && (
         <div className="config-input">
-          <Radius radius={defaultRadius || "0"}>
+          <Radius $radius={defaultRadius || "0"}>
             <div>
               <div />
             </div>
@@ -197,7 +197,7 @@ export default function ColorPicker(props: ColorConfigProps) {
       )}
       {colorKey === "margin" && (	
         <div className="config-input">	
-          <Margin margin={defaultMargin || "3px"}>	
+          <Margin $margin={defaultMargin || "3px"}>	
             <div>	
               <ExpandIcon title="" />	
             </div>	
@@ -215,7 +215,7 @@ export default function ColorPicker(props: ColorConfigProps) {
       )}	
       {colorKey === "padding" && (	
         <div className="config-input">	
-          <Padding padding={defaultPadding || "3px"}>	
+          <Padding $padding={defaultPadding || "3px"}>	
             <div>	
               <CompressIcon title="" />	
             </div>	
@@ -233,7 +233,7 @@ export default function ColorPicker(props: ColorConfigProps) {
         )}
       {colorKey === "gridColumns" && (
         <div className="config-input">
-          <GridColumns gridColumns={defaultGridColumns || "24"}>
+          <GridColumns $gridColumns={defaultGridColumns || "24"}>
             <div>
               <GridIcon title="" />
             </div>
diff --git a/client/packages/lowcoder/src/components/CompName.tsx b/client/packages/lowcoder/src/components/CompName.tsx
index 2f0b26b8b4..d6a92dc46f 100644
--- a/client/packages/lowcoder/src/components/CompName.tsx
+++ b/client/packages/lowcoder/src/components/CompName.tsx
@@ -14,27 +14,27 @@ import { getComponentDocUrl } from "comps/utils/compDocUtil";
 import { getComponentPlaygroundUrl } from "comps/utils/compDocUtil";
 import { parseCompType } from "comps/utils/remote";
 
-const CompDiv = styled.div<{ width?: number; hasSearch?: boolean; showSearch?: boolean }>`
-  width: ${(props) => (props.width ? props.width : 312)}px;
-  height: ${(props) => (props.showSearch ? 45 : 46)}px;
+const CompDiv = styled.div<{ $width?: number; $hasSearch?: boolean; $showSearch?: boolean }>`
+  width: ${(props) => (props.$width ? props.$width : 312)}px;
+  height: ${(props) => (props.$showSearch ? 45 : 46)}px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-bottom: ${(props) => (props.showSearch ? 0 : 1)}px solid #e1e3eb;
+  border-bottom: ${(props) => (props.$showSearch ? 0 : 1)}px solid #e1e3eb;
 
   .taco-edit-text-wrapper {
-    width: ${(props) => (props.hasSearch ? 226 : 252)}px;
+    width: ${(props) => (props.$hasSearch ? 226 : 252)}px;
     color: #222222;
     font-size: 16px;
     margin-left: 8px;
 
-    :hover {
+    &:hover {
       background-color: #f5f5f6;
     }
   }
 
   .taco-edit-text-input {
-    width: ${(props) => (props.hasSearch ? 226 : 252)}px;
+    width: ${(props) => (props.$hasSearch ? 226 : 252)}px;
     color: #222222;
     font-size: 16px;
     background-color: #f5f5f6;
@@ -126,7 +126,7 @@ export const CompName = (props: Iprops) => {
     setShowSearch(false);
   }, [props.name]);
   const compName = (
-    <CompDiv width={props.width} hasSearch={!!search} showSearch={showSearch}>
+    <CompDiv $width={props.width} $hasSearch={!!search} $showSearch={showSearch}>
       <div>
         <EditText
           text={props.name}
diff --git a/client/packages/lowcoder/src/components/CreateAppButton.tsx b/client/packages/lowcoder/src/components/CreateAppButton.tsx
index 9787e2b319..fc3faa36ca 100644
--- a/client/packages/lowcoder/src/components/CreateAppButton.tsx
+++ b/client/packages/lowcoder/src/components/CreateAppButton.tsx
@@ -18,7 +18,7 @@ const CreateSpan = styled.span`
   cursor: pointer;
   color: ${LightActiveTextColor};
 
-  :hover {
+  &:hover {
     color: ${ActiveTextColor};
   }
 `;
diff --git a/client/packages/lowcoder/src/components/DraggableTree/DraggableItem.tsx b/client/packages/lowcoder/src/components/DraggableTree/DraggableItem.tsx
index 9cf2a53306..c8a0f093e7 100644
--- a/client/packages/lowcoder/src/components/DraggableTree/DraggableItem.tsx
+++ b/client/packages/lowcoder/src/components/DraggableTree/DraggableItem.tsx
@@ -4,56 +4,56 @@ import styled from "styled-components";
 import { DraggableTreeContext } from "./DraggableTreeContext";
 
 const Wrapper = styled.div<{
-  showPositionLine: boolean;
-  dragging: boolean;
-  isOver: boolean;
-  dropInAsSub: boolean;
-  positionLineHeight?: number;
-  showPositionLineDot?: boolean;
-  positionLineDotDiameter?: number;
-  positionLineIndent?: number;
-  itemHeight?: number;
+  $showPositionLine: boolean;
+  $dragging: boolean;
+  $isOver: boolean;
+  $dropInAsSub: boolean;
+  $positionLineHeight?: number;
+  $showPositionLineDot?: boolean;
+  $positionLineDotDiameter?: number;
+  $positionLineIndent?: number;
+  $itemHeight?: number;
 }>`
   position: relative;
   width: 100%;
-  height: ${(props) => props.itemHeight ?? 30}px;
+  height: ${(props) => props.$itemHeight ?? 30}px;
   /* border: 1px solid #d7d9e0; */
   border-radius: 4px;
-  margin-bottom: ${(props) => props.positionLineHeight ?? 4}px;
+  margin-bottom: ${(props) => props.$positionLineHeight ?? 4}px;
   display: flex;
   /* padding: 0 8px; */
   align-items: center;
-  opacity: ${(props) => (props.dragging ? "0.5" : 1)};
+  opacity: ${(props) => (props.$dragging ? "0.5" : 1)};
 
   &::before {
     content: "";
     display: ${(props) =>
-      (props.showPositionLineDot ?? false) && props.isOver && props.showPositionLine
+      (props.$showPositionLineDot ?? false) && props.$isOver && props.$showPositionLine
         ? "block"
         : "none"};
     position: absolute;
     background-color: #315efb;
-    height: ${(props) => props.positionLineDotDiameter}px;
-    width: ${(props) => props.positionLineDotDiameter}px;
+    height: ${(props) => props.$positionLineDotDiameter}px;
+    width: ${(props) => props.$positionLineDotDiameter}px;
     left: 0;
     border-radius: 100%;
     bottom: ${(props) =>
-      -(props.positionLineHeight ?? 4) -
-      ((props.positionLineDotDiameter ?? 8) - (props.positionLineHeight ?? 4)) / 2}px;
-    left: ${(props) => props.positionLineIndent ?? (props.dropInAsSub ? 15 : -1)}px;
+      -(props.$positionLineHeight ?? 4) -
+      ((props.$positionLineDotDiameter ?? 8) - (props.$positionLineHeight ?? 4)) / 2}px;
+    left: ${(props) => props.$positionLineIndent ?? (props.$dropInAsSub ? 15 : -1)}px;
     z-index: 1;
   }
 
   &::after {
     content: "";
-    display: ${(props) => (props.isOver && props.showPositionLine ? "block" : "none")};
-    height: ${(props) => props.positionLineHeight ?? 4}px;
+    display: ${(props) => (props.$isOver && props.$showPositionLine ? "block" : "none")};
+    height: ${(props) => props.$positionLineHeight ?? 4}px;
     border-radius: 4px;
     position: absolute;
-    left: ${(props) => props.positionLineIndent ?? (props.dropInAsSub ? 15 : -1)}px;
+    left: ${(props) => props.$positionLineIndent ?? (props.$dropInAsSub ? 15 : -1)}px;
     right: 0;
     background-color: #315efb;
-    bottom: ${(props) => -(props.positionLineHeight ?? 4)}px;
+    bottom: ${(props) => -(props.$positionLineHeight ?? 4)}px;
   }
 `;
 
@@ -82,15 +82,15 @@ function DraggableItem(props: IProps, ref: Ref<HTMLDivElement>) {
   const showPositionLine = (context.showDropInPositionLine ?? true) || !dropInAsSub;
   return (
     <Wrapper
-      showPositionLine={showPositionLine}
-      positionLineIndent={positionLineIndent}
-      positionLineDotDiameter={context.positionLineDotDiameter}
-      showPositionLineDot={context.showPositionLineDot}
-      positionLineHeight={context.positionLineHeight}
-      itemHeight={context.itemHeight}
-      isOver={isOver}
-      dragging={dragging}
-      dropInAsSub={dropInAsSub}
+      $showPositionLine={showPositionLine}
+      $positionLineIndent={positionLineIndent}
+      $positionLineDotDiameter={context.positionLineDotDiameter}
+      $showPositionLineDot={context.showPositionLineDot}
+      $positionLineHeight={context.positionLineHeight}
+      $itemHeight={context.itemHeight}
+      $isOver={isOver}
+      $dragging={dragging}
+      $dropInAsSub={dropInAsSub}
       ref={ref}
       {...divProps}
       {...dragListeners}
diff --git a/client/packages/lowcoder/src/components/DraggableTree/DroppablePlaceHolder.tsx b/client/packages/lowcoder/src/components/DraggableTree/DroppablePlaceHolder.tsx
index 3eb8abe0f9..5c96c4a336 100644
--- a/client/packages/lowcoder/src/components/DraggableTree/DroppablePlaceHolder.tsx
+++ b/client/packages/lowcoder/src/components/DraggableTree/DroppablePlaceHolder.tsx
@@ -11,38 +11,38 @@ interface IDroppablePlaceholderProps {
 }
 
 const PlaceHolderWrapper = styled.div<{
-  active: boolean;
-  positionLineIndent?: number;
-  positionLineHeight?: number;
-  showPositionLineDot?: boolean;
-  positionLineDotDiameter?: number;
-  itemHeight?: number;
+  $active: boolean;
+  $positionLineIndent?: number;
+  $positionLineHeight?: number;
+  $showPositionLineDot?: boolean;
+  $positionLineDotDiameter?: number;
+  $itemHeight?: number;
 }>`
   pointer-events: none;
   position: absolute;
   width: 100%;
-  top: -${(props) => props.positionLineHeight ?? 4}px;
-  height: ${(props) => (props.itemHeight ?? 30) * 0.6}px;
+  top: -${(props) => props.$positionLineHeight ?? 4}px;
+  height: ${(props) => (props.$itemHeight ?? 30) * 0.6}px;
   z-index: 10;
   /* background-color: rgba(0, 0, 0, 0.2); */
   .position-line {
-    height: ${(props) => props.positionLineHeight ?? 4}px;
+    height: ${(props) => props.$positionLineHeight ?? 4}px;
     border-radius: 4px;
-    background-color: ${(props) => (props.active ? "#315efb" : "transparent")};
+    background-color: ${(props) => (props.$active ? "#315efb" : "transparent")};
     width: 100%;
-    margin-left: ${(props) => props.positionLineIndent ?? 0}px;
+    margin-left: ${(props) => props.$positionLineIndent ?? 0}px;
     position: relative;
     &::after {
       content: "";
       position: absolute;
       background-color: #315efb;
       display: ${(props) =>
-        (props.showPositionLineDot ?? false) && props.active ? "block" : "none"};
+        (props.$showPositionLineDot ?? false) && props.$active ? "block" : "none"};
       left: 0;
-      height: ${(props) => props.positionLineDotDiameter ?? 8}px;
-      width: ${(props) => props.positionLineDotDiameter ?? 8}px;
+      height: ${(props) => props.$positionLineDotDiameter ?? 8}px;
+      width: ${(props) => props.$positionLineDotDiameter ?? 8}px;
       top: ${(props) =>
-        -((props.positionLineDotDiameter ?? 8) - (props.positionLineHeight ?? 4)) / 2}px;
+        -((props.$positionLineDotDiameter ?? 8) - (props.$positionLineHeight ?? 4)) / 2}px;
       border-radius: 100%;
     }
   }
@@ -63,12 +63,12 @@ export default function DroppablePlaceholder(props: IDroppablePlaceholderProps)
   const context = useContext(DraggableTreeContext);
   return (
     <PlaceHolderWrapper
-      itemHeight={context.itemHeight}
-      showPositionLineDot={context.showPositionLineDot}
-      positionLineDotDiameter={context.positionLineDotDiameter}
-      positionLineHeight={context.positionLineHeight}
-      positionLineIndent={context.positionLineIndent?.(path, false)}
-      active={isOver}
+      $itemHeight={context.itemHeight}
+      $showPositionLineDot={context.showPositionLineDot}
+      $positionLineDotDiameter={context.positionLineDotDiameter}
+      $positionLineHeight={context.positionLineHeight}
+      $positionLineIndent={context.positionLineIndent?.(path, false)}
+      $active={isOver}
       ref={setDropNodeRef}
     >
       <div className="position-line"></div>
diff --git a/client/packages/lowcoder/src/components/InputList.tsx b/client/packages/lowcoder/src/components/InputList.tsx
index 03ebecf8c1..12477fc5d1 100644
--- a/client/packages/lowcoder/src/components/InputList.tsx
+++ b/client/packages/lowcoder/src/components/InputList.tsx
@@ -1,4 +1,5 @@
-import { Form } from "antd";
+import { default as Form } from "antd/es/form";
+import { default as FormItem } from "antd/es/form/FormItem";
 import { FormListProps, Rule } from "antd/lib/form";
 import { TacoButton } from "lowcoder-design";
 import { Input } from "lowcoder-design";
@@ -9,7 +10,7 @@ import { useEffect } from "react";
 import { useForm } from "antd/lib/form/Form";
 import { trans } from "i18n";
 
-const StyledItem = styled(Form.Item)`
+const StyledItem = styled(FormItem)`
   margin-bottom: 8px;
   &:last-child {
     margin-bottom: 2px;
diff --git a/client/packages/lowcoder/src/components/JSLibraryModal.tsx b/client/packages/lowcoder/src/components/JSLibraryModal.tsx
index 4dfd9796dd..3d99b0df08 100644
--- a/client/packages/lowcoder/src/components/JSLibraryModal.tsx
+++ b/client/packages/lowcoder/src/components/JSLibraryModal.tsx
@@ -5,7 +5,7 @@ import { trans } from "i18n";
 import { DocLink } from "components/ExternalLink";
 import { Input } from "components/Input";
 import { TacoButton } from "components/button";
-import { Spin } from "antd";
+import { default as Spin } from "antd/es/spin";
 import { useDispatch, useSelector } from "react-redux";
 import { recommendJSLibrarySelector } from "redux/selectors/jsLibrarySelector";
 import { JSLibraryInfo, JSLibraryLabel } from "components/JSLibraryTree";
@@ -53,7 +53,7 @@ const StyledDocIcon = styled(DocBoldIcon)`
   cursor: pointer;
   color: ${GreyTextColor};
 
-  :hover {
+  &:hover {
     & > g > g {
       stroke: ${ActiveTextColor};
     }
@@ -62,7 +62,7 @@ const StyledDocIcon = styled(DocBoldIcon)`
 const StyledDownloadIcon = styled(DownloadBoldIcon)`
   cursor: pointer;
 
-  :hover {
+  &:hover {
     & > g > g {
       stroke: ${ActiveTextColor};
     }
@@ -169,20 +169,20 @@ const ErrorWrapper = styled.div`
       color: #8b8fa3;
       display: none;
 
-      :hover {
+      &:hover {
         color: #000000;
       }
     }
   }
 
-  :hover {
+  &:hover {
     .close-button {
       display: block;
     }
   }
 
   .error-description a {
-    :hover {
+    &:hover {
       color: #315efb;
     }
   }
diff --git a/client/packages/lowcoder/src/components/JSLibraryTree.tsx b/client/packages/lowcoder/src/components/JSLibraryTree.tsx
index 0bdd60a795..e7c464c605 100644
--- a/client/packages/lowcoder/src/components/JSLibraryTree.tsx
+++ b/client/packages/lowcoder/src/components/JSLibraryTree.tsx
@@ -9,7 +9,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { parseJSLibraryURL } from "util/jsLibraryUtils";
 import { jsLibrarySelector } from "redux/selectors/jsLibrarySelector";
 import { fetchJSLibraryMetasAction } from "redux/reduxActions/jsLibraryActions";
-import { Typography } from "antd";
+import { default as TypographyParagraph } from "antd/es/typography/Paragraph";
 
 const InfoWrapper = styled.div`
   color: #8b8fa3;
@@ -30,7 +30,7 @@ const ExportWrapper = styled.div`
   height: 20px;
   line-height: 20px;
 `;
-const DescWrapper = styled(Typography.Paragraph)`
+const DescWrapper = styled(TypographyParagraph)`
   line-height: 1.5em;
   font-size: 13px;
   color: #8b8fa3;
@@ -73,7 +73,7 @@ const Icon = styled(PointIcon)`
   }
 `;
 
-const JSLibraryCollapse = styled(Collapse)<{ mode: "row" | "column" }>`
+const JSLibraryCollapse = styled(Collapse)<{ $mode: "row" | "column" }>`
   margin-bottom: 12px;
 
   cursor: inherit;
@@ -84,7 +84,7 @@ const JSLibraryCollapse = styled(Collapse)<{ mode: "row" | "column" }>`
   }
 
   ${(props) =>
-    props.mode === "row"
+    props.$mode === "row"
       ? css`
           width: 284px;
 
@@ -176,7 +176,7 @@ export const JSLibraryTree = (props: {
 
   return (
     <JSLibraryCollapse
-      mode={props.mode}
+      $mode={props.mode}
       isSelected={false}
       isOpen={false}
       config={finalMetas.map((meta, idx) => {
diff --git a/client/packages/lowcoder/src/components/KeyValueItemList.tsx b/client/packages/lowcoder/src/components/KeyValueItemList.tsx
index a09f6d1758..38db309106 100644
--- a/client/packages/lowcoder/src/components/KeyValueItemList.tsx
+++ b/client/packages/lowcoder/src/components/KeyValueItemList.tsx
@@ -57,14 +57,14 @@ const ListWrapper = styled.div`
   }
 `;
 
-const ItemWrapper = styled.div<{ popover: boolean; active: boolean; hasValue: boolean }>`
+const ItemWrapper = styled.div<{ $popover: boolean; $active: boolean; $hasValue: boolean }>`
   height: 32px;
   font-size: 13px;
   padding-left: 12px;
   display: flex;
-  background-color: ${(props) => (props.active ? ItemHoverBackgroundColor : "inherit")};
+  background-color: ${(props) => (props.$active ? ItemHoverBackgroundColor : "inherit")};
 
-  cursor: ${(props) => (props.popover ? "pointer" : "default")};
+  cursor: ${(props) => (props.$popover ? "pointer" : "default")};
 
   &:hover {
     background-color: ${ItemHoverBackgroundColor};
@@ -79,8 +79,8 @@ const ItemWrapper = styled.div<{ popover: boolean; active: boolean; hasValue: bo
     white-space: nowrap;
     overflow: hidden;
     padding-right: 8px;
-    width: ${(props) => (props.hasValue ? col1Width : "auto")};
-    ${(props) => (props.active ? `color: ${ActiveTextColor}` : "")}
+    width: ${(props) => (props.$hasValue ? col1Width : "auto")};
+    ${(props) => (props.$active ? `color: ${ActiveTextColor}` : "")}
   }
 
   .col2 {
@@ -152,7 +152,7 @@ export function KeyValueItem(props: KeyValueItemProps) {
   );
 
   return (
-    <ItemWrapper active={isPopShow} popover={!!clickPopoverContent} hasValue={!!value}>
+    <ItemWrapper $active={isPopShow} $popover={!!clickPopoverContent} $hasValue={!!value}>
       {clickPopoverContent ? content : itemContent}
       <div className="item-op-btn">
         <EditPopover {...editPopoverProps}>
diff --git a/client/packages/lowcoder/src/components/LazyRoute.tsx b/client/packages/lowcoder/src/components/LazyRoute.tsx
index 81f2f8733e..0b0e27c3dd 100644
--- a/client/packages/lowcoder/src/components/LazyRoute.tsx
+++ b/client/packages/lowcoder/src/components/LazyRoute.tsx
@@ -1,4 +1,4 @@
-import { Skeleton } from "antd";
+import { default as Skeleton } from "antd/es/skeleton";
 import { ComponentType, lazy, Suspense, useRef } from "react";
 import { Route, RouteProps } from "react-router";
 import PageSkeleton from "./PageSkeleton";
diff --git a/client/packages/lowcoder/src/components/LinkPlusButton.tsx b/client/packages/lowcoder/src/components/LinkPlusButton.tsx
index f32c8443ad..ec50f1ac31 100644
--- a/client/packages/lowcoder/src/components/LinkPlusButton.tsx
+++ b/client/packages/lowcoder/src/components/LinkPlusButton.tsx
@@ -22,7 +22,7 @@ const Btn = styled(TacoButton)`
     line-height: 13px;
     box-shadow: none;
 
-    :hover {
+    &:hover {
       color: #315efb;
       border: none;
       background-color: #ffffff;
diff --git a/client/packages/lowcoder/src/components/ModuleLoading.tsx b/client/packages/lowcoder/src/components/ModuleLoading.tsx
index 73dcfe0544..5d3901c8db 100644
--- a/client/packages/lowcoder/src/components/ModuleLoading.tsx
+++ b/client/packages/lowcoder/src/components/ModuleLoading.tsx
@@ -1,4 +1,4 @@
-import { Spin } from "antd";
+import { default as Spin } from "antd/es/spin";
 import { GreyTextColor } from "constants/style";
 import styled from "styled-components";
 
diff --git a/client/packages/lowcoder/src/components/PageSkeleton.tsx b/client/packages/lowcoder/src/components/PageSkeleton.tsx
index d3bf0fcdbe..79dcbc21de 100644
--- a/client/packages/lowcoder/src/components/PageSkeleton.tsx
+++ b/client/packages/lowcoder/src/components/PageSkeleton.tsx
@@ -1,4 +1,5 @@
-import { Layout, Skeleton } from "antd";
+import { default as Layout } from "antd/es/layout";
+import { default as Skeleton } from "antd/es/skeleton";
 import MainContent from "components/layout/MainContent";
 import SideBar from "components/layout/SideBar";
 import Header from "./layout/Header";
diff --git a/client/packages/lowcoder/src/components/PermissionDialog/Permission.tsx b/client/packages/lowcoder/src/components/PermissionDialog/Permission.tsx
index b97548de23..74beb77aa0 100644
--- a/client/packages/lowcoder/src/components/PermissionDialog/Permission.tsx
+++ b/client/packages/lowcoder/src/components/PermissionDialog/Permission.tsx
@@ -21,7 +21,7 @@ import {
 } from "./commonComponents";
 import { getInitialsAndColorCode } from "util/stringUtils";
 import { CustomTagProps } from "rc-select/lib/BaseSelect";
-import { Tag } from "antd";
+import { default as Tag } from "antd/es/tag";
 import { User } from "constants/userConstants";
 import { getUser } from "redux/selectors/usersSelectors";
 import { EmptyContent } from "pages/common/styledComponent";
@@ -62,18 +62,18 @@ const AddPermissionDropDown = styled.div`
     .rc-virtual-list-holder {
       overflow-y: overlay !important;
 
-      ::-webkit-scrollbar {
+      &::-webkit-scrollbar {
         width: 16px;
       }
 
-      ::-webkit-scrollbar-thumb {
+      &::-webkit-scrollbar-thumb {
         border: 5px solid transparent;
         background-clip: content-box;
         border-radius: 9999px;
         background-color: rgba(139, 143, 163, 0.12);
       }
 
-      ::-webkit-scrollbar-thumb:hover {
+      &::-webkit-scrollbar-thumb:hover {
         background-color: rgba(139, 143, 163, 0.25);
       }
     }
@@ -94,11 +94,11 @@ const PermissionSelectWrapper = styled.div`
     line-height: 13px;
   }
 
-  :hover {
+  &:hover {
     outline: 1px solid #8b8fa3;
   }
 
-  :focus-within {
+  &:focus-within {
     outline: 1px solid #315efb;
     border-radius: 4px;
     box-shadow: 0 0 0 3px rgb(24 144 255 / 20%);
@@ -117,7 +117,7 @@ const AddPermissionsSelect = styled(CustomSelect)`
   overflow-y: scroll;
   overflow-x: hidden;
 
-  ::-webkit-scrollbar {
+  &::-webkit-scrollbar {
     display: none;
   }
 
@@ -165,7 +165,7 @@ const StyledTag = styled(Tag)`
     align-items: center;
     margin-left: 8px;
 
-    :hover svg g line {
+    &:hover svg g line {
       stroke: #222222;
     }
   }
@@ -241,7 +241,7 @@ function getPermissionOptionView(
 function PermissionSelectorOption(props: { optionView: AddAppOptionView }) {
   const { optionView } = props;
   const groupIcon = optionView.type === "GROUP" && (
-    <StyledGroupIcon color={getInitialsAndColorCode(optionView.name)[1]} />
+    <StyledGroupIcon $color={getInitialsAndColorCode(optionView.name)[1]} />
   );
   return (
     <OptionViewWrapper>
@@ -259,7 +259,7 @@ function PermissionSelectorOption(props: { optionView: AddAppOptionView }) {
 function PermissionSelectorLabel(props: { view: AddAppOptionView }) {
   const { view } = props;
   const groupIcon = view.type === "GROUP" && (
-    <StyledGroupIcon color={getInitialsAndColorCode(view.name)[1]} side={9} />
+    <StyledGroupIcon $color={getInitialsAndColorCode(view.name)[1]} $side={9} />
   );
   return (
     <div style={{ display: "flex", alignItems: "center" }}>
diff --git a/client/packages/lowcoder/src/components/PermissionDialog/PermissionDialog.tsx b/client/packages/lowcoder/src/components/PermissionDialog/PermissionDialog.tsx
index 860789147d..0834cf2d9e 100644
--- a/client/packages/lowcoder/src/components/PermissionDialog/PermissionDialog.tsx
+++ b/client/packages/lowcoder/src/components/PermissionDialog/PermissionDialog.tsx
@@ -15,8 +15,8 @@ const BottomWrapper = styled.div`
 
 const AddPermissionButton = styled(TacoButton)`
   &,
-  :hover,
-  :focus {
+  &:hover,
+  &:focus {
     border: none;
     box-shadow: none;
     padding: 0;
@@ -32,7 +32,7 @@ const AddPermissionButton = styled(TacoButton)`
     margin-right: 4px;
   }
 
-  :hover {
+  &:hover {
     color: #315efb;
 
     svg g path {
diff --git a/client/packages/lowcoder/src/components/PermissionDialog/PermissionList.tsx b/client/packages/lowcoder/src/components/PermissionDialog/PermissionList.tsx
index e88541dfd1..d834b7cd05 100644
--- a/client/packages/lowcoder/src/components/PermissionDialog/PermissionList.tsx
+++ b/client/packages/lowcoder/src/components/PermissionDialog/PermissionList.tsx
@@ -25,31 +25,31 @@ const PermissionLi = styled.li`
   padding: 8px 8px;
   width: 424px;
 
-  :hover {
+  &:hover {
     background: #f2f7fc;
     border-radius: 4px;
   }
 `;
 
-const UserPermissionUl = styled.ul<{ height: number }>`
+const UserPermissionUl = styled.ul<{ $height: number }>`
   padding: 0;
-  height: ${(props) => props.height}px;
+  height: ${(props) => props.$height}px;
   overflow-y: overlay !important;
   overflow-x: hidden;
   margin: 0 -16px 0 -8px;
 
-  ::-webkit-scrollbar {
+  &::-webkit-scrollbar {
     width: 16px;
   }
 
-  ::-webkit-scrollbar-thumb {
+  &::-webkit-scrollbar-thumb {
     border: 5px solid transparent;
     background-clip: content-box;
     border-radius: 9999px;
     background-color: rgba(139, 143, 163, 0.12);
   }
 
-  ::-webkit-scrollbar-thumb:hover {
+  &::-webkit-scrollbar-thumb:hover {
     background-color: rgba(139, 143, 163, 0.25);
   }
 `;
@@ -101,7 +101,7 @@ function PermissionLiItem(props: {
         side={32}
         userName={permissionItem.name}
         source={permissionItem.avatar && ASSETS_URI(permissionItem.avatar)}
-        svg={SvgIcon && <SvgIcon color={getInitialsAndColorCode(permissionItem.name)[1]} />}
+        svg={SvgIcon && <SvgIcon $color={getInitialsAndColorCode(permissionItem.name)[1]} />}
       />
       <PermissionItemName title={permissionItem.name}>
         {permissionItem.type === "GROUP" && trans("home.groupWithSquareBrackets")}
@@ -145,7 +145,7 @@ function PermissionLiItem(props: {
             value="delete"
             permissionid={permissionItem.permissionId}
           >
-            <CommonErrorLabel fontSize={13}>{trans("remove")}</CommonErrorLabel>
+            <CommonErrorLabel $fontSize={13}>{trans("remove")}</CommonErrorLabel>
           </CustomSelect.Option>
         </StyledRoleSelect>
       )}
@@ -165,7 +165,7 @@ export const PermissionList = (props: {
     <CommonTextLabel style={{ marginBottom: "4px" }}>
       {trans("home.memberPermissionList")}
     </CommonTextLabel>
-    <UserPermissionUl height={201}>
+    <UserPermissionUl $height={201}>
       {props.permissionItems.map((item, index) => (
         <PermissionLiItem
           key={index}
diff --git a/client/packages/lowcoder/src/components/PermissionDialog/commonComponents.tsx b/client/packages/lowcoder/src/components/PermissionDialog/commonComponents.tsx
index 4ec71c83f3..f5a9f884ad 100644
--- a/client/packages/lowcoder/src/components/PermissionDialog/commonComponents.tsx
+++ b/client/packages/lowcoder/src/components/PermissionDialog/commonComponents.tsx
@@ -42,23 +42,23 @@ export const RoleSelectOptionWrapper = styled.div`
 `;
 
 export const StyledGroupIcon = styled(GroupIcon)<{
-  color: string;
-  side?: number;
+  $color: string;
+  $side?: number;
 }>`
-  width: ${(props) => props.side ?? 16}px;
-  height: ${(props) => props.side ?? 16}px;
+  width: ${(props) => props.$side ?? 16}px;
+  height: ${(props) => props.$side ?? 16}px;
 
   g g {
-    fill: ${(props) => props.color};
+    fill: ${(props) => props.$color};
   }
 `;
 
-export const StyledAdminIcon = styled(AdminIcon)<{ color: string }>`
+export const StyledAdminIcon = styled(AdminIcon)<{ $color: string }>`
   width: 16px;
   height: 16px;
 
   g path {
-    fill: ${(props) => props.color};
+    fill: ${(props) => props.$color};
   }
 `;
 
diff --git a/client/packages/lowcoder/src/components/ResCreatePanel.tsx b/client/packages/lowcoder/src/components/ResCreatePanel.tsx
index c5c85968a9..efcbb38f03 100644
--- a/client/packages/lowcoder/src/components/ResCreatePanel.tsx
+++ b/client/packages/lowcoder/src/components/ResCreatePanel.tsx
@@ -19,20 +19,20 @@ import {
   QUICK_REST_API_ID,
 } from "../constants/datasourceConstants";
 import { ResourceType } from "@lowcoder-ee/constants/queryConstants";
-import { Upload } from "antd";
+import { default as Upload } from "antd/es/upload";
 import { useSelector } from "react-redux";
 import { getUser } from "../redux/selectors/usersSelectors";
 import DataSourceIcon from "./DataSourceIcon";
 import { genRandomKey } from "comps/utils/idGenerator";
 
-const Wrapper = styled.div<{ placement: PageType }>`
+const Wrapper = styled.div<{ $placement: PageType }>`
   width: 100%;
   height: 100%;
   position: absolute;
   background-color: white;
 
   ${(props) => {
-    return props.placement === "editor"
+    return props.$placement === "editor"
       ? css`
           top: 0;
         `
@@ -57,16 +57,16 @@ const Wrapper = styled.div<{ placement: PageType }>`
   }
 `;
 
-const Title = styled.div<{ shadow: boolean; placement: PageType }>`
+const Title = styled.div<{ $shadow: boolean; $placement: PageType }>`
   height: 40px;
   display: flex;
   padding: 0 16px;
   justify-content: space-between;
-  align-items: ${(props) => (props.placement === "editor" ? "center" : "flex-start")};
+  align-items: ${(props) => (props.$placement === "editor" ? "center" : "flex-start")};
 
-  ${(props) => (props.shadow ? `box-shadow: ${BottomShadow};` : "")}
+  ${(props) => (props.$shadow ? `box-shadow: ${BottomShadow};` : "")}
   .title-text {
-    font-size: ${(props) => (props.placement === "editor" ? 16 : 18)}px;
+    font-size: ${(props) => (props.$placement === "editor" ? 16 : 18)}px;
     font-weight: 500;
   }
 
@@ -90,9 +90,9 @@ const InnerContent = styled.div`
   padding: 8px 16px 24px;
 `;
 
-const DataSourceListWrapper = styled.div<{ placement?: PageType }>`
+const DataSourceListWrapper = styled.div<{ $placement?: PageType }>`
   display: flex;
-  gap: ${(props) => (props.placement === "queryLibrary" ? 12 : 8)}px;
+  gap: ${(props) => (props.$placement === "queryLibrary" ? 12 : 8)}px;
   flex-wrap: wrap;
 `;
 
@@ -243,8 +243,8 @@ export function ResCreatePanel(props: ResCreateModalProps) {
   }, 100);
 
   return (
-    <Wrapper placement={placement}>
-      <Title shadow={isScrolling} placement={placement}>
+    <Wrapper $placement={placement}>
+      <Title $shadow={isScrolling} $placement={placement}>
         <div onScroll={handleScroll} className="title-text">
           {trans("query.newQuery")}
         </div>
@@ -257,7 +257,7 @@ export function ResCreatePanel(props: ResCreateModalProps) {
           <InnerContent>
             <div className="section-title">{trans("query.recentlyUsed")}</div>
             <div ref={ref} className="section">
-              <DataSourceListWrapper placement={placement}>
+              <DataSourceListWrapper $placement={placement}>
                 {_.uniq(recentlyUsed)
                   .slice(0, count)
                   .map((id, idx) => (
@@ -270,7 +270,7 @@ export function ResCreatePanel(props: ResCreateModalProps) {
               <>
                 <div className="section-title">{trans("code")}</div>
                 <div className="section">
-                  <DataSourceListWrapper placement={placement}>
+                  <DataSourceListWrapper $placement={placement}>
                     <ResButton
                       size={buttonSize}
                       identifier={BottomResTypeEnum.TempState}
@@ -302,7 +302,7 @@ export function ResCreatePanel(props: ResCreateModalProps) {
               <>
                 <div className="section-title">{trans("home.import")}</div>
                 <div className="section">
-                  <DataSourceListWrapper placement={placement}>
+                  <DataSourceListWrapper $placement={placement}>
                     <Upload
                       accept=".json"
                       showUploadList={false}
@@ -323,7 +323,7 @@ export function ResCreatePanel(props: ResCreateModalProps) {
 
             <div className="section-title">{trans("query.datasource")}</div>
             <div className="section">
-              <DataSourceListWrapper placement={placement}>
+              <DataSourceListWrapper $placement={placement}>
                 <ResButton size={buttonSize} identifier={"restApi"} onSelect={onSelect} />
                 <ResButton size={buttonSize} identifier={"streamApi"} onSelect={onSelect} />
                 <ResButton size={buttonSize} identifier={"graphql"} onSelect={onSelect} />
diff --git a/client/packages/lowcoder/src/components/Segmented.tsx b/client/packages/lowcoder/src/components/Segmented.tsx
index 71246664cc..91f8750d44 100644
--- a/client/packages/lowcoder/src/components/Segmented.tsx
+++ b/client/packages/lowcoder/src/components/Segmented.tsx
@@ -1,4 +1,4 @@
-import { Segmented as AntdSegmented } from "antd";
+import { default as AntdSegmented } from "antd/es/segmented";
 import styled from "styled-components";
 
 type PropsType<T extends React.ForwardRefExoticComponent<any>> =
diff --git a/client/packages/lowcoder/src/components/SnapshotList.tsx b/client/packages/lowcoder/src/components/SnapshotList.tsx
index 936bcf8bd6..3613b946ac 100644
--- a/client/packages/lowcoder/src/components/SnapshotList.tsx
+++ b/client/packages/lowcoder/src/components/SnapshotList.tsx
@@ -1,11 +1,11 @@
 import styled from "styled-components";
 
-const SnapshotItemDiv = styled.div<{ selected?: boolean }>`
+const SnapshotItemDiv = styled.div<{ $selected?: boolean }>`
   padding: 10px 16px 12px 0;
   border-left: 4px solid transparent;
   cursor: pointer;
   ${(props) =>
-    props.selected &&
+    props.$selected &&
     `
       background: #f2f7fc;
       border-radius: 4px;
@@ -16,7 +16,7 @@ const SnapshotItemDiv = styled.div<{ selected?: boolean }>`
       }
   `};
 
-  :hover {
+  &:hover {
     background: #f2f7fc;
     border-radius: 4px;
   }
@@ -81,7 +81,7 @@ export interface SnapshotItemProps {
 }
 
 const SnapshotItem = (props: SnapshotItemProps) => (
-  <SnapshotItemDiv onClick={props.onClick} tabIndex={0} selected={props.selected}>
+  <SnapshotItemDiv onClick={props.onClick} tabIndex={0} $selected={props.selected}>
     <ItemTitle>
       <Dot className="snapshot-item-dot" />
       <span title={props.title}>{props.title}</span>
diff --git a/client/packages/lowcoder/src/components/Table.tsx b/client/packages/lowcoder/src/components/Table.tsx
index 82b5abb5ca..5478829ca3 100644
--- a/client/packages/lowcoder/src/components/Table.tsx
+++ b/client/packages/lowcoder/src/components/Table.tsx
@@ -1,4 +1,4 @@
-import { Table as AntdTable } from "antd";
+import { default as AntdTable } from "antd/es/table";
 import styled from "styled-components";
 
 export const Table = styled(AntdTable)`
diff --git a/client/packages/lowcoder/src/components/Tabs.tsx b/client/packages/lowcoder/src/components/Tabs.tsx
index 41e4892330..1735a838cb 100644
--- a/client/packages/lowcoder/src/components/Tabs.tsx
+++ b/client/packages/lowcoder/src/components/Tabs.tsx
@@ -1,4 +1,4 @@
-import { Tabs as AntdTabs } from "antd";
+import { default as AntdTabs } from "antd/es/tabs";
 import { GreyTextColor, TabActiveColor } from "constants/style";
 import { ReactNode } from "react";
 import styled from "styled-components";
diff --git a/client/packages/lowcoder/src/components/TextArea.tsx b/client/packages/lowcoder/src/components/TextArea.tsx
index b2d9333623..e9c5800fc6 100644
--- a/client/packages/lowcoder/src/components/TextArea.tsx
+++ b/client/packages/lowcoder/src/components/TextArea.tsx
@@ -1,13 +1,11 @@
 import styled from "styled-components";
-import { Input as AntdInput } from "antd";
+import { default as AntdTextArea, TextAreaRef, TextAreaProps as AntdTextAreaProps } from "antd/es/input/TextArea";
 import { ChangeEvent, useEffect, useRef, useState } from "react";
 import _ from "lodash";
 import React from "react";
-import { TextAreaProps as AntdTextAreaProps } from "antd/lib/input";
-import { TextAreaRef } from "antd/lib/input/TextArea";
 import { INPUT_DEFAULT_ONCHANGE_DEBOUNCE } from "constants/perf";
 
-const StyledTextArea = styled(AntdInput.TextArea)``;
+const StyledTextArea = styled(AntdTextArea)``;
 
 export interface TextAreaProps extends AntdTextAreaProps {
   debounce?: number;
diff --git a/client/packages/lowcoder/src/components/TypographyText.tsx b/client/packages/lowcoder/src/components/TypographyText.tsx
index a18b338db8..7bf1568593 100644
--- a/client/packages/lowcoder/src/components/TypographyText.tsx
+++ b/client/packages/lowcoder/src/components/TypographyText.tsx
@@ -1,8 +1,8 @@
-import { Typography } from "antd";
+import { default as AntdTypographyText } from "antd/es/typography/Text";
 import React from "react";
 import styled from "styled-components";
 
-const AntdTypographyText = styled(Typography.Text)`
+const StyledTypographyText = styled(AntdTypographyText)`
   font-size: 14px;
   color: #333333;
   line-height: 14px;
@@ -10,7 +10,7 @@ const AntdTypographyText = styled(Typography.Text)`
   text-overflow: ellipsis;
   display: block;
 
-  :is(.ant-typography-edit-content) {
+  &:is(.ant-typography-edit-content) {
     color: red;
     padding: unset;
     margin: unset !important;
@@ -33,7 +33,7 @@ const AntdTypographyText = styled(Typography.Text)`
     color: #333333;
     line-height: 14px;
 
-    ::-webkit-scrollbar {
+    &::-webkit-scrollbar {
       display: none;
     }
   }
@@ -44,7 +44,7 @@ export const TypographyText = (props: {
   editing: boolean;
   onChange: (value: string) => void;
 }) => (
-  <AntdTypographyText
+  <StyledTypographyText
     title={props.value}
     ellipsis={true}
     editable={{
@@ -57,5 +57,5 @@ export const TypographyText = (props: {
     }}
   >
     {props.value}
-  </AntdTypographyText>
+  </StyledTypographyText>
 );
diff --git a/client/packages/lowcoder/src/components/layout/Header.tsx b/client/packages/lowcoder/src/components/layout/Header.tsx
index c3ca094c39..b704eef88c 100644
--- a/client/packages/lowcoder/src/components/layout/Header.tsx
+++ b/client/packages/lowcoder/src/components/layout/Header.tsx
@@ -9,11 +9,11 @@ const HeaderWrapper = styled.header<IHeaderProps>`
   height: ${TopHeaderHeight};
   background-color: #2c2c2c;
   /* filter: drop-shadow(0px 1px 0px #ebebeb); */
-  padding: ${(props) => (props.isEditViewPreview ? "8px 24px 8px 8px" : "8px 24px")};
+  padding: ${(props) => (props.$isEditViewPreview ? "8px 24px 8px 8px" : "8px 24px")};
   justify-content: space-between;
 
   > div:nth-of-type(1) svg {
-    max-width: ${(props) => props.isEditViewPreview && "24px"};
+    max-width: ${(props) => props.$isEditViewPreview && "24px"};
   }
 `;
 
@@ -39,7 +39,7 @@ export interface IHeaderProps {
   headerStart?: ReactNode;
   headerMiddle?: ReactNode;
   headerEnd?: ReactNode;
-  isEditViewPreview?: boolean;
+  $isEditViewPreview?: boolean;
 }
 
 export default function Header(props: IHeaderProps) {
@@ -49,7 +49,7 @@ export default function Header(props: IHeaderProps) {
   return (
     <HeaderWrapper
       className={CNSiteHeader}
-      isEditViewPreview={isEditViewPreview}
+      $isEditViewPreview={isEditViewPreview}
       style={props.style}
     >
       <HeaderStart>{headerStart}</HeaderStart>
diff --git a/client/packages/lowcoder/src/components/layout/Layout.tsx b/client/packages/lowcoder/src/components/layout/Layout.tsx
index 36304606e8..bb0d041159 100644
--- a/client/packages/lowcoder/src/components/layout/Layout.tsx
+++ b/client/packages/lowcoder/src/components/layout/Layout.tsx
@@ -1,5 +1,5 @@
 import { Route, Switch } from "react-router-dom";
-import { Layout as AntdLayout } from "antd";
+import { default as AntdLayout } from "antd/es/layout";
 import { AppHeader } from "pages/common/header";
 import * as React from "react";
 import { ReactElement } from "react";
@@ -15,7 +15,7 @@ type LayoutProps = {
 };
 
 const SideBarV2 = styled(SideBar)`
-  background-color: #f7f9fc;
+  background: #f7f9fc !important;
   padding: 28px 10px;
   border-right: 1px solid #ebebeb;
 
@@ -24,7 +24,7 @@ const SideBarV2 = styled(SideBar)`
     display: block;
     width: 204px;
     height: 1px;
-    background-color: #ebebeb;
+    background: #ebebeb !important;
     margin: 0 auto 4px;
   }
 `;
diff --git a/client/packages/lowcoder/src/components/layout/MainContent.tsx b/client/packages/lowcoder/src/components/layout/MainContent.tsx
index d7cc7666e5..c83a0ec92f 100644
--- a/client/packages/lowcoder/src/components/layout/MainContent.tsx
+++ b/client/packages/lowcoder/src/components/layout/MainContent.tsx
@@ -1,8 +1,10 @@
-import { Layout } from "antd";
+import { default as Layout } from "antd/es/layout";
 import { TopHeaderHeight } from "constants/style";
 import styled from "styled-components";
 
-const MainContent = styled(Layout.Content)`
+const { Content } = Layout;
+
+const MainContent = styled((props: any) => <Content {...props} />)`
   height: calc(100vh - ${TopHeaderHeight});
   /* display: flex; */
   overflow: auto;
diff --git a/client/packages/lowcoder/src/components/layout/SideBar.tsx b/client/packages/lowcoder/src/components/layout/SideBar.tsx
index 84f4d346e2..492df7d282 100644
--- a/client/packages/lowcoder/src/components/layout/SideBar.tsx
+++ b/client/packages/lowcoder/src/components/layout/SideBar.tsx
@@ -1,8 +1,8 @@
-import { Layout, SiderProps } from "antd";
+import { default as LayoutSider, SiderProps } from "antd/es/layout/Sider";
 import { TopHeaderHeight } from "constants/style";
 import styled from "styled-components";
 
-const Sider = styled(Layout.Sider)`
+const Sider = styled(LayoutSider)`
   height: calc(100vh - ${TopHeaderHeight});
   background: #f9f9fa;
   padding: 0 24px 0 24px;
diff --git a/client/packages/lowcoder/src/components/layout/SideBarItem.tsx b/client/packages/lowcoder/src/components/layout/SideBarItem.tsx
index 7b7209b090..655c01257c 100644
--- a/client/packages/lowcoder/src/components/layout/SideBarItem.tsx
+++ b/client/packages/lowcoder/src/components/layout/SideBarItem.tsx
@@ -6,21 +6,21 @@ import { useLocation } from "react-router-dom";
 
 type SideBarSize = "medium" | "small";
 
-const Wrapper = styled.div<{ size?: SideBarSize; selected?: boolean }>`
+const Wrapper = styled.div<{ $size?: SideBarSize; $selected?: boolean }>`
   width: 100%;
-  height: ${(props) => (props.size === "small" ? "36px" : "44px")};
+  height: ${(props) => (props.$size === "small" ? "36px" : "44px")};
   border-radius: 4px;
   display: flex;
   align-items: center;
   padding: 0 8px 0 26px;
   cursor: pointer;
 
-  :hover {
-    background: ${(props) => (props.selected ? "#ebf0f7" : "#efeff1")};
+  &:hover {
+    background: ${(props) => (props.$selected ? "#ebf0f7" : "#efeff1")};
   }
 
   ${(props) =>
-    props.selected &&
+    props.$selected &&
     css`
       color: #4965f2;
       background: #ebf0f7;
@@ -35,8 +35,8 @@ export const SideBarItem = (props: SideBarItemProps) => {
     <Wrapper
       style={props.style}
       className={CNSidebarItem}
-      size={props.size}
-      selected={props.selected}
+      $size={props.size}
+      $selected={props.selected}
       onClick={() => props.onClick?.(currentPath)}
     >
       {Icon && <Icon selected={props.selected} style={{ marginRight: "8px" }} />}
diff --git a/client/packages/lowcoder/src/components/resultPanel/BottomResultPanel.tsx b/client/packages/lowcoder/src/components/resultPanel/BottomResultPanel.tsx
index 2a15600c92..36e0a64fd3 100644
--- a/client/packages/lowcoder/src/components/resultPanel/BottomResultPanel.tsx
+++ b/client/packages/lowcoder/src/components/resultPanel/BottomResultPanel.tsx
@@ -6,9 +6,9 @@ import { EditorContext } from "../../comps/editorState";
 import { Layers } from "constants/Layers";
 import { HeaderWrapper, useResultPanel } from "./index";
 
-const Wrapper = styled.div<{ bottom?: number }>`
+const Wrapper = styled.div<{ $bottom?: number }>`
   right: calc(313px + 4px); // FIXME: don't rely on the width of the right panel
-  bottom: ${(props) => (props.bottom ? props.bottom + 4 + "px" : 285 + 4 + "px")};
+  bottom: ${(props) => (props.$bottom ? props.$bottom + 4 + "px" : 285 + 4 + "px")};
   position: fixed;
   z-index: ${Layers.queryResultPanel};
 
@@ -72,7 +72,7 @@ export const BottomResultPanel = (props: BottomResultPanelProps) => {
         });
       }}
     >
-      <Wrapper bottom={bottom} ref={draggableRef}>
+      <Wrapper $bottom={bottom} ref={draggableRef}>
         <HeaderWrapper
           onMouseOver={() => setUnDraggable(false)}
           onMouseOut={() => setUnDraggable(true)}
diff --git a/client/packages/lowcoder/src/components/resultPanel/index.tsx b/client/packages/lowcoder/src/components/resultPanel/index.tsx
index 12161e3a6e..69c405228c 100644
--- a/client/packages/lowcoder/src/components/resultPanel/index.tsx
+++ b/client/packages/lowcoder/src/components/resultPanel/index.tsx
@@ -6,7 +6,7 @@ import { isArray, isObject, isObjectLike, isPlainObject } from "lodash";
 import ReactJson from "react-json-view";
 import { trans } from "../../i18n";
 import { DarkActiveTextColor, GreyTextColor } from "../../constants/style";
-import { Table as AntdTable } from "antd";
+import { default as AntdTable } from "antd/es/table";
 import { Switch } from "components/Switch";
 import { CloseIcon, ErrorIcon, SuccessIcon } from "icons";
 
@@ -57,7 +57,7 @@ const CloseIconWrapper = styled.div`
 
   color: ${GreyTextColor};
 
-  :hover {
+  &:hover {
     color: ${DarkActiveTextColor};
   }
 `;
diff --git a/client/packages/lowcoder/src/components/table/columnTypeView.tsx b/client/packages/lowcoder/src/components/table/columnTypeView.tsx
index bf50fac8cd..645c0764ee 100644
--- a/client/packages/lowcoder/src/components/table/columnTypeView.tsx
+++ b/client/packages/lowcoder/src/components/table/columnTypeView.tsx
@@ -2,9 +2,9 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
 import styled from "styled-components";
 
 const ColumnTypeViewWrapper = styled.div<{
-  textOverflow?: boolean
+  $textOverflow?: boolean
 }>`
-  ${props => !props.textOverflow && `
+  ${props => !props.$textOverflow && `
     div {
       overflow: hidden;
       white-space: nowrap;
@@ -15,33 +15,33 @@ const ColumnTypeViewWrapper = styled.div<{
 `;
 
 const ColumnTypeHoverView = styled.div<{
-  adjustLeft?: number;
-  adjustTop?: number;
-  adjustWidth?: number;
-  adjustHeight?: number;
-  minWidth?: number;
-  padding: string;
-  visible: boolean;
+  $adjustLeft?: number;
+  $adjustTop?: number;
+  $adjustWidth?: number;
+  $adjustHeight?: number;
+  $minWidth?: number;
+  $padding: string;
+  $visible: boolean;
 }>`
   position: absolute;
-  height: ${(props) => (props.adjustHeight ? `${props.adjustHeight}px` : "max-content")};
-  width: ${(props) => (props.adjustWidth ? `${props.adjustWidth}px` : "max-content")};
-  visibility: ${(props) => (props.visible ? "visible" : "hidden")};
-  min-width: ${(props) => (props.minWidth ? `${props.minWidth}px` : "unset")};
+  height: ${(props) => (props.$adjustHeight ? `${props.$adjustHeight}px` : "max-content")};
+  width: ${(props) => (props.$adjustWidth ? `${props.$adjustWidth}px` : "max-content")};
+  visibility: ${(props) => (props.$visible ? "visible" : "hidden")};
+  min-width: ${(props) => (props.$minWidth ? `${props.$minWidth}px` : "unset")};
   max-height: 150px;
   max-width: 300px;
   overflow: auto;
   background: inherit;
   z-index: 3;
-  padding: ${(props) => props.padding};
-  top: ${(props) => `${props.adjustTop || 0}px`};
-  left: ${(props) => `${props.adjustLeft || 0}px`};
+  padding: ${(props) => props.$padding};
+  top: ${(props) => `${props.$adjustTop || 0}px`};
+  left: ${(props) => `${props.$adjustLeft || 0}px`};
 
-  ::-webkit-scrollbar {
+  &::-webkit-scrollbar {
     width: 16px;
   }
 
-  ::-webkit-scrollbar-thumb {
+  &::-webkit-scrollbar-thumb {
     border: 5px solid transparent;
     background-clip: content-box;
     border-radius: 9999px;
@@ -49,7 +49,7 @@ const ColumnTypeHoverView = styled.div<{
     min-height: 30px;
   }
 
-  ::-webkit-scrollbar-thumb:hover {
+  &::-webkit-scrollbar-thumb:hover {
     background-color: rgba(139, 143, 163, 0.5);
   }
 `;
@@ -168,7 +168,7 @@ export default function ColumnTypeView(props: {
     <>
       <ColumnTypeViewWrapper
         ref={wrapperRef}
-        textOverflow={props.textOverflow}
+        $textOverflow={props.textOverflow}
         onMouseEnter={() => {
           delayMouseEnter();
         }}
@@ -182,13 +182,13 @@ export default function ColumnTypeView(props: {
       {isHover && hasOverflow && wrapperRef.current && !props.textOverflow && (
         <ColumnTypeHoverView
           ref={hoverViewRef}
-          visible={adjustedPosition.done}
-          minWidth={wrapperRef.current.offsetParent?.clientWidth}
-          adjustWidth={adjustedPosition.width}
-          adjustHeight={adjustedPosition.height}
-          adjustLeft={adjustedPosition.left}
-          adjustTop={adjustedPosition.top}
-          padding={`${wrapperRef.current.offsetTop}px ${wrapperRef.current.offsetLeft}px`}
+          $visible={adjustedPosition.done}
+          $minWidth={wrapperRef.current.offsetParent?.clientWidth}
+          $adjustWidth={adjustedPosition.width}
+          $adjustHeight={adjustedPosition.height}
+          $adjustLeft={adjustedPosition.left}
+          $adjustTop={adjustedPosition.top}
+          $padding={`${wrapperRef.current.offsetTop}px ${wrapperRef.current.offsetLeft}px`}
           onMouseEnter={() => {
             setIsHover(true);
           }}
diff --git a/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx b/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx
index feb65a8793..f984860baf 100644
--- a/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx
@@ -10,7 +10,7 @@ import { getDefaultTheme, getThemeList } from "redux/selectors/commonSettingSele
 import styled, { css } from "styled-components";
 import { trans } from "i18n";
 import { GreyTextColor } from "constants/style";
-import { Divider } from "antd";
+import { default as Divider } from "antd/es/divider";
 import { THEME_SETTING } from "constants/routesURL";
 import { CustomShortcutsComp } from "./customShortcutsComp";
 import { DEFAULT_THEMEID } from "comps/utils/themeUtil";
@@ -25,9 +25,9 @@ const ItemSpan = styled.span`
   max-width: 218px;
 `;
 
-const getTagStyle = (theme: ThemeDetail) => {
+const getTagStyle = (theme?: ThemeDetail) => {
   return css`
-    background-color: ${theme.canvas};
+    background-color: ${theme?.canvas};
     padding: 3px 4px;
     .left,
     .right {
@@ -35,17 +35,17 @@ const getTagStyle = (theme: ThemeDetail) => {
       border: 1px solid rgba(0, 0, 0, 0.1);
     }
     .left {
-      background-color: ${theme.primary};
+      background-color: ${theme?.primary};
       border-radius: 2px 0 0 2px;
     }
     .right {
-      background-color: ${theme.primarySurface};
+      background-color: ${theme?.primarySurface};
       border-radius: 0 2px 2px 0;
     }
   `;
 };
 
-export const TagDesc = styled.span<{ theme: ThemeDetail }>`
+export const TagDesc = styled.span<{ $theme?: ThemeDetail }>`
   display: inline-flex;
   margin-right: 8px;
   height: 22px;
@@ -53,7 +53,7 @@ export const TagDesc = styled.span<{ theme: ThemeDetail }>`
   border-radius: 2px;
   border: 1px solid rgba(0, 0, 0, 0.1);
   font-size: 13px;
-  ${(props) => getTagStyle(props.theme)}
+  ${(props) => getTagStyle(props.$theme)}
 `;
 
 export const DefaultSpan = styled.span`
@@ -168,7 +168,7 @@ function AppSettingsModal(props: ChildrenInstance) {
     const themeItem = themeList.find((theme) => theme.id === params.value);
     return (
       <ItemSpan>
-        <TagDesc theme={themeItem?.theme}>
+        <TagDesc $theme={themeItem?.theme}>
           <div className="left" />
           <div className="right" />
         </TagDesc>
diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
index a99d5eaee4..5c01bdc62d 100644
--- a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
@@ -33,12 +33,10 @@ import {
 import { trans } from "i18n";
 import { IconControl } from "comps/controls/iconControl";
 import { hasIcon } from "comps/utils";
-import {
-  ConfigProvider,
-  InputRef,
-  AutoComplete,
-  Input as AntInput,
-} from "antd";
+import { InputRef } from "antd/es/input";
+import { default as  AntInputSearch } from "antd/es/input/Search";
+import { default as ConfigProvider } from "antd/es/config-provider";
+import { default as AutoComplete } from "antd/es/auto-complete";
 import { RefControl } from "comps/controls/refControl";
 import {
   booleanExposingStateControl,
@@ -72,7 +70,7 @@ const InputStyle = styled(Input)<{ $style: InputLikeStyleType }>`
   `}
 `;
 
-const CustomStyledSearch = styled(AntInput.Search)<{ $style: InputLikeStyleType }>`
+const CustomStyledSearch = styled(AntInputSearch)<{ $style: InputLikeStyleType }>`
   ${(props) => css`
     padding: 0;
     input.ant-input {
diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteConstants.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteConstants.tsx
index eb375a170c..ce554cebf3 100644
--- a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteConstants.tsx
@@ -1,7 +1,7 @@
 import { trans } from "i18n";
 import { check } from "util/convertUtils";
 import { refMethods } from "comps/generators/withMethodExposing";
-import { InputRef } from "antd";
+import { InputRef } from "antd/es/input";
 
 
 import {
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
index 9d37ab6f18..86fa9cb2f6 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
@@ -1,4 +1,4 @@
-import { Button } from "antd";
+import { default as Button } from "antd/es/button";
 import { styleControl } from "comps/controls/styleControl";
 import { ButtonStyleType, ButtonStyle } from "comps/controls/styleControlConstants";
 import { migrateOldData } from "comps/generators/simpleGenerators";
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
index 9b153b83f6..f58b39bd6b 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
@@ -1,4 +1,6 @@
-import { Dropdown, Menu } from "antd";
+import { default as Menu } from "antd/es/menu";
+import { default as Dropdown } from "antd/es/dropdown";
+import { default as DropdownButton } from "antd/es/dropdown/dropdown-button";
 import { BoolControl } from "comps/controls/boolControl";
 import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
 import { ButtonStyleType } from "comps/controls/styleControlConstants";
@@ -21,7 +23,7 @@ import {
 } from "./buttonCompConstants";
 
 
-const DropdownButton = styled(Dropdown.Button)`
+const StyledDropdownButton = styled(DropdownButton)`
   width: 100%;
   .ant-btn-group {
     width: 100%;
@@ -103,7 +105,7 @@ const DropdownTmpComp = (function () {
             </Button100>
           </Dropdown>
         ) : (
-          <DropdownButton
+          <StyledDropdownButton
             disabled={props.disabled}
             dropdownRender={() => menu}
             onClick={() => props.onEvent("click")}
@@ -122,7 +124,7 @@ const DropdownTmpComp = (function () {
           >
             {/* Avoid button disappearing */}
             {!props.text || props.text?.length === 0 ? " " : props.text}
-          </DropdownButton>
+          </StyledDropdownButton>
         )}
       </ButtonCompWrapper>
     );
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
index d9dceec3b6..275b125b31 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
@@ -1,4 +1,4 @@
-import { Button } from "antd";
+import { default as Button } from "antd/es/button";
 import { ButtonCompWrapper, buttonRefMethods } from "comps/comps/buttonComp/buttonCompConstants";
 import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
 import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx
index 991bf807fc..a4b075f57b 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx
@@ -1,4 +1,7 @@
-import { Button, Dropdown, Menu, Skeleton } from "antd";
+import { default as Button } from "antd/es/button";
+import { default as Dropdown } from "antd/es/dropdown";
+import { default as Menu } from "antd/es/menu";
+import { default as Skeleton } from "antd/es/skeleton";
 import {
   Button100,
   ButtonCompWrapper,
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
index f9e4795813..4565f6a79f 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
@@ -27,17 +27,17 @@ const IconWrapper = styled.div`
 `;
 
 const ButtonCompWrapperStyled = styled(ButtonCompWrapper)<{
-  align: "left" | "center" | "right" | "stretch";
-  showBorder: boolean;
+  $align: "left" | "center" | "right" | "stretch";
+  $showBorder: boolean;
 }>`
   width: 100%;
   display: flex;
-  justify-content: ${(props) => props.align};
+  justify-content: ${(props) => props.$align};
 
   > button {
-    width: ${(props) => props.align !== "stretch" && "auto"};
-    border: ${(props) => !props.showBorder && "none"};
-    box-shadow: ${(props) => !props.showBorder && "none"};
+    width: ${(props) => props.$align !== "stretch" && "auto"};
+    border: ${(props) => !props.$showBorder && "none"};
+    box-shadow: ${(props) => !props.$showBorder && "none"};
   }
 `;
 
@@ -65,8 +65,8 @@ const ToggleTmpComp = (function () {
     return (
       <ButtonCompWrapperStyled
         disabled={props.disabled}
-        align={props.alignment}
-        showBorder={props.showBorder}
+        $align={props.alignment}
+        $showBorder={props.showBorder}
       >
         <Button100
           ref={props.viewRef}
diff --git a/client/packages/lowcoder/src/comps/comps/carouselComp.tsx b/client/packages/lowcoder/src/comps/comps/carouselComp.tsx
index e2e2e654e7..8e9c776d46 100644
--- a/client/packages/lowcoder/src/comps/comps/carouselComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/carouselComp.tsx
@@ -1,4 +1,4 @@
-import { Carousel } from "antd";
+import { default as Carousel } from "antd/es/carousel";
 import { Section, sectionNames } from "lowcoder-design";
 import { BoolControl } from "../controls/boolControl";
 import { UICompBuilder, withDefault } from "../generators";
@@ -20,16 +20,16 @@ import { EditorContext } from "comps/editorState";
 
 // TODO: dots at top position needs proper margin (should be the same as bottom position)
 
-const CarouselItem = styled.div<{ src: string }>`
-  background: ${(props) => props.src && `url(${props.src})`} no-repeat 50% 50%;
+const CarouselItem = styled.div<{ $src: string }>`
+  background: ${(props) => props.$src && `url(${props.$src})`} no-repeat 50% 50%;
   background-size: contain;
 `;
 
-const Container = styled.div<{ bg: string }>`
+const Container = styled.div<{ $bg: string }>`
   &,
   .ant-carousel {
     height: 100%;
-    background-color: ${(props) => props.bg};
+    background-color: ${(props) => props.$bg};
   }
 `;
 
@@ -56,7 +56,7 @@ let CarouselBasicComp = (function () {
       }
     };
     return (
-      <Container ref={containerRef} bg={props.style.background}>
+      <Container ref={containerRef} $bg={props.style.background}>
         <ReactResizeDetector onResize={onResize}>
           <Carousel
             dots={props.showDots}
@@ -66,7 +66,7 @@ let CarouselBasicComp = (function () {
           >
             {props.data.map((url, index) => (
               <div key={index}>
-                <CarouselItem src={url} style={{ height }} />
+                <CarouselItem $src={url} style={{ height }} />
               </div>
             ))}
           </Carousel>
diff --git a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx
index 609b8f70d7..e6721cebbd 100644
--- a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx
@@ -53,7 +53,11 @@ import {
   checkUserInfoData,
   checkMentionListData,
 } from "./commentConstants";
-import { Avatar, List, Button, Mentions, Tooltip } from "antd";
+import { default as Avatar } from "antd/es/avatar";
+import { default as List } from "antd/es/list";
+import { default as Button } from "antd/es/button";
+import { default as Mentions } from "antd/es/mentions";
+import { default as Tooltip } from "antd/es/tooltip";
 import VirtualList, { ListRef } from "rc-virtual-list";
 import _ from "lodash";
 import relativeTime from "dayjs/plugin/relativeTime";
diff --git a/client/packages/lowcoder/src/comps/comps/containerBase/containerCompBuilder.tsx b/client/packages/lowcoder/src/comps/comps/containerBase/containerCompBuilder.tsx
index cfb635157c..df858afcdd 100644
--- a/client/packages/lowcoder/src/comps/comps/containerBase/containerCompBuilder.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerBase/containerCompBuilder.tsx
@@ -12,6 +12,7 @@ import { NameGenerator } from "comps/utils";
 import { IContainer } from "./iContainer";
 import { SimpleContainerComp } from "./simpleContainerComp";
 import { CompTree, oldContainerParamsToNew } from "./utils";
+import { ReactNode } from "react";
 
 // type UiChildren<ChildrenCompMap extends Record<string, Comp<unknown>>> = ChildrenCompMap;
 
@@ -56,7 +57,7 @@ export class ContainerCompBuilder<
     }
     const newChildrenMap = containerChildren(this.childrenMap);
     const TmpComp = new UICompBuilder(newChildrenMap, (props, dispatch) => {
-      return this.viewFn(props as any, dispatch);
+      return this.viewFn(props as any, dispatch) as ReactNode;
     })
       .setPropertyViewFn(this.propertyViewFn as any)
       .build();
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx
index 81ae2efb7e..9445abd6e9 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx
@@ -278,9 +278,9 @@ type ViewPropsWithSelect = ContainerBaseProps & {
   dragSelectedComps?: Set<string>;
 };
 
-const ItemWrapper = styled.div<{ disableInteract?: boolean }>`
+const ItemWrapper = styled.div<{ $disableInteract?: boolean }>`
   height: 100%;
-  pointer-events: ${(props) => (props.disableInteract ? "none" : "unset")};
+  pointer-events: ${(props) => (props.$disableInteract ? "none" : "unset")};
 `;
 
 const GridItemWrapper = React.forwardRef(
@@ -291,7 +291,7 @@ const GridItemWrapper = React.forwardRef(
     const editorState = useContext(EditorContext);
     const { children, ...divProps } = props;
     return (
-      <ItemWrapper ref={ref} disableInteract={editorState.disableInteract} {...divProps}>
+      <ItemWrapper ref={ref} $disableInteract={editorState.disableInteract} {...divProps}>
         {props.children}
       </ItemWrapper>
     );
@@ -356,7 +356,9 @@ export function InnerGrid(props: ViewPropsWithSelect) {
 
   const dispatchPositionParamsTimerRef = useRef(0);
   const onResize = useCallback(
-    (width, height) => {
+    (width?: number, height?: number) => {
+      if(!width || !height) return;
+
       if (width !== positionParams.containerWidth) {
         const newPositionParams: PositionParams = {
           margin: [0, 0],
@@ -426,7 +428,10 @@ export function InnerGrid(props: ViewPropsWithSelect) {
   }, [props.items]);
 
   const clickItem = useCallback(
-    (e, name) => selectItem(e, name, canAddSelect, containerSelectNames, setSelectedNames),
+    (
+      e: React.MouseEvent<HTMLDivElement,
+      globalThis.MouseEvent>, name: string
+    ) => selectItem(e, name, canAddSelect, containerSelectNames, setSelectedNames),
     [canAddSelect, containerSelectNames, setSelectedNames]
   );
 
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/flowContainerView.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/flowContainerView.tsx
index 186e74bd30..5dce4e4d54 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/flowContainerView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/flowContainerView.tsx
@@ -9,10 +9,10 @@ import { ThemeContext } from "comps/utils/themeContext";
 import { defaultTheme } from "comps/controls/styleControlConstants";
 import styled from "styled-components";
 
-const FlowContainerWrapper = styled.div<{ bgColor: string; maxWidth?: number; minHeight: string }>`
-  background-color: ${(props) => props.bgColor};
-  max-width: ${(props) => props.maxWidth}px;
-  min-height: ${(props) => props.minHeight};
+const FlowContainerWrapper = styled.div<{ $bgColor: string; $maxWidth?: number; $minHeight: string }>`
+  background-color: ${(props) => props.$bgColor};
+  max-width: ${(props) => props.$maxWidth}px;
+  min-height: ${(props) => props.$minHeight};
   display: flex;
   flex-direction: column;
 
@@ -40,7 +40,7 @@ export function FlowContainerView(
   const bgColor = (useContext(ThemeContext)?.theme || defaultTheme).canvas;
 
   return (
-    <FlowContainerWrapper bgColor={bgColor} maxWidth={maxWidth} minHeight={minHeight}>
+    <FlowContainerWrapper $bgColor={bgColor} $maxWidth={maxWidth} $minHeight={minHeight}>
       {layouts.map((layout, index) => {
         const comp = props.items[layout.i];
         if (!comp) {
diff --git a/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx b/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx
index 85ebb19144..d35c916229 100644
--- a/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx
@@ -60,7 +60,8 @@ const defaultCode = `
   
   const ConnectedComponent = ${trans("customComp.sdkGlobalVarName")}.connect(MyCustomComponent);
   
-  const root = ReactDOM.createRoot(document.getElementById("root"));
+  const container = document.getElementById("root");
+  const root = createRoot(container);
   root.render(<ConnectedComponent />);
   
   </script>
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx
index b07a1af2c4..b349ae0615 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx
@@ -7,11 +7,13 @@ import React, { useContext } from "react";
 import styled from "styled-components";
 import type { DateTimeStyleType } from "../../controls/styleControlConstants";
 import { EditorContext } from "../../editorState";
-import { DatePicker } from "antd";
+import { default as DatePicker } from "antd/es/date-picker";
 import { hasIcon } from "comps/utils";
 import { omit } from "lodash";
 
-const RangePickerStyled = styled(DatePicker.RangePicker)<{ $style: DateTimeStyleType }>`
+const { RangePicker } = DatePicker;
+
+const RangePickerStyled = styled((props: any) => <RangePicker {...props} />)<{ $style: DateTimeStyleType }>`
   width: 100%;
   ${(props) => props.$style && getStyle(props.$style)}
 `;
@@ -46,8 +48,8 @@ export const DateRangeUIView = (props: DateRangeUIViewProps) => {
       {...omit(props, "onChange")}
       ref={props.viewRef as any}
       value={[props.start, props.end]}
-      disabledDate={(current) => disabledDate(current, props.minDate, props.maxDate)}
-      onCalendarChange={(time) => {
+      disabledDate={(current: any) => disabledDate(current, props.minDate, props.maxDate)}
+      onCalendarChange={(time: any) => {
         props.onChange(time?.[0], time?.[1]);
       }}
       inputReadOnly={checkIsMobile(editorState?.getAppSettings().maxWidth)}
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx
index ef8ef0840c..c00c05d615 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx
@@ -7,7 +7,7 @@ import React, { useContext } from "react";
 import styled from "styled-components";
 import type { DateTimeStyleType } from "../../controls/styleControlConstants";
 import { EditorContext } from "../../editorState";
-import { DatePicker } from "antd";
+import { default as DatePicker } from "antd/es/date-picker";
 
 const DatePickerStyled = styled(DatePicker)<{ $style: DateTimeStyleType }>`
   width: 100%;
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx
index 382d3733f0..219766f5ad 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx
@@ -48,8 +48,8 @@ import { dateRefMethods, disabledTime, handleDateChange } from "comps/comps/date
 import { TimeUIView } from "./timeUIView";
 import { TimeRangeUIView } from "comps/comps/dateComp/timeRangeUIView";
 import { RefControl } from "comps/controls/refControl";
-import { CommonPickerMethods } from "antd/lib/date-picker/generatePicker/interface";
-import { TimePickerProps } from "antd";
+import { CommonPickerMethods } from "antd/es/date-picker/generatePicker/interface";
+import { TimePickerProps } from "antd/es/time-picker";
 
 import { EditorContext } from "comps/editorState";
 
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/timeRangeUIView.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/timeRangeUIView.tsx
index 1a34ecf4e2..a4a36ae684 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/timeRangeUIView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/timeRangeUIView.tsx
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { TimePicker } from "antd";
+import { default as TimePicker } from "antd/es/time-picker";
 import { DateTimeStyleType } from "../../controls/styleControlConstants";
 import { getStyle } from "comps/comps/dateComp/dateCompUtil";
 import { useUIView } from "../../utils/useUIView";
@@ -11,7 +11,9 @@ import dayjs from "dayjs";
 import { hasIcon } from "comps/utils";
 import { omit } from "lodash";
 
-const RangePickerStyled = styled(TimePicker.RangePicker)<{ $style: DateTimeStyleType }>`
+const { RangePicker } = TimePicker;
+
+const RangePickerStyled = styled((props: any) => <RangePicker {...props} />)<{ $style: DateTimeStyleType }>`
   width: 100%;
   ${(props) => props.$style && getStyle(props.$style)}
 `;
@@ -46,7 +48,7 @@ export const TimeRangeUIView = (props: TimeRangeUIViewProps) => {
       value={[props.start, props.end]}
       order={true}
       hideDisabledOptions
-      onCalendarChange={(time) => {
+      onCalendarChange={(time: any) => {
         props.onChange(time?.[0], time?.[1]);
       }}
       inputReadOnly={checkIsMobile(editorState?.getAppSettings().maxWidth)}
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/timeUIView.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/timeUIView.tsx
index e7933da918..5c51d12ab2 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/timeUIView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/timeUIView.tsx
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { TimePicker } from "antd";
+import { default as TimePicker } from "antd/es/time-picker";
 import { DateTimeStyleType } from "../../controls/styleControlConstants";
 import { getStyle } from "comps/comps/dateComp/dateCompUtil";
 import { useUIView } from "../../utils/useUIView";
diff --git a/client/packages/lowcoder/src/comps/comps/dividerComp.tsx b/client/packages/lowcoder/src/comps/comps/dividerComp.tsx
index 5d5517be27..5df573c18a 100644
--- a/client/packages/lowcoder/src/comps/comps/dividerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dividerComp.tsx
@@ -1,4 +1,4 @@
-import { Divider, DividerProps } from "antd";
+import { default as Divider, DividerProps } from "antd/es/divider";
 import { StringControl } from "comps/controls/codeControl";
 import { BoolControl } from "comps/controls/boolControl";
 import { alignControl } from "comps/controls/alignControl";
diff --git a/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx b/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx
index e801a3a29f..52dbe74d07 100644
--- a/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx
@@ -1,6 +1,6 @@
-import { Button, Upload as AntdUpload } from "antd";
-import { UploadChangeParam } from "antd/lib/upload";
-import { UploadFile, UploadProps } from "antd/lib/upload/interface";
+import { default as Button } from "antd/es/button";
+import { default as AntdUpload } from "antd/es/upload";
+import { UploadFile, UploadProps, UploadChangeParam } from "antd/es/upload/interface";
 import { Buffer } from "buffer";
 import { darkenColor } from "components/colorSelect/colorUtils";
 import { Section, sectionNames } from "components/Section";
diff --git a/client/packages/lowcoder/src/comps/comps/formComp/createForm.tsx b/client/packages/lowcoder/src/comps/comps/formComp/createForm.tsx
index f8092a6eee..37fab64d4f 100644
--- a/client/packages/lowcoder/src/comps/comps/formComp/createForm.tsx
+++ b/client/packages/lowcoder/src/comps/comps/formComp/createForm.tsx
@@ -1,4 +1,6 @@
-import { Form, FormInstance, Select } from "antd";
+import { default as Form, FormInstance } from "antd/es/form";
+import { default as AntdFormItem } from "antd/es/form/FormItem";
+import { default as Select } from "antd/es/select";
 import {
   CheckBox,
   CustomModal,
@@ -29,7 +31,7 @@ import DataSourceIcon from "components/DataSourceIcon";
 import { messageInstance } from "lowcoder-design";
 
 const OpenDialogButton = styled.span`
-  :hover {
+  &:hover {
     cursor: pointer;
   }
 
@@ -75,7 +77,7 @@ const SelectOptionWrapper = styled.div`
   width: 100%;
   align-items: center;
 `;
-const FormItem = styled(Form.Item)`
+const FormItem = styled(AntdFormItem)`
   margin: 0;
   line-height: 13px;
   width: 100%;
@@ -115,11 +117,11 @@ const DataBody = styled.div`
   overflow: auto;
   height: 263px;
 
-  ::-webkit-scrollbar {
+  &::-webkit-scrollbar {
     width: 14px;
   }
 
-  ::-webkit-scrollbar-thumb {
+  &::-webkit-scrollbar-thumb {
     border: 4px solid transparent;
     background-clip: content-box;
     border-radius: 9999px;
@@ -140,23 +142,23 @@ const DataRow = styled.div<{ disabled?: boolean }>`
   color: ${(props) => (props.disabled ? "#B8B9BF" : "#333333")};
   line-height: 13px;
 `;
-const CellName = styled.div<{ head?: boolean }>`
+const CellName = styled.div<{ $head?: boolean }>`
   width: 176px;
-  padding-left: ${(props) => (props.head ? "16px" : "10px")};
+  padding-left: ${(props) => (props.$head ? "16px" : "10px")};
 `;
-const CellType = styled.div<{ head?: boolean }>`
+const CellType = styled.div<{ $head?: boolean }>`
   width: 128px;
   padding-left: 16px;
 `;
-const CellLabel = styled.div<{ head?: boolean }>`
+const CellLabel = styled.div<{ $head?: boolean }>`
   width: 104px;
-  padding-left: ${(props) => (props.head ? "16px" : "10px")};
+  padding-left: ${(props) => (props.$head ? "16px" : "10px")};
 `;
-const CellComp = styled.div<{ head?: boolean }>`
+const CellComp = styled.div<{ $head?: boolean }>`
   width: 126px;
   padding-left: 16px;
 `;
-const CellRequired = styled.div<{ head?: boolean }>`
+const CellRequired = styled.div<{ $head?: boolean }>`
   /* width: 52px; */
   padding-left: 16px;
 `;
@@ -183,7 +185,7 @@ const EditTextWrapper = styled.div<{ disabled?: boolean }>`
     color: ${(props) => (props.disabled ? "#B8B9BF" : "#333333")};
     line-height: 13px;
 
-    :hover {
+    &:hover {
       background-color: #f5f5f6;
     }
   }
@@ -209,7 +211,7 @@ const EditTextWrapper = styled.div<{ disabled?: boolean }>`
     background-color: #ffffff;
     border: 1px solid #315efb;
 
-    :focus {
+    &:focus {
       border-color: #315efb;
       box-shadow: 0 0 0 2px #d6e4ff;
     }
@@ -221,7 +223,7 @@ const CompFormItem = styled(FormItem)`
     color: #333333;
     line-height: 13px;
 
-    :hover {
+    &:hover {
       color: #315efb;
     }
   }
@@ -421,7 +423,10 @@ const CustomEditText = (props: {
 
 const DragHandle = SortableHandle(() => <StyledDragIcon />);
 
-const SortableItem = SortableElement((props: { item: RowItem; form: FormInstance }) => {
+const SortableItem = SortableElement<{
+  item: RowItem,
+  form: FormInstance,
+}>((props: { item: RowItem; form: FormInstance }) => {
   const { item, form } = props;
   const { columnName, columnType, compItems } = item;
   const disabled = !Form.useWatch(["columns", columnName, "enabled"], form);
@@ -474,12 +479,22 @@ const SortableItem = SortableElement((props: { item: RowItem; form: FormInstance
   );
 });
 
-const SortableBody = SortableContainer((props: { items: RowItem[]; form: FormInstance }) => {
+const SortableBody = SortableContainer<{
+  items: RowItem[],
+  form: FormInstance,
+}>((props: { items: RowItem[]; form: FormInstance }) => {
   return (
     <DataBody>
       {props.items.map((t, index) => {
         // Use the column name as the key here to ensure that the useState is correct when dragging
-        return <SortableItem key={t.columnName} index={index} item={t} form={props.form} />;
+        return (
+          <SortableItem
+            key={t.columnName}
+            index={index}
+            item={t}
+            form={props.form} 
+          />
+        );
       })}
     </DataBody>
   );
@@ -612,11 +627,11 @@ const CreateFormBody = (props: { onCreate: CreateHandler }) => {
         ) : (
           <>
             <HeaderRow>
-              <CellName head={true}>{trans("formComp.columnName")}</CellName>
-              <CellType head={true}>{trans("formComp.dataType")}</CellType>
-              <CellLabel head={true}>{trans("label")}</CellLabel>
-              <CellComp head={true}>{trans("formComp.compType")}</CellComp>
-              <CellRequired head={true}>{trans("formComp.required")}</CellRequired>
+              <CellName $head={true}>{trans("formComp.columnName")}</CellName>
+              <CellType $head={true}>{trans("formComp.dataType")}</CellType>
+              <CellLabel $head={true}>{trans("label")}</CellLabel>
+              <CellComp $head={true}>{trans("formComp.compType")}</CellComp>
+              <CellRequired $head={true}>{trans("formComp.required")}</CellRequired>
             </HeaderRow>
             <SortableBody
               items={items}
diff --git a/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx b/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx
index 28f0af0f41..61a02edeb4 100644
--- a/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx
@@ -40,7 +40,7 @@ import {
 import { TriContainer } from "../triContainerComp/triContainer";
 import { traverseCompTree } from "../containerBase/utils";
 import { IForm } from "./formDataConstants";
-import { Spin } from "antd";
+import { default as Spin } from "antd/es/spin";
 import { BoolControl } from "comps/controls/boolControl";
 import { BottomResTypeEnum } from "types/bottomRes";
 import { BoolCodeControl, JSONObjectControl } from "comps/controls/codeControl";
diff --git a/client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx b/client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx
index e8d0cee74b..9d59591a4a 100644
--- a/client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx
@@ -20,17 +20,17 @@ import { checkIsMobile } from "util/commonUtils";
 import { CanvasContainerID } from "constants/domLocators";
 import { CNRootContainer } from "constants/styleSelectors";
 
-const UICompContainer = styled.div<{ maxWidth?: number; readOnly?: boolean; bgColor: string }>`
+const UICompContainer = styled.div<{ $maxWidth?: number; readOnly?: boolean; $bgColor: string }>`
   height: 100%;
   margin: 0 auto;
-  max-width: ${(props) => props.maxWidth || 1600}px;
-  background-color: ${(props) => props.bgColor};
+  max-width: ${(props) => props.$maxWidth || 1600}px;
+  background-color: ${(props) => props.$bgColor};
 `;
 
 // modal/drawer container
-export const CanvasContainer = styled.div<{ maxWidth: number }>`
-  max-width: ${(props) => props.maxWidth}px;
-  min-width: min(${(props) => props.maxWidth}px, 718px);
+export const CanvasContainer = styled.div<{ $maxWidth: number }>`
+  max-width: ${(props) => props.$maxWidth}px;
+  min-width: min(${(props) => props.$maxWidth}px, 718px);
   margin: 0 auto;
   height: 100%;
   contain: paint;
@@ -106,10 +106,10 @@ export function CanvasView(props: ContainerBaseProps) {
   if (readOnly) {
     return (
       <UICompContainer
-        maxWidth={maxWidth}
+        $maxWidth={maxWidth}
         readOnly={true}
         className={CNRootContainer}
-        bgColor={bgColor}
+        $bgColor={bgColor}
       >
         <div>
           <Profiler id="Panel" onRender={profilerCallback}>
@@ -129,9 +129,9 @@ export function CanvasView(props: ContainerBaseProps) {
   }
 
   return (
-    <CanvasContainer maxWidth={maxWidth} id={CanvasContainerID}>
+    <CanvasContainer $maxWidth={maxWidth} id={CanvasContainerID}>
       <EditorContainer ref={scrollContainerRef}>
-        <UICompContainer maxWidth={maxWidth} className={CNRootContainer} bgColor={bgColor}>
+        <UICompContainer $maxWidth={maxWidth} className={CNRootContainer} $bgColor={bgColor}>
           <DragSelector
             onMouseDown={() => {
               setDragSelectedComp(EmptySet);
diff --git a/client/packages/lowcoder/src/comps/comps/imageComp.tsx b/client/packages/lowcoder/src/comps/comps/imageComp.tsx
index 3c9da34e14..81d6823429 100644
--- a/client/packages/lowcoder/src/comps/comps/imageComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/imageComp.tsx
@@ -26,7 +26,7 @@ import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
 import { BoolControl } from "comps/controls/boolControl";
-import { Image as AntImage } from "antd";
+import { default as AntImage } from "antd/es/image";
 import { DEFAULT_IMG_URL } from "util/stringUtils";
 
 import { useContext } from "react";
diff --git a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/dateWidget.tsx b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/dateWidget.tsx
index 954e6a94f3..94887ffa69 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/dateWidget.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/dateWidget.tsx
@@ -1,5 +1,5 @@
 import { WidgetProps } from "@rjsf/utils";
-import { DatePicker } from "antd";
+import { default as DatePicker } from "antd/es/date-picker";
 import dayjs from "dayjs";
 
 const DATE_PICKER_STYLE = {
diff --git a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/errorBoundary.tsx b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/errorBoundary.tsx
index db744eb7bf..fc20df2c50 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/errorBoundary.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/errorBoundary.tsx
@@ -1,4 +1,4 @@
-import { Button } from "antd";
+import { default as Button } from "antd/es/button";
 import { trans } from "i18n";
 import React from "react";
 
diff --git a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
index a3d46fe2a7..37d5e4198d 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
@@ -2,7 +2,7 @@ import { withTheme } from '@rjsf/core';
 import { RJSFValidationError, ErrorListProps, UISchemaSubmitButtonOptions } from "@rjsf/utils";
 import validator from "@rjsf/validator-ajv8";
 // import Ajv from "@rjsf/validator-ajv8";
-import { Button } from "antd";
+import { default as Button } from "antd/es/button";
 import { BoolControl } from "comps/controls/boolControl";
 import { jsonObjectExposingStateControl } from "comps/controls/codeStateControl";
 import { styleControl } from "comps/controls/styleControl";
@@ -320,11 +320,9 @@ let FormBasicComp = (function () {
           )}
 
           {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
-            <>
-              <Section name={sectionNames.style}>
-                {children.style.getPropertyView()}
-              </Section>
-            </>
+            <Section name={sectionNames.style}>
+              {children.style.getPropertyView()}
+            </Section>
           )}
 
         </>
diff --git a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx
index 38c1a8063e..9e65222818 100644
--- a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx
@@ -15,7 +15,7 @@ import { CanvasContainerID } from "constants/domLocators";
 import { EditorContainer, EmptyContent } from "pages/common/styledComponent";
 import { Layers } from "constants/Layers";
 import { ExternalEditorContext } from "util/context/ExternalEditorContext";
-import { Skeleton } from "antd";
+import { default as Skeleton } from "antd/es/skeleton";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 
 const TabBar = React.lazy(() => import("antd-mobile/es/components/tab-bar"));
@@ -43,7 +43,7 @@ const TabLayoutViewContainer = styled.div`
   height: calc(100% - ${TabBarHeight}px);
 `;
 
-const TabBarWrapper = styled.div<{ readOnly: boolean }>`
+const TabBarWrapper = styled.div<{ $readOnly: boolean }>`
   max-width: inherit;
   background: white;
   margin: 0 auto;
@@ -51,7 +51,7 @@ const TabBarWrapper = styled.div<{ readOnly: boolean }>`
   bottom: 0;
   left: 0;
   right: 0;
-  width: ${(props) => (props.readOnly ? "100%" : "418px")};
+  width: ${(props) => (props.$readOnly ? "100%" : "418px")};
   z-index: ${Layers.tabBar};
   padding-bottom: env(safe-area-inset-bottom, 0);
 
@@ -75,7 +75,7 @@ type TabBarProps = {
 function TabBarView(props: TabBarProps) {
   return (
     <Suspense fallback={<Skeleton />}>
-      <TabBarWrapper readOnly={props.readOnly}>
+      <TabBarWrapper $readOnly={props.readOnly}>
         <TabBar
           onChange={(key: string) => {
             if (key) {
@@ -201,7 +201,7 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => {
   }
 
   return (
-    <CanvasContainer maxWidth={MaxWidth} id={CanvasContainerID}>
+    <CanvasContainer $maxWidth={MaxWidth} id={CanvasContainerID}>
       <EditorContainer>{appView}</EditorContainer>
       {tabBarView}
     </CanvasContainer>
diff --git a/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx b/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx
index 368e459a97..35d13862d1 100644
--- a/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx
@@ -1,4 +1,7 @@
-import { Layout, Menu as AntdMenu, MenuProps, Segmented } from "antd";
+import { default as Layout } from "antd/es/layout";
+import { default as LayoutSider } from "antd/es/layout/Sider";
+import { default as AntdMenu, MenuProps } from "antd/es/menu";
+import { default as Segmented } from "antd/es/segmented";
 import MainContent from "components/layout/MainContent";
 import { LayoutMenuItemComp, LayoutMenuItemListComp } from "comps/comps/layout/layoutMenuItemComp";
 import { menuPropertyView } from "comps/comps/navComp/components/MenuItemList";
@@ -41,7 +44,7 @@ import {
 const DEFAULT_WIDTH = 240;
 type MenuItemStyleOptionValue = "normal" | "hover" | "active";
 
-const StyledSide = styled(Layout.Sider)`
+const StyledSide = styled(LayoutSider)`
   max-height: calc(100vh - ${TopHeaderHeight});
   overflow: auto;
 
diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx
index 10bcefa553..97319c64ed 100644
--- a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx
@@ -1,4 +1,4 @@
-import { Pagination } from "antd";
+import { default as Pagination } from "antd/es/pagination";
 import { EditorContext } from "comps/editorState";
 import { BackgroundColorContext } from "comps/utils/backgroundColorContext";
 import _ from "lodash";
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
index b77266fb55..1f7815a80e 100644
--- a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
+++ b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
@@ -33,11 +33,11 @@ import {
   ButtonStyleControl,
 } from "./videobuttonCompConstants";
 import { RefControl } from "comps/controls/refControl";
+import { AutoHeightControl } from "comps/controls/autoHeightControl";
 import {
-  AutoHeightControl,
   heightCalculator,
   widthCalculator,
-} from "@lowcoder-ee/index.sdk";
+} from "comps/controls/styleControlConstants";
 import { useEffect, useRef, useState } from "react";
 import ReactResizeDetector from "react-resize-detector";
 
@@ -176,21 +176,21 @@ function submitForm(editorState: EditorState, formName: string) {
   }
 }
 
-let ButtonTmpComp = (function () {
-  const childrenMap = {
-    iconSize: withDefault(StringControl, "20px"),
-    type: dropdownControl(typeOptions, ""),
-    autoHeight: withDefault(AutoHeightControl, "fixed"),
-    aspectRatio: withDefault(StringControl, "1 / 1"),
-    onEvent: ButtonEventHandlerControl,
-    disabled: BoolCodeControl,
-    loading: BoolCodeControl,
-    form: SelectFormControl,
-    prefixIcon: IconControl,
-    style: ButtonStyleControl,
-    viewRef: RefControl<HTMLElement>,
-  };
+const childrenMap = {
+  iconSize: withDefault(StringControl, "20px"),
+  type: dropdownControl(typeOptions, ""),
+  autoHeight: withDefault(AutoHeightControl, "fixed"),
+  aspectRatio: withDefault(StringControl, "1 / 1"),
+  onEvent: ButtonEventHandlerControl,
+  disabled: BoolCodeControl,
+  loading: BoolCodeControl,
+  form: SelectFormControl,
+  prefixIcon: IconControl,
+  style: ButtonStyleControl,
+  viewRef: RefControl<HTMLElement>,
+};
 
+let ButtonTmpComp = (function () {
   return new UICompBuilder(childrenMap, (props) => {
     const [width, setWidth] = useState(120);
     const [height, setHeight] = useState(0);
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx
index 80bf6e8c1f..6a9cd69803 100644
--- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx
@@ -1,5 +1,5 @@
 import { CloseOutlined } from "@ant-design/icons";
-import { Button } from "antd";
+import { default as Button } from "antd/es/button";
 import { ContainerCompBuilder } from "comps/comps/containerBase/containerCompBuilder";
 import {
   gridItemCompToGridItems,
@@ -170,7 +170,9 @@ const shareScreen = async (sharing: boolean) => {
 };
 const leaveChannel = async () => {
   //stops local sharing video
-  screenShareStream.close();
+  if (screenShareStream) {
+    screenShareStream.close();
+  }
 
   //stops local video streaming and puts off the camera
   if (videoTrack) {
@@ -221,7 +223,7 @@ const rtmInit = async (appId: any, uid: any, token: any, channel: any) => {
   await rtmChannelResponse.join();
 };
 
-export const meetingControllerChildren = {
+const meetingControllerChildren = {
   visible: withDefault(BooleanStateControl, "false"),
   onEvent: eventHandlerControl(EventOptions),
   width: StringControl,
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx
index 6c133ab6b7..68497e186c 100644
--- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx
@@ -1,16 +1,14 @@
-import { BoolCodeControl } from "comps/controls/codeControl";
+import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
 import { EditorContext } from "comps/editorState";
-import { withDefault } from "comps/generators";
+import { withDefault } from "comps/generators/simpleGenerators";
 import { UICompBuilder } from "comps/generators/uiCompBuilder";
 import ReactResizeDetector from "react-resize-detector";
-
 import {
   Section,
   sectionNames,
 } from "lowcoder-design";
 import { trans } from "i18n";
-
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import {
   CommonNameConfig,
   NameConfig,
@@ -19,22 +17,13 @@ import {
 import { ButtonStyleControl } from "./videobuttonCompConstants";
 import { RefControl } from "comps/controls/refControl";
 import { useEffect, useRef, useState } from "react";
-
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
 import { client } from "./videoMeetingControllerComp";
-
 import { IAgoraRTCRemoteUser } from "agora-rtc-sdk-ng";
-
-import {
-  MeetingEventHandlerControl,
-  StringControl,
-  StringStateControl,
-  hiddenPropertyView,
-  stringExposingStateControl,
-} from "@lowcoder-ee/index.sdk";
-import { BoolShareVideoControl } from "./meetingControlerUtils";
-
 import { useContext } from "react";
+import { MeetingEventHandlerControl } from "comps/controls/eventHandlerControl";
+import { StringStateControl, stringExposingStateControl } from "comps/controls/codeStateControl";
+import { hiddenPropertyView } from "comps/utils/propertyUtils";
 
 const VideoContainer = styled.video`
   height: 100%;
@@ -44,7 +33,7 @@ const VideoContainer = styled.video`
   justify-content: space-around;
 `;
 
-export const meetingStreamChildren = {
+const meetingStreamChildren = {
   autoHeight: withDefault(AutoHeightControl, "auto"),
   profilePadding: withDefault(StringControl, "0px"),
   profileBorderRadius: withDefault(StringControl, "0px"),
@@ -59,7 +48,7 @@ export const meetingStreamChildren = {
   noVideoText: stringExposingStateControl(trans("meeting.noVideo")),
 };
 
-let VideoCompBuilder = (function (props) {
+let VideoCompBuilder = (function () {
   return new UICompBuilder(meetingStreamChildren, (props) => {
     const videoRef = useRef<HTMLVideoElement>(null);
     const conRef = useRef<HTMLDivElement>(null);
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoSharingStreamComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoSharingStreamComp.tsx
index b7663327ee..192a09ed42 100644
--- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoSharingStreamComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoSharingStreamComp.tsx
@@ -1,4 +1,4 @@
-import { BoolCodeControl } from "comps/controls/codeControl";
+import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
 import { EditorContext } from "comps/editorState";
 import { withDefault } from "comps/generators";
 import { UICompBuilder } from "comps/generators/uiCompBuilder";
@@ -8,8 +8,7 @@ import {
   sectionNames,
 } from "lowcoder-design";
 import { trans } from "i18n";
-
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import {
   CommonNameConfig,
   NameConfig,
@@ -18,21 +17,13 @@ import {
 import { ButtonStyleControl } from "./videobuttonCompConstants";
 import { RefControl } from "comps/controls/refControl";
 import { useEffect, useRef, useState } from "react";
-
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
 import { client } from "./videoMeetingControllerComp";
-
 import { IAgoraRTCRemoteUser } from "agora-rtc-sdk-ng";
-
-import {
-  MeetingEventHandlerControl,
-  StringControl,
-  hiddenPropertyView,
-  stringExposingStateControl,
-} from "@lowcoder-ee/index.sdk";
-import { BoolShareVideoControl } from "./meetingControlerUtils";
-
 import { useContext } from "react";
+import { MeetingEventHandlerControl } from "comps/controls/eventHandlerControl";
+import { stringExposingStateControl } from "comps/controls/codeStateControl";
+import { hiddenPropertyView } from "comps/utils/propertyUtils";
 
 const VideoContainer = styled.video`
   height: 100%;
@@ -42,7 +33,7 @@ const VideoContainer = styled.video`
   justify-content: space-around;
 `;
 
-export const meetingStreamChildren = {
+const sharingStreamChildren = {
   autoHeight: withDefault(AutoHeightControl, "fixed"),
   profilePadding: withDefault(StringControl, "0px"),
   profileBorderRadius: withDefault(StringControl, "0px"),
@@ -56,8 +47,8 @@ export const meetingStreamChildren = {
   noVideoText: stringExposingStateControl(trans("meeting.noVideo")),
 };
 
-let SharingCompBuilder = (function (props) {
-  return new UICompBuilder(meetingStreamChildren, (props) => {
+let SharingCompBuilder = (function () {
+  return new UICompBuilder(sharingStreamChildren, (props) => {
     const videoRef = useRef<HTMLVideoElement>(null);
     const conRef = useRef<HTMLDivElement>(null);
     const [userId, setUserId] = useState();
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx
index 26da52f348..b0068495c1 100644
--- a/client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx
@@ -1,4 +1,4 @@
-import { Button } from "antd";
+import { default as Button } from "antd/es/button";
 import { styleControl } from "comps/controls/styleControl";
 import {
   ButtonStyleType,
@@ -32,8 +32,8 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
         margin: ${buttonStyle.margin};
         padding: ${buttonStyle.padding};
 
-        :hover,
-        :focus {
+        &:hover,
+        &:focus {
           color: ${buttonStyle.text};
           background-color: ${hoverColor};
           border-color: ${buttonStyle.border === buttonStyle.background
@@ -41,7 +41,7 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
             : buttonStyle.border};
         }
 
-        :active {
+        &:active {
           color: ${buttonStyle.text};
           background-color: ${activeColor};
           border-color: ${buttonStyle.border === buttonStyle.background
diff --git a/client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleContainerComp.tsx
index 61202f7f2e..e2a1f0bac6 100644
--- a/client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleContainerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleContainerComp.tsx
@@ -14,8 +14,8 @@ import {
   InnerGrid,
 } from "../containerComp/containerView";
 
-const StyledInnerGrid = styled(InnerGrid)<ContainerBaseProps & { bordered: boolean }>`
-  border: ${(props) => (!props.bordered ? "0px" : `1px solid ${BorderColor}`)};
+const StyledInnerGrid = styled(InnerGrid)<ContainerBaseProps & { $bordered: boolean }>`
+  border: ${(props) => (!props.$bordered ? "0px" : `1px solid ${BorderColor}`)};
   height: 100%;
 `;
 
@@ -36,7 +36,7 @@ function ModuleContainerView(props: ContainerBaseProps) {
       overflow="hidden"
       containerPadding={readOnly ? [0, 0] : [4, 4]}
       hintPlaceholder={HintPlaceHolder}
-      bordered={!readOnly}
+      $bordered={!readOnly}
       isDraggable={!readOnly}
       isDroppable={!readOnly}
       isSelectable={!readOnly}
diff --git a/client/packages/lowcoder/src/comps/comps/navComp/components/DraggableItem.tsx b/client/packages/lowcoder/src/comps/comps/navComp/components/DraggableItem.tsx
index 6e857c07a6..7a4c6ba1b3 100644
--- a/client/packages/lowcoder/src/comps/comps/navComp/components/DraggableItem.tsx
+++ b/client/packages/lowcoder/src/comps/comps/navComp/components/DraggableItem.tsx
@@ -3,7 +3,7 @@ import React, { Ref } from "react";
 import { HTMLAttributes, ReactNode } from "react";
 import styled from "styled-components";
 
-const Wrapper = styled.div<{ dragging: boolean; isOver: boolean; dropInAsSub: boolean }>`
+const Wrapper = styled.div<{ $dragging: boolean; $isOver: boolean; $dropInAsSub: boolean }>`
   position: relative;
   width: 100%;
   height: 30px;
@@ -14,15 +14,15 @@ const Wrapper = styled.div<{ dragging: boolean; isOver: boolean; dropInAsSub: bo
   padding: 0 8px;
   background-color: #ffffff;
   align-items: center;
-  opacity: ${(props) => (props.dragging ? "0.5" : 1)};
+  opacity: ${(props) => (props.$dragging ? "0.5" : 1)};
 
   &::after {
     content: "";
-    display: ${(props) => (props.isOver ? "block" : "none")};
+    display: ${(props) => (props.$isOver ? "block" : "none")};
     height: 4px;
     border-radius: 4px;
     position: absolute;
-    left: ${(props) => (props.dropInAsSub ? "15px" : "-1px")};
+    left: ${(props) => (props.$dropInAsSub ? "15px" : "-1px")};
     right: 0;
     background-color: #315efb;
     bottom: -5px;
@@ -93,7 +93,7 @@ function DraggableItem(props: IProps, ref: Ref<HTMLDivElement>) {
     ...divProps
   } = props;
   return (
-    <Wrapper isOver={isOver} dragging={dragging} dropInAsSub={dropInAsSub} ref={ref} {...divProps}>
+    <Wrapper $isOver={isOver} $dragging={dragging} $dropInAsSub={dropInAsSub} ref={ref} {...divProps}>
       <div className="draggable-handle-icon">
         <DragIcon {...dragListeners} />
       </div>
diff --git a/client/packages/lowcoder/src/comps/comps/navComp/components/DroppablePlaceHolder.tsx b/client/packages/lowcoder/src/comps/comps/navComp/components/DroppablePlaceHolder.tsx
index 4a890fd6f8..72c15cf854 100644
--- a/client/packages/lowcoder/src/comps/comps/navComp/components/DroppablePlaceHolder.tsx
+++ b/client/packages/lowcoder/src/comps/comps/navComp/components/DroppablePlaceHolder.tsx
@@ -8,7 +8,7 @@ interface IDroppablePlaceholderProps {
   targetListSize: number;
 }
 
-const PlaceHolderWrapper = styled.div<{ active: boolean }>`
+const PlaceHolderWrapper = styled.div<{ $active: boolean }>`
   position: absolute;
   width: 100%;
   top: -4px;
@@ -18,7 +18,7 @@ const PlaceHolderWrapper = styled.div<{ active: boolean }>`
   .position-line {
     height: 4px;
     border-radius: 4px;
-    background-color: ${(props) => (props.active ? "#315efb" : "transparent")};
+    background-color: ${(props) => (props.$active ? "#315efb" : "transparent")};
     width: 100%;
   }
 `;
@@ -36,7 +36,7 @@ export default function DroppablePlaceholder(props: IDroppablePlaceholderProps)
     data,
   });
   return (
-    <PlaceHolderWrapper active={isOver} ref={setDropNodeRef}>
+    <PlaceHolderWrapper $active={isOver} ref={setDropNodeRef}>
       <div className="position-line"></div>
     </PlaceHolderWrapper>
   );
diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
index eb80cced5b..fb6d4609b6 100644
--- a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
@@ -8,7 +8,8 @@ import { alignWithJustifyControl } from "comps/controls/alignControl";
 import { navListComp } from "./navItemComp";
 import { menuPropertyView } from "./components/MenuItemList";
 import { DownOutlined } from "@ant-design/icons";
-import { Dropdown, Menu, MenuProps } from "antd";
+import { default as Dropdown } from "antd/es/dropdown";
+import { default as Menu, MenuProps } from "antd/es/menu";
 import { migrateOldData } from "comps/generators/simpleGenerators";
 import { styleControl } from "comps/controls/styleControl";
 import { NavigationStyle } from "comps/controls/styleControlConstants";
@@ -19,39 +20,39 @@ import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 
 type IProps = {
-  justify: boolean;
-  bgColor: string;
-  borderColor: string;
+  $justify: boolean;
+  $bgColor: string;
+  $borderColor: string;
 };
 
-const Wrapper = styled("div")<Pick<IProps, "bgColor" | "borderColor">>`
+const Wrapper = styled("div")<Pick<IProps, "$bgColor" | "$borderColor">>`
   height: 100%;
   border-radius: 2px;
   box-sizing: border-box;
-  border: 1px solid ${(props) => props.borderColor};
-  background-color: ${(props) => props.bgColor};
+  border: 1px solid ${(props) => props.$borderColor};
+  background-color: ${(props) => props.$bgColor};
 `;
 
-const NavInner = styled("div")<Pick<IProps, "justify">>`
+const NavInner = styled("div")<Pick<IProps, "$justify">>`
   margin: 0 -16px;
   height: 100%;
   display: flex;
-  justify-content: ${(props) => (props.justify ? "space-between" : "left")};
+  justify-content: ${(props) => (props.$justify ? "space-between" : "left")};
 `;
 
 const Item = styled.div<{
-  active: boolean;
-  activeColor: string;
-  color: string;
+  $active: boolean;
+  $activeColor: string;
+  $color: string;
 }>`
   height: 30px;
   line-height: 30px;
   padding: 0 16px;
-  color: ${(props) => (props.active ? props.activeColor : props.color)};
+  color: ${(props) => (props.$active ? props.$activeColor : props.$color)};
   font-weight: 500;
 
   &:hover {
-    color: ${(props) => props.activeColor};
+    color: ${(props) => props.$activeColor};
     cursor: pointer;
   }
 
@@ -71,11 +72,11 @@ const LogoWrapper = styled.div`
   }
 `;
 
-const ItemList = styled.div<{ align: string }>`
+const ItemList = styled.div<{ $align: string }>`
   flex: 1;
   display: flex;
   flex-direction: row;
-  justify-content: ${(props) => props.align};
+  justify-content: ${(props) => props.$align};
 `;
 
 const StyledMenu = styled(Menu)<MenuProps>`
@@ -140,9 +141,9 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
         const item = (
           <Item
             key={idx}
-            active={active || subMenuSelectedKeys.length > 0}
-            color={props.style.text}
-            activeColor={props.style.accent}
+            $active={active || subMenuSelectedKeys.length > 0}
+            $color={props.style.text}
+            $activeColor={props.style.accent}
             onClick={() => onEvent("click")}
           >
             {label}
@@ -177,14 +178,14 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
   const justify = props.horizontalAlignment === "justify";
 
   return (
-    <Wrapper borderColor={props.style.border} bgColor={props.style.background}>
-      <NavInner justify={justify}>
+    <Wrapper $borderColor={props.style.border} $bgColor={props.style.background}>
+      <NavInner $justify={justify}>
         {props.logoUrl && (
           <LogoWrapper onClick={() => props.logoEvent("click")}>
             <img src={props.logoUrl} alt="LOGO" />
           </LogoWrapper>
         )}
-        {!justify ? <ItemList align={props.horizontalAlignment}>{items}</ItemList> : items}
+        {!justify ? <ItemList $align={props.horizontalAlignment}>{items}</ItemList> : items}
       </NavInner>
     </Wrapper>
   );
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
index 03d66d4dfb..f1c917521b 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
@@ -1,4 +1,4 @@
-import { InputNumber as AntdInputNumber } from "antd";
+import { default as AntdInputNumber } from "antd/es/input-number";
 import {
   BoolCodeControl,
   codeControl,
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
index dddfe0cccc..5e7760acb2 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
@@ -7,7 +7,7 @@ import { RecordConstructorToComp } from "lowcoder-core";
 import { styleControl } from "comps/controls/styleControl";
 import { SliderStyle, SliderStyleType } from "comps/controls/styleControlConstants";
 import styled, { css } from "styled-components";
-import { Slider } from "antd";
+import { default as Slider } from "antd/es/slider";
 import { darkenColor, fadeColor } from "lowcoder-design";
 import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
 import { IconControl } from "comps/controls/iconControl";
diff --git a/client/packages/lowcoder/src/comps/comps/preLoadComp.tsx b/client/packages/lowcoder/src/comps/comps/preLoadComp.tsx
index 0783ec3850..e8f4902c45 100644
--- a/client/packages/lowcoder/src/comps/comps/preLoadComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/preLoadComp.tsx
@@ -291,7 +291,7 @@ const AddJSLibraryButton = styled.div`
     stroke: #8b8fa3;
   }
 
-  :hover {
+  &:hover {
     g g {
       stroke: #222222;
     }
diff --git a/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx b/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx
index a62cedc659..d7b29f6336 100644
--- a/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx
@@ -1,4 +1,4 @@
-import { Progress } from "antd";
+import { default as Progress } from "antd/es/progress";
 import { styleControl } from "comps/controls/styleControl";
 import { ProgressStyle, ProgressStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import styled, { css } from "styled-components";
diff --git a/client/packages/lowcoder/src/comps/comps/progressComp.tsx b/client/packages/lowcoder/src/comps/comps/progressComp.tsx
index c4df44ae2d..1acf7f2d6a 100644
--- a/client/packages/lowcoder/src/comps/comps/progressComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/progressComp.tsx
@@ -1,4 +1,4 @@
-import { Progress } from "antd";
+import { default as Progress } from "antd/es/progress";
 import { Section, sectionNames } from "lowcoder-design";
 import { numberExposingStateControl } from "../controls/codeStateControl";
 import { BoolControl } from "../controls/boolControl";
diff --git a/client/packages/lowcoder/src/comps/comps/queryLibrary/inputListComp.tsx b/client/packages/lowcoder/src/comps/comps/queryLibrary/inputListComp.tsx
index 7506a2158b..5d0d0233b0 100644
--- a/client/packages/lowcoder/src/comps/comps/queryLibrary/inputListComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/queryLibrary/inputListComp.tsx
@@ -100,7 +100,7 @@ const PopoverIcon = styled(PointIcon)`
     fill: #8b8fa3;
   }
 
-  :hover {
+  &:hover {
     background: #eef0f3;
     border-radius: 4px;
     cursor: pointer;
@@ -121,20 +121,20 @@ const AddButton = styled(TacoButton)`
   align-items: center;
   box-shadow: none;
 
-  :hover {
+  &:hover {
     color: #315efb;
     background-color: #f5faff;
     border-color: #c2d6ff;
   }
 
-  :focus {
+  &:focus {
     color: #315efb;
     background-color: #f5faff;
     border-color: #c2d6ff;
   }
 
-  :disabled,
-  :disabled:hover {
+  &:disabled,
+  &:disabled:hover {
     background: #f9fbff;
     border: 1px solid #dee9ff;
     border-radius: 4px;
diff --git a/client/packages/lowcoder/src/comps/comps/queryLibrary/queryLibraryComp.tsx b/client/packages/lowcoder/src/comps/comps/queryLibrary/queryLibraryComp.tsx
index 60d9a6bd5c..7af0db9373 100644
--- a/client/packages/lowcoder/src/comps/comps/queryLibrary/queryLibraryComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/queryLibrary/queryLibraryComp.tsx
@@ -218,7 +218,7 @@ const PopoverButton = styled.div`
   border: 1px solid #d7d9e0;
   border-radius: 4px;
 
-  :hover {
+  &:hover {
     background-color: #f5f5f6;
     border: 1px solid #d7d9e0;
 
@@ -239,19 +239,19 @@ const RunButton = styled(TacoButton)`
   height: 32px;
   border: none;
 
-  :hover {
+  &:hover {
     padding: 0;
     border: none;
     box-shadow: none;
   }
 
-  :focus {
+  &:focus {
     padding: 0;
     border: none;
     box-shadow: none;
   }
 
-  :after {
+  &:after {
     content: "";
   }
 `;
diff --git a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx
index c003746aec..992c45f742 100644
--- a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx
@@ -1,4 +1,4 @@
-import { Rate } from "antd";
+import { default as Rate } from "antd/es/rate";
 import styled, { css } from "styled-components";
 import { Section, sectionNames } from "lowcoder-design";
 import { NumberControl, BoolCodeControl } from "../controls/codeControl";
diff --git a/client/packages/lowcoder/src/comps/comps/remoteComp/remoteComp.tsx b/client/packages/lowcoder/src/comps/comps/remoteComp/remoteComp.tsx
index 0abcde27fe..be0f9aae2f 100644
--- a/client/packages/lowcoder/src/comps/comps/remoteComp/remoteComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/remoteComp/remoteComp.tsx
@@ -1,4 +1,4 @@
-import { Skeleton } from "antd";
+import { default as Skeleton } from "antd/es/skeleton";
 import { simpleMultiComp } from "comps/generators";
 import { withExposingConfigs } from "comps/generators/withExposing";
 import { GreyTextColor } from "constants/style";
diff --git a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
index 324aa823fa..8a9ce63125 100644
--- a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
@@ -1,4 +1,5 @@
-import { Row, Col } from "antd";
+import { default as Row } from "antd/es/row";
+import { default as Col } from "antd/es/col";
 import { JSONObject, JSONValue } from "util/jsonTypes";
 import { CompAction, CompActionTypes, deleteCompAction, wrapChildAction } from "lowcoder-core";
 import { DispatchType, RecordConstructorToView, wrapDispatch } from "lowcoder-core";
diff --git a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx
index adb6788f3e..f6e0403147 100644
--- a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx
@@ -20,7 +20,7 @@ import {
 } from "comps/utils/propertyUtils";
 import _ from "lodash";
 import { trans } from "i18n";
-import { Skeleton } from "antd";
+import { default as Skeleton } from "antd/es/skeleton";
 import { styleControl } from "comps/controls/styleControl";
 import { RichTextEditorStyle, RichTextEditorStyleType } from "comps/controls/styleControlConstants";
 
@@ -124,7 +124,7 @@ const hideToolbarStyle = (style: RichTextEditorStyleType) => css`
 `;
 
 interface Props {
-  hideToolbar: boolean;
+  $hideToolbar: boolean;
   $style: RichTextEditorStyleType;
 }
 
@@ -134,7 +134,7 @@ const AutoHeightReactQuill = styled.div<Props>`
   & .ql-container .ql-editor {
     min-height: 125px;
   }
-  ${(props) => (props.hideToolbar ? hideToolbarStyle(props.$style) : "")};
+  ${(props) => (props.$hideToolbar ? hideToolbarStyle(props.$style) : "")};
 `;
 
 const FixHeightReactQuill = styled.div<Props>`
@@ -151,7 +151,7 @@ const FixHeightReactQuill = styled.div<Props>`
       overflow: auto;
     }
   }
-  ${(props) => (props.hideToolbar ? hideToolbarStyle(props.$style) : "")};
+  ${(props) => (props.$hideToolbar ? hideToolbarStyle(props.$style) : "")};
 `;
 
 const toolbarOptions = [
@@ -268,7 +268,7 @@ function RichTextEditor(props: IProps) {
       id={id}
       onClick={handleClickWrapper}
       ref={wrapperRef}
-      hideToolbar={props.hideToolbar}
+      $hideToolbar={props.hideToolbar}
       $style={props.$style}
     >
       <Suspense fallback={<Skeleton />}>
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx
index 26da1703ea..4c992874ac 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx
@@ -1,4 +1,4 @@
-import { Cascader } from "antd";
+import { default as Cascader } from "antd/es/cascader";
 import { CascaderStyleType } from "comps/controls/styleControlConstants";
 import { blurMethod, focusMethod } from "comps/utils/methodUtils";
 import { trans } from "i18n";
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
index 97bbab0781..8152980d56 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
@@ -1,4 +1,4 @@
-import { Checkbox } from "antd";
+import { default as AntdCheckboxGroup } from "antd/es/checkbox/Group";
 import { SelectInputOptionControl } from "comps/controls/optionsControl";
 import { BoolCodeControl } from "../../controls/codeControl";
 import { arrayStringExposingStateControl } from "../../controls/codeStateControl";
@@ -73,7 +73,7 @@ export const getStyle = (style: CheckboxStyleType) => {
   `;
 };
 
-const CheckboxGroup = styled(Checkbox.Group)<{
+const CheckboxGroup = styled(AntdCheckboxGroup)<{
   $style: CheckboxStyleType;
   $layout: ValueFromOption<typeof RadioLayoutOptions>;
 }>`
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
index 473d9c9f7a..e1bc7033ce 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
@@ -1,4 +1,4 @@
-import { Radio as AntdRadio } from "antd";
+import { default as AntdRadioGroup } from "antd/es/radio/group";
 import { RadioStyleType } from "comps/controls/styleControlConstants";
 import styled, { css } from "styled-components";
 import { UICompBuilder } from "../../generators";
@@ -52,7 +52,7 @@ const getStyle = (style: RadioStyleType) => {
   `;
 };
 
-const Radio = styled(AntdRadio.Group)<{
+const Radio = styled(AntdRadioGroup)<{
   $style: RadioStyleType;
   $layout: ValueFromOption<typeof RadioLayoutOptions>;
 }>`
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx
index b1ee2e2bb0..bf105982ae 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx
@@ -1,4 +1,4 @@
-import { Segmented as AntdSegmented } from "antd";
+import { default as AntdSegmented } from "antd/es/segmented";
 import { BoolCodeControl } from "comps/controls/codeControl";
 import { stringExposingStateControl } from "comps/controls/codeStateControl";
 import { ChangeEventHandlerControl } from "comps/controls/eventHandlerControl";
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
index d458c67e66..86493bf765 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
@@ -19,7 +19,7 @@ import {
 } from "lowcoder-design";
 import { SelectOptionControl } from "../../controls/optionsControl";
 import { SelectEventHandlerControl } from "../../controls/eventHandlerControl";
-import { Select as AntdSelect } from "antd";
+import { default as AntdSelect } from "antd/es/select";
 import { ControlParams } from "../../controls/controlParams";
 import { ReactNode } from "react";
 import styled, { css } from "styled-components";
@@ -144,7 +144,7 @@ const getDropdownStyle = (style: MultiSelectStyleType) => {
       margin: 0 8px;
       padding: 5px 8px;
 
-      :hover {
+      &:hover {
         background-color: rgb(242, 247, 252);
       }
 
diff --git a/client/packages/lowcoder/src/comps/comps/signatureComp.tsx b/client/packages/lowcoder/src/comps/comps/signatureComp.tsx
index 669d76bba3..8db3979157 100644
--- a/client/packages/lowcoder/src/comps/comps/signatureComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/signatureComp.tsx
@@ -1,5 +1,5 @@
 import { DeleteOutlined } from "@ant-design/icons";
-import { Skeleton } from "antd";
+import { default as Skeleton } from "antd/es/skeleton";
 import { BoolControl } from "comps/controls/boolControl";
 import { StringControl } from "comps/controls/codeControl";
 import { ChangeEventHandlerControl } from "comps/controls/eventHandlerControl";
@@ -28,7 +28,7 @@ import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConst
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 
-const Wrapper = styled.div<{ $style: SignatureStyleType; isEmpty: boolean }>`
+const Wrapper = styled.div<{ $style: SignatureStyleType; $isEmpty: boolean }>`
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -48,7 +48,7 @@ const Wrapper = styled.div<{ $style: SignatureStyleType; isEmpty: boolean }>`
   padding: ${(props) => props.$style.padding};
   .signature {
     background-color: ${(props) => props.$style.background};
-    opacity: ${(props) => (props.isEmpty ? 0 : 1)};
+    opacity: ${(props) => (props.$isEmpty ? 0 : 1)};
     width: 100%;
     height: 100%;
   }
@@ -138,7 +138,7 @@ let SignatureTmpComp = (function () {
               e.preventDefault();
             }}
             $style={props.style}
-            isEmpty={!props.value && !isBegin}
+            $isEmpty={!props.value && !isBegin}
           >
             <div className="signature">
               <Suspense fallback={<Skeleton />}>
diff --git a/client/packages/lowcoder/src/comps/comps/switchComp.tsx b/client/packages/lowcoder/src/comps/comps/switchComp.tsx
index e1f7e29988..3a3ecf9558 100644
--- a/client/packages/lowcoder/src/comps/comps/switchComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/switchComp.tsx
@@ -1,4 +1,4 @@
-import { Switch } from "antd";
+import { default as Switch } from "antd/es/switch";
 import { BoolCodeControl } from "comps/controls/codeControl";
 import { booleanExposingStateControl } from "comps/controls/codeStateControl";
 import { changeEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComp.tsx
index f6b3e1901f..678bcabb0e 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComp.tsx
@@ -14,6 +14,7 @@ import { ProgressComp } from "./columnTypeComps/columnProgressComp";
 import { RatingComp } from "./columnTypeComps/columnRatingComp";
 import { BadgeStatusComp } from "./columnTypeComps/columnStatusComp";
 import { ColumnTagsComp } from "./columnTypeComps/columnTagsComp";
+import { ColumnSelectComp } from "./columnTypeComps/columnSelectComp";
 import { SimpleTextComp } from "./columnTypeComps/simpleTextComp";
 import { ColumnNumberComp } from "./columnTypeComps/ColumnNumberComp";
 
@@ -38,6 +39,10 @@ const actionOptions = [
     label: trans("table.tag"),
     value: "tag",
   },
+  {
+    label: trans("table.select"),
+    value: "select",
+  },
   {
     label: trans("table.badgeStatus"),
     value: "badgeStatus",
@@ -83,6 +88,7 @@ export const ColumnTypeCompMap = {
   badgeStatus: BadgeStatusComp,
   link: LinkComp,
   tag: ColumnTagsComp,
+  select: ColumnSelectComp,
   links: ColumnLinksComp,
   image: ImageComp,
   markdown: ColumnMarkdownComp,
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/ColumnNumberComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/ColumnNumberComp.tsx
index a775a1887b..20a3902947 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/ColumnNumberComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/ColumnNumberComp.tsx
@@ -1,4 +1,4 @@
-  import { Input } from "antd";
+  import { default as Input } from "antd/es/input";
 import { NumberControl, StringControl } from "comps/controls/codeControl";
 import { BoolControl } from "comps/controls/boolControl";
 import { trans } from "i18n";
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnBooleanComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnBooleanComp.tsx
index b48e626c04..3a1e91f8ae 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnBooleanComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnBooleanComp.tsx
@@ -1,6 +1,6 @@
 import { BoolCodeControl } from "comps/controls/codeControl";
 import { trans } from "i18n";
-import { Checkbox } from "antd";
+import { default as Checkbox } from "antd/es/checkbox";
 import { ColumnTypeCompBuilder, ColumnTypeViewFn } from "../columnTypeCompBuilder";
 import { ColumnValueTooltip } from "../simpleColumnTypeComps";
 import { getStyle } from "comps/comps/selectInputComp/checkboxComp";
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateComp.tsx
index 76c6abe87f..af5070300c 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateComp.tsx
@@ -1,4 +1,4 @@
-import { DatePicker } from "antd";
+import { default as DatePicker } from "antd/es/date-picker";
 import {
   ColumnTypeCompBuilder,
   ColumnTypeViewFn,
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnImgComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnImgComp.tsx
index 4eda274326..25fd9e1d32 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnImgComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnImgComp.tsx
@@ -1,4 +1,4 @@
-import { Input } from "antd";
+import { default as Input } from "antd/es/input";
 import {
   ColumnTypeCompBuilder,
   ColumnTypeViewFn,
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinkComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinkComp.tsx
index b7edaa5932..4ed3b40da8 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinkComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinkComp.tsx
@@ -1,4 +1,4 @@
-import { Input } from "antd";
+import { default as Input } from "antd/es/input";
 import {
   ColumnTypeCompBuilder,
   ColumnTypeViewFn,
@@ -22,7 +22,7 @@ const childrenMap = {
 
 const disableCss = css`
   &,
-  :hover {
+  &:hover {
     cursor: not-allowed;
     color: rgba(0, 0, 0, 0.25) !important;
   }
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinksComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinksComp.tsx
index 5bc0fb39bf..7329db7204 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinksComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinksComp.tsx
@@ -1,5 +1,6 @@
 import { EllipsisOutlined } from "@ant-design/icons";
-import { Dropdown, Menu } from "antd";
+import { default as Dropdown} from "antd/es/dropdown";
+import { default as Menu } from "antd/es/menu";
 import { ColumnTypeCompBuilder } from "comps/comps/tableComp/column/columnTypeCompBuilder";
 import { ActionSelectorControlInContext } from "comps/controls/actionSelector/actionSelectorControl";
 import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
@@ -27,7 +28,7 @@ const MenuLinkWrapper = styled.div`
   > a {
     color: ${PrimaryColor} !important;
 
-    :hover {
+    &:hover {
       color: ${LightActiveTextColor} !important;
     }
   }
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMarkdownComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMarkdownComp.tsx
index efcdd436cf..748308f869 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMarkdownComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMarkdownComp.tsx
@@ -1,4 +1,4 @@
-import { Input } from "antd";
+import { default as Input } from "antd/es/input";
 import {
   ColumnTypeCompBuilder,
   ColumnTypeViewFn,
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnProgressComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnProgressComp.tsx
index 7c5dc3bdde..60f302ce52 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnProgressComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnProgressComp.tsx
@@ -1,6 +1,6 @@
 import { NumberControl } from "comps/controls/codeControl";
 import { trans } from "i18n";
-import { InputNumber } from "antd";
+import { default as InputNumber } from "antd/es/input-number";
 import { ColumnTypeCompBuilder, ColumnTypeViewFn } from "../columnTypeCompBuilder";
 import { ColumnValueTooltip } from "../simpleColumnTypeComps";
 import { ProgressStyle } from "comps/controls/styleControlConstants";
@@ -55,7 +55,7 @@ const InputNumberStyled = styled(InputNumber)`
       position: unset;
       transform: none;
     }
-    :hover {
+    &:hover {
       &:not(.ant-input-number-handler-up-disabled):not(.ant-input-number-handler-down-disabled)
         path {
         fill: #315efb;
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnRatingComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnRatingComp.tsx
index a629dff3e9..8aca4df276 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnRatingComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnRatingComp.tsx
@@ -3,7 +3,7 @@ import { trans } from "i18n";
 import { ColumnTypeCompBuilder, ColumnTypeViewFn } from "../columnTypeCompBuilder";
 import { ColumnValueTooltip } from "../simpleColumnTypeComps";
 import styled from "styled-components";
-import { Rate } from "antd";
+import { default as Rate } from "antd/es/rate";
 
 const RateStyled = styled(Rate)<{ isEdit?: boolean }>`
   display: inline-flex;
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSelectComp.tsx
new file mode 100644
index 0000000000..d4305a928d
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSelectComp.tsx
@@ -0,0 +1,84 @@
+import { useState } from "react";
+
+import { SelectUIView } from "comps/comps/selectInputComp/selectCompConstants";
+import { SelectOptionControl } from "comps/controls/optionsControl";
+import { StringControl } from "comps/controls/codeControl";
+
+import { trans } from "i18n";
+import { ColumnTypeCompBuilder, ColumnTypeViewFn } from "../columnTypeCompBuilder";
+import { ColumnValueTooltip } from "../simpleColumnTypeComps";
+
+const childrenMap = {
+  text: StringControl,
+  options: SelectOptionControl,
+};
+
+let options: any[] = []
+const getBaseValue: ColumnTypeViewFn<typeof childrenMap, string, string> = (props) => props.text;
+
+type SelectEditProps = {
+  initialValue: string;
+  onChange: (value: string) => void;
+  onChangeEnd: () => void;
+  options: any[];
+};
+
+const SelectEdit = (props: SelectEditProps) => {
+  const [currentValue, setCurrentValue] = useState(props.initialValue);
+
+  return (
+    <SelectUIView 
+      value={currentValue}
+      options={options}
+      onChange={(val) => {
+        props.onChange(val);
+        setCurrentValue(val)
+      }}
+      onEvent={async (eventName)=>{
+        if(eventName==="blur"){
+          props.onChangeEnd()
+        }
+        return []
+      }}
+      // @ts-ignore
+      style={{}}
+    />
+  );
+};
+
+
+export const ColumnSelectComp = (function () {
+  return new ColumnTypeCompBuilder(
+    childrenMap,
+    (props, dispatch) => {
+      options = props.options;
+      const value = props.changeValue ?? getBaseValue(props, dispatch)
+      return props.options.find(x => x.value === value)?.label;
+    },
+    (nodeValue) => nodeValue.text.value,
+    getBaseValue,
+  )
+    .setEditViewFn((props) => {
+      return (
+        <SelectEdit
+          initialValue={props.value}
+          options={options}
+          onChange={props.onChange}
+          onChangeEnd={props.onChangeEnd}
+        />
+    )})
+    .setPropertyViewFn((children) => {
+      return (
+        <>
+          {children.text.propertyView({
+            label: trans("table.columnValue"),
+            tooltip: ColumnValueTooltip,
+          })}
+          {children.options.propertyView({
+            title: trans("optionsControl.optionList"),
+          })}
+        </>
+      );
+    })
+    .build();
+})();
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnStatusComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnStatusComp.tsx
index 3cdf9e84b1..28a2db0836 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnStatusComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnStatusComp.tsx
@@ -1,4 +1,4 @@
-import { Badge } from "antd";
+import { default as Badge } from "antd/es/badge";
 import {
   ColumnTypeCompBuilder,
   ColumnTypeViewFn,
@@ -9,7 +9,7 @@ import { DropdownStyled, Wrapper } from "./columnTagsComp";
 import { ReactNode, useContext, useState } from "react";
 import { StatusContext } from "components/table/EditableCell";
 import { CustomSelect, PackUpIcon, ScrollBar } from "lowcoder-design";
-import { PresetStatusColorType } from "antd/lib/_util/colors";
+import { PresetStatusColorType } from "antd/es/_util/colors";
 
 export const ColumnValueTooltip = trans("table.columnValueTooltip");
 
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx
index 54930a7d14..4124d67ee6 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx
@@ -1,4 +1,4 @@
-import { Tag } from "antd";
+import { default as Tag } from "antd/es/tag";
 import { PresetStatusColorTypes } from "antd/lib/_util/colors";
 import { TagsContext } from "components/table/EditableCell";
 import {
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/simpleTextComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/simpleTextComp.tsx
index 3311c01dc4..a0da677aee 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/simpleTextComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/simpleTextComp.tsx
@@ -1,4 +1,4 @@
-import { Input } from "antd";
+import { default as Input } from "antd/es/input";
 import { StringOrNumberControl } from "comps/controls/codeControl";
 import { trans } from "i18n";
 import { ColumnTypeCompBuilder, ColumnTypeViewFn } from "../columnTypeCompBuilder";
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx
index 7c462d8ee9..348ce73faf 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx
@@ -28,8 +28,7 @@ import { JSONValue } from "util/jsonTypes";
 import styled from "styled-components";
 import { TextOverflowControl } from "comps/controls/textOverflowControl";
 import { TableColumnLinkStyle, styleControl } from "@lowcoder-ee/index.sdk";
-import { Divider } from "antd";
-
+import { default as Divider } from "antd/es/divider";
 export type Render = ReturnType<ConstructorToComp<typeof RenderComp>["getOriginalComp"]>;
 export const RenderComp = withSelectedMultiContext(ColumnTypeComp);
 
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnListComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnListComp.tsx
index d186aad0aa..f5429ba5c3 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnListComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnListComp.tsx
@@ -101,6 +101,7 @@ export class ColumnListComp extends ColumnListTmpComp {
     dynamicColumn: boolean;
     data: Array<JSONObject>;
   }) {
+    console.log("dataChangedAction", param);
     return customAction<ActionDataType>(
       {
         type: "dataChanged",
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/selectionControl.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/selectionControl.tsx
index 07d7e5fc60..a7cb00b248 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/selectionControl.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/selectionControl.tsx
@@ -83,7 +83,7 @@ export const SelectionControl = (function () {
         selectedRowKeys: props.selectedRowKeys,
         preserveSelectedRowKeys: true,
         onChange: (selectedRowKeys) => {
-          dispatch(changeChildAction("selectedRowKeys", selectedRowKeys, false));
+          dispatch(changeChildAction("selectedRowKeys", selectedRowKeys as string[], false));
           onEvent("rowSelectChange");
         },
         // click checkbox also trigger row click event
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
index e9ceb6d95b..a523e7c587 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
@@ -1,8 +1,7 @@
-import { Table } from "antd";
-import { TableProps } from "antd/es/table";
+import { default as Table, TableProps } from "antd/es/table";
 import { TableCellContext, TableRowContext } from "comps/comps/tableComp/tableContext";
 import { TableToolbar } from "comps/comps/tableComp/tableToolbarComp";
-import { RowColorViewType, RowHeightViewType } from "comps/comps/tableComp/tableTypes";
+import { RowColorViewType, RowHeightViewType, TableEventOptionValues } from "comps/comps/tableComp/tableTypes";
 import {
   COL_MIN_WIDTH,
   COLUMN_CHILDREN_KEY,
@@ -130,9 +129,9 @@ const getStyle = (
 const TableWrapper = styled.div<{
   $style: TableStyleType;
   $rowStyle: TableRowStyleType;
-  toolbarPosition: "above" | "below" | "close";
-  fixedHeader: boolean;
-  fixedToolbar: boolean;
+  $toolbarPosition: "above" | "below" | "close";
+  $fixedHeader: boolean;
+  $fixedToolbar: boolean;
 }>`
   max-height: 100%;
   overflow-y: auto;
@@ -141,7 +140,7 @@ const TableWrapper = styled.div<{
   border-radius: ${(props) => props.$style.radius};
 
   .ant-table-wrapper {
-    border-top: ${(props) => (props.toolbarPosition === "above" ? "1px solid" : "unset")};
+    border-top: ${(props) => (props.$toolbarPosition === "above" ? "1px solid" : "unset")};
     border-color: inherit;
   }
 
@@ -193,10 +192,10 @@ const TableWrapper = styled.div<{
             color: ${(props) => props.$style.headerText};
             border-inline-end: ${(props) => `1px solid ${props.$style.border}`} !important;
             ${(props) => 
-              props.fixedHeader && `
+              props.$fixedHeader && `
                 position: sticky;
                 position: -webkit-sticky;
-                top: ${props.fixedToolbar ? '47px' : '0'};
+                top: ${props.$fixedToolbar ? '47px' : '0'};
                 z-index: 99;
               `
             }
@@ -253,7 +252,7 @@ const TableWrapper = styled.div<{
 
         // hide the bottom border of the last row
         ${(props) =>
-          props.toolbarPosition !== "below" &&
+          props.$toolbarPosition !== "below" &&
           `
             tbody > tr:last-child > td {
               border-bottom: unset;
@@ -284,7 +283,7 @@ const TableTh = styled.th<{ width?: number }>`
 `;
 
 const TableTd = styled.td<{
-  background: string;
+  $background: string;
   $style: TableColumnStyleType & {rowHeight?: string};
   $linkStyle?: TableColumnLinkStyleType;
   $isEditing: boolean;
@@ -296,10 +295,10 @@ const TableTd = styled.td<{
     display: ${(props) => (props.$isEditing ? "none" : "initial")};
   }
   &.ant-table-row-expand-icon-cell {
-    background: ${(props) => props.background};
+    background: ${(props) => props.$background};
     border-color: ${(props) => props.$style.border};
   }
-  background: ${(props) => props.background} !important;
+  background: ${(props) => props.$background} !important;
   border-color: ${(props) => props.$style.border} !important;
   border-width: ${(props) => props.$style.borderWidth} !important;
   border-radius: ${(props) => props.$style.radius};
@@ -498,7 +497,7 @@ function TableCellView(props: {
     tdView = (
       <TableTd
         {...restProps}
-        background={background}
+        $background={background}
         $style={style}
         $linkStyle={linkStyle}
         $isEditing={editing}
@@ -584,11 +583,19 @@ function ResizeableTable<RecordType extends object>(props: CustomTableProps<Reco
         width: resizeWidth,
         title: col.titleText,
         viewModeResizable: props.viewModeResizable,
-        onResize: (width: number) => {
+        // onResize: (width: number) => {
+        //   if (width) {
+        //     setResizeData({
+        //       index: index,
+        //       width: width,
+        //     });
+        //   }
+        // },
+        onResize: (width: React.SyntheticEvent) => {
           if (width) {
             setResizeData({
               index: index,
-              width: width,
+              width: width as unknown as number,
             });
           }
         },
@@ -714,7 +721,7 @@ export function TableCompView(props: {
   }, [pagination, data]);
 
   const handleChangeEvent = useCallback(
-    (eventName) => {
+    (eventName: TableEventOptionValues) => {
       if (eventName === "saveChanges" && !compChildren.onEvent.isBind(eventName)) {
         !viewMode && messageInstance.warning(trans("table.saveChangesNotBind"));
         return;
@@ -759,9 +766,9 @@ export function TableCompView(props: {
       <TableWrapper
         $style={style}
         $rowStyle={rowStyle}
-        toolbarPosition={toolbar.position}
-        fixedHeader={compChildren.fixedHeader.getView()}
-        fixedToolbar={toolbar.fixedToolbar && toolbar.position === 'above'}
+        $toolbarPosition={toolbar.position}
+        $fixedHeader={compChildren.fixedHeader.getView()}
+        $fixedToolbar={toolbar.fixedToolbar && toolbar.position === 'above'}
       >
         {toolbar.position === "above" && toolbarView}
         <ResizeableTable<RecordType>
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
index cbc4bc11cc..065806c1cb 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
@@ -33,6 +33,7 @@ import React, { useMemo, useState } from "react";
 import { GreyTextColor } from "constants/style";
 import { alignOptions } from "comps/controls/dropdownControl";
 import { ColumnTypeCompMap } from "comps/comps/tableComp/column/columnTypeComp";
+import { changeChildAction } from "lowcoder-core";
 
 const InsertDiv = styled.div`
   display: flex;
@@ -51,7 +52,7 @@ const StyledRefreshIcon = styled(RefreshIcon)`
   height: 16px;
   cursor: pointer;
 
-  :hover {
+  &:hover {
     g g {
       stroke: #4965f2;
     }
@@ -63,7 +64,7 @@ const eyeIconCss = css`
   width: 16px;
   display: inline-block;
 
-  :hover {
+  &:hover {
     cursor: pointer;
   }
 
@@ -265,13 +266,14 @@ function ColumnPropertyView<T extends MultiBaseComp<TableChildrenType>>(props: {
     <InsertDiv>
       <div style={{ display: "flex", alignItems: "center", marginRight: "auto" }}>
         <TextLabel label={props.columnLabel} />
-        <Graylabel>{"(" + columns.length + ")"}</Graylabel>
+        <Graylabel>{" (" + columns.length + ")"}</Graylabel>
       </div>
       {rowExample && (
         <ToolTipLabel title={trans("table.refreshButtonTooltip")}>
           <StyledRefreshIcon
             onClick={() => {
-              const actions = [
+              console.log("comp", comp);
+              comp.dispatch(
                 wrapChildAction(
                   "columns",
                   comp.children.columns.dataChangedAction({
@@ -280,10 +282,10 @@ function ColumnPropertyView<T extends MultiBaseComp<TableChildrenType>>(props: {
                     dynamicColumn: dynamicColumn,
                     data: data,
                   })
-                ),
-                comp.changeChildAction("dataRowExample", null),
-              ];
-              actions.forEach((action) => comp.dispatch(deferAction(action)));
+                )
+              );
+              // the function below is not working
+              // comp.dispatch(comp.changeChildAction("dataRowExample", null));
             }}
           />
         </ToolTipLabel>
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx
index 0fadfffc2e..f7e8829e08 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx
@@ -1,5 +1,6 @@
-import { Button, Pagination, Popover } from "antd";
-import { PaginationProps } from "antd/lib/pagination/Pagination";
+import { default as Button } from "antd/es/button";
+import { default as Pagination, PaginationProps } from "antd/es/pagination";
+import { default as Popover } from "antd/es/popover";
 import { ThemeDetail } from "api/commonSettingApi";
 import { ColumnCompType } from "comps/comps/tableComp/column/tableColumnComp";
 import { TableOnEventView } from "comps/comps/tableComp/tableTypes";
@@ -73,7 +74,7 @@ const getStyle = (
         }
 
         &:hover * {
-          stroke: ${theme.primary};
+          stroke: ${theme?.primary};
         }
       }
 
@@ -89,7 +90,7 @@ const getStyle = (
         }
 
         &:hover * {
-          stroke: ${theme.primary};
+          stroke: ${theme?.primary};
         }
       }
 
@@ -101,7 +102,7 @@ const getStyle = (
         }
 
         &:hover * {
-          stroke: ${theme.primary};
+          stroke: ${theme?.primary};
         }
       }
     }
@@ -114,7 +115,7 @@ const getStyle = (
 
       svg:hover {
         path {
-          fill: ${theme.primary};
+          fill: ${theme?.primary};
         }
       }
     }
@@ -135,7 +136,7 @@ const getStyle = (
       color: ${style.toolbarText};
 
       &:hover {
-        color: ${theme.primary};
+        color: ${theme?.primary};
       }
     }
 
@@ -144,7 +145,7 @@ const getStyle = (
       .ant-select-selector,
     .ant-pagination-options-quick-jumper input:hover,
     .ant-pagination-options-quick-jumper input:focus {
-      border-color: ${theme.primary};
+      border-color: ${theme?.primary};
     }
   `;
 };
@@ -152,17 +153,17 @@ const getStyle = (
 const ToolbarWrapper = styled.div<{
   $style: TableStyleType;
   $filtered: boolean;
-  theme: ThemeDetail;
-  position: ToolbarRowType["position"];
-  fixedToolbar: boolean;
+  $theme: ThemeDetail;
+  $position: ToolbarRowType["position"];
+  $fixedToolbar: boolean;
 }>`
   // overflow: auto;
   ${(props) => props.$style && getStyle(
     props.$style,
     props.$filtered,
-    props.theme,
-    props.position,
-    props.fixedToolbar,
+    props.$theme,
+    props.$position,
+    props.$fixedToolbar,
   )}
 `;
 
@@ -744,10 +745,10 @@ export function TableToolbar(props: {
   return (
     <ToolbarWrapper
       $style={props.$style}
-      theme={theme}
+      $theme={theme || defaultTheme}
       $filtered={toolbar.filter.filters.length > 0}
-      position={toolbar.position}
-      fixedToolbar={toolbar.fixedToolbar}
+      $position={toolbar.position}
+      $fixedToolbar={toolbar.fixedToolbar}
     >
       <ToolbarWrapper2>
         <ToolbarIcons className="toolbar-icons">
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
index 4eb2331d5a..58d0b4974d 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
@@ -100,6 +100,8 @@ export const TableEventOptions = [
   },
 ] as const;
 
+export type TableEventOptionValues = typeof TableEventOptions[number]['value'];
+
 export type SortValue = {
   column?: string;
   desc?: boolean;
diff --git a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
index 991cd2d901..125599b0b7 100644
--- a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
@@ -1,4 +1,4 @@
-import { Tabs } from "antd";
+import { default as Tabs } from "antd/es/tabs";
 import { JSONObject, JSONValue } from "util/jsonTypes";
 import { CompAction, CompActionTypes, deleteCompAction, wrapChildAction } from "lowcoder-core";
 import { DispatchType, RecordConstructorToView, wrapDispatch } from "lowcoder-core";
diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx
index 80b108d24d..797edcf50b 100644
--- a/client/packages/lowcoder/src/comps/comps/textComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx
@@ -66,13 +66,13 @@ const getStyle = (style: TextStyleType) => {
   `;
 };
 
-const TextContainer = styled.div<{ type: string; styleConfig: TextStyleType }>`
+const TextContainer = styled.div<{ $type: string; $styleConfig: TextStyleType }>`
   height: 100%;
   overflow: auto;
   margin: 0;
   ${(props) =>
-    props.type === "text" && "white-space:break-spaces;line-height: 1.9;"};
-  ${(props) => props.styleConfig && getStyle(props.styleConfig)}
+    props.$type === "text" && "white-space:break-spaces;line-height: 1.9;"};
+  ${(props) => props.$styleConfig && getStyle(props.$styleConfig)}
   display: flex;
   font-size: 13px;
   ${markdownCompCss};
@@ -127,8 +127,8 @@ let TextTmpComp = (function () {
     const value = props.text.value;
     return (
       <TextContainer
-        type={props.type}
-        styleConfig={props.style}
+        $type={props.type}
+        $styleConfig={props.style}
         style={{
           justifyContent: props.horizontalAlignment,
           alignItems: props.autoHeight ? "center" : props.verticalAlignment,
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
index 04e52ef8a4..fc34bc7238 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
@@ -28,7 +28,7 @@ import {
 import { trans } from "i18n";
 import { IconControl } from "comps/controls/iconControl";
 import { hasIcon } from "comps/utils";
-import { InputRef } from "antd";
+import { InputRef } from "antd/es/input";
 import { RefControl } from "comps/controls/refControl";
 
 import React, { useContext } from "react";
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx
index 89c75bd8e2..630f7e376e 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx
@@ -36,9 +36,9 @@ import { booleanExposingStateControl } from "comps/controls/codeStateControl";
 import { trans } from "i18n";
 import { RefControl } from "comps/controls/refControl";
 import { TextAreaRef } from "antd/lib/input/TextArea";
-import { Mentions, ConfigProvider } from "antd";
+import { default as ConfigProvider } from "antd/es/config-provider";
+import { default as Mentions, MentionsOptionProps } from "antd/es/mentions";
 import { blurMethod, focusWithOptions } from "comps/utils/methodUtils";
-import type { MentionsOptionProps } from "antd/es/mentions";
 import {
   textInputValidate,
 } from "../textInputComp/textInputConstants";
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
index 0437e87b60..b5c3d701dc 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
@@ -1,4 +1,5 @@
-import { Input, InputRef } from "antd";
+import { default as InputPassword } from "antd/es/input/Password";
+import { InputRef } from "antd/es/input";
 import {
   NameConfig,
   NameConfigPlaceHolder,
@@ -40,7 +41,7 @@ import { RefControl } from "comps/controls/refControl";
 import React, { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 
-const PasswordStyle = styled(Input.Password)<{
+const PasswordStyle = styled(InputPassword)<{
   $style: InputLikeStyleType;
 }>`
   ${(props) => props.$style && getStyle(props.$style)}
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx
index 7859645937..23b99b319e 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx
@@ -34,7 +34,7 @@ import {
 import { trans } from "i18n";
 import { ChangeEvent, useRef, useState } from "react";
 import { refMethods } from "comps/generators/withMethodExposing";
-import { InputRef } from "antd";
+import { InputRef } from "antd/es/input";
 import {
   blurMethod,
   clickMethod,
diff --git a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx
index 8591378ed2..78a2787afd 100644
--- a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Button } from "antd";
+import { default as Button } from "antd/es/button";
 // 渲染组件到编辑器
 import {
   changeChildAction,
@@ -58,7 +58,7 @@ import {
 
 import { timelineDate, timelineNode, TimelineDataTooltip } from "./timelineConstants";
 import { convertTimeLineData } from "./timelineUtils";
-import { Timeline } from "antd";
+import { default as Timeline } from "antd/es/timeline";
 
 import { ANTDICON } from "./antIcon"; // todo: select icons to not import all icons
 
diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx
index 04db8fcc65..6474efa9b4 100644
--- a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx
@@ -2,7 +2,7 @@ import { RecordConstructorToView } from "lowcoder-core";
 import { UICompBuilder } from "comps/generators/uiCompBuilder";
 import { withExposingConfigs } from "comps/generators/withExposing";
 import { Section, sectionNames } from "lowcoder-design";
-import { Tree } from "antd";
+import { default as Tree } from "antd/es/tree";
 import { useEffect, useState } from "react";
 import styled from "styled-components";
 import ReactResizeDetector from "react-resize-detector";
@@ -122,15 +122,15 @@ const TreeCompView = (props: RecordConstructorToView<typeof childrenMap>) => {
             expandedKeys={expanded.value}
             autoExpandParent={props.autoExpandParent}
             onSelect={(keys) => {
-              value.onChange(keys);
+              value.onChange(keys as (string | number)[]);
               props.onEvent("change");
             }}
             onCheck={(keys) => {
-              value.onChange(Array.isArray(keys) ? keys : keys.checked);
+              value.onChange(Array.isArray(keys) ? keys as (string | number)[] : keys.checked as (string | number)[]);
               props.onEvent("change");
             }}
             onExpand={(keys) => {
-              expanded.onChange(keys);
+              expanded.onChange(keys as (string | number)[]);
             }}
             onFocus={() => props.onEvent("focus")}
             onBlur={() => props.onEvent("blur")}
diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx
index 69cba0946e..993113e970 100644
--- a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx
@@ -2,7 +2,7 @@ import { changeChildAction, DispatchType, RecordConstructorToView } from "lowcod
 import { UICompBuilder } from "comps/generators/uiCompBuilder";
 import { NameConfig, withExposingConfigs } from "comps/generators/withExposing";
 import { Section, sectionNames, ValueFromOption } from "lowcoder-design";
-import { TreeSelect } from "antd";
+import { default as TreeSelect } from "antd/es/tree-select";
 import { useEffect } from "react";
 import styled from "styled-components";
 import { styleControl } from "comps/controls/styleControl";
@@ -115,7 +115,7 @@ const TreeCompView = (
         // fix expand issue when searching
         treeExpandedKeys={inputValue ? undefined : expanded.value}
         onTreeExpand={(keys) => {
-          expanded.onChange(keys);
+          expanded.onChange(keys as (string | number)[]);
         }}
         onChange={(keys) => {
           const nextValue = Array.isArray(keys) ? keys : keys !== undefined ? [keys] : [];
diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx
index f9c0e23a47..0477ffb588 100644
--- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx
+++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx
@@ -29,31 +29,31 @@ const Wrapper = styled.div<{ $style: ContainerStyleType }>`
   ${(props) => props.$style && getStyle(props.$style)}
 `;
 
-const HeaderInnerGrid = styled(InnerGrid)<{ backgroundColor: string }>`
+const HeaderInnerGrid = styled(InnerGrid)<{ $backgroundColor: string }>`
   overflow: visible;
-  ${(props) => props.backgroundColor && `background-color: ${props.backgroundColor};`}
+  ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
   border-radius: 0;
 `;
 
 const BodyInnerGrid = styled(InnerGrid)<{
-  showBorder: boolean;
-  backgroundColor: string;
-  borderColor: string;
+  $showBorder: boolean;
+  $backgroundColor: string;
+  $borderColor: string;
 }>`
-  border-top: ${(props) => `${props.showBorder ? 1 : 0}px solid ${props.borderColor}`};
+  border-top: ${(props) => `${props.$showBorder ? 1 : 0}px solid ${props.$borderColor}`};
   flex: 1;
-  ${(props) => props.backgroundColor && `background-color: ${props.backgroundColor};`}
+  ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
   border-radius: 0;
 `;
 
 const FooterInnerGrid = styled(InnerGrid)<{
-  showBorder: boolean;
-  backgroundColor: string;
-  borderColor: string;
+  $showBorder: boolean;
+  $backgroundColor: string;
+  $borderColor: string;
 }>`
-  border-top: ${(props) => `${props.showBorder ? 1 : 0}px solid ${props.borderColor}`};
+  border-top: ${(props) => `${props.$showBorder ? 1 : 0}px solid ${props.$borderColor}`};
   overflow: visible;
-  ${(props) => props.backgroundColor && `background-color: ${props.backgroundColor};`}
+  ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
   border-radius: 0;
 `;
 
@@ -90,7 +90,7 @@ export function TriContainer(props: TriContainerProps) {
             minHeight="46px"
             containerPadding={[paddingWidth, 3]}
             showName={{ bottom: showBody || showFooter ? 20 : 0 }}
-            backgroundColor={style?.headerBackground}
+            $backgroundColor={style?.headerBackground}
             style={{padding: style.containerheaderpadding}}
           />
         </BackgroundColorContext.Provider>
@@ -98,7 +98,7 @@ export function TriContainer(props: TriContainerProps) {
       {showBody && (
         <BackgroundColorContext.Provider value={container.style.background}>
           <BodyInnerGrid
-            showBorder={showHeader}
+            $showBorder={showHeader}
             {...otherBodyProps}
             items={gridItemCompToGridItems(bodyItems)}
             autoHeight={container.autoHeight}
@@ -108,8 +108,8 @@ export function TriContainer(props: TriContainerProps) {
               (showHeader && showFooter) || showHeader ? [paddingWidth, 11.5] : [paddingWidth, 11]
             }
             hintPlaceholder={props.hintPlaceholder ?? HintPlaceHolder}
-            backgroundColor={style?.background}
-            borderColor={style?.border}
+            $backgroundColor={style?.background}
+            $borderColor={style?.border}
             style={{padding: style.containerbodypadding}}
           />
         </BackgroundColorContext.Provider>
@@ -117,7 +117,7 @@ export function TriContainer(props: TriContainerProps) {
       {showFooter && (
         <BackgroundColorContext.Provider value={container.style.footerBackground}>
           <FooterInnerGrid
-            showBorder={showHeader || showBody}
+            $showBorder={showHeader || showBody}
             {...otherFooterProps}
             items={gridItemCompToGridItems(footerItems)}
             autoHeight={true}
@@ -125,8 +125,8 @@ export function TriContainer(props: TriContainerProps) {
             minHeight={showBody ? "47px" : "46px"}
             containerPadding={showBody || showHeader ? [paddingWidth, 3.5] : [paddingWidth, 3]}
             showName={{ top: showHeader || showBody ? 20 : 0 }}
-            backgroundColor={style?.footerBackground}
-            borderColor={style?.border}
+            $backgroundColor={style?.footerBackground}
+            $borderColor={style?.border}
             style={{padding: style.containerfooterpadding}}
           />
         </BackgroundColorContext.Provider>
diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerCompBuilder.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerCompBuilder.tsx
index cb0ed48b95..8a3a9346c9 100644
--- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerCompBuilder.tsx
+++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerCompBuilder.tsx
@@ -12,6 +12,7 @@ import { NameGenerator } from "comps/utils";
 import { CompTree, IContainer } from "../containerBase";
 import { SimpleContainerComp } from "../containerBase/simpleContainerComp";
 import { TriContainerComp } from "./triContainerComp";
+import { ReactNode } from "react";
 
 export type ContainerChildren<ChildrenCompMap extends Record<string, Comp<unknown>>> =
   UiChildren<ChildrenCompMap> & {
@@ -56,7 +57,7 @@ export class ContainerCompBuilder<
     }
     const newChildrenMap = containerChildren(this.childrenMap);
     const TmpComp = new UICompBuilder(newChildrenMap, (props, dispatch) => {
-      return this.viewFn(props as any, dispatch);
+      return this.viewFn(props as any, dispatch) as ReactNode;
     })
       .setPropertyViewFn(this.propertyViewFn as any)
       .build();
diff --git a/client/packages/lowcoder/src/comps/controls/boolControl.tsx b/client/packages/lowcoder/src/comps/controls/boolControl.tsx
index 541f97a028..7ea77e88e7 100644
--- a/client/packages/lowcoder/src/comps/controls/boolControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/boolControl.tsx
@@ -61,16 +61,16 @@ function parseValue(value?: any) {
   return { useCodeEditor, value: useCodeEditor ? value : value ? "true" : "false" };
 }
 
-const Wrapper = styled.div<{ hasLabel: boolean }>`
+const Wrapper = styled.div<{ $hasLabel: boolean }>`
   display: flex;
-  flex-direction: ${(props) => (props.hasLabel ? "column" : "row")};
-  height: ${(props) => (props.hasLabel ? "auto" : "32px")};
-  align-items: ${(props) => (props.hasLabel ? "auto" : "center")};
+  flex-direction: ${(props) => (props.$hasLabel ? "column" : "row")};
+  height: ${(props) => (props.$hasLabel ? "auto" : "32px")};
+  align-items: ${(props) => (props.$hasLabel ? "auto" : "center")};
   gap: 4px;
 `;
 
-const CodeEditorWrapper = styled.div<{ hasLabel: boolean }>`
-  ${(props) => (!props.hasLabel ? "flex: 1" : "")}
+const CodeEditorWrapper = styled.div<{ $hasLabel: boolean }>`
+  ${(props) => (!props.$hasLabel ? "flex: 1" : "")}
 `;
 
 /**
@@ -118,7 +118,7 @@ class BoolControl extends AbstractComp<boolean, DataType, Node<ValueAndMsg<boole
     const hasLabel = !!params.label;
     return controlItem(
       { filterText: params.label },
-      <Wrapper hasLabel={hasLabel}>
+      <Wrapper $hasLabel={hasLabel}>
         <SwitchWrapper
           label={params.label}
           tooltip={params.tooltip}
@@ -133,7 +133,7 @@ class BoolControl extends AbstractComp<boolean, DataType, Node<ValueAndMsg<boole
         </SwitchWrapper>
 
         {this.useCodeEditor && (
-          <CodeEditorWrapper hasLabel={hasLabel}>
+          <CodeEditorWrapper $hasLabel={hasLabel}>
             {this.codeControl.codeEditor(params)}
           </CodeEditorWrapper>
         )}
diff --git a/client/packages/lowcoder/src/comps/controls/codeControl.tsx b/client/packages/lowcoder/src/comps/controls/codeControl.tsx
index 3b50b3318c..c423e836f2 100644
--- a/client/packages/lowcoder/src/comps/controls/codeControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/codeControl.tsx
@@ -1,4 +1,4 @@
-import { EditorState } from "@codemirror/basic-setup";
+import { EditorState } from "@codemirror/state";
 import { isThemeColorKey } from "api/commonSettingApi";
 import { CodeEditor } from "base/codeEditor";
 import { Language } from "base/codeEditor/codeEditorTypes";
diff --git a/client/packages/lowcoder/src/comps/controls/keyValueControl.tsx b/client/packages/lowcoder/src/comps/controls/keyValueControl.tsx
index c691e65694..89cc6d2760 100644
--- a/client/packages/lowcoder/src/comps/controls/keyValueControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/keyValueControl.tsx
@@ -19,11 +19,11 @@ const KeyValueWrapper = styled.div`
   }
 `;
 
-const KeyWrapper = styled.div<{ flexBasics?: number }>`
+const KeyWrapper = styled.div<{ $flexBasics?: number }>`
   display: flex;
   margin-right: 8px;
   flex: 1;
-  flex-basis: ${(props) => (props.flexBasics ? props.flexBasics + "px" : "0%")};
+  flex-basis: ${(props) => (props.$flexBasics ? props.$flexBasics + "px" : "0%")};
 
   & > div:first-child {
     flex-grow: 1;
@@ -37,9 +37,9 @@ const TypeWrapper = styled.div`
   flex-shrink: 0;
 `;
 
-const ValueWrapper = styled.div<{ flexBasics?: number }>`
+const ValueWrapper = styled.div<{ $flexBasics?: number }>`
   flex: 1;
-  flex-basis: ${(props) => (props.flexBasics ? props.flexBasics + "px" : "0%")};
+  flex-basis: ${(props) => (props.$flexBasics ? props.$flexBasics + "px" : "0%")};
 `;
 
 export type KeyValueControlParams = ControlParams & {
@@ -81,7 +81,7 @@ function keyValueControl<T extends OptionsType>(
     propertyView(params: KeyValueControlParams) {
       return (
         <KeyValueWrapper>
-          <KeyWrapper flexBasics={params.keyFlexBasics}>
+          <KeyWrapper $flexBasics={params.keyFlexBasics}>
             {this.children.key.propertyView({ placeholder: "key", indentWithTab: false })}
             {hasType && params.showType && (
               <TypeWrapper>
@@ -93,7 +93,7 @@ function keyValueControl<T extends OptionsType>(
               </TypeWrapper>
             )}
           </KeyWrapper>
-          <ValueWrapper flexBasics={params.valueFlexBasics}>
+          <ValueWrapper $flexBasics={params.valueFlexBasics}>
             {this.children.value.propertyView({
               placeholder: "value",
               indentWithTab: false,
diff --git a/client/packages/lowcoder/src/comps/controls/labelControl.tsx b/client/packages/lowcoder/src/comps/controls/labelControl.tsx
index db3087e65f..92a1828b3d 100644
--- a/client/packages/lowcoder/src/comps/controls/labelControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/labelControl.tsx
@@ -1,6 +1,6 @@
 import { trans } from "i18n";
 import { green, red, yellow } from "@ant-design/colors";
-import { FormItemProps } from "antd";
+import { FormItemProps } from "antd/es/form/FormItem";
 import { BoolControl } from "comps/controls/boolControl";
 import { NumberControl, StringControl } from "comps/controls/codeControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
@@ -48,37 +48,37 @@ const LabelViewWrapper = styled.div<{ $style: any }>`
 `;
 
 const MainWrapper = styled.div<{
-  position: PositionOptionsValue;
-  hasLabel: boolean;
+  $position: PositionOptionsValue;
+  $hasLabel: boolean;
 }>`
-  flex-direction: ${(props) => props.position};
+  flex-direction: ${(props) => props.$position};
   flex-grow: 1;
   width: 100%;
-  margin-top: ${(props) => (props.position === "column" && props.hasLabel ? "4px" : 0)};
+  margin-top: ${(props) => (props.$position === "column" && props.$hasLabel ? "4px" : 0)};
   height: ${(props) =>
-    props.position === "column" && props.hasLabel ? "calc(100% - 4px)" : "100%"};
+    props.$position === "column" && props.$hasLabel ? "calc(100% - 4px)" : "100%"};
   display: flex;
-  align-items: ${(props) => (props.position === "row" ? "center" : "start")};
+  align-items: ${(props) => (props.$position === "row" ? "center" : "start")};
   flex-shrink: 0;
 `;
 
 const LabelWrapper = styled.div<{
-  align: AlignOptionsValue;
-  position: PositionOptionsValue;
-  hasToolTip: boolean;
+  $align: AlignOptionsValue;
+  $position: PositionOptionsValue;
+  $hasToolTip: boolean;
 }>`
   display: flex;
   align-items: center;
   margin-right: 8px;
-  margin-bottom: ${(props) => (props.position === "row" ? 0 : "3.5px")};
-  justify-content: ${(props) => (props.align === "left" ? "start" : "end")};
-  max-width: ${(props) => (props.position === "row" ? "80%" : "100%")};
+  margin-bottom: ${(props) => (props.$position === "row" ? 0 : "3.5px")};
+  justify-content: ${(props) => (props.$align === "left" ? "start" : "end")};
+  max-width: ${(props) => (props.$position === "row" ? "80%" : "100%")};
   flex-shrink: 0;
 `;
 
-const Label = styled.span<{ border: boolean }>`
+const Label = styled.span<{ $border: boolean }>`
   ${labelCss};
-  ${(props) => props.border && UnderlineCss};
+  ${(props) => props.$border && UnderlineCss};
   width: fit-content;
   user-select: text;
   white-space: nowrap;
@@ -93,13 +93,13 @@ const ChildrenWrapper = styled.div`
 `;
 
 const HelpWrapper = styled.div<{
-  marginLeft: string;
-  color?: string;
+  $marginLeft: string;
+  $color?: string;
 }>`
   ${labelCss};
   margin-top: 4px;
-  margin-left: ${(props) => props.marginLeft};
-  color: ${(props) => props.color};
+  margin-left: ${(props) => props.$marginLeft};
+  color: ${(props) => props.$color};
   display: block;
   font-size: 13px;
 `;
@@ -147,8 +147,8 @@ export const LabelControl = (function () {
   return new MultiCompBuilder(childrenMap, (props) => (args: LabelViewProps) => (
     <LabelViewWrapper $style={args.style}>
       <MainWrapper	
-        position={props.position}	
-        hasLabel={!!props.text}	
+        $position={props.position}	
+        $hasLabel={!!props.text}	
         style={{	
           margin: args && args.style ? args?.style?.margin : 0,	
           // padding: args && args.style ? args?.style?.padding : 0,	
@@ -162,14 +162,14 @@ export const LabelControl = (function () {
       >
         {!props.hidden && !isEmpty(props.text) && (
           <LabelWrapper
-            align={props.align}
+            $align={props.align}
             style={{
               width:
                 props.position === "row" ? getLabelWidth(props.width, props.widthUnit) : "100%",
               maxWidth: props.position === "row" ? "70%" : "100%",
             }}
-            position={props.position}
-            hasToolTip={!!props.tooltip}
+            $position={props.position}
+            $hasToolTip={!!props.tooltip}
           >
             <Tooltip
               title={props.tooltip && <TooltipWrapper>{props.tooltip}</TooltipWrapper>}
@@ -180,7 +180,7 @@ export const LabelControl = (function () {
               color="#2c2c2c"
               getPopupContainer={(node: any) => node.closest(".react-grid-item")}
             >
-              <Label border={!!props.tooltip}>{props.text}</Label>
+              <Label $border={!!props.tooltip}>{props.text}</Label>
             </Tooltip>
             {args.required && <StyledStarIcon />}
           </LabelWrapper>
@@ -200,12 +200,12 @@ export const LabelControl = (function () {
 
       {args.help && (
         <HelpWrapper
-          marginLeft={
+          $marginLeft={
             props.position === "column" || isEmpty(props.text) || props.hidden
               ? "0"
               : `calc(min(${getLabelWidth(props.width, props.widthUnit)} , 70%) + 8px)`
           }
-          color={
+          $color={
             args.validateStatus === "error"
               ? red.primary
               : args.validateStatus === "warning"
diff --git a/client/packages/lowcoder/src/comps/controls/multiSelectControl.tsx b/client/packages/lowcoder/src/comps/controls/multiSelectControl.tsx
index a5838d2062..7b45a2690c 100644
--- a/client/packages/lowcoder/src/comps/controls/multiSelectControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/multiSelectControl.tsx
@@ -8,9 +8,9 @@ import styled from "styled-components";
 import { EllipsisTextCss } from "components/Label";
 import _ from "lodash";
 
-const LabelWrapper = styled.div<{ placement: ControlPlacement }>`
+const LabelWrapper = styled.div<{ $placement: ControlPlacement }>`
   flex-shrink: 0;
-  width: ${(props) => (props.placement === "right" ? "96px" : "bottom" ? "112px" : "136px")};
+  width: ${(props) => (props.$placement === "right" ? "96px" : "bottom" ? "112px" : "136px")};
 `;
 
 const DropDownItemLabel = styled.div`
@@ -60,13 +60,13 @@ export function multiSelectControl<T extends OptionsType>(
       return (
         <FlexDiv>
           {params.label && (
-            <LabelWrapper placement={placement}>
+            <LabelWrapper $placement={placement}>
               <ToolTipLabel title={params.tooltip} label={params.label} />
             </LabelWrapper>
           )}
 
           <Tooltip title={!params.label ? params.tooltip : undefined}>
-            <DropdownContainer placement={placement}>
+            <DropdownContainer $placement={placement}>
               <CustomSelect
                 mode={"multiple"}
                 popupClassName="ob-dropdown-control-select"
diff --git a/client/packages/lowcoder/src/comps/controls/numberSimpleControl.tsx b/client/packages/lowcoder/src/comps/controls/numberSimpleControl.tsx
index 9dd89a7c35..e706dcef47 100644
--- a/client/packages/lowcoder/src/comps/controls/numberSimpleControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/numberSimpleControl.tsx
@@ -1,4 +1,4 @@
-import { InputNumber } from "antd";
+import { default as InputNumber } from "antd/es/input-number";
 import { SimpleComp } from "lowcoder-core";
 import { ControlPropertyViewWrapper } from "lowcoder-design";
 import React, { ReactNode } from "react";
diff --git a/client/packages/lowcoder/src/comps/controls/slotControl.tsx b/client/packages/lowcoder/src/comps/controls/slotControl.tsx
index 8248e98f24..0c798c5aa5 100644
--- a/client/packages/lowcoder/src/comps/controls/slotControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/slotControl.tsx
@@ -1,4 +1,4 @@
-import { Modal } from "antd";
+import { default as Modal } from "antd/es/modal";
 import { SimpleContainerComp } from "comps/comps/containerBase/simpleContainerComp";
 import {
   ContainerBaseProps,
diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
index fe0f1b2278..a914294920 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
@@ -1,4 +1,4 @@
-import { Tooltip } from "antd";
+import { default as Tooltip } from "antd/es/tooltip";
 import { getThemeDetailName, isThemeColorKey, ThemeDetail } from "api/commonSettingApi";
 import { ControlItemCompBuilder } from "comps/generators/controlCompBuilder";
 import { childrenToProps, ToConstructor } from "comps/generators/multi";
diff --git a/client/packages/lowcoder/src/comps/generators/multi.tsx b/client/packages/lowcoder/src/comps/generators/multi.tsx
index 02a2e49b31..ff8c914221 100644
--- a/client/packages/lowcoder/src/comps/generators/multi.tsx
+++ b/client/packages/lowcoder/src/comps/generators/multi.tsx
@@ -158,7 +158,7 @@ export function childrenToProps<ChildrenCompMap extends Record<string, Comp<unkn
 export function simpleMultiComp<ChildrenCompMap extends Record<string, Comp<unknown>>>(
   childrenMap: ToConstructor<ChildrenCompMap>
 ) {
-  return new MultiCompBuilder(childrenMap, () => null as ReactNode)
+  return new MultiCompBuilder(childrenMap, () => null as any)
     .setPropertyViewFn(() => <></>)
     .build();
 }
diff --git a/client/packages/lowcoder/src/comps/generators/withIsLoading.tsx b/client/packages/lowcoder/src/comps/generators/withIsLoading.tsx
index 5331d251b9..26914c1df3 100644
--- a/client/packages/lowcoder/src/comps/generators/withIsLoading.tsx
+++ b/client/packages/lowcoder/src/comps/generators/withIsLoading.tsx
@@ -1,4 +1,4 @@
-import { Spin } from "antd";
+import { default as Spin } from "antd/es/spin";
 import {
   FetchCheckNode,
   FetchInfo,
diff --git a/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx b/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx
index 134b0e2299..1ae4b96734 100644
--- a/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx
+++ b/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx
@@ -1,5 +1,5 @@
 import { CloseOutlined } from "@ant-design/icons";
-import { Button } from "antd";
+import { default as Button } from "antd/es/button";
 import { ContainerCompBuilder } from "comps/comps/containerBase/containerCompBuilder";
 import { gridItemCompToGridItems, InnerGrid } from "comps/comps/containerComp/containerView";
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
diff --git a/client/packages/lowcoder/src/comps/hooks/messageComp.ts b/client/packages/lowcoder/src/comps/hooks/messageComp.ts
index e41f6d54b1..e0e6451cbb 100644
--- a/client/packages/lowcoder/src/comps/hooks/messageComp.ts
+++ b/client/packages/lowcoder/src/comps/hooks/messageComp.ts
@@ -15,7 +15,7 @@ const showMessage = (params: EvalParamType[], level: "info" | "success" | "warni
   const text = params?.[0];
   const options = params?.[1] as JSONObject;
   const duration = options?.["duration"] ?? 3;
-  text && messageInstance[level](text, duration as number);
+  text && messageInstance[level](text as any, duration as number);
 };
 
 const MessageCompBase = simpleMultiComp({});
diff --git a/client/packages/lowcoder/src/comps/index.tsx b/client/packages/lowcoder/src/comps/index.tsx
index 71de8f6fdc..0de77fadca 100644
--- a/client/packages/lowcoder/src/comps/index.tsx
+++ b/client/packages/lowcoder/src/comps/index.tsx
@@ -144,7 +144,7 @@ const builtInRemoteComps: Omit<RemoteCompInfo, "compName"> = {
   packageName: "lowcoder-comps",
 };
 
-const uiCompMap: Registry = {
+var uiCompMap: Registry = {
 
   // Dashboards
 
@@ -1084,6 +1084,7 @@ const uiCompMap: Registry = {
 };
 
 export function loadComps() {
+  if(!uiCompMap) return;
   const entries = Object.entries(uiCompMap);
   for (const [compType, manifest] of entries) {
     registerComp(compType as UICompType, manifest);
diff --git a/client/packages/lowcoder/src/comps/queries/esQuery.tsx b/client/packages/lowcoder/src/comps/queries/esQuery.tsx
index 9222231bd6..902332bbdb 100644
--- a/client/packages/lowcoder/src/comps/queries/esQuery.tsx
+++ b/client/packages/lowcoder/src/comps/queries/esQuery.tsx
@@ -1,4 +1,4 @@
-import { Tag } from "antd";
+import { default as Tag } from "antd/es/tag";
 import { trans } from "i18n";
 import _, { includes, isEmpty, pick } from "lodash";
 import {
@@ -255,7 +255,9 @@ const EsQueryPropertyView = (props: {
             {children.esMethod.getView() === "RAW" ? (
               children.path.propertyView({})
             ) : (
-              <ReadOnlyField>{children.path.toJsonValue()}</ReadOnlyField>
+              <ReadOnlyField>
+                <>{children.path.toJsonValue()}</>
+              </ReadOnlyField>
             )}
           </InputField>
 
diff --git a/client/packages/lowcoder/src/comps/queries/httpQuery/httpQueryConstants.tsx b/client/packages/lowcoder/src/comps/queries/httpQuery/httpQueryConstants.tsx
index a0494477f2..ba9772af49 100644
--- a/client/packages/lowcoder/src/comps/queries/httpQuery/httpQueryConstants.tsx
+++ b/client/packages/lowcoder/src/comps/queries/httpQuery/httpQueryConstants.tsx
@@ -7,14 +7,14 @@ import { QueryConfigItemWrapper, QueryConfigLabel, QueryConfigWrapper } from "co
 import { GraphqlQuery } from "./graphqlQuery";
 import { StreamQuery } from "./streamQuery";
 
-const UrlInput = styled.div<{ hasAddonBefore: boolean }>`
+const UrlInput = styled.div<{ $hasAddonBefore: boolean }>`
   display: flex;
   width: 100%;
 
   .cm-editor {
     margin-top: 0;
-    ${(props) => props.hasAddonBefore && "border-top-left-radius: 0;"}
-    ${(props) => props.hasAddonBefore && "border-bottom-left-radius: 0;"};
+    ${(props) => props.$hasAddonBefore && "border-top-left-radius: 0;"}
+    ${(props) => props.$hasAddonBefore && "border-bottom-left-radius: 0;"};
   }
 `;
 
@@ -46,7 +46,7 @@ export const HttpPathPropertyView = (props: {
     <QueryConfigWrapper>
       <QueryConfigLabel>URL</QueryConfigLabel>
       <QueryConfigItemWrapper>
-        <UrlInput hasAddonBefore={!!httpConfig?.url}>
+        <UrlInput $hasAddonBefore={!!httpConfig?.url}>
           {httpConfig?.url && <UrlInputAddonBefore>{httpConfig?.url}</UrlInputAddonBefore>}
 
           {props.comp.children.path.propertyView({
diff --git a/client/packages/lowcoder/src/comps/queries/httpQuery/streamQuery.tsx b/client/packages/lowcoder/src/comps/queries/httpQuery/streamQuery.tsx
index 62d4ef5334..04ceacb846 100644
--- a/client/packages/lowcoder/src/comps/queries/httpQuery/streamQuery.tsx
+++ b/client/packages/lowcoder/src/comps/queries/httpQuery/streamQuery.tsx
@@ -68,7 +68,7 @@ StreamTmpQuery = withMethodExposing(StreamTmpQuery, [
     },
     execute: (comp, params) => {
       return new Promise((resolve, reject) => {
-        const tmpComp = (comp as StreamQuery);
+        const tmpComp = (comp as unknown as StreamQuery);
         if(!tmpComp.getSocket()) {
           return reject('Socket message send failed')
         }
diff --git a/client/packages/lowcoder/src/comps/queries/libraryQuery.tsx b/client/packages/lowcoder/src/comps/queries/libraryQuery.tsx
index bc30e137ed..26d0bc59be 100644
--- a/client/packages/lowcoder/src/comps/queries/libraryQuery.tsx
+++ b/client/packages/lowcoder/src/comps/queries/libraryQuery.tsx
@@ -1,5 +1,5 @@
 import { LoadingOutlined } from "@ant-design/icons";
-import { Spin } from "antd";
+import { default as Spin } from "antd/es/spin";
 import DataSourceIcon from "components/DataSourceIcon";
 import { ContextControlType, ContextJsonControl } from "comps/controls/contextCodeControl";
 import { trans } from "i18n";
diff --git a/client/packages/lowcoder/src/comps/queries/queryComp/queryNotificationControl.tsx b/client/packages/lowcoder/src/comps/queries/queryComp/queryNotificationControl.tsx
index 263dbef14f..089845d027 100644
--- a/client/packages/lowcoder/src/comps/queries/queryComp/queryNotificationControl.tsx
+++ b/client/packages/lowcoder/src/comps/queries/queryComp/queryNotificationControl.tsx
@@ -131,7 +131,7 @@ const QueryNotificationTmpControl = new MultiCompBuilder(
 
       // Execute system notification when triggered manually and without custom notification and query is successful
       if (result.success && !hasNoticed) {
-        messageInstance.success(trans("query.successMessageWithName", { name }), duration);
+        messageInstance?.success(trans("query.successMessageWithName", { name }), duration);
       }
     }
   }
diff --git a/client/packages/lowcoder/src/comps/queries/resourceDropdown.tsx b/client/packages/lowcoder/src/comps/queries/resourceDropdown.tsx
index d4b60a063a..037b50f496 100644
--- a/client/packages/lowcoder/src/comps/queries/resourceDropdown.tsx
+++ b/client/packages/lowcoder/src/comps/queries/resourceDropdown.tsx
@@ -1,11 +1,12 @@
-import { Divider, Select } from "antd";
+import { default as Divider } from "antd/es/divider";
+import { OptionProps, default as Select } from "antd/es/select";
 import { useSelector } from "react-redux";
 import React, { useContext, useMemo, useState } from "react";
 import { DataSourceTypeInfo } from "api/datasourceApi";
 import styled from "styled-components";
 import { CustomSelect, EllipsisTextCss } from "lowcoder-design";
 import { DatasourceModal } from "pages/datasource/datasourceModal";
-import { InputStatus } from "antd/lib/_util/statusUtils";
+import { InputStatus } from "antd/es/_util/statusUtils";
 import { getDataSource, getDataSourceTypes } from "redux/selectors/datasourceSelectors";
 import { getUser } from "redux/selectors/usersSelectors";
 import { getBottomResIcon } from "@lowcoder-ee/util/bottomResUtils";
@@ -24,6 +25,8 @@ import {
 import { QueryContext } from "util/context/QueryContext";
 import { messageInstance } from "lowcoder-design";
 
+const { Option } = Select;
+
 const SelectOptionLabel = styled.div`
   font-size: 13px;
   display: inline-block;
@@ -36,7 +39,7 @@ const SelectOptionContains = styled.div`
   align-items: center;
   width: 99%;
 `;
-const SelectOption = styled(Select.Option)`
+const SelectOption = styled((props: OptionProps) => <Option {...props} />)`
   display: flex;
   justify-content: space-between;
 
diff --git a/client/packages/lowcoder/src/comps/utils/useUIView.tsx b/client/packages/lowcoder/src/comps/utils/useUIView.tsx
index 2c5f1d1755..9456850901 100644
--- a/client/packages/lowcoder/src/comps/utils/useUIView.tsx
+++ b/client/packages/lowcoder/src/comps/utils/useUIView.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode, Suspense } from "react";
 import { useIsMobile } from "util/hooks";
-import { Skeleton } from "antd";
+import { default as Skeleton } from "antd/es/skeleton";
 
 export function useUIView(mobileView: ReactNode, pcView: ReactNode) {
   return <>{useIsMobile() ? <Suspense fallback={<Skeleton />}>{mobileView}</Suspense> : pcView}</>;
diff --git a/client/packages/lowcoder/src/constants/apiConstants.ts b/client/packages/lowcoder/src/constants/apiConstants.ts
index 914687d35c..3b2f65badf 100644
--- a/client/packages/lowcoder/src/constants/apiConstants.ts
+++ b/client/packages/lowcoder/src/constants/apiConstants.ts
@@ -1,3 +1,4 @@
+import { RawAxiosRequestHeaders } from "axios";
 import { trans } from "i18n";
 
 export const DEFAULT_VERIFY_CODE_INTERVAL_SECONDS = 10;
@@ -47,7 +48,7 @@ export type PaginationParam = {
   size: number;
 };
 
-export const API_REQUEST_HEADERS: APIHeaders = {
+export const API_REQUEST_HEADERS: RawAxiosRequestHeaders = {
   "Content-Type": "application/json",
 };
 export const SERVER_HOST = `${REACT_APP_API_HOST ?? ""}`;
diff --git a/client/packages/lowcoder/src/constants/userConstants.ts b/client/packages/lowcoder/src/constants/userConstants.ts
index 3e080bc8fb..771c15194b 100644
--- a/client/packages/lowcoder/src/constants/userConstants.ts
+++ b/client/packages/lowcoder/src/constants/userConstants.ts
@@ -11,6 +11,7 @@ export const UserConnectionSource = {
 };
 
 export type UserConnection = {
+  authId: any;
   source: string;
   name: string;
   rawUserInfo?: JSONObject;
diff --git a/client/packages/lowcoder/src/debug.tsx b/client/packages/lowcoder/src/debug.tsx
index 792fe24ccc..f3dfcc8be9 100644
--- a/client/packages/lowcoder/src/debug.tsx
+++ b/client/packages/lowcoder/src/debug.tsx
@@ -1,4 +1,5 @@
-import { Layout, Menu } from "antd";
+import { default as Layout } from "antd/es/layout";
+import { default as Menu } from "antd/es/menu";
 import { Comp } from "lowcoder-core";
 import { InputComp } from "comps/comps/textInputComp/inputComp";
 import { ButtonComp } from "comps/comps/buttonComp/buttonComp";
@@ -101,9 +102,11 @@ const DebugComp = withViewFn(simpleMultiComp(childrenMap), (debugComp) => {
         </Menu>
       </Layout.Sider>
       <Layout.Content>
-        <div>CANVAS:</div>
-        {comp && comp.getView()}
-        {compDataToString(comp)}
+        <>
+          <div>CANVAS:</div>
+          {comp && comp.getView()}
+          {compDataToString(comp)}
+        </>
       </Layout.Content>
       <Layout.Sider theme="light" width={300}>
         <div>PROPERTY PANE:</div>
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index bf261cb95a..a75348a04b 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -1245,6 +1245,7 @@ export const en = {
     "link": "Link",
     "links": "Links",
     "tag": "Tag",
+    "select": "Select",
     "date": "Date",
     "dateTime": "Date Time",
     "badgeStatus": "Status",
diff --git a/client/packages/lowcoder/src/ide/CompIde.tsx b/client/packages/lowcoder/src/ide/CompIde.tsx
index 2ac7151b3a..31400138fe 100644
--- a/client/packages/lowcoder/src/ide/CompIde.tsx
+++ b/client/packages/lowcoder/src/ide/CompIde.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Menu } from "antd";
+import { default as Menu } from "antd/es/menu";
 import { CompPlayground } from "./CompPlayground";
 import styled from "styled-components";
 import { UICompLayoutInfo } from "comps/uiCompRegistry";
diff --git a/client/packages/lowcoder/src/ide/CompPlayground.tsx b/client/packages/lowcoder/src/ide/CompPlayground.tsx
index 2dcbf2e8b8..f458ee1847 100644
--- a/client/packages/lowcoder/src/ide/CompPlayground.tsx
+++ b/client/packages/lowcoder/src/ide/CompPlayground.tsx
@@ -2,7 +2,10 @@ import React, { useState, useMemo, ChangeEvent } from "react";
 import ReactJson from "react-json-view";
 import { UICompLayoutInfo } from "comps/uiCompRegistry";
 import { Comp, customAction } from "lowcoder-core";
-import { Button, Space, Input, Form } from "antd";
+import { default as Button } from "antd/es/button";
+import { default as Space } from "antd/es/space";
+import { default as Input } from "antd/es/input";
+import { default as Form } from "antd/es/form";
 import styled from "styled-components";
 import { useCompInstance, GetContainerParams } from "comps/utils/useCompInstance";
 import { CanvasContainerID } from "constants/domLocators";
diff --git a/client/packages/lowcoder/src/layout/compSelectionWrapper.tsx b/client/packages/lowcoder/src/layout/compSelectionWrapper.tsx
index 4214ab6d99..88de42290c 100644
--- a/client/packages/lowcoder/src/layout/compSelectionWrapper.tsx
+++ b/client/packages/lowcoder/src/layout/compSelectionWrapper.tsx
@@ -24,32 +24,32 @@ export type DragHandleName = "w" | "e" | "nw" | "ne" | "sw" | "se";
 type NamePos = "top" | "bottom" | "bottomInside";
 
 const NameDiv = styled.div<{
-  isSelected: boolean;
-  position: NamePos;
-  compType: UICompType;
-  isDraggable: boolean;
+  $isSelected: boolean;
+  $position: NamePos;
+  $compType: UICompType;
+  $isDraggable: boolean;
 }>`
   background: ${(props) => {
-    if (props.isSelected) {
-      return props.compType === "module" ? ModulePrimaryColor : PrimaryColor;
+    if (props.$isSelected) {
+      return props.$compType === "module" ? ModulePrimaryColor : PrimaryColor;
     }
     return "#B8B9BF";
   }};
-  border-radius: ${(props) => (props.position === "top" ? "2px 2px 0 0" : "0 0 2px 2px")};
+  border-radius: ${(props) => (props.$position === "top" ? "2px 2px 0 0" : "0 0 2px 2px")};
   font-weight: 500;
   color: #ffffff;
   position: absolute;
   font-size: 12px;
   line-height: 16px;
-  top: ${(props) => (props.position === "top" ? "-16px" : "unset")};
+  top: ${(props) => (props.$position === "top" ? "-16px" : "unset")};
   bottom: ${(props) =>
-    props.position === "top" ? "unset" : props.position === "bottom" ? "-16px" : "0px"};
+    props.$position === "top" ? "unset" : props.$position === "bottom" ? "-16px" : "0px"};
   height: 16px;
   right: 0;
   padding-right: 5px;
-  padding-left: ${(props) => (props.isDraggable ? 0 : "5px")};
+  padding-left: ${(props) => (props.$isDraggable ? 0 : "5px")};
   display: flex;
-  cursor: ${(props) => (props.isDraggable ? "grab" : "pointer")};
+  cursor: ${(props) => (props.$isDraggable ? "grab" : "pointer")};
   z-index: 10;
 `;
 const NameLabel = styled.span`
@@ -97,12 +97,12 @@ function getLineStyle(
 
 // padding: ${props => props.hover || props.showDashline ? 3 : 4}px;
 const SelectableDiv = styled.div<{
-  hover: boolean;
-  showDashLine: boolean;
-  isSelected: boolean;
-  compType: UICompType;
-  isHidden: boolean;
-  needResizeDetector: boolean;
+  $hover?: boolean;
+  $showDashLine: boolean;
+  $isSelected: boolean;
+  $compType: UICompType;
+  $isHidden: boolean;
+  $needResizeDetector: boolean;
 }>`
   width: 100%;
   height: 100%;
@@ -110,19 +110,19 @@ const SelectableDiv = styled.div<{
 
   ${(props) =>
     `${getLineStyle(
-      props.hover,
-      props.showDashLine,
-      props.isSelected,
-      props.compType,
-      props.isHidden
+      Boolean(props.$hover),
+      props.$showDashLine,
+      props.$isSelected,
+      props.$compType,
+      props.$isHidden
     )}`}
   & .module-wrapper {
     margin: ${-GRID_ITEM_BORDER_WIDTH}px;
   }
 
   ${(props) =>
-    props.compType === "image" &&
-    props.needResizeDetector &&
+    props.$compType === "image" &&
+    props.$needResizeDetector &&
     `
     display: inline-flex;
     align-items: center;
@@ -293,16 +293,16 @@ export const CompSelectionWrapper = (props: {
         onMouseOver,
         onMouseOut,
         onClick: props.onClick,
-        hover: hover,
-        showDashLine: editorState.showGridLines() || props.hidden,
-        isSelected: props.isSelected,
-        isHidden: props.hidden,
+        $hover: hover || undefined,
+        $showDashLine: editorState.showGridLines() || props.hidden,
+        $isSelected: props.isSelected,
+        $isHidden: props.hidden,
       }
     : {
-        hover: false,
-        showDashLine: false,
-        isSelected: false,
-        isHidden: false,
+        $hover: undefined,
+        $showDashLine: false,
+        $isSelected: false,
+        $isHidden: false,
       };
 
   const zIndex = props.isSelected
@@ -325,16 +325,16 @@ export const CompSelectionWrapper = (props: {
     <div id={props.id} style={{ ...props.style, zIndex }} className={props.className}>
       <SelectableDiv
         {...selectableDivProps}
-        compType={props.compType}
+        $compType={props.compType}
         ref={wrapperRef}
-        needResizeDetector={needResizeDetector}
+        $needResizeDetector={needResizeDetector}
       >
         {props.isSelectable && nameConfig.show && (hover || props.isSelected || props.hidden) && (
           <NameDiv
-            compType={props.compType}
-            isSelected={hover || props.isSelected}
-            position={nameConfig.pos}
-            isDraggable={props.isDraggable}
+            $compType={props.compType}
+            $isSelected={hover || props.isSelected}
+            $position={nameConfig.pos}
+            $isDraggable={props.isDraggable}
             ref={nameDivRef}
           >
             {props.isDraggable && <DragWhiteIcon />}
diff --git a/client/packages/lowcoder/src/layout/gridLayout.tsx b/client/packages/lowcoder/src/layout/gridLayout.tsx
index 52ff9d0ab0..328ff1ab6b 100644
--- a/client/packages/lowcoder/src/layout/gridLayout.tsx
+++ b/client/packages/lowcoder/src/layout/gridLayout.tsx
@@ -70,10 +70,10 @@ const DELAY_HIGHER_MS = 5;
 export const FLY_START_INFO = "flyStartInfo";
 export const FLY_OVER_INFO = "flyOverInfo";
 
-const DragPlaceHolder = styled.div<{ compType: UICompType }>`
+const DragPlaceHolder = styled.div<{ $compType: UICompType }>`
   height: 100%;
   background-color: ${(props) =>
-    props.compType === "module" ? ModulePrimaryColor : PrimaryColor} !important;
+    props.$compType === "module" ? ModulePrimaryColor : PrimaryColor} !important;
 `;
 
 /**
@@ -399,7 +399,7 @@ class GridLayout extends React.Component<GridLayoutProps, GridLayoutState> {
     const draggingExtraLayout = draggingUtils.getData<FlyStartInfo>(FLY_START_INFO)?.flyExtraLayout;
     const extraItem = this.props.extraLayout?.[item.i] ?? draggingExtraLayout?.[item.i];
     const child = item.placeholder ? (
-      <DragPlaceHolder compType={extraItem?.compType} className="react-grid-placeholder" />
+      <DragPlaceHolder $compType={extraItem?.compType} className="react-grid-placeholder" />
     ) : (
       childrenMap[item.i]
     );
@@ -1006,10 +1006,10 @@ class GridLayout extends React.Component<GridLayoutProps, GridLayoutState> {
         ref={this.ref}
         className={mergedClassName}
         style={style}
-        bgColor={this.props.bgColor}
-        radius={this.props.radius}
-        autoHeight={this.props.autoHeight}
-        overflow={this.props.overflow}
+        $bgColor={this.props.bgColor}
+        $radius={this.props.radius}
+        $autoHeight={this.props.autoHeight}
+        $overflow={this.props.overflow}
         tabIndex={-1}
         onDrop={isDroppable ? this.onDrop : _.noop}
         onDragLeave={isDroppable ? this.onDragLeave : _.noop}
@@ -1036,20 +1036,20 @@ class GridLayout extends React.Component<GridLayoutProps, GridLayoutState> {
 }
 
 const LayoutContainer = styled.div<{
-  bgColor?: string;
-  autoHeight?: boolean;
-  overflow?: string;
-  radius?: string;
+  $bgColor?: string;
+  $autoHeight?: boolean;
+  $overflow?: string;
+  $radius?: string;
 }>`
-  border-radius: ${(props) => props.radius ?? "4px"};
-  background-color: ${(props) => props.bgColor ?? "#f5f5f6"};
+  border-radius: ${(props) => props.$radius ?? "4px"};
+  background-color: ${(props) => props.$bgColor ?? "#f5f5f6"};
   /* height: 100%; */
-  height: ${(props) => (props.autoHeight ? "auto" : "100%")};
+  height: ${(props) => (props.$autoHeight ? "auto" : "100%")};
 
   overflow: auto;
-  overflow: ${(props) => props.overflow ?? "overlay"};
+  overflow: ${(props) => props.$overflow ?? "overlay"};
   ${(props) =>
-    props.autoHeight &&
+    props.$autoHeight &&
     `::-webkit-scrollbar {
     display: none;
   }`}
diff --git a/client/packages/lowcoder/src/layout/handler.tsx b/client/packages/lowcoder/src/layout/handler.tsx
index e09f1ebdff..6e98170142 100644
--- a/client/packages/lowcoder/src/layout/handler.tsx
+++ b/client/packages/lowcoder/src/layout/handler.tsx
@@ -22,9 +22,9 @@ const EdgeHandle = css`
   }
 `;
 
-const HorizontalHandle = css<{ axis: string }>`
+const HorizontalHandle = css<{ $axis: string }>`
   ${EdgeHandle}
-  ${(props) => (props.axis === "s" ? "bottom: -10px;" : "top: -10px;")}
+  ${(props) => (props.$axis === "s" ? "bottom: -10px;" : "top: -10px;")}
   /* left: -4px; */
   height: 12px !important;
   /* width: calc(100% + 8px) !important; */
@@ -38,9 +38,9 @@ const HorizontalHandle = css<{ axis: string }>`
   }
 `;
 
-const VerticalHandleStyles = css<{ axis: string }>`
+const VerticalHandleStyles = css<{ $axis: string }>`
   ${EdgeHandle}
-  ${(props) => (props.axis === "e" ? "right: -10px;" : "left: -10px;")}
+  ${(props) => (props.$axis === "e" ? "right: -10px;" : "left: -10px;")}
   width: 12px !important;
   top: 0px;
   /* height: calc(100% + 8px) !important; */
@@ -54,7 +54,7 @@ const VerticalHandleStyles = css<{ axis: string }>`
   }
 `;
 
-const CornerHandle = css<{ axis: string }>`
+const CornerHandle = css<{ $axis: string }>`
   position: absolute;
   z-index: 3;
   width: 10px !important;
@@ -64,23 +64,23 @@ const CornerHandle = css<{ axis: string }>`
     height: 10px !important;
     border: none !important;
   }
-  cursor: ${(props) => props.axis + "-resize"} !important;
-  ${(props) => (["nw", "ne"].indexOf(props.axis) >= 0 ? "top: -5px;" : "")};
-  ${(props) => (["sw", "se"].indexOf(props.axis) >= 0 ? "bottom: -5px;" : "")};
-  ${(props) => (["sw", "nw"].indexOf(props.axis) >= 0 ? "left: -5px;" : "")};
-  ${(props) => (["se", "ne"].indexOf(props.axis) >= 0 ? "right: -5px;" : "")};
+  cursor: ${(props) => props.$axis + "-resize"} !important;
+  ${(props) => (["nw", "ne"].indexOf(props.$axis) >= 0 ? "top: -5px;" : "")};
+  ${(props) => (["sw", "se"].indexOf(props.$axis) >= 0 ? "bottom: -5px;" : "")};
+  ${(props) => (["sw", "nw"].indexOf(props.$axis) >= 0 ? "left: -5px;" : "")};
+  ${(props) => (["se", "ne"].indexOf(props.$axis) >= 0 ? "right: -5px;" : "")};
 `;
 
-const ResizeHandle = styled.div<{ axis: string }>`
+const ResizeHandle = styled.div<{ $axis: string }>`
   position: absolute;
   background-image: none;
-  ${(props) => (["s", "n"].indexOf(props.axis) >= 0 ? HorizontalHandle : "")};
-  ${(props) => (["w", "e"].indexOf(props.axis) >= 0 ? VerticalHandleStyles : "")};
-  ${(props) => (["sw", "nw", "se", "ne"].indexOf(props.axis) >= 0 ? CornerHandle : "")};
+  ${(props) => (["s", "n"].indexOf(props.$axis) >= 0 ? HorizontalHandle : "")};
+  ${(props) => (["w", "e"].indexOf(props.$axis) >= 0 ? VerticalHandleStyles : "")};
+  ${(props) => (["sw", "nw", "se", "ne"].indexOf(props.$axis) >= 0 ? CornerHandle : "")};
 `;
 
 const Handle = (axis: ResizeHandleAxis, ref: ReactRef<HTMLDivElement>) => {
-  return <ResizeHandle ref={ref} axis={axis} className={`react-resizable-handle`}></ResizeHandle>;
+  return <ResizeHandle ref={ref} $axis={axis} className={`react-resizable-handle`}></ResizeHandle>;
 };
 
 export default Handle;
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/CreateDropdown.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/CreateDropdown.tsx
index 176552c26e..d3c97e6dab 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/CreateDropdown.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/CreateDropdown.tsx
@@ -11,11 +11,12 @@ import {
   TacoButton,
 } from "lowcoder-design";
 import React, { FunctionComponent, useState } from "react";
-import { ItemType } from "antd/lib/menu/hooks/useItems";
+import { ItemType } from "antd/es/menu/hooks/useItems";
 import { HomeResInfo } from "../../util/homeResUtils";
 import { createAppItemClass } from "../tutorials/HomeTutorialsV2";
 import styled from "styled-components";
-import { Dropdown as AntdDropdown, Menu as AntdMenu } from "antd";
+import { default as AntdDropdown } from "antd/es/dropdown";
+import { default as AntdMenu } from "antd/es/menu";
 import { HomeLayoutMode } from "./HomeLayout";
 import { useSelector } from "react-redux";
 import { getUser } from "../../redux/selectors/usersSelectors";
@@ -31,7 +32,6 @@ const Dropdown = styled(AntdDropdown)`
 
 const CreateDropdownMenu = styled(AntdMenu)`
 &&& {
-
   width: fit-content;
   min-width: 110px;
   padding: 8px;
@@ -44,12 +44,10 @@ const CreateDropdownMenu = styled(AntdMenu)`
     padding: 8px;
     display: flex;
     align-items: center;
-  }
-
-  .ant-dropdown-menu-item:hover,
-  .ant-dropdown-menu-submenu-title:hover {
-    background: #f2f7fc;
-    border-radius: 4px;
+    &:hover {
+      background: #f2f7fc;
+      border-radius: 4px;
+    }
   }
 
   .ant-dropdown-menu-title-content {
@@ -104,7 +102,7 @@ const LayoutItemWrapper = styled.div`
   align-items: center;
   flex-direction: column;
 
-  :hover {
+  &:hover {
     border: 1px solid ${ActiveTextColor};
 
     ${CommonTextLabel} {
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx
index ff680cc7d8..9ecd9aa16d 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx
@@ -5,7 +5,9 @@ import { ApplicationMeta, FolderMeta } from "constants/applicationConstants";
 import { ALL_APPLICATIONS_URL } from "constants/routesURL";
 import history from "util/history";
 import dayjs from "dayjs";
-import { Breadcrumb as AntdBreadcrumb, Select, Skeleton } from "antd";
+import { default as AntdBreadcrumb } from "antd/es/breadcrumb";
+import { default as Select } from "antd/es/select";
+import { default as Skeleton } from "antd/es/skeleton";
 import React, { useEffect, useState } from "react";
 import {
   ArrowIcon,
@@ -208,7 +210,7 @@ const LayoutSwitcher = styled.div`
   align-items: center;
   justify-content: center;
 
-  :hover {
+  &:hover {
     background-color: #f5f5f6;
   }
 
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeResCard.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeResCard.tsx
index 3b62e16809..26c97eb30d 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/HomeResCard.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/HomeResCard.tsx
@@ -43,7 +43,7 @@ const ExecButton = styled(TacoButton)`
   font-weight: 500;
   color: #4965f2;
 
-  :hover {
+  &:hover {
     background: #f9fbff;
     border: 1px solid #c2d6ff;
     color: #315efb;
@@ -62,7 +62,7 @@ const Wrapper = styled.div`
   margin-bottom: -1px;
   margin-top: 1px;
 
-  :hover {
+  &:hover {
     background-color: #f5f7fa;
   }
 `;
@@ -79,7 +79,7 @@ const Card = styled.div`
     opacity: 0;
   }
 
-  :hover {
+  &:hover {
     button {
       opacity: 1;
     }
@@ -107,7 +107,7 @@ const CardInfo = styled.div`
   overflow: hidden;
   padding-right: 12px;
 
-  :hover {
+  &:hover {
     .ant-typography {
       color: #315efb;
     }
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeResOptions.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeResOptions.tsx
index f9a4cf61b3..1573cce3cc 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/HomeResOptions.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/HomeResOptions.tsx
@@ -22,7 +22,7 @@ const PopoverIcon = styled(PointIcon)`
     fill: #8b8fa3;
   }
 
-  :hover {
+  &:hover {
     background-color: #e1e3eb;
     border-radius: 4px;
     cursor: pointer;
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeTableView.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeTableView.tsx
index d62ee7a3b1..4a76939ee6 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/HomeTableView.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/HomeTableView.tsx
@@ -13,7 +13,7 @@ import { HomeResTypeEnum } from "../../types/homeRes";
 import React, { useState } from "react";
 import { updateFolder } from "../../redux/reduxActions/folderActions";
 import { updateAppMetaAction } from "../../redux/reduxActions/applicationActions";
-import { Typography } from "antd";
+import { default as AntdTypographyText } from "antd/es/typography/Text";
 import { HomeRes } from "./HomeLayout";
 import { HomeResOptions } from "./HomeResOptions";
 import { MoveToFolderModal } from "./MoveToFolderModal";
@@ -44,7 +44,7 @@ const EditBtn = styled(TacoButton)`
   height: 24px;
 `;
 
-const TypographyText = styled(Typography.Text)`
+const TypographyText = styled(AntdTypographyText)`
   margin: 0 !important;
   left: 0 !important;
   width: 100%;
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/MoveToFolderModal.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/MoveToFolderModal.tsx
index a1f0bb61fc..6a16283625 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/MoveToFolderModal.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/MoveToFolderModal.tsx
@@ -1,5 +1,5 @@
 import { HomeRes } from "./HomeLayout";
-import { Form } from "antd";
+import { default as Form } from "antd/es/form";
 import React, { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/TrashTableView.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/TrashTableView.tsx
index 2303aab15c..765d090b53 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/TrashTableView.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/TrashTableView.tsx
@@ -27,7 +27,8 @@ const NameWrapper = styled.div`
 
 const EditBtn = styled(TacoButton)`
   opacity: 0;
-  width: 52px;
+  min-width: 52px !important;
+  width: auto !important;
   height: 24px;
 `;
 
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/components/AppImport.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/components/AppImport.tsx
index 010b37bc78..e4d43e5763 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/components/AppImport.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/components/AppImport.tsx
@@ -1,4 +1,4 @@
-import { Upload as AntUpload } from "antd";
+import { default as AntUpload } from "antd/es/upload";
 import React from "react";
 import ApplicationApi from "api/applicationApi";
 import { validateResponse } from "api/apiUtils";
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx
index ed02f6cdf6..7e24d5eee6 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx
@@ -77,7 +77,7 @@ const FolderCountLabel = styled.span`
   color: #b8b9bf;
 `;
 
-const FolderNameWrapper = styled.div<{ selected: boolean }>`
+const FolderNameWrapper = styled.div<{ $selected: boolean }>`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -86,7 +86,7 @@ const FolderNameWrapper = styled.div<{ selected: boolean }>`
   height: 100%;
 
   ${(props) => {
-    if (props.selected) {
+    if (props.$selected) {
       return css`
         font-weight: 500;
 
@@ -101,7 +101,7 @@ const FolderNameWrapper = styled.div<{ selected: boolean }>`
     line-height: 16px;
   }
 
-  :hover {
+  &:hover {
     svg {
       display: inline-block;
     }
@@ -133,9 +133,9 @@ const FolderName = (props: { id: string; name: string }) => {
   );
 };
 
-const MoreFoldersWrapper = styled.div<{ selected: boolean }>`
+const MoreFoldersWrapper = styled.div<{ $selected: boolean }>`
   ${(props) => {
-    if (props.selected) {
+    if (props.$selected) {
       return css`
         font-weight: 500;
       `;
@@ -143,12 +143,12 @@ const MoreFoldersWrapper = styled.div<{ selected: boolean }>`
   }}
 `;
 
-const MoreFoldersIcon = styled(PointIcon)<{ selected: boolean }>`
+const MoreFoldersIcon = styled(PointIcon)<{ $selected: boolean }>`
   cursor: pointer;
   flex-shrink: 0;
 
   g {
-    fill: ${(props) => (props.selected ? "#4965f2" : "#8b8fa3")};
+    fill: ${(props) => (props.$selected ? "#4965f2" : "#8b8fa3")};
   }
 `;
 
@@ -161,7 +161,7 @@ const PopoverIcon = styled(PointIcon)`
     fill: #8b8fa3;
   }
 
-  :hover {
+  &:hover {
     background-color: #e1e3eb;
     border-radius: 4px;
     cursor: pointer;
@@ -183,7 +183,7 @@ const InviteUser = styled.div`
   cursor: pointer;
   width: 219px;
 
-  :hover {
+  &:hover {
     color: #315efb;
 
     svg g g {
@@ -202,7 +202,7 @@ const CreateFolderIcon = styled.div`
   justify-content: center;
   border-radius: 4px;
 
-  :hover {
+  &:hover {
     g {
       stroke: #315efb;
     }
@@ -291,8 +291,8 @@ export default function ApplicationHome() {
       const path = FOLDER_URL_PREFIX + `/${folder.folderId}`;
       return {
         onSelected: (_, currentPath) => currentPath === path,
-        text: (props: { selected: boolean }) => (
-          <FolderNameWrapper selected={props.selected}>
+        text: (props: { selected?: boolean }) => (
+          <FolderNameWrapper $selected={Boolean(props.selected)}>
             <FolderName name={folder.name} id={folder.folderId} />
           </FolderNameWrapper>
         ),
@@ -309,8 +309,8 @@ export default function ApplicationHome() {
     folderItems = [
       ...folderItems,
       {
-        text: (props: { selected: boolean }) => (
-          <MoreFoldersWrapper selected={props.selected}>{trans("more")}</MoreFoldersWrapper>
+        text: (props: { selected?: boolean }) => (
+          <MoreFoldersWrapper $selected={Boolean(props.selected)}>{trans("more")}</MoreFoldersWrapper>
         ),
         routePath: FOLDERS_URL,
         routeComp: RootFolderListView,
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/useCreateFolder.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/useCreateFolder.tsx
index 36d27b637a..4c12439497 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/useCreateFolder.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/useCreateFolder.tsx
@@ -2,13 +2,13 @@ import { CustomModal, DatasourceForm, FormInputItem, FormSection } from "lowcode
 import { RuleObject, StoreValue } from "rc-field-form/lib/interface";
 import { createFolder } from "../../redux/reduxActions/folderActions";
 import React, { useCallback, useMemo } from "react";
-import { Form } from "antd";
+import { default as Form } from "antd/es/form";
 import { useDispatch, useSelector } from "react-redux";
 import styled from "styled-components";
 import { getUser } from "../../redux/selectors/usersSelectors";
 import { trans } from "../../i18n";
 import { foldersSelector } from "../../redux/selectors/folderSelector";
-import { ModalFunc } from "antd/lib/modal/confirm";
+import { ModalFunc } from "antd/es/modal/confirm";
 
 const CreateFolderLabel = styled.div`
   font-size: 13px;
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/common/Example.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/common/Example.tsx
index 73402350bc..1a6d6c571a 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/common/Example.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/common/Example.tsx
@@ -69,8 +69,8 @@ const Wrapper = styled.div`
     }
   }
 `;
-const ColorLump = styled.div<{ inputColor: string }>`
-  background-color: ${(props) => props.inputColor};
+const ColorLump = styled.div<{ $inputColor: string }>`
+  background-color: ${(props) => props.$inputColor};
   border: 1px;
   border-radius: 5px;
   width: 16px;
@@ -172,7 +172,7 @@ function SettingValue(props: { value: React.ReactNode }) {
   if (Regex(content, /#[0-9a-zA-Z]{6,6}/)) {
     content = (
       <>
-        <ColorLump inputColor={String(value)} />
+        <ColorLump $inputColor={String(value)} />
         <div> {String(value)}</div>
       </>
     );
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/common/Exposing.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/common/Exposing.tsx
index 5d93dfa22a..eaf795de82 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/common/Exposing.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/common/Exposing.tsx
@@ -1,4 +1,4 @@
-import { Table } from "antd";
+import { default as Table } from "antd/es/table";
 import { Comp } from "lowcoder-core";
 import { UICompType } from "comps/uiCompRegistry";
 import { EventConfigsType } from "comps/controls/eventHandlerControl";
diff --git a/client/packages/lowcoder/src/pages/common/commonLayout.tsx b/client/packages/lowcoder/src/pages/common/commonLayout.tsx
index f78ab704f1..a4762742b2 100644
--- a/client/packages/lowcoder/src/pages/common/commonLayout.tsx
+++ b/client/packages/lowcoder/src/pages/common/commonLayout.tsx
@@ -1,5 +1,5 @@
 import { Route, Switch, useLocation } from "react-router-dom";
-import { Layout } from "antd";
+import { default as Layout } from "antd/es/layout";
 import { AppHeader } from "pages/common/header";
 import { Menu } from "lowcoder-design";
 import history from "util/history";
diff --git a/client/packages/lowcoder/src/pages/common/header.tsx b/client/packages/lowcoder/src/pages/common/header.tsx
index 0b80f0b73b..65663b68d7 100644
--- a/client/packages/lowcoder/src/pages/common/header.tsx
+++ b/client/packages/lowcoder/src/pages/common/header.tsx
@@ -1,4 +1,6 @@
-import { Dropdown, Skeleton, Radio, RadioChangeEvent } from "antd";
+import { default as Dropdown } from "antd/es/dropdown";
+import { default as Skeleton } from "antd/es/skeleton";
+import { default as Radio, RadioChangeEvent } from "antd/es/radio";
 import LayoutHeader from "components/layout/Header";
 import { SHARE_TITLE } from "constants/apiConstants";
 import { AppTypeEnum } from "constants/applicationConstants";
@@ -54,7 +56,7 @@ const LogoIcon = styled(Logo)`
   max-width: 24px;
 `;
 
-const IconCss = css<{ $show: boolean }>`
+const IconCss = css<{ $show?: boolean }>`
   &:hover {
     background-color: #8b8fa34c;
   }
@@ -133,8 +135,8 @@ const RecoverSnapshotBtn = styled(TacoButton)`
   padding: 4px 7px;
   height: 28px;
 
-  :disabled,
-  :disabled:hover {
+  &:disabled,
+  &:disabled:hover {
     background: #4965f2;
     border: 1px solid #4965f2;
     color: #ffffff;
diff --git a/client/packages/lowcoder/src/pages/common/headerStartDropdown.tsx b/client/packages/lowcoder/src/pages/common/headerStartDropdown.tsx
index bffcb4d78d..eefa27800b 100644
--- a/client/packages/lowcoder/src/pages/common/headerStartDropdown.tsx
+++ b/client/packages/lowcoder/src/pages/common/headerStartDropdown.tsx
@@ -1,4 +1,4 @@
-import { Dropdown } from "antd";
+import { default as Dropdown } from "antd/es/dropdown";
 import { BASE_URL } from "constants/routesURL";
 import {
   CommonTextLabel,
diff --git a/client/packages/lowcoder/src/pages/common/help.tsx b/client/packages/lowcoder/src/pages/common/help.tsx
index 18b4516180..2baaba2259 100644
--- a/client/packages/lowcoder/src/pages/common/help.tsx
+++ b/client/packages/lowcoder/src/pages/common/help.tsx
@@ -3,7 +3,9 @@ import { Layers } from "constants/Layers";
 import { HelpIcon, LeftHelpIcon, HelpGithubIcon, HelpDiscordIcon } from "lowcoder-design";
 import { VideoIcon, ChatIcon, DocIcon, TutorialIcon, ShortcutIcon } from "assets/icons";
 import TutorialVideoPic from "assets/images/tutorialVideoThumbnail.png";
-import { Dropdown, Popover, Tooltip } from "antd";
+import { default as Dropdown } from "antd/es/dropdown";
+import { default as Popover } from "antd/es/popover";
+import { default as Tooltip } from "antd/es/tooltip";
 import {
   customerService,
   showCustomerServicePanel,
@@ -76,7 +78,7 @@ const HelpDiv = styled.div`
   width: 40px;
   cursor: pointer;
 
-  :hover {
+  &:hover {
     background: #315efb;
   }
 
@@ -131,7 +133,7 @@ const VersionDivEdit = styled.div`
   }
 `;
 
-const SpanStyled = styled.span<{ selected?: boolean }>`
+const SpanStyled = styled.span<{ $selected?: boolean }>`
   display: block;
   width: 26px;
   height: 26px;
@@ -147,7 +149,7 @@ const SpanStyled = styled.span<{ selected?: boolean }>`
       border-radius: 4px;
     }
     ${(props) =>
-      props.selected &&
+      props.$selected &&
       `
         background: #8b8fa37f;
         border-radius: 4px;
@@ -432,7 +434,7 @@ export function HelpDropdown(props: HelpDropdownProps) {
         onOpenChange={(open: boolean) => setShowDropdown(open)}
       >
         {props.isEdit ? (
-          <SpanStyled selected={showDropdown}>
+          <SpanStyled $selected={showDropdown}>
             <LeftHelpIcon />
           </SpanStyled>
         ) : (
diff --git a/client/packages/lowcoder/src/pages/common/orgLogo.tsx b/client/packages/lowcoder/src/pages/common/orgLogo.tsx
index 99f0598a2e..0dc9427d40 100644
--- a/client/packages/lowcoder/src/pages/common/orgLogo.tsx
+++ b/client/packages/lowcoder/src/pages/common/orgLogo.tsx
@@ -16,7 +16,7 @@ export default function OrgImage(props: {
   const backgroundColor = shouldRenderImage ? "transparent" : initialsAndColorCode[1];
 
   return (
-    <ImgWrapper backgroundColor={backgroundColor} className={props.className} side={props.side}>
+    <ImgWrapper $backgroundColor={backgroundColor} className={props.className} $side={props.side}>
       {!shouldRenderImage ? (
         <span>{initialsAndColorCode[0]}</span>
       ) : (
diff --git a/client/packages/lowcoder/src/pages/common/previewHeader.tsx b/client/packages/lowcoder/src/pages/common/previewHeader.tsx
index a2ed496e42..507330cbf2 100644
--- a/client/packages/lowcoder/src/pages/common/previewHeader.tsx
+++ b/client/packages/lowcoder/src/pages/common/previewHeader.tsx
@@ -1,4 +1,4 @@
-import { Skeleton } from "antd";
+import { default as Skeleton } from "antd/es/skeleton";
 import Header from "components/layout/Header";
 import { SHARE_TITLE } from "constants/apiConstants";
 import { ALL_APPLICATIONS_URL, APPLICATION_VIEW_URL, AUTH_LOGIN_URL } from "constants/routesURL";
@@ -18,10 +18,10 @@ import { AppPermissionDialog } from "../../components/PermissionDialog/AppPermis
 import { useState } from "react";
 import { getBrandingConfig } from "../../redux/selectors/configSelectors";
 
-const HeaderFont = styled.div<{ bgColor: string }>`
+const HeaderFont = styled.div<{ $bgColor: string }>`
   font-weight: 500;
   font-size: 14px;
-  color: ${(props) => (isDarkColor(props.bgColor) ? "#ffffff" : "#000000")};
+  color: ${(props) => (isDarkColor(props.$bgColor) ? "#ffffff" : "#000000")};
   font-style: normal;
   line-height: 24px;
   margin-right: 8px;
@@ -137,7 +137,7 @@ export const PreviewHeader = () => {
       <StyledLink onClick={() => history.push(ALL_APPLICATIONS_URL)}>
         <LogoIcon branding={true} />
       </StyledLink>
-      <HeaderFont bgColor={brandingConfig?.headerColor ?? "#2c2c2c"}>
+      <HeaderFont $bgColor={brandingConfig?.headerColor ?? "#2c2c2c"}>
         {application && application.name}
       </HeaderFont>
     </>
diff --git a/client/packages/lowcoder/src/pages/common/profileDropdown.tsx b/client/packages/lowcoder/src/pages/common/profileDropdown.tsx
index adc001b76d..b6f8b51136 100644
--- a/client/packages/lowcoder/src/pages/common/profileDropdown.tsx
+++ b/client/packages/lowcoder/src/pages/common/profileDropdown.tsx
@@ -1,4 +1,5 @@
-import { Dropdown, Menu } from "antd";
+import { default as Dropdown } from "antd/es/dropdown";
+import { default as Menu, MenuItemProps } from "antd/es/menu";
 import { Org, OrgRoleInfo } from "constants/orgConstants";
 import { ORGANIZATION_SETTING } from "constants/routesURL";
 import { User } from "constants/userConstants";
@@ -28,6 +29,8 @@ import { checkIsMobile } from "util/commonUtils";
 import { selectSystemConfig } from "redux/selectors/configSelectors";
 import { ItemType } from "antd/es/menu/hooks/useItems";
 
+const { Item } = Menu;
+
 const ProfileWrapper = styled.div`
   display: flex;
   align-items: center;
@@ -68,7 +71,7 @@ const StyledPackUpIcon = styled(PackUpIcon)`
   transform: rotate(90deg);
 `;
 
-const SelectDropMenuItem = styled(Menu.Item)`
+const SelectDropMenuItem = styled((props: MenuItemProps) => <Item {...props} />)`
   .ant-dropdown-menu-item-icon {
     position: absolute;
     right: 0;
diff --git a/client/packages/lowcoder/src/pages/common/profileImage.tsx b/client/packages/lowcoder/src/pages/common/profileImage.tsx
index f3a73e5b9a..1a62dda4ca 100644
--- a/client/packages/lowcoder/src/pages/common/profileImage.tsx
+++ b/client/packages/lowcoder/src/pages/common/profileImage.tsx
@@ -4,29 +4,29 @@ import { getInitialsAndColorCode } from "util/stringUtils";
 import { fullAvatarUrl } from "util/urlUtils";
 
 export const ImgWrapper = styled.div<{
-  backgroundColor?: string;
-  side?: number;
-  fontSize?: number;
+  $backgroundColor?: string;
+  $side?: number;
+  $fontSize?: number;
 }>`
-  width: ${(props) => props.side || 34}px;
-  height: ${(props) => props.side || 34}px;
+  width: ${(props) => props.$side || 34}px;
+  height: ${(props) => props.$side || 34}px;
   display: flex;
   align-items: center;
   border-radius: 50%;
   border: 1px solid rgba(0, 0, 0, 0.1);
   justify-content: center;
   cursor: default;
-  background-color: ${(props) => props.backgroundColor};
+  background-color: ${(props) => props.$backgroundColor};
 
   & span {
     color: #ffffff;
     letter-spacing: normal;
     white-space: nowrap;
-    font-size: ${(props) => props.fontSize ?? 13}px;
+    font-size: ${(props) => props.$fontSize ?? 13}px;
     display: inline-block;
     ${(props) =>
-      props.fontSize && props.fontSize < 12
-        ? "-webkit-transform:scale(" + props.fontSize / 12 + ");"
+      props.$fontSize && props.$fontSize < 12
+        ? "-webkit-transform:scale(" + props.$fontSize / 12 + ");"
         : ""};
   }
 
@@ -56,11 +56,11 @@ export default function ProfileImage(props: {
 
   return (
     <ImgWrapper
-      fontSize={props.fontSize}
+      $fontSize={props.fontSize}
       style={props.style}
-      backgroundColor={backgroundColor}
+      $backgroundColor={backgroundColor}
       className={props.className}
-      side={props.side}
+      $side={props.side}
       title={props.userName}
     >
       {!shouldRenderImage ? (
diff --git a/client/packages/lowcoder/src/pages/common/shortcutListPopup.tsx b/client/packages/lowcoder/src/pages/common/shortcutListPopup.tsx
index ffca778506..a0b41ff929 100644
--- a/client/packages/lowcoder/src/pages/common/shortcutListPopup.tsx
+++ b/client/packages/lowcoder/src/pages/common/shortcutListPopup.tsx
@@ -23,21 +23,21 @@ const Content = styled.div`
   overflow: hidden scroll;
   scrollbar-gutter: stable;
   padding-right: 2px;
-  ::-webkit-scrollbar {
+  &::-webkit-scrollbar {
     width: 14px;
   }
-  ::-webkit-scrollbar-thumb {
+  &::-webkit-scrollbar-thumb {
     border: 4px solid transparent;
     background-clip: content-box;
     border-radius: 9999px;
     background-color: rgba(139, 143, 163, 0);
   }
-  :hover {
+  &:hover {
     ::-webkit-scrollbar-thumb {
       background-color: rgba(139, 143, 163, 0.24);
     }
   }
-  ::-webkit-scrollbar-thumb:hover {
+  &::-webkit-scrollbar-thumb:hover {
     background-color: rgba(139, 143, 163, 0.36);
   }
 `;
@@ -60,7 +60,7 @@ const CloseIconWrapper = styled.div`
   cursor: pointer;
   color: #7a7c80;
 
-  :hover svg g line {
+  &:hover svg g line {
     stroke: #ffffff;
   }
 `;
@@ -98,9 +98,9 @@ const ShortcutKey = styled.span`
   align-items: center;
 `;
 
-const ShortcutKeyItem = styled.div<{ autoWidth?: boolean }>`
-  ${(props) => (props.autoWidth ? "min-width" : "width")}: 20px;
-  ${(props) => (props.autoWidth ? "padding: 0 3px;" : "")}
+const ShortcutKeyItem = styled.div<{ $autoWidth?: boolean }>`
+  ${(props) => (props.$autoWidth ? "min-width" : "width")}: 20px;
+  ${(props) => (props.$autoWidth ? "padding: 0 3px;" : "")}
   height: 20px;
   background: #f9f9fa;
   border: 1px solid #d7d9e0;
@@ -167,7 +167,7 @@ export function ShortcutListPopup(props: { setShowShortcutList: (v: boolean) =>
                           {k.alt && <ShortcutKeyItem>⌥</ShortcutKeyItem>}
                           {k.shift && <ShortcutKeyItem>⇧</ShortcutKeyItem>}
                           {k.key && (
-                            <ShortcutKeyItem autoWidth={getKeyItemString(k.key).length > 1}>
+                            <ShortcutKeyItem $autoWidth={getKeyItemString(k.key).length > 1}>
                               {getKeyItemString(k.key)}
                             </ShortcutKeyItem>
                           )}
diff --git a/client/packages/lowcoder/src/pages/common/styledComponent.tsx b/client/packages/lowcoder/src/pages/common/styledComponent.tsx
index 10c3346276..a119953c1e 100644
--- a/client/packages/lowcoder/src/pages/common/styledComponent.tsx
+++ b/client/packages/lowcoder/src/pages/common/styledComponent.tsx
@@ -49,13 +49,13 @@ export const EditorContainerWithViewMode = styled.div`
   height: 100%;
 
   div {
-    ::-webkit-scrollbar {
+    &::-webkit-scrollbar {
       width: 16px;
     }
   }
 
   div {
-    ::-webkit-scrollbar-thumb {
+    &::-webkit-scrollbar-thumb {
       border: 5px solid transparent;
       background-clip: content-box;
       border-radius: 9999px;
@@ -65,7 +65,7 @@ export const EditorContainerWithViewMode = styled.div`
   }
 
   div {
-    ::-webkit-scrollbar-thumb:hover {
+    &::-webkit-scrollbar-thumb:hover {
       background-color: rgba(139, 143, 163, 0.5);
     }
   }
@@ -83,11 +83,11 @@ export const EditorContainer = styled.div`
   padding-right: 0;
   scrollbar-gutter: stable;
 
-  ::-webkit-scrollbar {
+  &::-webkit-scrollbar {
     width: 16px;
   }
 
-  ::-webkit-scrollbar-thumb {
+  &::-webkit-scrollbar-thumb {
     border: 5px solid transparent;
     background-clip: content-box;
     border-radius: 9999px;
@@ -95,7 +95,7 @@ export const EditorContainer = styled.div`
     min-height: 30px;
   }
 
-  ::-webkit-scrollbar-thumb:hover {
+  &::-webkit-scrollbar-thumb:hover {
     background-color: rgba(139, 143, 163, 0.5);
   }
 `;
@@ -103,7 +103,7 @@ export const EditorContainer = styled.div`
 export const StyledLink = styled.a`
   color: #4965f2;
 
-  :hover {
+  &:hover {
     color: #315efb;
   }
 `;
diff --git a/client/packages/lowcoder/src/pages/common/videoDialog.tsx b/client/packages/lowcoder/src/pages/common/videoDialog.tsx
index 8a57d96290..10ca346bbe 100644
--- a/client/packages/lowcoder/src/pages/common/videoDialog.tsx
+++ b/client/packages/lowcoder/src/pages/common/videoDialog.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from "react";
-import { Modal } from "antd";
+import { default as Modal } from "antd/es/modal";
 import { CloseIcon } from "lowcoder-design";
 import styled from "styled-components";
 import { Layers } from "constants/Layers";
diff --git a/client/packages/lowcoder/src/pages/datasource/datasourceEditPage.tsx b/client/packages/lowcoder/src/pages/datasource/datasourceEditPage.tsx
index 28416c0524..74773f0c34 100644
--- a/client/packages/lowcoder/src/pages/datasource/datasourceEditPage.tsx
+++ b/client/packages/lowcoder/src/pages/datasource/datasourceEditPage.tsx
@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import history from "../../util/history";
-import { Button } from "antd";
+import { default as Button } from "antd/es/button";
 import { useCallback, useMemo, useState } from "react";
 import { CopyTextButton, DocIcon, PackUpIcon, TacoButton } from "lowcoder-design";
 import { useDatasourceForm } from "./form/useDatasourceForm";
@@ -45,7 +45,7 @@ const BackBtn = styled.div`
   cursor: pointer;
   height: 24px;
 
-  :hover {
+  &:hover {
     color: #4965f2;
   }
 
@@ -56,7 +56,7 @@ const BackBtn = styled.div`
     margin-right: 4px;
   }
 
-  :hover svg g path {
+  &:hover svg g path {
     fill: #4965f2;
   }
 `;
@@ -128,13 +128,13 @@ const TutorialButton = styled(Button)`
   justify-content: center;
   padding: 0 10px;
 
-  :hover {
+  &:hover {
     background-color: #f5f5f6;
     border: 1px solid #d7d9e0;
     color: #333333;
   }
 
-  :focus {
+  &:focus {
     background-color: #f5f5f6;
     border: 1px solid #d7d9e0;
     color: #333333;
@@ -176,7 +176,7 @@ export const DatasourceEditPage = () => {
   const { testLoading, createLoading, form, genRequest, resolveTest, resolveCreate } =
     useDatasourceForm();
 
-  const handleFormReadyStatusChange = useCallback((isReady) => {
+  const handleFormReadyStatusChange = useCallback((isReady: boolean) => {
     setIsReady(isReady);
   }, []);
 
diff --git a/client/packages/lowcoder/src/pages/datasource/datasourceList.tsx b/client/packages/lowcoder/src/pages/datasource/datasourceList.tsx
index c7d38a9ec2..2a3841548d 100644
--- a/client/packages/lowcoder/src/pages/datasource/datasourceList.tsx
+++ b/client/packages/lowcoder/src/pages/datasource/datasourceList.tsx
@@ -77,7 +77,7 @@ const PopoverIcon = styled(PointIcon)`
     fill: #8b8fa3;
   }
 
-  :hover {
+  &:hover {
     background: #eef0f3;
     border-radius: 4px;
     cursor: pointer;
diff --git a/client/packages/lowcoder/src/pages/datasource/datasourceModal.tsx b/client/packages/lowcoder/src/pages/datasource/datasourceModal.tsx
index 17109a3055..3c16ebe06c 100644
--- a/client/packages/lowcoder/src/pages/datasource/datasourceModal.tsx
+++ b/client/packages/lowcoder/src/pages/datasource/datasourceModal.tsx
@@ -2,7 +2,7 @@ import React, { ReactNode, useEffect, useMemo, useState } from "react";
 import { DataSourceTypeInfo } from "../../api/datasourceApi";
 import { AddIcon, DocIcon, ModalFooterWrapper, TacoButton } from "lowcoder-design";
 import styled from "styled-components";
-import { Button } from "antd";
+import { default as Button } from "antd/es/button";
 import { useDatasourceForm } from "./form/useDatasourceForm";
 import { PluginPanel } from "./pluginPanel";
 import { DatasourceFormManifest } from "./form/datasourceFormRegistry";
@@ -30,12 +30,12 @@ const EditButton = styled(Button)`
   margin-right: 12px;
   padding: 4px;
 
-  :hover {
+  &:hover {
     color: #315efb;
     background-color: #edeff2;
   }
 
-  :focus {
+  &:focus {
     color: #315efb;
     background-color: #edeff2;
   }
@@ -64,13 +64,13 @@ const CreateButton = styled(Button)`
     fill: #315efb;
   }
 
-  :hover {
+  &:hover {
     color: #333333;
     background-color: #f2f7fc;
     border-color: #c2d6ff;
   }
 
-  :focus {
+  &:focus {
     color: #333333;
     background-color: #f2f7fc;
     border-color: #c2d6ff;
@@ -91,13 +91,13 @@ const TutorialButton = styled(Button)`
   padding: 0 7px;
   flex-shrink: 0;
 
-  :hover {
+  &:hover {
     background-color: #f5f5f6;
     border: 1px solid #d7d9e0;
     color: #333333;
   }
 
-  :focus {
+  &:focus {
     background-color: #f5f5f6;
     border: 1px solid #d7d9e0;
     color: #333333;
diff --git a/client/packages/lowcoder/src/pages/datasource/form/esDatasourceForm.tsx b/client/packages/lowcoder/src/pages/datasource/form/esDatasourceForm.tsx
index 7cd423c024..4070f4af83 100644
--- a/client/packages/lowcoder/src/pages/datasource/form/esDatasourceForm.tsx
+++ b/client/packages/lowcoder/src/pages/datasource/form/esDatasourceForm.tsx
@@ -16,14 +16,14 @@ export const EsDatasourceForm = (props: DatasourceFormProps) => {
 
   return (
     <DatasourceForm form={form} preserve={false}>
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <DatasourceNameFormInputItem
           placeholder={"My Elasticsearch1"}
           initialValue={datasource?.name}
         />
       </FormSection>
 
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <GeneralSettingFormSectionLabel />
         <FormInputItem
           name={"connectionString"}
diff --git a/client/packages/lowcoder/src/pages/datasource/form/googleSheetsDatasourceForm.tsx b/client/packages/lowcoder/src/pages/datasource/form/googleSheetsDatasourceForm.tsx
index 4e2b9b60eb..e42ba811d0 100644
--- a/client/packages/lowcoder/src/pages/datasource/form/googleSheetsDatasourceForm.tsx
+++ b/client/packages/lowcoder/src/pages/datasource/form/googleSheetsDatasourceForm.tsx
@@ -14,14 +14,14 @@ export const GoogleSheetsDatasourceForm = (props: DatasourceFormProps) => {
 
   return (
     <DatasourceForm form={form} preserve={false}>
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <DatasourceNameFormInputItem
           placeholder={"My GoogleSheets1"}
           initialValue={datasource?.name}
         />
       </FormSection>
 
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <GeneralSettingFormSectionLabel />
         <FormTextAreaItem
           name={"serviceAccount"}
diff --git a/client/packages/lowcoder/src/pages/datasource/form/graphqlDatasourceForm.tsx b/client/packages/lowcoder/src/pages/datasource/form/graphqlDatasourceForm.tsx
index bec2b48159..7db16b152a 100644
--- a/client/packages/lowcoder/src/pages/datasource/form/graphqlDatasourceForm.tsx
+++ b/client/packages/lowcoder/src/pages/datasource/form/graphqlDatasourceForm.tsx
@@ -21,11 +21,14 @@ import {
 } from "../form";
 import { DatasourceFormProps } from "./datasourceFormRegistry";
 import { useHostCheck } from "./useHostCheck";
+import { useSelector } from "react-redux";
+import { getUser } from "redux/selectors/usersSelectors";
 
 const AuthTypeOptions = [
   { label: "None", value: "NO_AUTH" },
   { label: "Basic", value: "BASIC_AUTH" },
-  { label: "Digest", value: "DIGEST_AUTH" },
+  { label: "Digest", value: "DIGEST_AUTH" }, 
+  { label: "OAuth 2.0 (Inherit from login)", value: "OAUTH2_INHERIT_FROM_LOGIN" },
 ] as const;
 
 type AuthType = ValueFromOption<typeof AuthTypeOptions>;
@@ -46,7 +49,15 @@ export const GraphqlDatasourceForm = (props: DatasourceFormProps) => {
   const { form, datasource } = props;
   const datasourceConfig = datasource?.datasourceConfig as HttpConfig;
 
+  // here we get the Auth Sources from a user to enable user impersonation
+  const userAuthSources = useSelector(getUser).connections?.filter(authSource => authSource.source !== "EMAIL");;
+  const userAuthSourcesOptions = userAuthSources?.map(item => ({
+    label: item.source,
+    value: item.authId
+  })) || [];
+
   const [authType, setAuthType] = useState(datasourceConfig?.authConfig?.type);
+  const [authId, setAuthId] = useState(datasourceConfig?.authConfig?.authId);
 
   const hostRule = useHostCheck();
 
@@ -93,9 +104,25 @@ export const GraphqlDatasourceForm = (props: DatasourceFormProps) => {
     }
   };
 
+  const showUserAuthSourceSelector = () => {
+    if (authType === "OAUTH2_INHERIT_FROM_LOGIN") {
+      return (
+        <FormSelectItem
+          name={"authId"}
+          label="User Authentication Source"
+          options={userAuthSourcesOptions}
+          initialValue={datasourceConfig?.authConfig?authId : null}
+          afterChange={(value) => setAuthId(value) }
+          labelWidth={142}
+        />
+      );
+    }
+    return null;
+  };
+
   return (
     <DatasourceForm form={form} preserve={false}>
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <DatasourceNameFormInputItem
           placeholder={"My Graphql1"}
           initialValue={datasource?.name}
@@ -103,7 +130,7 @@ export const GraphqlDatasourceForm = (props: DatasourceFormProps) => {
         />
       </FormSection>
 
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <GeneralSettingFormSectionLabel />
         <FormInputItem
           name={"url"}
@@ -128,7 +155,7 @@ export const GraphqlDatasourceForm = (props: DatasourceFormProps) => {
         />
       </FormSection>
 
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <FormSectionLabel>{trans("query.authentication")}</FormSectionLabel>
         <FormSelectItem
           name={"authConfigType"}
@@ -138,10 +165,11 @@ export const GraphqlDatasourceForm = (props: DatasourceFormProps) => {
           afterChange={(value) => setAuthType(value)}
           labelWidth={142}
         />
+        {showUserAuthSourceSelector()}
         {showAuthItem(authType as AuthType)}
       </FormSection>
 
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <AdvancedSettingFormSectionLabel />
         <CertValidationFormItem datasource={props.datasource} />
         <ForwardCookiesFormItem datasource={props.datasource} />
diff --git a/client/packages/lowcoder/src/pages/datasource/form/httpDatasourceForm.tsx b/client/packages/lowcoder/src/pages/datasource/form/httpDatasourceForm.tsx
index b0d60320f5..1f49350280 100644
--- a/client/packages/lowcoder/src/pages/datasource/form/httpDatasourceForm.tsx
+++ b/client/packages/lowcoder/src/pages/datasource/form/httpDatasourceForm.tsx
@@ -1,5 +1,5 @@
 import { Rule } from "antd/lib/form";
-import { HttpConfig } from "api/datasourceApi";
+import { HttpConfig, OAuthConfig } from "api/datasourceApi";
 import {
   DatasourceForm,
   FormInputItem,
@@ -21,12 +21,14 @@ import {
 } from "../form";
 import { DatasourceFormProps } from "./datasourceFormRegistry";
 import { useHostCheck } from "./useHostCheck";
+import { useSelector } from "react-redux";
+import { getUser } from "redux/selectors/usersSelectors";
 
 const AuthTypeOptions = [
   { label: "None", value: "NO_AUTH" },
   { label: "Basic", value: "BASIC_AUTH" },
   { label: "Digest", value: "DIGEST_AUTH" },
-  { label: "OAuth 2.0(Inherit from login)", value: "OAUTH2_INHERIT_FROM_LOGIN" },
+  { label: "OAuth 2.0 (Inherit from login)", value: "OAUTH2_INHERIT_FROM_LOGIN" },
   // { label: "OAuth 2.0", value: "oAuth2" },
 ] as const;
 
@@ -50,7 +52,16 @@ export const HttpDatasourceForm = (props: DatasourceFormProps) => {
   const datasourceConfig = datasource?.datasourceConfig as HttpConfig;
   // const oauthConfig = datasourceConfig?.authConfig as OAuthConfig;
 
+  // here we get the Auth Sources from a user to enable user impersonation
+  const userAuthSources = useSelector(getUser).connections?.filter(authSource => authSource.source !== "EMAIL");;
+  const userAuthSourcesOptions = userAuthSources?.map(item => ({
+    label: item.source,
+    value: item.authId
+  })) || [];
+
   const [authType, setAuthType] = useState(datasourceConfig?.authConfig?.type);
+  const [authId, setAuthId] = useState(datasourceConfig?.authConfig?.authId);
+  
   // const [grantType, setGrantType] = useState(oauthConfig?.grantType ?? "authorization_code");
 
   const hostRule = useHostCheck();
@@ -98,9 +109,25 @@ export const HttpDatasourceForm = (props: DatasourceFormProps) => {
     }
   };
 
+  const showUserAuthSourceSelector = () => {
+    if (authType === "OAUTH2_INHERIT_FROM_LOGIN") {
+      return (
+        <FormSelectItem
+          name={"authId"}
+          label="User Authentication Source"
+          options={userAuthSourcesOptions}
+          initialValue={datasourceConfig?.authConfig?authId : null}
+          afterChange={(value) => setAuthId(value) }
+          labelWidth={142}
+        />
+      );
+    }
+    return null;
+  };
+
   return (
     <DatasourceForm form={form} preserve={false}>
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <DatasourceNameFormInputItem
           placeholder={"My RestAPI1"}
           initialValue={datasource?.name}
@@ -108,7 +135,7 @@ export const HttpDatasourceForm = (props: DatasourceFormProps) => {
         />
       </FormSection>
 
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <GeneralSettingFormSectionLabel />
         <FormInputItem
           name={"url"}
@@ -139,7 +166,7 @@ export const HttpDatasourceForm = (props: DatasourceFormProps) => {
         />
       </FormSection>
 
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <FormSectionLabel>{trans("query.authentication")}</FormSectionLabel>
         <FormSelectItem
           name={"authConfigType"}
@@ -149,10 +176,11 @@ export const HttpDatasourceForm = (props: DatasourceFormProps) => {
           afterChange={(value) => setAuthType(value)}
           labelWidth={142}
         />
+        {showUserAuthSourceSelector()}
         {showAuthItem(authType)}
       </FormSection>
 
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <AdvancedSettingFormSectionLabel />
         <CertValidationFormItem datasource={props.datasource} />
         <ForwardCookiesFormItem datasource={props.datasource} />
diff --git a/client/packages/lowcoder/src/pages/datasource/form/mongoDatasourceForm.tsx b/client/packages/lowcoder/src/pages/datasource/form/mongoDatasourceForm.tsx
index 1a9ed08ac3..872185ebb9 100644
--- a/client/packages/lowcoder/src/pages/datasource/form/mongoDatasourceForm.tsx
+++ b/client/packages/lowcoder/src/pages/datasource/form/mongoDatasourceForm.tsx
@@ -25,7 +25,7 @@ export const MongoDatasourceForm = (props: DatasourceFormProps) => {
 
   return (
     <DatasourceForm form={form} preserve={false}>
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <DatasourceNameFormInputItem placeholder={"My MongoDB1"} initialValue={datasource?.name} />
         <FormSelectItem
           name={"usingUri"}
diff --git a/client/packages/lowcoder/src/pages/datasource/form/oracleDatasourceForm.tsx b/client/packages/lowcoder/src/pages/datasource/form/oracleDatasourceForm.tsx
index 4299c8d5a1..1a9c5f3ba8 100644
--- a/client/packages/lowcoder/src/pages/datasource/form/oracleDatasourceForm.tsx
+++ b/client/packages/lowcoder/src/pages/datasource/form/oracleDatasourceForm.tsx
@@ -18,7 +18,7 @@ export const OracleDatasourceForm = (props: DatasourceFormProps) => {
 
   return (
     <DatasourceForm form={form} preserve={false} style={{ gap: "12px" }}>
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <FormInputItem
           className={"ets"}
           name={"name"}
@@ -30,7 +30,7 @@ export const OracleDatasourceForm = (props: DatasourceFormProps) => {
         />
       </FormSection>
 
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <GeneralSettingFormSectionLabel />
         <HostFormInputItem initialValue={datasourceConfig?.host} />
         <PortFormInputItem initialValue={"1521"} port={datasourceConfig?.port} />
diff --git a/client/packages/lowcoder/src/pages/datasource/form/pluginDataSourceForm.tsx b/client/packages/lowcoder/src/pages/datasource/form/pluginDataSourceForm.tsx
index 4eab38fb81..3ed9c974aa 100644
--- a/client/packages/lowcoder/src/pages/datasource/form/pluginDataSourceForm.tsx
+++ b/client/packages/lowcoder/src/pages/datasource/form/pluginDataSourceForm.tsx
@@ -35,7 +35,9 @@ import { trans } from "i18n";
 import { Datasource } from "constants/datasourceConstants";
 import { DatasourceApi } from "api/datasourceApi";
 import { FieldData } from "rc-field-form/es/interface";
-import { Alert, Form, Input } from "antd";
+import { default as Alert } from "antd/es/alert";
+import { default as Form } from "antd/es/form";
+import { default as Input } from "antd/es/input";
 
 const TooltipWrapper = styled.div`
   .markdown-body {
@@ -211,14 +213,14 @@ export const PluginDataSourceForm = (props: DatasourceFormProps) => {
       <Form.Item noStyle name="dynamicParamsDef">
         <Input hidden />
       </Form.Item>
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <DatasourceNameFormInputItem
           placeholder="My DataSource 1"
           initialValue={datasource?.name}
         />
       </FormSection>
 
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         {hasGeneralSettings && <GeneralSettingFormSectionLabel />}
         {(dataSourceConfig.params || []).map((field) => {
           return (
diff --git a/client/packages/lowcoder/src/pages/datasource/form/redisDatasourceForm.tsx b/client/packages/lowcoder/src/pages/datasource/form/redisDatasourceForm.tsx
index 11492b7dab..24ab8dcaf9 100644
--- a/client/packages/lowcoder/src/pages/datasource/form/redisDatasourceForm.tsx
+++ b/client/packages/lowcoder/src/pages/datasource/form/redisDatasourceForm.tsx
@@ -23,7 +23,7 @@ export const RedisDatasourceForm = (props: DatasourceFormProps) => {
 
   return (
     <DatasourceForm form={form} preserve={false}>
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <DatasourceNameFormInputItem placeholder={"My Redis1"} initialValue={datasource?.name} />
         <FormSelectItem
           name={"usingUri"}
diff --git a/client/packages/lowcoder/src/pages/datasource/form/smtpDatasourceForm.tsx b/client/packages/lowcoder/src/pages/datasource/form/smtpDatasourceForm.tsx
index adf9f70af1..724677df0c 100644
--- a/client/packages/lowcoder/src/pages/datasource/form/smtpDatasourceForm.tsx
+++ b/client/packages/lowcoder/src/pages/datasource/form/smtpDatasourceForm.tsx
@@ -17,11 +17,11 @@ export const SMTPDatasourceForm = (props: DatasourceFormProps) => {
 
   return (
     <DatasourceForm form={form} preserve={false}>
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <DatasourceNameFormInputItem placeholder={"My SMTP1"} initialValue={datasource?.name} />
       </FormSection>
 
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <GeneralSettingFormSectionLabel />
         <HostFormInputItem initialValue={datasourceConfig?.host} />
         <PortFormInputItem initialValue={"25"} port={datasourceConfig?.port} />
diff --git a/client/packages/lowcoder/src/pages/datasource/form/snowflakeDatasourceForm.tsx b/client/packages/lowcoder/src/pages/datasource/form/snowflakeDatasourceForm.tsx
index 2b6572921b..7e6c9d5dc2 100644
--- a/client/packages/lowcoder/src/pages/datasource/form/snowflakeDatasourceForm.tsx
+++ b/client/packages/lowcoder/src/pages/datasource/form/snowflakeDatasourceForm.tsx
@@ -10,7 +10,7 @@ import {
   PasswordFormInputItem,
   UserNameFormInputItem,
 } from "../form";
-import { FormInstance } from "antd";
+import { FormInstance } from "antd/es/form";
 import { fromPairs, omit, pick, toPairs } from "lodash";
 import { trans } from "i18n";
 
@@ -22,14 +22,14 @@ export const SnowflakeDatasourceForm = (props: DatasourceFormProps) => {
 
   return (
     <DatasourceForm form={form} preserve={false}>
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <DatasourceNameFormInputItem
           placeholder={"My Snowflake1"}
           initialValue={datasource?.name}
         />
       </FormSection>
 
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <GeneralSettingFormSectionLabel />
         <HostFormInputItem
           initialValue={datasourceConfig?.host}
diff --git a/client/packages/lowcoder/src/pages/datasource/form/sqlDatasourceForm.tsx b/client/packages/lowcoder/src/pages/datasource/form/sqlDatasourceForm.tsx
index eba66ce03f..5fde4b01dc 100644
--- a/client/packages/lowcoder/src/pages/datasource/form/sqlDatasourceForm.tsx
+++ b/client/packages/lowcoder/src/pages/datasource/form/sqlDatasourceForm.tsx
@@ -29,14 +29,14 @@ export const sqlDatasourceForm =
 
     return (
       <DatasourceForm form={form} preserve={false}>
-        <FormSection size={props.size}>
+        <FormSection $size={props.size}>
           <DatasourceNameFormInputItem
             placeholder={config.placeholder}
             initialValue={datasource?.name}
           />
         </FormSection>
 
-        <FormSection size={props.size}>
+        <FormSection $size={props.size}>
           <GeneralSettingFormSectionLabel />
           <HostFormInputItem initialValue={datasourceConfig?.host} />
           <PortFormInputItem initialValue={config.port} port={datasourceConfig?.port} />
diff --git a/client/packages/lowcoder/src/pages/datasource/form/useDatasourceForm.ts b/client/packages/lowcoder/src/pages/datasource/form/useDatasourceForm.ts
index 57a5269dda..285f82b399 100644
--- a/client/packages/lowcoder/src/pages/datasource/form/useDatasourceForm.ts
+++ b/client/packages/lowcoder/src/pages/datasource/form/useDatasourceForm.ts
@@ -1,4 +1,4 @@
-import { Form } from "antd";
+import { default as Form } from "antd/es/form";
 import { DatasourceApi } from "../../../api/datasourceApi";
 import _ from "lodash";
 import { useState } from "react";
@@ -50,6 +50,7 @@ export function useDatasourceForm() {
             ...config,
             authConfig: {
               type: form.getFieldsValue()["authConfigType"],
+              authId: form.getFieldsValue()["authId"],
               username: form.getFieldsValue()["username"],
               password: form.getFieldsValue()["password"],
             },
@@ -62,6 +63,10 @@ export function useDatasourceForm() {
         case "graphql":
           config = {
             ...config,
+            authConfig: {
+              type: form.getFieldsValue()["authConfigType"],
+              authId: form.getFieldsValue()["authId"],
+            },
             sslConfig: {
               sslCertVerificationType: form.getFieldValue("sslCertVerificationType"),
               selfSignedCert: form.getFieldValue("selfSignedCert"),
diff --git a/client/packages/lowcoder/src/pages/datasource/pluginPanel.tsx b/client/packages/lowcoder/src/pages/datasource/pluginPanel.tsx
index 5966cb7ce5..11f11fd8e4 100644
--- a/client/packages/lowcoder/src/pages/datasource/pluginPanel.tsx
+++ b/client/packages/lowcoder/src/pages/datasource/pluginPanel.tsx
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { Button as AntdButton } from "antd";
+import { default as AntdButton } from "antd/es/button";
 import { useSelector } from "react-redux";
 import { getDataSourceTypes } from "../../redux/selectors/datasourceSelectors";
 import { getBottomResIcon } from "@lowcoder-ee/util/bottomResUtils";
diff --git a/client/packages/lowcoder/src/pages/editor/LeftContent.tsx b/client/packages/lowcoder/src/pages/editor/LeftContent.tsx
index 179e2b293f..5924d90bfe 100644
--- a/client/packages/lowcoder/src/pages/editor/LeftContent.tsx
+++ b/client/packages/lowcoder/src/pages/editor/LeftContent.tsx
@@ -240,7 +240,7 @@ const LeftContentWrapper = styled.div`
 export const LeftContent = (props: LeftContentProps) => {
   const { uiComp } = props;
   const editorState = useContext(EditorContext);
-  const [expandedKeys, setExpandedKeys] = useState<Array<string | number>>([]);
+  const [expandedKeys, setExpandedKeys] = useState<Array<React.Key>>([]);
   const [showData, setShowData] = useState<NodeInfo[]>([]);
 
   const getTree = (tree: CompTree, result: NodeItem[], key?: string) => {
@@ -392,7 +392,7 @@ export const LeftContent = (props: LeftContentProps) => {
             ))}
         </span>
         {info?.show && data && (
-          <CollapseWrapper title="" clientX={info?.clientX} onClick={(e) => e.stopPropagation()}>
+          <CollapseWrapper title="" $clientX={info?.clientX} onClick={(e) => e.stopPropagation()}>
             <ScrollBar style={{ maxHeight: "400px" }}>
               <CollapseView
                 key={data.name}
@@ -434,9 +434,13 @@ export const LeftContent = (props: LeftContentProps) => {
     return (
       <DirectoryTreeStyle
         treeData={explorerData}
-        icon={(props: NodeItem) => props.type && (CompStateIcon[props.type] || <LeftCommon />)}
-        switcherIcon={({ expanded }: { expanded: boolean }) =>
-          expanded ? <FoldedIcon /> : <UnfoldIcon />
+        // icon={(props: NodeItem) => props.type && (CompStateIcon[props.type] || <LeftCommon />)}
+        icon={(props: any) => props.type && (CompStateIcon[props.type as UICompType] || <LeftCommon />)}
+        // switcherIcon={({ expanded }: { expanded: boolean }) =>
+        //   expanded ? <FoldedIcon /> : <UnfoldIcon />
+        // }
+        switcherIcon={(props: any) =>
+          props.expanded ? <FoldedIcon /> : <UnfoldIcon />
         }
         expandedKeys={expandedKeys}
         onExpand={(keys) => setExpandedKeys(keys)}
diff --git a/client/packages/lowcoder/src/pages/editor/appEditorInternal.tsx b/client/packages/lowcoder/src/pages/editor/appEditorInternal.tsx
index b2fb88391a..0ebc77c8e5 100644
--- a/client/packages/lowcoder/src/pages/editor/appEditorInternal.tsx
+++ b/client/packages/lowcoder/src/pages/editor/appEditorInternal.tsx
@@ -17,7 +17,8 @@ import { RootComp } from "comps/comps/rootComp";
 import { useAppHistory } from "util/editoryHistory";
 import { useCompInstance } from "comps/utils/useCompInstance";
 import { MarkAppInitialized, perfMark } from "util/perfUtils";
-import { ConfigProvider, message } from "antd";
+import { default as ConfigProvider } from "antd/es/config-provider";
+import { default as message } from "antd/es/message";
 import { getAntdLocale } from "i18n/antdLocale";
 import { useUserViewMode } from "../../util/hooks";
 import { QueryApi } from "api/queryApi";
diff --git a/client/packages/lowcoder/src/pages/editor/appSnapshot.tsx b/client/packages/lowcoder/src/pages/editor/appSnapshot.tsx
index 985f6a9cd7..9e349ac781 100644
--- a/client/packages/lowcoder/src/pages/editor/appSnapshot.tsx
+++ b/client/packages/lowcoder/src/pages/editor/appSnapshot.tsx
@@ -17,7 +17,7 @@ import {
   isAppSnapshotDslFetching,
   isAppSnapshotsFetching,
 } from "redux/selectors/appSnapshotSelector";
-import { Skeleton } from "antd";
+import { default as Skeleton } from "antd/es/skeleton";
 import { TacoPagination } from "lowcoder-design";
 import { AppSnapshotContext, AppSnapshotList } from "constants/applicationConstants";
 import { ExtraActionType } from "lowcoder-core";
@@ -86,7 +86,7 @@ const StyledCloseIcon = styled(CloseIcon)`
   margin-left: auto;
   cursor: pointer;
 
-  :hover {
+  &:hover {
     g line {
       stroke: #4965f2;
     }
diff --git a/client/packages/lowcoder/src/pages/editor/bottom/BottomMetaDrawer.tsx b/client/packages/lowcoder/src/pages/editor/bottom/BottomMetaDrawer.tsx
index f6940e8d71..6dd207ef6c 100644
--- a/client/packages/lowcoder/src/pages/editor/bottom/BottomMetaDrawer.tsx
+++ b/client/packages/lowcoder/src/pages/editor/bottom/BottomMetaDrawer.tsx
@@ -1,7 +1,7 @@
-import { DataNode } from "antd/lib/tree";
+import { DataNode } from "antd/es/tree";
 import { CopyTextButton, CustomTree, labelCss, PackUpIcon, Search } from "lowcoder-design";
 import _ from "lodash";
-import { Drawer as AntdDrawer } from "antd";
+import { default as AntdDrawer } from "antd/es/drawer";
 import { CSSProperties, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { fetchDatasourceStructure } from "redux/reduxActions/datasourceActions";
@@ -64,8 +64,8 @@ const AllData = styled.span`
   margin: 0 0 7px 8px;
 `;
 
-const DrawerIcon = styled(PackUpIcon)<{ deg: string }>`
-  transform: ${(props) => props.deg};
+const DrawerIcon = styled(PackUpIcon)<{ $deg: string }>`
+  transform: ${(props) => props.$deg};
 `;
 
 const DrawerTitle = styled.div`
@@ -76,7 +76,7 @@ const DrawerTitle = styled.div`
   font-size: 13px;
   font-weight: 500;
 
-  :hover {
+  &:hover {
     cursor: pointer;
 
     svg g path {
@@ -140,7 +140,7 @@ export const DataSourceStructureTree = (props: {
   datasourceType: string;
 }) => {
   const { dataSourceId, datasourceType } = props;
-  const [expandedKeys, setExpandedKeys] = useState<Array<string | number>>([]);
+  const [expandedKeys, setExpandedKeys] = useState<Array<React.Key>>([]);
   const [searchValue, setSearchValue] = useState("");
   const [structure, setStructure] = useState<DataNode[]>([]);
 
@@ -263,7 +263,7 @@ export default function BottomMetaDrawer(props: BottomMetaDrawerProps) {
     <div style={props.style}>
       <DrawerTitle onClick={() => setVisible(!visible)}>
         {trans("bottomPanel.metaData")}
-        <DrawerIcon deg={visible ? "rotate(180deg)" : "rotate(0deg)"} />
+        <DrawerIcon $deg={visible ? "rotate(180deg)" : "rotate(0deg)"} />
       </DrawerTitle>
     </div>
   );
diff --git a/client/packages/lowcoder/src/pages/editor/bottom/BottomSidebar.tsx b/client/packages/lowcoder/src/pages/editor/bottom/BottomSidebar.tsx
index d45faf5acf..ab56ba31e9 100644
--- a/client/packages/lowcoder/src/pages/editor/bottom/BottomSidebar.tsx
+++ b/client/packages/lowcoder/src/pages/editor/bottom/BottomSidebar.tsx
@@ -94,13 +94,13 @@ const AddBtn = styled(TacoButton)`
     align-items: center;
     box-shadow: none;
   
-    :hover {
+    &:hover {
       color: #315efb;
       background-color: #f5faff;
       border-color: #c2d6ff;
     }
   
-    :focus {
+    &:focus {
       color: #315efb;
       background-color: #f5faff;
       border-color: #c2d6ff;
@@ -110,8 +110,8 @@ const AddBtn = styled(TacoButton)`
       stroke: #315efb;
     }
   
-    :disabled,
-    :disabled:hover {
+    &:disabled,
+    &:disabled:hover {
       background: #f9fbff;
       border: 1px solid #dee9ff;
       border-radius: 4px;
@@ -319,19 +319,19 @@ export function BottomSidebar(props: BottomSidebarProps) {
   );
 }
 
-const HighlightBorder = styled.div<{ active: boolean; foldable: boolean; level: number }>`
+const HighlightBorder = styled.div<{ $active: boolean; $foldable: boolean; $level: number }>`
   flex: 1;
   display: flex;
-  padding-left: ${(props) => props.level * 20 + (props.foldable ? 0 : 14)}px;
+  padding-left: ${(props) => props.$level * 20 + (props.$foldable ? 0 : 14)}px;
   border-radius: 4px;
-  border: 1px solid ${(props) => (props.active ? BorderActiveColor : "transparent")};
+  border: 1px solid ${(props) => (props.$active ? BorderActiveColor : "transparent")};
   align-items: center;
   justify-content: center;
 `;
 
 interface ColumnDivProps {
   $color?: boolean;
-  isOverlay: boolean;
+  $isOverlay: boolean;
 }
 
 const ColumnDiv = styled.div<ColumnDivProps>`
@@ -343,13 +343,13 @@ const ColumnDiv = styled.div<ColumnDivProps>`
   padding-right: 15px;
   /* background-color: #ffffff; */
   /* margin: 2px 0; */
-  background-color: ${(props) => (props.isOverlay ? "rgba(255, 255, 255, 0.11)" : "")};
+  background-color: ${(props) => (props.$isOverlay ? "rgba(255, 255, 255, 0.11)" : "")};
 
   &&& {
-    background-color: ${(props) => (props.$color && !props.isOverlay ? "#f2f7fc" : null)};
+    background-color: ${(props) => (props.$color && !props.$isOverlay ? "#f2f7fc" : null)};
   }
 
-  :hover {
+  &:hover {
     background-color: #f2f7fc80;
     cursor: pointer;
   }
@@ -363,7 +363,7 @@ const ColumnDiv = styled.div<ColumnDivProps>`
     font-size: 13px;
     padding-left: 0;
 
-    :hover {
+    &:hover {
       background-color: transparent;
     }
   }
@@ -379,7 +379,7 @@ const ColumnDiv = styled.div<ColumnDivProps>`
     border: 1px solid #3377ff;
     border-radius: 2px;
 
-    :focus {
+    &:focus {
       border-color: #3377ff;
       box-shadow: 0 0 0 2px #d6e4ff;
     }
@@ -472,8 +472,8 @@ function BottomSidebarItem(props: BottomSidebarItemProps) {
   };
 
   return (
-    <ColumnDiv onClick={handleClickItem} $color={isSelected} isOverlay={isOverlay}>
-      <HighlightBorder active={isOver && isFolder} level={level} foldable={isFolder}>
+    <ColumnDiv onClick={handleClickItem} $color={isSelected} $isOverlay={isOverlay}>
+      <HighlightBorder $active={isOver && isFolder} $level={level} $foldable={isFolder}>
         {isFolder && <FoldIconBtn>{!isFolded ? <FoldedIcon /> : <UnfoldIcon />}</FoldIconBtn>}
         {icon}
         <div style={{ flexGrow: 1, marginRight: "8px", width: "calc(100% - 62px)" }}>
diff --git a/client/packages/lowcoder/src/pages/editor/bottom/BottomTabs.tsx b/client/packages/lowcoder/src/pages/editor/bottom/BottomTabs.tsx
index b99f782012..6003554f87 100644
--- a/client/packages/lowcoder/src/pages/editor/bottom/BottomTabs.tsx
+++ b/client/packages/lowcoder/src/pages/editor/bottom/BottomTabs.tsx
@@ -17,21 +17,21 @@ import { showAppSnapshotSelector } from "redux/selectors/appSnapshotSelector";
 import { BottomResTypeEnum } from "types/bottomRes";
 import { trans } from "i18n";
 
-const Span = styled.span<{ border: boolean }>`
+const Span = styled.span<{ $border: boolean }>`
   ${labelCss};
   font-weight: 500;
   line-height: 40px;
   position: relative;
   display: inline-block;
   z-index: 0;
-  color: ${(props) => (props.border ? "#222222" : "#8B8FA3")};
+  color: ${(props) => (props.$border ? "#222222" : "#8B8FA3")};
 
-  :hover {
+  &:hover {
     cursor: pointer;
     color: #222222;
   }
 
-  ::before {
+  &::before {
     content: "";
     position: absolute;
     z-index: -1;
@@ -39,19 +39,19 @@ const Span = styled.span<{ border: boolean }>`
     right: 0;
     bottom: 0;
     height: 0;
-    color: ${(props) => (props.border ? "#222222" : "transparent")};
-    border: 1px solid ${(props) => (props.border ? "#222222" : "transparent")};
-    background-color: ${(props) => (props.border ? "#222222" : "transparent")};
+    color: ${(props) => (props.$border ? "#222222" : "transparent")};
+    border: 1px solid ${(props) => (props.$border ? "#222222" : "transparent")};
+    background-color: ${(props) => (props.$border ? "#222222" : "transparent")};
     border-radius: 2px;
   }
 `;
-const TabDiv = styled.div<{ cursor?: string | number }>`
+const TabDiv = styled.div<{ $cursor?: string | number }>`
   height: 40px;
   background-color: #ffffff;
   text-align: center;
   display: inline-block;
   min-width: 26px;
-  cursor: ${(props) => (props.cursor ? "pointer" : "default")};
+  cursor: ${(props) => (props.$cursor ? "pointer" : "default")};
 `;
 const TabContainer = styled.div`
   height: 40px;
@@ -85,7 +85,7 @@ const TabContainer = styled.div`
     font-size: 16px;
     margin-left: 0;
 
-    :hover {
+    &:hover {
       background-color: #f5f5f6;
     }
   }
@@ -102,7 +102,7 @@ const TabContainer = styled.div`
     margin-left: 0;
     background-color: #ffffff;
 
-    :focus {
+    &:focus {
       border-color: #3377ff;
       box-shadow: 0 0 0 2px #d6e4ff;
     }
@@ -114,19 +114,19 @@ const RunButton = styled(TacoButton)`
   height: 24px;
   border: none;
 
-  :hover {
+  &:hover {
     padding: 0 11px;
     border: none;
     box-shadow: none;
   }
 
-  :focus {
+  &:focus {
     padding: 0 11px;
     border: none;
     box-shadow: none;
   }
 
-  :after {
+  &:after {
     content: "";
   }
 `;
@@ -139,29 +139,29 @@ const DisconnectButton = styled(TacoButton)`
   border-color: #079968;
   background-color: #079968;
 
-  :hover, :focus, :disabled, :disabled:hover {
+  &:hover, &:focus, &:disabled, &:disabled:hover {
     padding: 0 11px;
     border: none;
     box-shadow: none;
   }
   
-  :disabled,
-  :disabled:hover {
+  &:disabled,
+  &:disabled:hover {
     background-color: #bbdecd !important;
     border-color: #bbdecd;
   }
 
-  :hover {
+  &:hover {
     background-color: #07714e;
     border-color: #07714e;
   }
 
-  :focus {
+  &:focus {
     background-color: #07714e;
     border-color: #07714e;
   }
 
-  :after {
+  &:after {
     content: "";
   }
 `;
@@ -258,8 +258,8 @@ export function BottomTabs<T extends TabsConfigType>(props: {
         {tabsConfig &&
           tabsConfig.map((item, index) => (
             <React.Fragment key={index}>
-              <TabDiv onClick={() => setKey(item.key)} cursor={item.key}>
-                <Span key={item.key} border={key === item.key}>
+              <TabDiv onClick={() => setKey(item.key)} $cursor={item.key}>
+                <Span key={item.key} $border={key === item.key}>
                   {item.title}
                 </Span>
               </TabDiv>
diff --git a/client/packages/lowcoder/src/pages/editor/codeEditorPanel.tsx b/client/packages/lowcoder/src/pages/editor/codeEditorPanel.tsx
index fdb78ce645..d50f00d7cb 100644
--- a/client/packages/lowcoder/src/pages/editor/codeEditorPanel.tsx
+++ b/client/packages/lowcoder/src/pages/editor/codeEditorPanel.tsx
@@ -68,7 +68,7 @@ const OpenButton = styled.div`
     margin: auto;
   }
 
-  :hover {
+  &:hover {
     svg g g {
       stroke: #222222;
     }
@@ -90,7 +90,7 @@ const CloseButton = styled.div`
   //margin-bottom: auto;
   cursor: pointer;
 
-  :hover {
+  &:hover {
     background: #f5f5f6;
 
     svg g g {
diff --git a/client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx b/client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx
index e1a1766ad3..9c6e5f599e 100644
--- a/client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx
+++ b/client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx
@@ -12,7 +12,8 @@ import { BottomSkeleton } from "pages/editor/bottom/BottomContent";
 import RightPanel from "pages/editor/right/RightPanel";
 import _ from "lodash";
 import styled from "styled-components";
-import { Skeleton, Spin } from "antd";
+import { default as Skeleton } from "antd/es/skeleton";
+import { default as Spin } from "antd/es/spin";
 import { useTemplateViewMode, useUserViewMode } from "util/hooks";
 import { ProductLoading } from "components/ProductLoading";
 
diff --git a/client/packages/lowcoder/src/pages/editor/editorView.tsx b/client/packages/lowcoder/src/pages/editor/editorView.tsx
index a63c2ad2fa..8fafb86477 100644
--- a/client/packages/lowcoder/src/pages/editor/editorView.tsx
+++ b/client/packages/lowcoder/src/pages/editor/editorView.tsx
@@ -1,5 +1,6 @@
-import { Divider, Menu } from "antd";
-import Sider from "antd/lib/layout/Sider";
+import { default as Divider } from "antd/es/divider";
+import { default as Menu } from "antd/es/menu";
+import { default as Sider} from "antd/es/layout/Sider";
 import { PreloadComp } from "comps/comps/preLoadComp";
 import UIComp from "comps/comps/uiComp";
 import { EditorContext } from "comps/editorState";
@@ -54,11 +55,11 @@ const HookCompContainer = styled.div`
   z-index: ${Layers.hooksCompContainer};
 `;
 
-const ViewBody = styled.div<{ hideBodyHeader?: boolean; height?: number }>`
+const ViewBody = styled.div<{ $hideBodyHeader?: boolean; $height?: number }>`
   height: ${(props) => `calc(${
-    props.height ? props.height + "px" : "100vh"
+    props.$height ? props.$height + "px" : "100vh"
   } - env(safe-area-inset-bottom) -
-      ${props.hideBodyHeader ? "0px" : TopHeaderHeight}
+      ${props.$hideBodyHeader ? "0px" : TopHeaderHeight}
   )`};
 `;
 
@@ -290,7 +291,7 @@ function EditorView(props: EditorViewProps) {
         <Helmet>{application && <title>{application.name}</title>}</Helmet>
         {!hideBodyHeader && <PreviewHeader />}
         <EditorContainerWithViewMode>
-          <ViewBody hideBodyHeader={hideBodyHeader} height={height}>
+          <ViewBody $hideBodyHeader={hideBodyHeader} $height={height}>
             {uiComp.getView()}
           </ViewBody>
           <div style={{ zIndex: Layers.hooksCompContainer }}>{hookCompViews}</div>
@@ -303,7 +304,7 @@ function EditorView(props: EditorViewProps) {
   let uiCompView;
   if (showAppSnapshot) {
     uiCompView = (
-      <ViewBody hideBodyHeader={hideBodyHeader} height={height}>
+      <ViewBody $hideBodyHeader={hideBodyHeader} $height={height}>
         <EditorContainer>{uiComp.getView()}</EditorContainer>
       </ViewBody>
     );
diff --git a/client/packages/lowcoder/src/pages/editor/right/styledComponent.tsx b/client/packages/lowcoder/src/pages/editor/right/styledComponent.tsx
index ed9d7704e2..605df8a9a2 100644
--- a/client/packages/lowcoder/src/pages/editor/right/styledComponent.tsx
+++ b/client/packages/lowcoder/src/pages/editor/right/styledComponent.tsx
@@ -11,25 +11,25 @@ const NoShake = css`
   transform-style: preserve-3d;
 `;
 
-export const CompIconDiv = styled.div<{ h: number; w: number }>`
+export const CompIconDiv = styled.div<{ $h: number; $w: number }>`
   ${NoShake};
   padding: 3px;
   background: #ffffff;
   border: 1px solid #d7d9e0;
   border-radius: 4px;
-  height: ${(props) => props.h}px;
-  width: ${(props) => props.w}px;
+  height: ${(props) => props.$h}px;
+  width: ${(props) => props.$w}px;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: grab;
   transition: all 0.2s ease-in-out;
 
-  :active {
+  &:active {
     background: #f2f4f8;
   }
 
-  :hover {
+  &:hover {
     ${NoShake};
     padding: 0;
     transform: scale(1.05);
diff --git a/client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx b/client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx
index 6bb6dd8da0..7ad8076706 100644
--- a/client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx
+++ b/client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx
@@ -66,7 +66,7 @@ const HovDiv = styled.div`
 const IconContain = (props: { Icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>> }) => {
   const { Icon } = props;
   return (
-    <CompIconDiv w={64} h={64}>
+    <CompIconDiv $w={64} $h={64}>
       <Icon />
     </CompIconDiv>
   );
diff --git a/client/packages/lowcoder/src/pages/editor/styledComponents.tsx b/client/packages/lowcoder/src/pages/editor/styledComponents.tsx
index cfabd6f83f..c0d68b2f95 100644
--- a/client/packages/lowcoder/src/pages/editor/styledComponents.tsx
+++ b/client/packages/lowcoder/src/pages/editor/styledComponents.tsx
@@ -1,7 +1,7 @@
-import { Tree } from "antd";
+import DirectoryTree from "antd/es/tree/DirectoryTree";
 import styled from "styled-components";
 
-export const DirectoryTreeStyle = styled(Tree.DirectoryTree)`
+export const DirectoryTreeStyle = styled(DirectoryTree)`
   font-size: 13px;
   color: #333;
   .ant-tree-treenode {
@@ -105,14 +105,14 @@ export const Node = styled.span`
   }
 `;
 
-export const CollapseWrapper = styled.div<{ clientX?: number }>`
+export const CollapseWrapper = styled.div<{ $clientX?: number }>`
   width: 256px;
   border: 1px solid #E1E3EB;
   border-radius: 4px;
   overflow: hidden;
   background: #fff;
   padding: 4px 0;
-  margin: 4px -16px 4px ${(props) => props.clientX && `calc(-${props.clientX}px + 16px)`};
+  margin: 4px -16px 4px ${(props) => props.$clientX && `calc(-${props.$clientX}px + 16px)`};
   .simplebar-content > div {
     > .ant-collapse > .ant-collapse-item {
       > .ant-collapse-header {
diff --git a/client/packages/lowcoder/src/pages/queryLibrary/LeftNav.tsx b/client/packages/lowcoder/src/pages/queryLibrary/LeftNav.tsx
index a17c2541f2..949a41fa03 100644
--- a/client/packages/lowcoder/src/pages/queryLibrary/LeftNav.tsx
+++ b/client/packages/lowcoder/src/pages/queryLibrary/LeftNav.tsx
@@ -22,14 +22,14 @@ import { DatasourceType } from "@lowcoder-ee/constants/queryConstants";
 import { saveAs } from "file-saver";
 import DataSourceIcon from "components/DataSourceIcon";
 
-const Wrapper = styled.div<{ readOnly?: boolean }>`
+const Wrapper = styled.div<{ $readOnly?: boolean }>`
   display: flex;
   flex-direction: column;
   width: 264px;
   height: 100%;
   border-right: 1px solid #e1e3eb;
   ${(props) => {
-    if (props.readOnly) {
+    if (props.$readOnly) {
       return css`
         color: #8b8fa3;
       `;
@@ -50,21 +50,21 @@ const AddIcon = styled(BluePlusIcon)`
   width: 12px;
   margin-right: 2px;
 `;
-const CreateBtn = styled(TacoButton)<{ readOnly?: boolean }>`
+const CreateBtn = styled(TacoButton)<{ $readOnly?: boolean }>`
   min-height: 24px;
   width: 70px;
   padding: 4px 12px;
   display: flex;
   align-items: center;
   box-shadow: none;
-  opacity: ${(props) => (props.readOnly ? 0.5 : 1)};
+  opacity: ${(props) => (props.$readOnly ? 0.5 : 1)};
 
   &:hover ${AddIcon} g {
     stroke: #315efb;
   }
 
-  :disabled,
-  :disabled:hover {
+  &:disabled,
+  &:disabled:hover {
     ${AddIcon} g {
       stroke: #4965f230;
     }
@@ -89,15 +89,15 @@ const Title = styled.div`
 const SelectListWrapper = styled.div`
   height: calc(100% - 19px);
 `;
-const SelectItem = styled.div<{ selected: boolean; readOnly?: boolean }>`
+const SelectItem = styled.div<{ $selected: boolean; $readOnly?: boolean }>`
   height: 80px;
   padding: 0 16px;
   background-color: ${(props) =>
-    props.selected ? (props.readOnly ? "#EFEFF1" : "#F2F7FC") : "unset"};
+    props.$selected ? (props.$readOnly ? "#EFEFF1" : "#F2F7FC") : "unset"};
   cursor: pointer;
 
-  :hover {
-    background-color: ${(props) => !props.selected && "#f2f7fc80"};
+  &:hover {
+    background-color: ${(props) => !props.$selected && "#f2f7fc80"};
   }
 `;
 
@@ -141,7 +141,7 @@ const PopoverIcon = styled(PointIcon)`
     fill: #8b8fa3;
   }
 
-  :hover {
+  &:hover {
     background: #eef0f3;
     border-radius: 4px;
     cursor: pointer;
@@ -165,7 +165,7 @@ export const LeftNav = (props: {
 
   return (
     <ReadOnlyMask readOnly={!!props.readOnly}>
-      <Wrapper readOnly={props.readOnly}>
+      <Wrapper $readOnly={props.readOnly}>
         <Header>
           <Search
             disabled={props.readOnly}
@@ -174,7 +174,7 @@ export const LeftNav = (props: {
             onChange={(e) => setSearchValue(e.target.value)}
             style={{ width: "154px", height: "32px", margin: "0" }}
           />
-          <CreateBtn buttonType={"blue"} onClick={props.addQuery} readOnly={props.readOnly}>
+          <CreateBtn buttonType={"blue"} onClick={props.addQuery} $readOnly={props.readOnly}>
             <AddIcon />
             {trans("newItem")}
           </CreateBtn>
@@ -200,8 +200,8 @@ export const LeftNav = (props: {
                   .map((q) => (
                     <SelectItem
                       key={q.id}
-                      selected={q.id === props.selectedQuery}
-                      readOnly={props.readOnly}
+                      $selected={q.id === props.selectedQuery}
+                      $readOnly={props.readOnly}
                       onClick={() => props.onSelect(q.id)}
                     >
                       <Content>
diff --git a/client/packages/lowcoder/src/pages/queryLibrary/QueryLibraryEditor.tsx b/client/packages/lowcoder/src/pages/queryLibrary/QueryLibraryEditor.tsx
index 39ed969bbe..fdef2f1235 100644
--- a/client/packages/lowcoder/src/pages/queryLibrary/QueryLibraryEditor.tsx
+++ b/client/packages/lowcoder/src/pages/queryLibrary/QueryLibraryEditor.tsx
@@ -25,7 +25,7 @@ import { Comp } from "lowcoder-core";
 import { LibraryQuery } from "../../api/queryLibraryApi";
 import { NameGenerator } from "../../comps/utils";
 import { QueryLibraryHistoryView } from "./QueryLibraryHistoryView";
-import { Form } from "antd";
+import { default as Form } from "antd/es/form";
 import {
   CustomModal,
   DatasourceForm,
@@ -34,7 +34,7 @@ import {
   FormSection,
   TacoButton,
 } from "lowcoder-design";
-import { CheckboxOptionType } from "antd/lib/checkbox/Group";
+import { CheckboxOptionType } from "antd/es/checkbox/Group";
 import { trans } from "i18n";
 import { getDataSource } from "../../redux/selectors/datasourceSelectors";
 import {
diff --git a/client/packages/lowcoder/src/pages/queryLibrary/QueryLibraryHistoryView.tsx b/client/packages/lowcoder/src/pages/queryLibrary/QueryLibraryHistoryView.tsx
index 34f711a083..b3ea7db351 100644
--- a/client/packages/lowcoder/src/pages/queryLibrary/QueryLibraryHistoryView.tsx
+++ b/client/packages/lowcoder/src/pages/queryLibrary/QueryLibraryHistoryView.tsx
@@ -23,19 +23,19 @@ const RevertButton = styled(TacoButton)`
   height: 32px;
   border: none;
 
-  :hover {
+  &:hover {
     padding: 0 11px;
     border: none;
     box-shadow: none;
   }
 
-  :focus {
+  &:focus {
     padding: 0 11px;
     border: none;
     box-shadow: none;
   }
 
-  :after {
+  &:after {
     content: "";
   }
 `;
@@ -45,17 +45,17 @@ const ExitButton = styled(TacoButton)`
   width: 80px;
   height: 32px;
 
-  :hover {
+  &:hover {
     padding: 0;
     box-shadow: none;
   }
 
-  :focus {
+  &:focus {
     padding: 0;
     box-shadow: none;
   }
 
-  :after {
+  &:after {
     content: "";
   }
 `;
diff --git a/client/packages/lowcoder/src/pages/queryLibrary/QueryLibrarySkeletonView.tsx b/client/packages/lowcoder/src/pages/queryLibrary/QueryLibrarySkeletonView.tsx
index b36f53a100..f7fc745a75 100644
--- a/client/packages/lowcoder/src/pages/queryLibrary/QueryLibrarySkeletonView.tsx
+++ b/client/packages/lowcoder/src/pages/queryLibrary/QueryLibrarySkeletonView.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { Spin } from "antd";
+import { default as Spin } from "antd/es/spin";
 
 const StyledSpin = styled(Spin)`
   display: flex;
diff --git a/client/packages/lowcoder/src/pages/queryLibrary/queryLibraryEditorView.tsx b/client/packages/lowcoder/src/pages/queryLibrary/queryLibraryEditorView.tsx
index aac1204fea..40c5d0e371 100644
--- a/client/packages/lowcoder/src/pages/queryLibrary/queryLibraryEditorView.tsx
+++ b/client/packages/lowcoder/src/pages/queryLibrary/queryLibraryEditorView.tsx
@@ -33,7 +33,7 @@ const HeaderLeft = styled.div`
     font-weight: 500;
     margin-left: -8px;
 
-    :hover {
+    &:hover {
       background-color: #f5f5f6;
     }
   }
@@ -47,7 +47,7 @@ const HeaderLeft = styled.div`
     border: 1px solid #3377ff;
     margin-left: -8px;
 
-    :focus {
+    &:focus {
       border-color: #3377ff;
       box-shadow: 0 0 0 2px #d6e4ff;
     }
diff --git a/client/packages/lowcoder/src/pages/setting/idSource/createModal.tsx b/client/packages/lowcoder/src/pages/setting/idSource/createModal.tsx
index f52c270a31..8b21065687 100644
--- a/client/packages/lowcoder/src/pages/setting/idSource/createModal.tsx
+++ b/client/packages/lowcoder/src/pages/setting/idSource/createModal.tsx
@@ -10,7 +10,10 @@ import {
   SpanStyled,
   PasswordLabel
 } from "./styledComponents";
-import { Form, Input, Select, Tooltip } from "antd";
+import { default as Form } from "antd/es/form";
+import { default as Input } from "antd/es/input";
+import { default as Select } from "antd/es/select";
+import { default as Tooltip } from "antd/es/tooltip";
 import IdSourceApi, { ConfigItem } from "api/idSourceApi";
 import { validateResponse } from "api/apiUtils";
 import { authConfig, AuthType, clientIdandSecretConfig, ItemType } from "./idSourceConstants";
diff --git a/client/packages/lowcoder/src/pages/setting/idSource/detail/deleteConfig.tsx b/client/packages/lowcoder/src/pages/setting/idSource/detail/deleteConfig.tsx
index f9cfc370f6..63ebd48170 100644
--- a/client/packages/lowcoder/src/pages/setting/idSource/detail/deleteConfig.tsx
+++ b/client/packages/lowcoder/src/pages/setting/idSource/detail/deleteConfig.tsx
@@ -1,4 +1,4 @@
-import { Button } from "antd";
+import { default as Button } from "antd/es/button";
 import { DeleteWrapper } from "pages/setting/idSource/styledComponents";
 import { trans } from "i18n";
 import { useState } from "react";
diff --git a/client/packages/lowcoder/src/pages/setting/idSource/detail/index.tsx b/client/packages/lowcoder/src/pages/setting/idSource/detail/index.tsx
index 80b3fd2447..9d59de7fee 100644
--- a/client/packages/lowcoder/src/pages/setting/idSource/detail/index.tsx
+++ b/client/packages/lowcoder/src/pages/setting/idSource/detail/index.tsx
@@ -20,7 +20,11 @@ import {
 } from "@lowcoder-ee/pages/setting/idSource/idSourceConstants";
 import { Manual } from "pages/setting/idSource/detail/manual";
 import { DeleteConfig } from "pages/setting/idSource/detail/deleteConfig";
-import { Divider, Form, Input, Tooltip } from "antd";
+import { default as Divider } from "antd/es/divider";
+import { default as Form } from "antd/es/form";
+import { useForm } from "antd/es/form/Form";
+import { default as Input } from "antd/es/input";
+import { default as Tooltip } from "antd/es/tooltip";
 import {
   SaveButton,
   CheckboxStyled,
@@ -31,7 +35,6 @@ import {
 } from "pages/setting/idSource/styledComponents";
 import { validateResponse } from "api/apiUtils";
 import { ItemType } from "pages/setting/idSource/idSourceConstants";
-import { useForm } from "antd/es/form/Form";
 import _ from "lodash";
 import { messageInstance } from "lowcoder-design";
 
@@ -157,7 +160,7 @@ export const IdSourceDetail = (props: IdSourceDetailProps) => {
             required = valueObject ? valueObject.isRequire ?? required : required;
             const hasLock = valueObject && valueObject?.hasLock;
             const tip = valueObject && valueObject.tip;
-            const label = valueObject ? valueObject.label : value;
+            const label = valueObject ? valueObject.label : value as string;
             const isList = valueObject && valueObject.isList;
             const isPassword = valueObject && valueObject.isPassword;
             return (
diff --git a/client/packages/lowcoder/src/pages/setting/idSource/detail/manual.tsx b/client/packages/lowcoder/src/pages/setting/idSource/detail/manual.tsx
index c83bfa80fb..6e1b9229dd 100644
--- a/client/packages/lowcoder/src/pages/setting/idSource/detail/manual.tsx
+++ b/client/packages/lowcoder/src/pages/setting/idSource/detail/manual.tsx
@@ -1,4 +1,4 @@
-import { Button } from "antd";
+import { default as Button } from "antd/es/button";
 import { ManualWapper } from "pages/setting/idSource/styledComponents";
 import { trans } from "i18n";
 import { SyncManualIcon } from "lowcoder-design";
diff --git a/client/packages/lowcoder/src/pages/setting/idSource/list.tsx b/client/packages/lowcoder/src/pages/setting/idSource/list.tsx
index b1536e7a9b..14fd3a43a2 100644
--- a/client/packages/lowcoder/src/pages/setting/idSource/list.tsx
+++ b/client/packages/lowcoder/src/pages/setting/idSource/list.tsx
@@ -4,7 +4,7 @@ import {
   Level1SettingPageContentWithList,
   Level1SettingPageTitleWithBtn,
 } from "pages/setting/styled";
-import Column from "antd/lib/table/Column";
+import { default as Column } from "antd/es/table/Column";
 import { useSelector } from "react-redux";
 import { getUser } from "redux/selectors/usersSelectors";
 import IdSourceApi, { ConfigItem } from "api/idSourceApi";
@@ -25,7 +25,7 @@ import history from "util/history";
 import { OAUTH_PROVIDER_DETAIL } from "constants/routesURL";
 import { selectSystemConfig } from "redux/selectors/configSelectors";
 import { isEnterpriseMode, isSelfDomain } from "util/envUtils";
-import { Badge } from "antd";
+import { default as Badge } from "antd/es/badge";
 import { validateResponse } from "api/apiUtils";
 import { ServerAuthTypeInfo } from "@lowcoder-ee/constants/authConstants";
 import { GeneralLoginIcon } from "assets/icons";
diff --git a/client/packages/lowcoder/src/pages/setting/idSource/styledComponents.tsx b/client/packages/lowcoder/src/pages/setting/idSource/styledComponents.tsx
index ee41f0b6a7..577684f98e 100644
--- a/client/packages/lowcoder/src/pages/setting/idSource/styledComponents.tsx
+++ b/client/packages/lowcoder/src/pages/setting/idSource/styledComponents.tsx
@@ -1,6 +1,8 @@
 import styled, { css } from "styled-components";
 import { Table } from "components/Table";
-import { Button, Checkbox, Form } from "antd";
+import { default as Button } from "antd/es/button";
+import { default as Checkbox} from "antd/es/checkbox";
+import { default as Form } from "antd/es/form";
 import { UnderlineCss } from "lowcoder-design";
 
 const btnLoadingCss = css`
diff --git a/client/packages/lowcoder/src/pages/setting/organization/orgList.tsx b/client/packages/lowcoder/src/pages/setting/organization/orgList.tsx
index dcd262d6af..0db0e6235a 100644
--- a/client/packages/lowcoder/src/pages/setting/organization/orgList.tsx
+++ b/client/packages/lowcoder/src/pages/setting/organization/orgList.tsx
@@ -18,7 +18,8 @@ import { Level1SettingPageContentWithList, Level1SettingPageTitleWithBtn } from
 import { timestampToHumanReadable } from "util/dateTimeUtils";
 import { isSaasMode } from "util/envUtils";
 import { selectSystemConfig } from "redux/selectors/configSelectors";
-import { Form, Input } from "antd";
+import { default as Form } from "antd/es/form";
+import { default as Input } from "antd/es/input";
 import { getUser } from "redux/selectors/usersSelectors";
 import { getOrgCreateStatus } from "redux/selectors/orgSelectors";
 
diff --git a/client/packages/lowcoder/src/pages/setting/permission/permissionList.tsx b/client/packages/lowcoder/src/pages/setting/permission/permissionList.tsx
index 30216a16a0..b2fb697315 100644
--- a/client/packages/lowcoder/src/pages/setting/permission/permissionList.tsx
+++ b/client/packages/lowcoder/src/pages/setting/permission/permissionList.tsx
@@ -1,4 +1,4 @@
-import { Typography } from "antd";
+import { default as Typography } from "antd/es/typography";
 import OrgApi from "api/orgApi";
 import { buildGroupId } from "constants/routesURL";
 import { AddIcon, CustomModal, EditPopover } from "lowcoder-design";
diff --git a/client/packages/lowcoder/src/pages/setting/permission/styledComponents.tsx b/client/packages/lowcoder/src/pages/setting/permission/styledComponents.tsx
index 7223016be8..4f2be19b4b 100644
--- a/client/packages/lowcoder/src/pages/setting/permission/styledComponents.tsx
+++ b/client/packages/lowcoder/src/pages/setting/permission/styledComponents.tsx
@@ -1,4 +1,5 @@
-import { Popover, Table as AntdTable } from "antd";
+import { default as Popover } from "antd/es/popover";
+import { default as AntdTable } from "antd/es/table";
 import {
   CustomModal,
   LockIcon,
@@ -48,11 +49,11 @@ export const StyledTable = styled(AntdTable)`
   }
 
   .ant-table-body {
-    ::-webkit-scrollbar {
+    &::-webkit-scrollbar {
       width: 16px;
     }
 
-    ::-webkit-scrollbar-thumb {
+    &::-webkit-scrollbar-thumb {
       border: 5px solid transparent;
       background-clip: content-box;
       border-radius: 9999px;
@@ -172,7 +173,7 @@ export const PermissionHeaderWrapper = styled.div`
     padding: 7px 12px;
     white-space: nowrap;
 
-    ::-webkit-scrollbar {
+    &::-webkit-scrollbar {
       display: none;
     }
   }
@@ -294,7 +295,7 @@ export const PopoverIcon = styled(PointIcon)`
     fill: #8b8fa3;
   }
 
-  :hover {
+  &:hover {
     background-color: #e1e3eb;
     border-radius: 4px;
     cursor: pointer;
diff --git a/client/packages/lowcoder/src/pages/setting/profile/profileComponets.tsx b/client/packages/lowcoder/src/pages/setting/profile/profileComponets.tsx
index 17e20f8bdd..61ee5c6780 100644
--- a/client/packages/lowcoder/src/pages/setting/profile/profileComponets.tsx
+++ b/client/packages/lowcoder/src/pages/setting/profile/profileComponets.tsx
@@ -14,10 +14,9 @@ import { User } from "constants/userConstants";
 import { replaceMiddleWithStar } from "util/stringUtils";
 import { useDispatch, useSelector } from "react-redux";
 import { getUser } from "redux/selectors/usersSelectors";
-import { UploadChangeParam } from "antd/lib/upload";
 import { beforeImgUpload, getBase64 } from "util/fileUtils";
 import { updateUserAction, updateUserSuccess } from "redux/reduxActions/userActions";
-import { Upload } from "antd";
+import { default as Upload, UploadChangeParam } from "antd/es/upload";
 import { USER_HEAD_UPLOAD_URL } from "constants/apiConstants";
 import { trans } from "i18n";
 import { messageInstance } from "lowcoder-design";
@@ -165,7 +164,7 @@ const ProfileImageMask = styled.div`
   opacity: 0;
   cursor: pointer;
 
-  :hover {
+  &:hover {
     opacity: 1;
     background: rgba(0, 0, 0, 0.5);
     border: 1px solid rgba(0, 0, 0, 0.1);
diff --git a/client/packages/lowcoder/src/pages/setting/theme/createModal.tsx b/client/packages/lowcoder/src/pages/setting/theme/createModal.tsx
index d1ca5265b0..753f1477a7 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/createModal.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/createModal.tsx
@@ -54,7 +54,7 @@ function CreateModal(props: CreateModalProp) {
     return (
       <ThemeBtn
         key={theme.id}
-        theme={theme.theme}
+        $theme={theme.theme}
         onClick={() => setSelectId(theme.id)}
         className={selectId === theme.id ? "selected" : ""}
       >
diff --git a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
index e6583a67a3..a6968e6ae9 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
@@ -1,4 +1,5 @@
-import { InputRef, message } from "antd";
+import { InputRef } from "antd/es/input";
+import { default as message } from "antd/es/message";
 import {
   CommonSettingResponseData,
   SetCommonSettingPayload,
diff --git a/client/packages/lowcoder/src/pages/setting/theme/styledComponents.tsx b/client/packages/lowcoder/src/pages/setting/theme/styledComponents.tsx
index a58eebcc0a..4974c3feeb 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/styledComponents.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/styledComponents.tsx
@@ -1,4 +1,6 @@
-import { Button, Divider, Table } from "antd";
+import { default as Button } from "antd/es/button";
+import { default as Divider } from "antd/es/divider";
+import { default as Table } from "antd/es/table";
 import { ThemeDetail } from "api/commonSettingApi";
 import {
   CustomModal,
@@ -150,7 +152,7 @@ export const BackBtn = styled.div`
   cursor: pointer;
   height: 24px;
 
-  :hover {
+  &:hover {
     color: #4965f2;
   }
 
@@ -161,7 +163,7 @@ export const BackBtn = styled.div`
     margin-right: 4px;
   }
 
-  :hover svg g path {
+  &:hover svg g path {
     fill: #4965f2;
   }
 `;
@@ -216,19 +218,19 @@ export const TacoInputStyled = styled(TacoInput)`
   }
 `;
 
-export const ThemeBtn = styled.div<{ theme: ThemeDetail }>`
+export const ThemeBtn = styled.div<{ $theme: ThemeDetail }>`
   width: 180px;
   margin-bottom: 4px;
   height: auto;
   padding: 7px;
-  background-color: ${(props) => props.theme.canvas};
+  background-color: ${(props) => props.$theme.canvas};
   border-radius: 6px;
   border: 1px solid #efeff1;
   font-size: 12px;
   position: relative;
   cursor: pointer;
   color: ${(props) =>
-    isDarkColor(props.theme.primarySurface) ? props.theme.textLight : props.theme.textDark};
+    isDarkColor(props.$theme.primarySurface) ? props.$theme.textLight : props.$theme.textDark};
   .name {
     font-size: 13px;
     font-weight: 600;
@@ -239,7 +241,7 @@ export const ThemeBtn = styled.div<{ theme: ThemeDetail }>`
   &:hover,
   &:focus,
   &:active {
-    background-color: ${(props) => props.theme.canvas};
+    background-color: ${(props) => props.$theme.canvas};
     border-color: #315efb;
     box-shadow: 0 0 1px 4px #d6e4ff;
   }
@@ -247,8 +249,8 @@ export const ThemeBtn = styled.div<{ theme: ThemeDetail }>`
     border-radius: 6px;
     overflow: hidden;
     display: block;
-    border: 1px solid ${(props) => darkenColor(props.theme.primarySurface, 0.1)};
-    background-color: ${(props) => props.theme.primarySurface};
+    border: 1px solid ${(props) => darkenColor(props.$theme.primarySurface, 0.1)};
+    background-color: ${(props) => props.$theme.primarySurface};
     span {
       display: inline-flex;
       align-items: center;
@@ -257,7 +259,7 @@ export const ThemeBtn = styled.div<{ theme: ThemeDetail }>`
       display: flex;
       align-items: center;
       padding: 0 6px;
-      border-bottom: 1px solid ${(props) => darkenColor(props.theme.primarySurface, 0.1)};
+      border-bottom: 1px solid ${(props) => darkenColor(props.$theme.primarySurface, 0.1)};
     }
     > div:nth-of-type(1) {
       height: 28px;
@@ -266,7 +268,7 @@ export const ThemeBtn = styled.div<{ theme: ThemeDetail }>`
       svg {
         margin-right: 2px;
         rect {
-          fill: ${(props) => props.theme.primary};
+          fill: ${(props) => props.$theme.primary};
         }
       }
     }
@@ -290,10 +292,10 @@ export const ThemeBtn = styled.div<{ theme: ThemeDetail }>`
         svg {
           margin-right: 2px;
           circle:nth-of-type(1) {
-            stroke: ${(props) => props.theme.primary};
+            stroke: ${(props) => props.$theme.primary};
           }
           circle:nth-of-type(2) {
-            fill: ${(props) => props.theme.primary};
+            fill: ${(props) => props.$theme.primary};
           }
         }
         span {
@@ -327,9 +329,9 @@ export const ThemeBtn = styled.div<{ theme: ThemeDetail }>`
         display: flex;
         align-items: center;
         justify-content: center;
-        background-color: ${(props) => props.theme.primary};
+        background-color: ${(props) => props.$theme.primary};
         color: ${(props) =>
-          isDarkColor(props.theme.primary) ? props.theme.textLight : props.theme.textDark};
+          isDarkColor(props.$theme.primary) ? props.$theme.textLight : props.$theme.textDark};
       }
     }
   }
@@ -435,7 +437,7 @@ export const ConfigItem = styled.div`
   }
 `;
 
-export const Radius = styled.div<{ radius: string }>`
+export const Radius = styled.div<{ $radius: string }>`
   width: 24px;
   height: 24px;
   border-radius: 4px 0 0 4px;
@@ -449,7 +451,7 @@ export const Radius = styled.div<{ radius: string }>`
       height: 24px;
       width: 24px;
       border: 2px solid #777;
-      border-radius: ${(props) => props.radius};
+      border-radius: ${(props) => props.$radius};
     }
   }
 `;
@@ -576,7 +578,7 @@ export const StyledMoreActionIcon = styled(PopoverIcon)`
     fill: #8b8fa3;
   }
 
-  :hover {
+  &:hover {
     background-color: #e1e3eb;
     border-radius: 4px;
     cursor: pointer;
@@ -616,14 +618,14 @@ const getTagStyle = (theme: ThemeDetail) => {
   `;
 };
 
-export const TagDesc = styled.span<{ theme: ThemeDetail }>`
+export const TagDesc = styled.span<{ $theme: ThemeDetail }>`
   display: inline-flex;
   margin-right: 12px;
   height: 36px;
   width: 58px;
   border-radius: 6px;
   border: 1px solid rgba(0, 0, 0, 0.1);
-  ${(props) => getTagStyle(props.theme)}
+  ${(props) => getTagStyle(props.$theme)}
 `;
 
 export const EmptySpan = styled.span`
@@ -654,7 +656,7 @@ export const CustomModalStyled = styled(CustomModal)`
   }
 `;
 
-export const Margin = styled.div<{ margin: string }>`	
+export const Margin = styled.div<{ $margin: string }>`	
 > div {	
   margin: 3px;	
   overflow: hidden;	
@@ -664,7 +666,7 @@ export const Margin = styled.div<{ margin: string }>`
   }	
 }	
 `;	
-export const Padding = styled.div<{ padding: string }>`	
+export const Padding = styled.div<{ $padding: string }>`	
 > div {	
   margin: 3px;	
   overflow: hidden;	
@@ -674,7 +676,7 @@ export const Padding = styled.div<{ padding: string }>`
   }	
 }`
 // Added By Aqib Mirza
-export const GridColumns = styled.div<{ gridColumns: string }>`
+export const GridColumns = styled.div<{ $gridColumns: string }>`
   > div {
     margin: 3px;
     overflow: hidden;
diff --git a/client/packages/lowcoder/src/pages/setting/theme/themeList.tsx b/client/packages/lowcoder/src/pages/setting/theme/themeList.tsx
index 5170a1c07d..7b662b1988 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/themeList.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/themeList.tsx
@@ -1,4 +1,9 @@
-import { Button, Dropdown, Empty, Menu, Table, Typography } from "antd";
+import { default as Button } from "antd/es/button";
+import { default as Dropdown } from "antd/es/dropdown";
+import { default as Empty } from "antd/es/empty";
+import { default as Menu } from "antd/es/menu";
+import { default as Table } from "antd/es/table";
+import { default as Typography } from "antd/es/typography";
 import { timestampToHumanReadable } from "util/dateTimeUtils";
 import { MENU_TYPE } from "./themeConstant";
 import React, { useState } from "react";
@@ -87,7 +92,7 @@ function ThemeList(props: ThemeListProp) {
         render={(value, theme: ThemeType) => {
           return (
             <ColumnName>
-              <TagDesc theme={theme.theme}>
+              <TagDesc $theme={theme.theme}>
                 <div className="left" />
                 <div className="right" />
               </TagDesc>
diff --git a/client/packages/lowcoder/src/pages/userAuth/authComponents.tsx b/client/packages/lowcoder/src/pages/userAuth/authComponents.tsx
index 7df9dd684d..3b6f6942ff 100644
--- a/client/packages/lowcoder/src/pages/userAuth/authComponents.tsx
+++ b/client/packages/lowcoder/src/pages/userAuth/authComponents.tsx
@@ -32,7 +32,7 @@ const AuthCard = styled.div`
   }
 `;
 
-const AuthCardHeading = styled.div<{ type?: string }>`
+const AuthCardHeading = styled.div<{ $type?: string }>`
   font-weight: 600;
   font-size: 28px;
   color: #222222;
@@ -47,7 +47,7 @@ const AuthCardHeading = styled.div<{ type?: string }>`
   @media screen and (max-width: 640px) {
     font-size: 23px;
     line-height: 23px;
-    ${(props) => props.type === "large" && "margin-top: 32px"}
+    ${(props) => props.$type === "large" && "margin-top: 32px"}
   }
 `;
 
@@ -70,8 +70,8 @@ const AuthBottom = styled.div`
 
   > button:first-child {
     // over 5 children, hide the button label
-    :nth-last-child(n + 5),
-    :nth-last-child(n + 5) ~ button {
+    &:nth-last-child(n + 5),
+    &:nth-last-child(n + 5) ~ button {
       margin-right: 16px;
 
       .auth-label {
@@ -131,7 +131,7 @@ export const AuthContainer = (props: {
   return (
     <AuthCardContainer>
       <AuthCardHeading
-        type={props.type}
+        $type={props.type}
       >
         {props.heading || ""}
       </AuthCardHeading>
@@ -267,7 +267,7 @@ export const StyledRouteLink = styled(Link)`
   line-height: 16px;
   margin-left: auto;
 
-  :hover {
+  &:hover {
     color: #315efb;
   }
 `;
diff --git a/client/packages/lowcoder/src/pages/userAuth/thirdParty/thirdPartyAuth.tsx b/client/packages/lowcoder/src/pages/userAuth/thirdParty/thirdPartyAuth.tsx
index 78017a639c..219e759bd0 100644
--- a/client/packages/lowcoder/src/pages/userAuth/thirdParty/thirdPartyAuth.tsx
+++ b/client/packages/lowcoder/src/pages/userAuth/thirdParty/thirdPartyAuth.tsx
@@ -13,7 +13,7 @@ import { messageInstance } from "lowcoder-design";
 import styled from "styled-components";
 import { trans } from "i18n";
 import { geneAuthStateAndSaveParam, getAuthUrl, getRedirectUrl } from "pages/userAuth/authUtils";
-import { Divider } from "antd";
+import { default as Divider } from "antd/es/divider";
 import { useRedirectUrl } from "util/hooks";
 
 const ThirdPartyLoginButtonWrapper = styled.div`
diff --git a/client/packages/lowcoder/src/redux/sagas/commonSettingsSagas.ts b/client/packages/lowcoder/src/redux/sagas/commonSettingsSagas.ts
index 0dccd048b3..8d2574a8f6 100644
--- a/client/packages/lowcoder/src/redux/sagas/commonSettingsSagas.ts
+++ b/client/packages/lowcoder/src/redux/sagas/commonSettingsSagas.ts
@@ -28,7 +28,11 @@ export function* fetchCommonSettingsSaga(action: ReduxAction<FetchCommonSettingP
       });
     }
   } catch (error) {
-    messageInstance.error(error instanceof Error ? error.message : error);
+    messageInstance.error(
+      error instanceof Error
+        ? (error.message) as string
+        : error as string
+    );
     log.debug("fetch event type error: ", error);
   }
 }
@@ -50,7 +54,11 @@ export function* setCommonSettingsSaga(action: ReduxAction<SetCommonSettingPaylo
       });
     }
   } catch (error) {
-    messageInstance.error(error instanceof Error ? error.message : error);
+    messageInstance.error(
+      error instanceof Error
+        ? (error.message) as string
+        : error as string
+    );
     log.debug("fetch event type error: ", error);
   }
 }
diff --git a/client/packages/lowcoder/src/redux/sagas/userSagas.ts b/client/packages/lowcoder/src/redux/sagas/userSagas.ts
index 7a78622cd5..46657b9f1e 100644
--- a/client/packages/lowcoder/src/redux/sagas/userSagas.ts
+++ b/client/packages/lowcoder/src/redux/sagas/userSagas.ts
@@ -109,7 +109,11 @@ export function* getRawCurrentUserSaga() {
       });
     }
   } catch (error: any) {
-    messageInstance.error(error instanceof Error ? error.message : error);
+    messageInstance.error(
+      error instanceof Error
+        ? (error.message) as string
+        : error as string
+    );
     log.error("getRawCurrentUser error:", error);
   }
 }
diff --git a/client/packages/lowcoder/src/util/bottomResUtils.tsx b/client/packages/lowcoder/src/util/bottomResUtils.tsx
index 6abceb332e..099a00e075 100644
--- a/client/packages/lowcoder/src/util/bottomResUtils.tsx
+++ b/client/packages/lowcoder/src/util/bottomResUtils.tsx
@@ -40,10 +40,10 @@ const QueryLibrary = styled(QueryLibraryIcon)`
   }
 `;
 
-export const IconWrapper = styled.div<{ isRestApi?: boolean }>`
+export const IconWrapper = styled.div<{ $isRestApi?: boolean }>`
   display: flex;
-  width: ${(props) => (props.isRestApi ? "26px" : "16px")};
-  height: ${(props) => (props.isRestApi ? "13px" : "16px")};
+  width: ${(props) => (props.$isRestApi ? "26px" : "16px")};
+  height: ${(props) => (props.$isRestApi ? "13px" : "16px")};
   border-radius: 2px;
   flex-shrink: 0;
   margin-right: 4px;
@@ -51,13 +51,13 @@ export const IconWrapper = styled.div<{ isRestApi?: boolean }>`
 `;
 
 export const LargeBottomResIconWrapper = styled(IconWrapper)`
-  width: ${(props) => (props.isRestApi ? "32px" : "20px")};
-  height: ${(props) => (props.isRestApi ? "16px" : "20px")};
+  width: ${(props) => (props.$isRestApi ? "32px" : "20px")};
+  height: ${(props) => (props.$isRestApi ? "16px" : "20px")};
   margin-right: 8px;
 
   svg {
-    width: ${(props) => (props.isRestApi ? "32px" : "20px")};
-    height: ${(props) => (props.isRestApi ? "16px" : "20px")};
+    width: ${(props) => (props.$isRestApi ? "32px" : "20px")};
+    height: ${(props) => (props.$isRestApi ? "16px" : "20px")};
   }
 `;
 
@@ -146,8 +146,8 @@ export const getBottomResIcon = (
   };
   const isRestApi = type === "restApi" && !!httpMethod;
   return size === "large" ? (
-    <LargeBottomResIconWrapper isRestApi={isRestApi}>{getIcon()}</LargeBottomResIconWrapper>
+    <LargeBottomResIconWrapper $isRestApi={isRestApi}>{getIcon()}</LargeBottomResIconWrapper>
   ) : (
-    <IconWrapper isRestApi={isRestApi}>{getIcon()}</IconWrapper>
+    <IconWrapper $isRestApi={isRestApi}>{getIcon()}</IconWrapper>
   );
 };
diff --git a/client/packages/lowcoder/src/util/cacheUtils.ts b/client/packages/lowcoder/src/util/cacheUtils.ts
index f098b817d1..667217abe7 100644
--- a/client/packages/lowcoder/src/util/cacheUtils.ts
+++ b/client/packages/lowcoder/src/util/cacheUtils.ts
@@ -27,7 +27,7 @@ export function memo(target: any, propertyKey: string, descriptor: PropertyDescr
  */
 export const profilerCallback = (
   id: string,
-  phase: "mount" | "update",
+  phase: "mount" | "update" | "nested-update",
   actualDuration: number,
   baseDuration: number,
   startTime: number,
diff --git a/client/packages/lowcoder/src/util/hotkeys.tsx b/client/packages/lowcoder/src/util/hotkeys.tsx
index 058793b673..12262c9f53 100644
--- a/client/packages/lowcoder/src/util/hotkeys.tsx
+++ b/client/packages/lowcoder/src/util/hotkeys.tsx
@@ -21,6 +21,7 @@ export interface IReactHotkeysProps {
   splitKey?: string;
   global?: boolean;
   wrapperStyle?: CSSProperties;
+  children?: React.ReactNode;
 }
 
 export default class ReactHotkeys extends React.Component<
diff --git a/client/packages/lowcoder/src/util/keyUtils.tsx b/client/packages/lowcoder/src/util/keyUtils.tsx
index 22f477f467..8d506843c7 100644
--- a/client/packages/lowcoder/src/util/keyUtils.tsx
+++ b/client/packages/lowcoder/src/util/keyUtils.tsx
@@ -203,6 +203,7 @@ export function ShortcutsWrapper(props: HTMLAttributes<HTMLDivElement> & { disab
 
 type GlobalWrapperProps = {
   disabled?: boolean;
+  children?: React.ReactNode;
   onKeyDownCapture?: (e: KeyboardEvent) => void;
   onKeyUpCapture?: (e: KeyboardEvent) => void;
   onMouseMoveCapture?: (e: MouseEvent) => void;
diff --git a/client/scripts/build.js b/client/scripts/build.js
index 9ed4a12579..8e72898de7 100644
--- a/client/scripts/build.js
+++ b/client/scripts/build.js
@@ -82,7 +82,7 @@ shell.env["REACT_APP_COMMIT_ID"] = shell.env["REACT_APP_COMMIT_ID"] || shell.exe
 
 // Treating warnings as errors when process.env.CI = true.
 shell.env["CI"] = false;
-shell.env["NODE_OPTIONS"] = "--max_old_space_size=4096";
+shell.env["NODE_OPTIONS"] = "--max_old_space_size=8192";
 shell.env["NODE_ENV"] = "production";
 shell.env["REACT_APP_LOG_LEVEL"] = "error";
 shell.env["REACT_APP_BUNDLE_BUILTIN_PLUGIN"] = "true";
diff --git a/client/yarn.lock b/client/yarn.lock
index 0000f88360..e0d64b590f 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -72,30 +72,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ant-design/colors@npm:^7.0.0":
-  version: 7.0.0
-  resolution: "@ant-design/colors@npm:7.0.0"
+"@ant-design/colors@npm:^7.0.0, @ant-design/colors@npm:^7.0.2":
+  version: 7.0.2
+  resolution: "@ant-design/colors@npm:7.0.2"
   dependencies:
-    "@ctrl/tinycolor": ^3.4.0
-  checksum: 419e98d9cb823ff0935024f4278f7b9c5896805dce4c93d667b5a4d76b03f5fa969b32d1998ee761113da43063e2b23a94c330ad6e865f03fbbb2579907e7fdb
+    "@ctrl/tinycolor": ^3.6.1
+  checksum: e09eec01d3f88b4101cbf28498ba181af65a02cb28fc1b7b70f5fdf509bef0fa61185c451d1a83fdcc9f8356057d0a0436253d8183a35e6f78845fea01f40072
   languageName: node
   linkType: hard
 
-"@ant-design/cssinjs@npm:^1.18.1":
-  version: 1.18.1
-  resolution: "@ant-design/cssinjs@npm:1.18.1"
+"@ant-design/cssinjs@npm:^1.18.2":
+  version: 1.18.2
+  resolution: "@ant-design/cssinjs@npm:1.18.2"
   dependencies:
     "@babel/runtime": ^7.11.1
     "@emotion/hash": ^0.8.0
     "@emotion/unitless": ^0.7.5
     classnames: ^2.3.1
-    csstype: 3.1.2
+    csstype: ^3.1.3
     rc-util: ^5.35.0
     stylis: ^4.0.13
   peerDependencies:
     react: ">=16.0.0"
     react-dom: ">=16.0.0"
-  checksum: 69a46791ef18a66fabe6569e58ad97feff9f4366c6653a2ae1360aca21607c6ce448595dd26c72d2e387352d6bafe5f1ff4339c956798c19a7de69f09c4f2818
+  checksum: b3430547a625fae25b0b459fc9055422985fb1855f0296bb0208d51586e7c0c1e1dae2dc59b6af28234f4b3de938434a0b737bde59d8c4f52feb7a14e7fa8202
   languageName: node
   linkType: hard
 
@@ -106,7 +106,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ant-design/icons@npm:^4.1.0, @ant-design/icons@npm:^4.2.1, @ant-design/icons@npm:^4.3.0, @ant-design/icons@npm:^4.7.0, @ant-design/icons@npm:^4.8.1":
+"@ant-design/icons@npm:^4.7.0":
   version: 4.8.1
   resolution: "@ant-design/icons@npm:4.8.1"
   dependencies:
@@ -139,134 +139,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ant-design/pro-card@npm:1.20.22":
-  version: 1.20.22
-  resolution: "@ant-design/pro-card@npm:1.20.22"
-  dependencies:
-    "@ant-design/icons": ^4.2.1
-    "@ant-design/pro-utils": 1.45.3
-    "@babel/runtime": ^7.18.0
-    antd: "^4.20.0 "
-    classnames: ^2.2.6
-    omit.js: ^2.0.2
-    rc-util: ^5.4.0
-  peerDependencies:
-    react: ">=16.9.0"
-  checksum: bf82c04ccf60027159550cf1ebf9f79c92a844ccae40e32fadc3941d8fdb207ebebfd2e0cd9166d986191d5a8beecdc40264d5e019ec5283a9314d7f65a69f77
-  languageName: node
-  linkType: hard
-
-"@ant-design/pro-field@npm:1.36.7":
-  version: 1.36.7
-  resolution: "@ant-design/pro-field@npm:1.36.7"
-  dependencies:
-    "@ant-design/icons": ^4.2.1
-    "@ant-design/pro-provider": 1.10.0
-    "@ant-design/pro-utils": 1.45.3
-    "@babel/runtime": ^7.18.0
-    "@chenshuai2144/sketch-color": ^1.0.8
-    antd: "^4.20.0 "
-    classnames: ^2.2.6
-    lodash.omit: ^4.5.0
-    lodash.tonumber: ^4.0.3
-    moment: ^2.27.0
-    omit.js: ^2.0.2
-    rc-util: ^5.4.0
-    swr: ^1.2.0
-  peerDependencies:
-    react: ">=16.9.0"
-  checksum: 618a7776b4cd8ebe9994e4d7c13955e333a6c03d877d25a626efc96f9ec637d8881f861cb02f7a0ea4eb57306b2bd4b7de916acaf42dccf3523ebb66dc130f9d
-  languageName: node
-  linkType: hard
-
-"@ant-design/pro-form@npm:1.74.7, @ant-design/pro-form@npm:^1.52.9":
-  version: 1.74.7
-  resolution: "@ant-design/pro-form@npm:1.74.7"
-  dependencies:
-    "@ant-design/icons": ^4.2.1
-    "@ant-design/pro-field": 1.36.7
-    "@ant-design/pro-provider": 1.10.0
-    "@ant-design/pro-utils": 1.45.3
-    "@babel/runtime": ^7.18.0
-    "@umijs/use-params": ^1.0.9
-    antd: "^4.20.0 "
-    classnames: ^2.2.6
-    lodash.merge: ^4.6.2
-    omit.js: ^2.0.2
-    rc-resize-observer: ^1.1.0
-    rc-util: ^5.0.6
-    use-json-comparison: ^1.0.5
-    use-media-antd-query: ^1.1.0
-  peerDependencies:
-    rc-field-form: ^1.22.0
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 51fabe89de7eea035ee0a8e602f95b2956d560894e035084d96832b6e5334b4bb801c3a491af8275f1924465570f82ebb86b6513e5093a1734a53ecd5be625c7
-  languageName: node
-  linkType: hard
-
-"@ant-design/pro-provider@npm:1.10.0":
-  version: 1.10.0
-  resolution: "@ant-design/pro-provider@npm:1.10.0"
-  dependencies:
-    "@babel/runtime": ^7.18.0
-    antd: "^4.20.0 "
-    rc-util: ^5.0.1
-    swr: ^1.2.0
-  peerDependencies:
-    react: ">=16.9.0"
-  checksum: 53494b4ce2bf406bde87ba3b4801864bfe53982c9d1ea283397a24b9a9b1a93fd902d00041ef766a6f0707008cff39a32f4617a08f3a92f43c7b9afdc313073b
-  languageName: node
-  linkType: hard
-
-"@ant-design/pro-table@npm:^2.62.7":
-  version: 2.80.8
-  resolution: "@ant-design/pro-table@npm:2.80.8"
-  dependencies:
-    "@ant-design/icons": ^4.1.0
-    "@ant-design/pro-card": 1.20.22
-    "@ant-design/pro-field": 1.36.7
-    "@ant-design/pro-form": 1.74.7
-    "@ant-design/pro-provider": 1.10.0
-    "@ant-design/pro-utils": 1.45.3
-    "@babel/runtime": ^7.18.0
-    antd: "^4.20.0 "
-    classnames: ^2.2.6
-    moment: ^2.24.0
-    omit.js: ^2.0.2
-    rc-util: ^5.0.1
-    react-sortable-hoc: ^2.0.0
-    unstated-next: ^1.1.0
-    use-json-comparison: ^1.0.5
-    use-media-antd-query: ^1.1.0
-  peerDependencies:
-    rc-field-form: ^1.22.0
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 70a958b75f82ce095f1460b6f899f9cbd215d13f2d0946e28cc37e522642aa44c1a9803b008bb9cddaa78ffe4330ce556f77961e0992675d628afecaa7649462
-  languageName: node
-  linkType: hard
-
-"@ant-design/pro-utils@npm:1.45.3":
-  version: 1.45.3
-  resolution: "@ant-design/pro-utils@npm:1.45.3"
-  dependencies:
-    "@ant-design/icons": ^4.3.0
-    "@ant-design/pro-provider": 1.10.0
-    "@babel/runtime": ^7.18.0
-    antd: "^4.20.0 "
-    classnames: ^2.2.6
-    moment: ^2.27.0
-    rc-util: ^5.0.6
-    react-sortable-hoc: ^2.0.0
-    swr: ^1.2.0
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 26010495194316dd72109879610ba23145bc6aef7d309b4e4c07c9c90351fe6c0712a7d4407b11b8a1f89f000505cdfb674c0aca3c50328f69f9b6932878a0a7
-  languageName: node
-  linkType: hard
-
 "@ant-design/react-slick@npm:~1.0.2":
   version: 1.0.2
   resolution: "@ant-design/react-slick@npm:1.0.2"
@@ -300,25 +172,25 @@ __metadata:
   linkType: hard
 
 "@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.16.0, @babel/core@npm:^7.19.6":
-  version: 7.23.6
-  resolution: "@babel/core@npm:7.23.6"
+  version: 7.23.7
+  resolution: "@babel/core@npm:7.23.7"
   dependencies:
     "@ampproject/remapping": ^2.2.0
     "@babel/code-frame": ^7.23.5
     "@babel/generator": ^7.23.6
     "@babel/helper-compilation-targets": ^7.23.6
     "@babel/helper-module-transforms": ^7.23.3
-    "@babel/helpers": ^7.23.6
+    "@babel/helpers": ^7.23.7
     "@babel/parser": ^7.23.6
     "@babel/template": ^7.22.15
-    "@babel/traverse": ^7.23.6
+    "@babel/traverse": ^7.23.7
     "@babel/types": ^7.23.6
     convert-source-map: ^2.0.0
     debug: ^4.1.0
     gensync: ^1.0.0-beta.2
     json5: ^2.2.3
     semver: ^6.3.1
-  checksum: 4bddd1b80394a64b2ee33eeb216e8a2a49ad3d74f0ca9ba678c84a37f4502b2540662d72530d78228a2a349fda837fa852eea5cd3ae28465d1188acc6055868e
+  checksum: 32d5bf73372a47429afaae9adb0af39e47bcea6a831c4b5dcbb4791380cda6949cb8cb1a2fea8b60bb1ebe189209c80e333903df1fa8e9dcb04798c0ce5bf59e
   languageName: node
   linkType: hard
 
@@ -379,9 +251,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.21.0, @babel/helper-create-class-features-plugin@npm:^7.22.15, @babel/helper-create-class-features-plugin@npm:^7.23.6":
-  version: 7.23.6
-  resolution: "@babel/helper-create-class-features-plugin@npm:7.23.6"
+"@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.21.0, @babel/helper-create-class-features-plugin@npm:^7.22.15, @babel/helper-create-class-features-plugin@npm:^7.23.6, @babel/helper-create-class-features-plugin@npm:^7.23.7":
+  version: 7.23.7
+  resolution: "@babel/helper-create-class-features-plugin@npm:7.23.7"
   dependencies:
     "@babel/helper-annotate-as-pure": ^7.22.5
     "@babel/helper-environment-visitor": ^7.22.20
@@ -394,7 +266,7 @@ __metadata:
     semver: ^6.3.1
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 356b71b9f4a3a95917432bf6a452f475a292d394d9310e9c8b23c8edb564bee91e40d4290b8aa8779d2987a7c39ae717b2d76edc7c952078b8952df1a20259e3
+  checksum: 33e60714b856c3816a7965d4c76278cc8f430644a2dfc4eeafad2f7167c4fbd2becdb74cbfeb04b02efd6bbd07176ef53c6683262b588e65d378438e9c55c26b
   languageName: node
   linkType: hard
 
@@ -461,7 +333,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.22.15, @babel/helper-module-imports@npm:^7.22.5":
+"@babel/helper-module-imports@npm:^7.22.15":
   version: 7.22.15
   resolution: "@babel/helper-module-imports@npm:7.22.15"
   dependencies:
@@ -586,14 +458,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helpers@npm:^7.23.6":
-  version: 7.23.6
-  resolution: "@babel/helpers@npm:7.23.6"
+"@babel/helpers@npm:^7.23.7":
+  version: 7.23.7
+  resolution: "@babel/helpers@npm:7.23.7"
   dependencies:
     "@babel/template": ^7.22.15
-    "@babel/traverse": ^7.23.6
+    "@babel/traverse": ^7.23.7
     "@babel/types": ^7.23.6
-  checksum: c5ba62497e1d717161d107c4b3de727565c68b6b9f50f59d6298e613afeca8895799b227c256e06d362e565aec34e26fb5c675b9c3d25055c52b945a21c21e21
+  checksum: 4f3bdf35fb54ff79107c6020ba1e36a38213a15b05ca0fa06c553b65f566e185fba6339fb3344be04593ebc244ed0bbb0c6087e73effe0d053a30bcd2db3a013
   languageName: node
   linkType: hard
 
@@ -641,15 +513,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.23.3"
+"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.23.7":
+  version: 7.23.7
+  resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.23.7"
   dependencies:
     "@babel/helper-environment-visitor": ^7.22.20
     "@babel/helper-plugin-utils": ^7.22.5
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 4690123f0ef7c11d6bf1a9579e4f463ce363563b75ec3f6ca66cf68687e39d8d747a82c833847653962f79da367eca895d9095c60d8ebb224a1d4277003acc11
+  checksum: f88e400b548202a6f8c5dfd25bc4949a13ea1ccb64a170d7dea4deaa655a0fcb001d3fd61c35e1ad9c09a3d5f0d43f783400425471fe6d660ccaf33dabea9aba
   languageName: node
   linkType: hard
 
@@ -666,18 +538,15 @@ __metadata:
   linkType: hard
 
 "@babel/plugin-proposal-decorators@npm:^7.16.4":
-  version: 7.23.6
-  resolution: "@babel/plugin-proposal-decorators@npm:7.23.6"
+  version: 7.23.7
+  resolution: "@babel/plugin-proposal-decorators@npm:7.23.7"
   dependencies:
-    "@babel/helper-create-class-features-plugin": ^7.23.6
+    "@babel/helper-create-class-features-plugin": ^7.23.7
     "@babel/helper-plugin-utils": ^7.22.5
-    "@babel/helper-replace-supers": ^7.22.20
-    "@babel/helper-skip-transparent-expression-wrappers": ^7.22.5
-    "@babel/helper-split-export-declaration": ^7.22.6
     "@babel/plugin-syntax-decorators": ^7.23.3
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 9d69891e0c37c73a8fd5deafbf42bd82e727f96a779cf1e5e194d97f856e04e79d2d39081c48ffcea596e6ff95024016479d728772e692999ab5af74d4106f27
+  checksum: 53c3d3af451ea75fa48cb26811dce8a9cdcc51ff4bd48fa037482a6527e0c3eec1737541ab0f7e7d5c210cbe81badda15cf043b21049e036ef376deabf176c06
   languageName: node
   linkType: hard
 
@@ -885,7 +754,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-jsx@npm:^7.22.5, @babel/plugin-syntax-jsx@npm:^7.23.3, @babel/plugin-syntax-jsx@npm:^7.7.2":
+"@babel/plugin-syntax-jsx@npm:^7.23.3, @babel/plugin-syntax-jsx@npm:^7.7.2":
   version: 7.23.3
   resolution: "@babel/plugin-syntax-jsx@npm:7.23.3"
   dependencies:
@@ -1018,9 +887,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-async-generator-functions@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-async-generator-functions@npm:7.23.4"
+"@babel/plugin-transform-async-generator-functions@npm:^7.23.7":
+  version: 7.23.7
+  resolution: "@babel/plugin-transform-async-generator-functions@npm:7.23.7"
   dependencies:
     "@babel/helper-environment-visitor": ^7.22.20
     "@babel/helper-plugin-utils": ^7.22.5
@@ -1028,7 +897,7 @@ __metadata:
     "@babel/plugin-syntax-async-generators": ^7.8.4
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: e2fc132c9033711d55209f4781e1fc73f0f4da5e0ca80a2da73dec805166b73c92a6e83571a8994cd2c893a28302e24107e90856202b24781bab734f800102bb
+  checksum: b1f66b23423933c27336b1161ac92efef46683321caea97e2255a666f992979376f47a5559f64188d3831fa66a4b24c2a7a40838cc0e9737e90eebe20e8e6372
   languageName: node
   linkType: hard
 
@@ -1580,18 +1449,18 @@ __metadata:
   linkType: hard
 
 "@babel/plugin-transform-runtime@npm:^7.16.4":
-  version: 7.23.6
-  resolution: "@babel/plugin-transform-runtime@npm:7.23.6"
+  version: 7.23.7
+  resolution: "@babel/plugin-transform-runtime@npm:7.23.7"
   dependencies:
     "@babel/helper-module-imports": ^7.22.15
     "@babel/helper-plugin-utils": ^7.22.5
-    babel-plugin-polyfill-corejs2: ^0.4.6
-    babel-plugin-polyfill-corejs3: ^0.8.5
-    babel-plugin-polyfill-regenerator: ^0.5.3
+    babel-plugin-polyfill-corejs2: ^0.4.7
+    babel-plugin-polyfill-corejs3: ^0.8.7
+    babel-plugin-polyfill-regenerator: ^0.5.4
     semver: ^6.3.1
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: d87da909e40d31e984ca5487ba36fa229449b773bc0f3fbf1d3c5ccac788ad3aef7481f1d4a3384c1813ee4f958af52b449089d96c0d5625868c028dd630d683
+  checksum: b3cc760afbfdddac5fec3ba3a3916a448d152ada213dcb3ffe54115eaa09db1249f1661b7f271d79c8e6b03ebd5315c049800287cde372900f2557a6e2fe3333
   languageName: node
   linkType: hard
 
@@ -1713,8 +1582,8 @@ __metadata:
   linkType: hard
 
 "@babel/preset-env@npm:^7.16.4, @babel/preset-env@npm:^7.19.4, @babel/preset-env@npm:^7.20.2":
-  version: 7.23.6
-  resolution: "@babel/preset-env@npm:7.23.6"
+  version: 7.23.7
+  resolution: "@babel/preset-env@npm:7.23.7"
   dependencies:
     "@babel/compat-data": ^7.23.5
     "@babel/helper-compilation-targets": ^7.23.6
@@ -1722,7 +1591,7 @@ __metadata:
     "@babel/helper-validator-option": ^7.23.5
     "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": ^7.23.3
     "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": ^7.23.3
-    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": ^7.23.3
+    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": ^7.23.7
     "@babel/plugin-proposal-private-property-in-object": 7.21.0-placeholder-for-preset-env.2
     "@babel/plugin-syntax-async-generators": ^7.8.4
     "@babel/plugin-syntax-class-properties": ^7.12.13
@@ -1743,7 +1612,7 @@ __metadata:
     "@babel/plugin-syntax-top-level-await": ^7.14.5
     "@babel/plugin-syntax-unicode-sets-regex": ^7.18.6
     "@babel/plugin-transform-arrow-functions": ^7.23.3
-    "@babel/plugin-transform-async-generator-functions": ^7.23.4
+    "@babel/plugin-transform-async-generator-functions": ^7.23.7
     "@babel/plugin-transform-async-to-generator": ^7.23.3
     "@babel/plugin-transform-block-scoped-functions": ^7.23.3
     "@babel/plugin-transform-block-scoping": ^7.23.4
@@ -1791,14 +1660,14 @@ __metadata:
     "@babel/plugin-transform-unicode-regex": ^7.23.3
     "@babel/plugin-transform-unicode-sets-regex": ^7.23.3
     "@babel/preset-modules": 0.1.6-no-external-plugins
-    babel-plugin-polyfill-corejs2: ^0.4.6
-    babel-plugin-polyfill-corejs3: ^0.8.5
-    babel-plugin-polyfill-regenerator: ^0.5.3
+    babel-plugin-polyfill-corejs2: ^0.4.7
+    babel-plugin-polyfill-corejs3: ^0.8.7
+    babel-plugin-polyfill-regenerator: ^0.5.4
     core-js-compat: ^3.31.0
     semver: ^6.3.1
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 130262f263c8a76915ff5361f78afa9e63b4ecbf3ade8e833dc7546db7b9552ab507835bdea0feb5e70861345ca128a31327fd2e187084a215fc9dd1cc0ed38e
+  checksum: 4b5eb466d9d4beca56c6fdaac92e99d440dc5650fdfd6ebf0d2a07380ebb43b4dc9aedf93bb30d1d1cd56d9e264d3728df348159e18dd138729b249261be11bf
   languageName: node
   linkType: hard
 
@@ -1853,12 +1722,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.10.4, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.16.7, @babel/runtime@npm:^7.18.0, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.2.0, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.5, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.23.4, @babel/runtime@npm:^7.6.3, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
-  version: 7.23.6
-  resolution: "@babel/runtime@npm:7.23.6"
+"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.10.4, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.16.7, @babel/runtime@npm:^7.18.0, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.2.0, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.5, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.23.6, @babel/runtime@npm:^7.6.3, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
+  version: 7.23.7
+  resolution: "@babel/runtime@npm:7.23.7"
   dependencies:
     regenerator-runtime: ^0.14.0
-  checksum: 1a8eaf3d3a103ef5227b60ca7ab5c589118c36ca65ef2d64e65380b32a98a3f3b5b3ef96660fa0471b079a18b619a8317f3e7f03ab2b930c45282a8b69ed9a16
+  checksum: eba85bd24d250abb5ae19b16cffc15a54d3894d8228ace40fa4c0e2f1938f28b38ad3e3430ebff9a1ef511eeb8c527e36044ac19076d6deafa52cef35d8624b9
   languageName: node
   linkType: hard
 
@@ -1873,9 +1742,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:^7.23.6, @babel/traverse@npm:^7.4.5":
-  version: 7.23.6
-  resolution: "@babel/traverse@npm:7.23.6"
+"@babel/traverse@npm:^7.23.7":
+  version: 7.23.7
+  resolution: "@babel/traverse@npm:7.23.7"
   dependencies:
     "@babel/code-frame": ^7.23.5
     "@babel/generator": ^7.23.6
@@ -1887,7 +1756,7 @@ __metadata:
     "@babel/types": ^7.23.6
     debug: ^4.3.1
     globals: ^11.1.0
-  checksum: 48f2eac0e86b6cb60dab13a5ea6a26ba45c450262fccdffc334c01089e75935f7546be195e260e97f6e43cea419862eda095018531a2718fef8189153d479f88
+  checksum: d4a7afb922361f710efc97b1e25ec343fab8b2a4ddc81ca84f9a153f22d4482112cba8f263774be8d297918b6c4767c7a98988ab4e53ac73686c986711dd002e
   languageName: node
   linkType: hard
 
@@ -1916,177 +1785,159 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@chenshuai2144/sketch-color@npm:^1.0.8":
-  version: 1.0.9
-  resolution: "@chenshuai2144/sketch-color@npm:1.0.9"
+"@codemirror/autocomplete@npm:^6.0.0, @codemirror/autocomplete@npm:^6.11.1":
+  version: 6.11.1
+  resolution: "@codemirror/autocomplete@npm:6.11.1"
   dependencies:
-    reactcss: ^1.2.3
-    tinycolor2: ^1.4.2
+    "@codemirror/language": ^6.0.0
+    "@codemirror/state": ^6.0.0
+    "@codemirror/view": ^6.17.0
+    "@lezer/common": ^1.0.0
   peerDependencies:
-    react: ">=16.12.0"
-  checksum: 7337f9a24abc7630f2b839b1cce875ff07061b8b568d0d72c9528db9dc3c0ec7db78242b20180b419c60ecb2766533487d7cd77000f0e24dc7d049f8bc86db50
+    "@codemirror/language": ^6.0.0
+    "@codemirror/state": ^6.0.0
+    "@codemirror/view": ^6.0.0
+    "@lezer/common": ^1.0.0
+  checksum: 69cb77d51dbc4c76a990fb8e562075d6fa11b2aef00fce33d2a98dd701f6a89050b1b464ae8ee1e2cbe1a4210522b1a3c2260cdf5c933a062093acaf98a5eedc
   languageName: node
   linkType: hard
 
-"@codemirror/autocomplete@npm:^0.20.0, @codemirror/autocomplete@npm:^0.20.3":
-  version: 0.20.3
-  resolution: "@codemirror/autocomplete@npm:0.20.3"
+"@codemirror/commands@npm:^6.3.2":
+  version: 6.3.3
+  resolution: "@codemirror/commands@npm:6.3.3"
   dependencies:
-    "@codemirror/language": ^0.20.0
-    "@codemirror/state": ^0.20.0
-    "@codemirror/view": ^0.20.0
-    "@lezer/common": ^0.16.0
-  checksum: 7dfc6b98f343382845b4bf074a7a449fbdd4d204309f4a492209395ac560c92aa6cd24824735606263de1efc25ea6a67c2cd5a46a56a4ff4d4351e1e3c953bf6
+    "@codemirror/language": ^6.0.0
+    "@codemirror/state": ^6.4.0
+    "@codemirror/view": ^6.0.0
+    "@lezer/common": ^1.1.0
+  checksum: 7d23aecc973823969434b839aefa9a98bb47212d2ce0e6869ae903adbb5233aad22a760788fb7bb6eb45b00b01a4932fb93ad43bacdcbc0215e7500cf54b17bb
   languageName: node
   linkType: hard
 
-"@codemirror/basic-setup@npm:^0.20.0":
-  version: 0.20.0
-  resolution: "@codemirror/basic-setup@npm:0.20.0"
-  dependencies:
-    "@codemirror/autocomplete": ^0.20.0
-    "@codemirror/commands": ^0.20.0
-    "@codemirror/language": ^0.20.0
-    "@codemirror/lint": ^0.20.0
-    "@codemirror/search": ^0.20.0
-    "@codemirror/state": ^0.20.0
-    "@codemirror/view": ^0.20.0
-  checksum: bb17178b9e6a3c05edb1678535e8303da60b77a55a5d509fffbdd91b85b351a5b4f135bf6d7bd2cd1210efc688d0c440791a7688a703c83cf1d3438be0718d95
-  languageName: node
-  linkType: hard
-
-"@codemirror/commands@npm:^0.20.0":
-  version: 0.20.0
-  resolution: "@codemirror/commands@npm:0.20.0"
-  dependencies:
-    "@codemirror/language": ^0.20.0
-    "@codemirror/state": ^0.20.0
-    "@codemirror/view": ^0.20.0
-    "@lezer/common": ^0.16.0
-  checksum: 4538de7200f9ac4c8482fd99bee8d49ae983ca2be3b81d5f1f3e3cf7d7821f64f3ddf396213dd56b2fd9bd46f6d72467846dad0e4c42a3b9c8ba8243522e0bc6
-  languageName: node
-  linkType: hard
-
-"@codemirror/lang-css@npm:0.20, @codemirror/lang-css@npm:^0.20.0":
-  version: 0.20.0
-  resolution: "@codemirror/lang-css@npm:0.20.0"
+"@codemirror/lang-css@npm:^6.0.0, @codemirror/lang-css@npm:^6.2.1":
+  version: 6.2.1
+  resolution: "@codemirror/lang-css@npm:6.2.1"
   dependencies:
-    "@codemirror/autocomplete": ^0.20.0
-    "@codemirror/language": ^0.20.0
-    "@codemirror/state": ^0.20.0
-    "@lezer/css": ^0.16.0
-  checksum: a922c76fe51a13d5af6e019fe36cd344d9d855aeb8a6ee8b01d2c757d015b3615907984c99dfa1866a81ef1fac465251b959a08e4d15d79b8ed2a4a35f3eed5e
+    "@codemirror/autocomplete": ^6.0.0
+    "@codemirror/language": ^6.0.0
+    "@codemirror/state": ^6.0.0
+    "@lezer/common": ^1.0.2
+    "@lezer/css": ^1.0.0
+  checksum: 5a8457ee8a4310030a969f2d3128429f549c4dc9b7907ee8888b42119c80b65af99093801432efdf659b8ec36a147d2a947bc1ecbbf69a759395214e3f4834a8
   languageName: node
   linkType: hard
 
-"@codemirror/lang-html@npm:0.20":
-  version: 0.20.0
-  resolution: "@codemirror/lang-html@npm:0.20.0"
+"@codemirror/lang-html@npm:^6.4.7":
+  version: 6.4.7
+  resolution: "@codemirror/lang-html@npm:6.4.7"
   dependencies:
-    "@codemirror/autocomplete": ^0.20.0
-    "@codemirror/lang-css": ^0.20.0
-    "@codemirror/lang-javascript": ^0.20.0
-    "@codemirror/language": ^0.20.0
-    "@codemirror/state": ^0.20.0
-    "@lezer/common": ^0.16.0
-    "@lezer/html": ^0.16.0
-  checksum: ee02952c0409da4040e6f8aa522e69b2f5f7b0c16c704360cf0c7b2ac6010e8aed2a643f6096ccc877f8c3f784d1b5ce7136c92300dc63ddf5e971793aad0944
+    "@codemirror/autocomplete": ^6.0.0
+    "@codemirror/lang-css": ^6.0.0
+    "@codemirror/lang-javascript": ^6.0.0
+    "@codemirror/language": ^6.4.0
+    "@codemirror/state": ^6.0.0
+    "@codemirror/view": ^6.17.0
+    "@lezer/common": ^1.0.0
+    "@lezer/css": ^1.1.0
+    "@lezer/html": ^1.3.0
+  checksum: 26e3d9243bd8dea2c0f7769315f8ed4b77969497f52c545c84ff32f155489b3a29e476aa78ffc11e910a0f927bbebce4d28f4e17e1994f6c9d8df6bdd3c33ef1
   languageName: node
   linkType: hard
 
-"@codemirror/lang-javascript@npm:^0.20.0, @codemirror/lang-javascript@npm:^0.20.1":
-  version: 0.20.1
-  resolution: "@codemirror/lang-javascript@npm:0.20.1"
+"@codemirror/lang-javascript@npm:^6.0.0, @codemirror/lang-javascript@npm:^6.2.1":
+  version: 6.2.1
+  resolution: "@codemirror/lang-javascript@npm:6.2.1"
   dependencies:
-    "@codemirror/autocomplete": ^0.20.0
-    "@codemirror/language": ^0.20.0
-    "@codemirror/lint": ^0.20.0
-    "@codemirror/state": ^0.20.0
-    "@codemirror/view": ^0.20.0
-    "@lezer/common": ^0.16.1
-    "@lezer/javascript": ^0.16.0
-  checksum: 169ed50ec2ef0171cc0719c48a971371a12b2a36180d42151f592bae3611f13331f422f67dd0cbbfc6938a5840fe8a96c90278de5606234896345391f15eff46
+    "@codemirror/autocomplete": ^6.0.0
+    "@codemirror/language": ^6.6.0
+    "@codemirror/lint": ^6.0.0
+    "@codemirror/state": ^6.0.0
+    "@codemirror/view": ^6.17.0
+    "@lezer/common": ^1.0.0
+    "@lezer/javascript": ^1.0.0
+  checksum: 3df38c4cced06195283a9a2a9365aaa7c8c1b157852b331bc3a118403f774bbba57d2a392de52f5e28d2b344a323bc0146bcf7c8ef8be2473f167d815e4a37cd
   languageName: node
   linkType: hard
 
-"@codemirror/lang-json@npm:0.20.0":
-  version: 0.20.0
-  resolution: "@codemirror/lang-json@npm:0.20.0"
+"@codemirror/lang-json@npm:^6.0.1":
+  version: 6.0.1
+  resolution: "@codemirror/lang-json@npm:6.0.1"
   dependencies:
-    "@codemirror/language": ^0.20.0
-    "@lezer/json": ^0.16.0
-  checksum: 20bbf0a480852fd11b0904561d4c7fe151f7a5cbe49b36516890ce7d729b4fd51e7c0443fb27463fd25e69e5ed693c3ce5e346ba60669a012f313cf8b06db13e
+    "@codemirror/language": ^6.0.0
+    "@lezer/json": ^1.0.0
+  checksum: e9e87d50ff7b81bd56a6ab50740b1dd54e9a93f1be585e1d59d0642e2148842ea1528ac7b7221eb4ddc7fe84bbc28065144cc3ab86f6e06c6aeb2d4b4e62acf1
   languageName: node
   linkType: hard
 
-"@codemirror/lang-sql@npm:^0.20.4":
-  version: 0.20.4
-  resolution: "@codemirror/lang-sql@npm:0.20.4"
+"@codemirror/lang-sql@npm:^6.5.4":
+  version: 6.5.5
+  resolution: "@codemirror/lang-sql@npm:6.5.5"
   dependencies:
-    "@codemirror/autocomplete": ^0.20.0
-    "@codemirror/language": ^0.20.0
-    "@codemirror/state": ^0.20.0
-    "@lezer/highlight": ^0.16.0
-    "@lezer/lr": ^0.16.0
-  checksum: 15b29e017357a8e62a34cc1e7fe498db385e98ed257d313b05c026f4d0b5c0bf41d03e0a185612bda0d28ce33720f98539f2ca7baaa85df4866a9819959b0303
+    "@codemirror/autocomplete": ^6.0.0
+    "@codemirror/language": ^6.0.0
+    "@codemirror/state": ^6.0.0
+    "@lezer/common": ^1.2.0
+    "@lezer/highlight": ^1.0.0
+    "@lezer/lr": ^1.0.0
+  checksum: 404003ae73b986bd7a00f6924db78b7ffb28fdc38d689fdc11416aaafe2d5c6dc37cc18972530f82e940acb61e18ac74a1cf7712beef448c145344ff93970dc3
   languageName: node
   linkType: hard
 
-"@codemirror/language@npm:^0.20.0":
-  version: 0.20.2
-  resolution: "@codemirror/language@npm:0.20.2"
+"@codemirror/language@npm:^6.0.0, @codemirror/language@npm:^6.4.0, @codemirror/language@npm:^6.6.0":
+  version: 6.10.0
+  resolution: "@codemirror/language@npm:6.10.0"
   dependencies:
-    "@codemirror/state": ^0.20.0
-    "@codemirror/view": ^0.20.0
-    "@lezer/common": ^0.16.0
-    "@lezer/highlight": ^0.16.0
-    "@lezer/lr": ^0.16.0
+    "@codemirror/state": ^6.0.0
+    "@codemirror/view": ^6.23.0
+    "@lezer/common": ^1.1.0
+    "@lezer/highlight": ^1.0.0
+    "@lezer/lr": ^1.0.0
     style-mod: ^4.0.0
-  checksum: 144d360e3172a5f72641da327e303ef6a8ef3f60923d942adeb10710d524f1b85e0bfcdebc288fba8619b007b7a790f8a0ffbc20b4f54fe5c8bf24755481ad2f
+  checksum: 3bfd9968f5a34ce22434489a5b226db5f3bc454a1ae7c4381587ff4270ac6af61b10f93df560cb73e9a77cc13d4843722a7a7b94dbed02a3ab1971dd329b9e81
   languageName: node
   linkType: hard
 
-"@codemirror/lint@npm:^0.20.0":
-  version: 0.20.3
-  resolution: "@codemirror/lint@npm:0.20.3"
+"@codemirror/lint@npm:^6.0.0":
+  version: 6.4.2
+  resolution: "@codemirror/lint@npm:6.4.2"
   dependencies:
-    "@codemirror/state": ^0.20.0
-    "@codemirror/view": ^0.20.2
+    "@codemirror/state": ^6.0.0
+    "@codemirror/view": ^6.0.0
     crelt: ^1.0.5
-  checksum: df3023ebff7c2c5f763bd5a8810c9967f2bc4ac367e4cbfdccd9e4584ff9a1e06400dad60677e956d30e7fef3a0fc22b35d1bd44a8e369db2dfa8a899ab419f1
+  checksum: 5e699960c1b28dbaa584fe091a3201978907bf4b9e52810fb15d3ceaf310e38053435e0b594da0985266ae812039a5cd6c36023284a6f8568664bdca04db137f
   languageName: node
   linkType: hard
 
-"@codemirror/search@npm:^0.20.0":
-  version: 0.20.1
-  resolution: "@codemirror/search@npm:0.20.1"
+"@codemirror/search@npm:^6.5.5":
+  version: 6.5.5
+  resolution: "@codemirror/search@npm:6.5.5"
   dependencies:
-    "@codemirror/state": ^0.20.0
-    "@codemirror/view": ^0.20.0
+    "@codemirror/state": ^6.0.0
+    "@codemirror/view": ^6.0.0
     crelt: ^1.0.5
-  checksum: eb324d7967183652bc4c636f1b3c7f5bc7266a0d36d1138f03f2aa05585ee17c45666fe4d0e9b8d6e55b39f9338d06b76a333048b5e6ff523400cabad8fbd19f
+  checksum: 825196ef63273494ba9a6153b01eda385edb65e77a1e49980dd3a28d4a692af1e9575e03e4b6c84f6fa2afe72217113ff4c50f58b20d13fe0d277cda5dd7dc81
   languageName: node
   linkType: hard
 
-"@codemirror/state@npm:^0.20.0":
-  version: 0.20.1
-  resolution: "@codemirror/state@npm:0.20.1"
-  checksum: 9ad924314d2b88eecfdf7aac6da89e9c92154ab2fb2afb8b4de1581bdc24fcafbd3cdf1c435d592042cf4c044815c2306265e39cb22f8041e76f0f7121d7ebd5
+"@codemirror/state@npm:^6.0.0, @codemirror/state@npm:^6.4.0":
+  version: 6.4.0
+  resolution: "@codemirror/state@npm:6.4.0"
+  checksum: c5236fe5786f1b85d17273a5c17fa8aeb063658c1404ab18caeb6e7591663ec96b65d453ab8162f75839c3801b04cd55ba4bc48f44cb61ebfeeee383f89553c7
   languageName: node
   linkType: hard
 
-"@codemirror/view@npm:^0.20.0, @codemirror/view@npm:^0.20.2":
-  version: 0.20.7
-  resolution: "@codemirror/view@npm:0.20.7"
+"@codemirror/view@npm:^6.0.0, @codemirror/view@npm:^6.17.0, @codemirror/view@npm:^6.23.0":
+  version: 6.23.0
+  resolution: "@codemirror/view@npm:6.23.0"
   dependencies:
-    "@codemirror/state": ^0.20.0
-    style-mod: ^4.0.0
+    "@codemirror/state": ^6.4.0
+    style-mod: ^4.1.0
     w3c-keyname: ^2.2.4
-  checksum: 51799e4e53d0ec0c2cee28e4462abef5542b7dee2551b0fe1c69c1fe3622033243130c04c2b7bc6080561d74950188814660b1bc8eebdb4ce2ea173a9e48f11a
+  checksum: 6e5f2314a3da2c724dc6a525654d949d3f2fcf7009f4d85f980d52ddc885c8969717e903ca1d9132afbe7c524af5d19bff8285fd394106282a965ae83aa47db4
   languageName: node
   linkType: hard
 
-"@ctrl/tinycolor@npm:^3.4.0, @ctrl/tinycolor@npm:^3.6.0, @ctrl/tinycolor@npm:^3.6.1":
+"@ctrl/tinycolor@npm:^3.4.0, @ctrl/tinycolor@npm:^3.6.1":
   version: 3.6.1
   resolution: "@ctrl/tinycolor@npm:3.6.1"
   checksum: cefec6fcaaa3eb8ddf193f981e097dccf63b97b93b1e861cb18c645654824c831a568f444996e15ee509f255658ed82fba11c5365494a6e25b9b12ac454099e0
@@ -2168,7 +2019,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/is-prop-valid@npm:^1.1.0":
+"@emotion/is-prop-valid@npm:1.2.1":
   version: 1.2.1
   resolution: "@emotion/is-prop-valid@npm:1.2.1"
   dependencies:
@@ -2184,20 +2035,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/stylis@npm:^0.8.4":
-  version: 0.8.5
-  resolution: "@emotion/stylis@npm:0.8.5"
-  checksum: 67ff5958449b2374b329fb96e83cb9025775ffe1e79153b499537c6c8b2eb64b77f32d7b5d004d646973662356ceb646afd9269001b97c54439fceea3203ce65
+"@emotion/unitless@npm:0.8.0":
+  version: 0.8.0
+  resolution: "@emotion/unitless@npm:0.8.0"
+  checksum: 176141117ed23c0eb6e53a054a69c63e17ae532ec4210907a20b2208f91771821835f1c63dd2ec63e30e22fcc984026d7f933773ee6526dd038e0850919fae7a
   languageName: node
   linkType: hard
 
-"@emotion/unitless@npm:^0.7.4, @emotion/unitless@npm:^0.7.5":
+"@emotion/unitless@npm:^0.7.5":
   version: 0.7.5
   resolution: "@emotion/unitless@npm:0.7.5"
   checksum: f976e5345b53fae9414a7b2e7a949aa6b52f8bdbcc84458b1ddc0729e77ba1d1dfdff9960e0da60183877873d3a631fa24d9695dd714ed94bcd3ba5196586a6b
   languageName: node
   linkType: hard
 
+"@esbuild/aix-ppc64@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/aix-ppc64@npm:0.19.11"
+  conditions: os=aix & cpu=ppc64
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-arm64@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/android-arm64@npm:0.18.20"
@@ -2205,6 +2063,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/android-arm64@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/android-arm64@npm:0.19.11"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-arm@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/android-arm@npm:0.18.20"
@@ -2212,6 +2077,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/android-arm@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/android-arm@npm:0.19.11"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-x64@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/android-x64@npm:0.18.20"
@@ -2219,6 +2091,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/android-x64@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/android-x64@npm:0.19.11"
+  conditions: os=android & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/darwin-arm64@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/darwin-arm64@npm:0.18.20"
@@ -2226,6 +2105,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/darwin-arm64@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/darwin-arm64@npm:0.19.11"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/darwin-x64@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/darwin-x64@npm:0.18.20"
@@ -2233,6 +2119,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/darwin-x64@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/darwin-x64@npm:0.19.11"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/freebsd-arm64@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/freebsd-arm64@npm:0.18.20"
@@ -2240,6 +2133,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/freebsd-arm64@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/freebsd-arm64@npm:0.19.11"
+  conditions: os=freebsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/freebsd-x64@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/freebsd-x64@npm:0.18.20"
@@ -2247,6 +2147,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/freebsd-x64@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/freebsd-x64@npm:0.19.11"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-arm64@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/linux-arm64@npm:0.18.20"
@@ -2254,6 +2161,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-arm64@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/linux-arm64@npm:0.19.11"
+  conditions: os=linux & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-arm@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/linux-arm@npm:0.18.20"
@@ -2261,6 +2175,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-arm@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/linux-arm@npm:0.19.11"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-ia32@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/linux-ia32@npm:0.18.20"
@@ -2268,6 +2189,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-ia32@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/linux-ia32@npm:0.19.11"
+  conditions: os=linux & cpu=ia32
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-loong64@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/linux-loong64@npm:0.18.20"
@@ -2275,6 +2203,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-loong64@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/linux-loong64@npm:0.19.11"
+  conditions: os=linux & cpu=loong64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-mips64el@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/linux-mips64el@npm:0.18.20"
@@ -2282,6 +2217,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-mips64el@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/linux-mips64el@npm:0.19.11"
+  conditions: os=linux & cpu=mips64el
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-ppc64@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/linux-ppc64@npm:0.18.20"
@@ -2289,6 +2231,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-ppc64@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/linux-ppc64@npm:0.19.11"
+  conditions: os=linux & cpu=ppc64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-riscv64@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/linux-riscv64@npm:0.18.20"
@@ -2296,6 +2245,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-riscv64@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/linux-riscv64@npm:0.19.11"
+  conditions: os=linux & cpu=riscv64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-s390x@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/linux-s390x@npm:0.18.20"
@@ -2303,6 +2259,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-s390x@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/linux-s390x@npm:0.19.11"
+  conditions: os=linux & cpu=s390x
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-x64@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/linux-x64@npm:0.18.20"
@@ -2310,6 +2273,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-x64@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/linux-x64@npm:0.19.11"
+  conditions: os=linux & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/netbsd-x64@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/netbsd-x64@npm:0.18.20"
@@ -2317,6 +2287,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/netbsd-x64@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/netbsd-x64@npm:0.19.11"
+  conditions: os=netbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/openbsd-x64@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/openbsd-x64@npm:0.18.20"
@@ -2324,6 +2301,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/openbsd-x64@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/openbsd-x64@npm:0.19.11"
+  conditions: os=openbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/sunos-x64@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/sunos-x64@npm:0.18.20"
@@ -2331,6 +2315,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/sunos-x64@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/sunos-x64@npm:0.19.11"
+  conditions: os=sunos & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/win32-arm64@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/win32-arm64@npm:0.18.20"
@@ -2338,6 +2329,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/win32-arm64@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/win32-arm64@npm:0.19.11"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/win32-ia32@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/win32-ia32@npm:0.18.20"
@@ -2345,6 +2343,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/win32-ia32@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/win32-ia32@npm:0.19.11"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
 "@esbuild/win32-x64@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/win32-x64@npm:0.18.20"
@@ -2352,6 +2357,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/win32-x64@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/win32-x64@npm:0.19.11"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@eslint-community/eslint-utils@npm:^4.2.0":
   version: 4.4.0
   resolution: "@eslint-community/eslint-utils@npm:4.4.0"
@@ -2387,10 +2399,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint/js@npm:8.55.0":
-  version: 8.55.0
-  resolution: "@eslint/js@npm:8.55.0"
-  checksum: fa33ef619f0646ed15649b0c2e313e4d9ccee8425884bdbfc78020d6b6b64c0c42fa9d83061d0e6158e1d4274f03f0f9008786540e2efab8fcdc48082259908c
+"@eslint/js@npm:8.56.0":
+  version: 8.56.0
+  resolution: "@eslint/js@npm:8.56.0"
+  checksum: 5804130574ef810207bdf321c265437814e7a26f4e6fac9b496de3206afd52f533e09ec002a3be06cd9adcc9da63e727f1883938e663c4e4751c007d5b58e539
   languageName: node
   linkType: hard
 
@@ -2598,12 +2610,12 @@ __metadata:
   linkType: hard
 
 "@gilbarbara/helpers@npm:^0.9.0":
-  version: 0.9.0
-  resolution: "@gilbarbara/helpers@npm:0.9.0"
+  version: 0.9.1
+  resolution: "@gilbarbara/helpers@npm:0.9.1"
   dependencies:
     "@gilbarbara/types": ^0.2.2
     is-lite: ^1.2.0
-  checksum: d525f5b6386f4132dff175bd7f9b24f9171d4940ce29e68cbc9ad15d79d4a7514b2035b80df47c3d384ac478d09e5089fdb6eca6ea4355ec9b4a8d34c953d03b
+  checksum: a4eace1d6b0a0342a8e148d26fb1e59ec13d44af181475686b51133723e953dbefe055fbb5265bf7421c5b8ef9b1ae9fd0bb1ec6cb4d042b756d0a35af8d4797
   languageName: node
   linkType: hard
 
@@ -2964,68 +2976,71 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@lezer/common@npm:^0.16.0, @lezer/common@npm:^0.16.1":
-  version: 0.16.1
-  resolution: "@lezer/common@npm:0.16.1"
-  checksum: ee27598a8c2a4e5bcba285cf091b7c1aee36e5a5e8352b63ce65520e7279f6305e1272d8adede150fc4aee0073c1e3e93fb11271d538815db72bdff341c4be65
+"@lezer/common@npm:^1.0.0, @lezer/common@npm:^1.0.2, @lezer/common@npm:^1.1.0, @lezer/common@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "@lezer/common@npm:1.2.0"
+  checksum: dc6f53f831515f2a25ee93a2c5c032ced527013b4edf148568941dde7d01b5a17ccf7fec11bf3d1c19bf0944a8aae4acebef08b9ba76275da0a64d0533cb5266
   languageName: node
   linkType: hard
 
-"@lezer/css@npm:^0.16.0":
-  version: 0.16.0
-  resolution: "@lezer/css@npm:0.16.0"
+"@lezer/css@npm:^1.0.0, @lezer/css@npm:^1.1.0":
+  version: 1.1.6
+  resolution: "@lezer/css@npm:1.1.6"
   dependencies:
-    "@lezer/highlight": ^0.16.0
-    "@lezer/lr": ^0.16.0
-  checksum: c88151f2d0f3cbc00e21a9f2f18960298ffe566a321996fa0e2b676b804535c1b20053bc8f81f8510c8523169a00cbbabe808775b5e980c371b64912d19c6dc9
+    "@lezer/common": ^1.2.0
+    "@lezer/highlight": ^1.0.0
+    "@lezer/lr": ^1.0.0
+  checksum: b02860b38fce44b394b5b9d999753843115878542f31048a59d9540f81eb472d25e8c4e19a0c7fb719712959efb8c276d42b171601179c0a1bc4816950c77c79
   languageName: node
   linkType: hard
 
-"@lezer/highlight@npm:^0.16.0":
-  version: 0.16.0
-  resolution: "@lezer/highlight@npm:0.16.0"
+"@lezer/highlight@npm:^1.0.0, @lezer/highlight@npm:^1.1.3":
+  version: 1.2.0
+  resolution: "@lezer/highlight@npm:1.2.0"
   dependencies:
-    "@lezer/common": ^0.16.0
-  checksum: f1be44044096c6e58d7f48b8eb50eb3c6b561d72b1537e239e50df3c7686ea46fce3c068cb95ef4a79bb1eb939caf700ff4a3dcddb39dd0ae6bce46aeccbdaf3
+    "@lezer/common": ^1.0.0
+  checksum: 5b9dfe741f95db13f6124cb9556a43011cb8041ecf490be98d44a86b04d926a66e912bcd3a766f6a3d79e064410f1a2f60ab240b50b645a12c56987bf4870086
   languageName: node
   linkType: hard
 
-"@lezer/html@npm:^0.16.0":
-  version: 0.16.1
-  resolution: "@lezer/html@npm:0.16.1"
+"@lezer/html@npm:^1.3.0":
+  version: 1.3.8
+  resolution: "@lezer/html@npm:1.3.8"
   dependencies:
-    "@lezer/highlight": ^0.16.0
-    "@lezer/lr": ^0.16.0
-  checksum: a94ad6561e5effc21eaee24e141e566ed247c18a52ee5ab9e7a100bc9317ad068219934adae8054be318fc89652ead28de989b94e322c5d71799a2687eb5db3d
+    "@lezer/common": ^1.2.0
+    "@lezer/highlight": ^1.0.0
+    "@lezer/lr": ^1.0.0
+  checksum: 06bce804487435ea6ccb39595176bb65d68691f082b0b68fb7d22d90d4de9798a8202f16e9aefe22865db15257a37f6fca93275d660715eea98f7578579e7135
   languageName: node
   linkType: hard
 
-"@lezer/javascript@npm:^0.16.0":
-  version: 0.16.0
-  resolution: "@lezer/javascript@npm:0.16.0"
+"@lezer/javascript@npm:^1.0.0":
+  version: 1.4.12
+  resolution: "@lezer/javascript@npm:1.4.12"
   dependencies:
-    "@lezer/highlight": ^0.16.0
-    "@lezer/lr": ^0.16.0
-  checksum: 164c1dcadc47610e588fee1e1c1f1cb478a296373ab3654e04b41dd6feb375f0abe0df6b5d339e70aaa444df573873cf2302d21abe3f372cbaa0bebfd1cf7f5a
+    "@lezer/highlight": ^1.1.3
+    "@lezer/lr": ^1.3.0
+  checksum: 431e01107e5b1dde5294bd57baf4d76ecea570697faefb0c54f2bbbe2b4757fa12c5552306d54f8a1db79349d4fa0f79408a1e8cea4ecddbe1731c37c9a8e09e
   languageName: node
   linkType: hard
 
-"@lezer/json@npm:^0.16.0":
-  version: 0.16.0
-  resolution: "@lezer/json@npm:0.16.0"
+"@lezer/json@npm:^1.0.0":
+  version: 1.0.2
+  resolution: "@lezer/json@npm:1.0.2"
   dependencies:
-    "@lezer/highlight": ^0.16.0
-    "@lezer/lr": ^0.16.0
-  checksum: 3fe14dcd8879c9318dc74e77c3543fff21e2f7b45b344b93e58e67eae48ea0c603c6b602129967d85a8ade1fa88b2c6abe43b3772b57829890fd91b111676f13
+    "@lezer/common": ^1.2.0
+    "@lezer/highlight": ^1.0.0
+    "@lezer/lr": ^1.0.0
+  checksum: f899d13765d95599c9199fc3404cb57969031dc40ce07de30f4e648979153966581f0bee02e2f8f70463b0a5322206a97c2fe8d5d14f218888c72a6dcedf90ef
   languageName: node
   linkType: hard
 
-"@lezer/lr@npm:^0.16.0":
-  version: 0.16.3
-  resolution: "@lezer/lr@npm:0.16.3"
+"@lezer/lr@npm:^1.0.0, @lezer/lr@npm:^1.3.0":
+  version: 1.3.14
+  resolution: "@lezer/lr@npm:1.3.14"
   dependencies:
-    "@lezer/common": ^0.16.0
-  checksum: ac6d494d1affa74d1490c52dbafa2009d43fc28165eb17e7389b1678b9783c4aa4030f5f0f825f174c6ddc983cbea671f37e0eac01bd1ce48eb23be497abd77b
+    "@lezer/common": ^1.0.0
+  checksum: 07be41edcb6c332a3567436d2c626131544181c4d680811baf23f6157db3dce4ebfef325cbd0b88dc8b128b83fbe6363c5dcf3e0a4ff369ddfae05d9f207daee
   languageName: node
   linkType: hard
 
@@ -3107,6 +3122,35 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@observablehq/inspector@npm:^3.2.2":
+  version: 3.2.4
+  resolution: "@observablehq/inspector@npm:3.2.4"
+  dependencies:
+    isoformat: ^0.2.0
+  checksum: 95b9f3e357aaad3f240a0b8e83e28ca5f803eb4480f743c3a30973668ee931bd908565026c6c1b0efa29a9c064b08053aad499ad3b86335cf927717b08c3d679
+  languageName: node
+  linkType: hard
+
+"@observablehq/runtime@npm:^4.8.2":
+  version: 4.28.0
+  resolution: "@observablehq/runtime@npm:4.28.0"
+  dependencies:
+    "@observablehq/inspector": ^3.2.2
+    "@observablehq/stdlib": ^3.4.1
+  checksum: a429d1a1a591355256a8acdb38dc4a8b0b48a76e987029170b95ed3ef7ccf39128d0f6f281371b569929a85c9a156e92b00ebb4f77ae0d272302d2469ebff8db
+  languageName: node
+  linkType: hard
+
+"@observablehq/stdlib@npm:^3.4.1":
+  version: 3.24.0
+  resolution: "@observablehq/stdlib@npm:3.24.0"
+  dependencies:
+    d3-dsv: ^2.0.0
+    d3-require: ^1.3.0
+  checksum: cd16865bc1936b91398a1d4c6f7f889122a7915beb36af286c1b59bc1d44fd37663f6396bb97e19877d15d9a6eead8ac9ea6f3ca38e33fbaff44cb8924c2c62e
+  languageName: node
+  linkType: hard
+
 "@pkgjs/parseargs@npm:^0.11.0":
   version: 0.11.0
   resolution: "@pkgjs/parseargs@npm:0.11.0"
@@ -3114,18 +3158,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rc-component/color-picker@npm:~1.4.1":
-  version: 1.4.1
-  resolution: "@rc-component/color-picker@npm:1.4.1"
+"@rc-component/color-picker@npm:~1.5.1":
+  version: 1.5.1
+  resolution: "@rc-component/color-picker@npm:1.5.1"
   dependencies:
-    "@babel/runtime": ^7.10.1
-    "@ctrl/tinycolor": ^3.6.0
+    "@babel/runtime": ^7.23.6
+    "@ctrl/tinycolor": ^3.6.1
     classnames: ^2.2.6
-    rc-util: ^5.30.0
+    rc-util: ^5.38.1
   peerDependencies:
     react: ">=16.9.0"
     react-dom: ">=16.9.0"
-  checksum: 7695dc182d5c88039b7c1a82acbd796111f5e90692641151555dc78b234ab67b7f2aedfab38a6874eb245f98a0b444c8b36c0c08885eb9de5eb6a096801c2225
+  checksum: b8997f4844e6dcd6b5e66a2ed2d17d0906642a155a0e8d6e276d1b9c0bb052d7336a3ca1dd990e9ed7e10345cb266eeb7e56c7030b6be0e0aca211b04e5876a1
   languageName: node
   linkType: hard
 
@@ -3279,9 +3323,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@redux-saga/core@npm:^1.2.3":
-  version: 1.2.3
-  resolution: "@redux-saga/core@npm:1.2.3"
+"@redux-saga/core@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "@redux-saga/core@npm:1.3.0"
   dependencies:
     "@babel/runtime": ^7.6.3
     "@redux-saga/deferred": ^1.2.1
@@ -3289,9 +3333,8 @@ __metadata:
     "@redux-saga/is": ^1.1.3
     "@redux-saga/symbols": ^1.1.3
     "@redux-saga/types": ^1.2.1
-    redux: ^4.0.4
     typescript-tuple: ^2.2.1
-  checksum: a18249aa4e771699f103c2e18952d5fc0f65124f88c1fe33f4551b658b5ef7fb2d827091fea3e339c91f324e5d9098f758282d92536e1701bd003812353dd004
+  checksum: b2ef695f506220ba4da581669ff6e5f2d30483afecf804497cc752097af93e8767915de4f1a56e23072935272b13a43b53fe44cae6a993ff586fff40d760ea2b
   languageName: node
   linkType: hard
 
@@ -3335,7 +3378,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rjsf/antd@npm:^5.10.0":
+"@rjsf/antd@npm:^5.15.1":
   version: 5.15.1
   resolution: "@rjsf/antd@npm:5.15.1"
   dependencies:
@@ -3354,7 +3397,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rjsf/core@npm:^5.10.0":
+"@rjsf/core@npm:^5.15.1":
   version: 5.15.1
   resolution: "@rjsf/core@npm:5.15.1"
   dependencies:
@@ -3370,7 +3413,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rjsf/utils@npm:^5.10.0":
+"@rjsf/utils@npm:^5.15.1":
   version: 5.15.1
   resolution: "@rjsf/utils@npm:5.15.1"
   dependencies:
@@ -3385,7 +3428,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rjsf/validator-ajv8@npm:^5.10.0":
+"@rjsf/validator-ajv8@npm:^5.15.1":
   version: 5.15.1
   resolution: "@rjsf/validator-ajv8@npm:5.15.1"
   dependencies:
@@ -3632,62 +3675,153 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rushstack/eslint-patch@npm:^1.1.0":
-  version: 1.6.0
-  resolution: "@rushstack/eslint-patch@npm:1.6.0"
-  checksum: 9fbc39e6070508139ac9ded5cc223780315a1e65ccb7612dd3dff07a0957fa9985a2b049bb5cae21d7eeed44ed315e2868b8755941500dc64ed9932c5760c80d
+"@rollup/rollup-android-arm-eabi@npm:4.9.4":
+  version: 4.9.4
+  resolution: "@rollup/rollup-android-arm-eabi@npm:4.9.4"
+  conditions: os=android & cpu=arm
   languageName: node
   linkType: hard
 
-"@sinclair/typebox@npm:^0.27.8":
-  version: 0.27.8
-  resolution: "@sinclair/typebox@npm:0.27.8"
-  checksum: 00bd7362a3439021aa1ea51b0e0d0a0e8ca1351a3d54c606b115fdcc49b51b16db6e5f43b4fe7a28c38688523e22a94d49dd31168868b655f0d4d50f032d07a1
+"@rollup/rollup-android-arm64@npm:4.9.4":
+  version: 4.9.4
+  resolution: "@rollup/rollup-android-arm64@npm:4.9.4"
+  conditions: os=android & cpu=arm64
   languageName: node
   linkType: hard
 
-"@sinonjs/commons@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "@sinonjs/commons@npm:3.0.0"
-  dependencies:
-    type-detect: 4.0.8
-  checksum: b4b5b73d4df4560fb8c0c7b38c7ad4aeabedd362f3373859d804c988c725889cde33550e4bcc7cd316a30f5152a2d1d43db71b6d0c38f5feef71fd8d016763f8
+"@rollup/rollup-darwin-arm64@npm:4.9.4":
+  version: 4.9.4
+  resolution: "@rollup/rollup-darwin-arm64@npm:4.9.4"
+  conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@sinonjs/fake-timers@npm:^10.0.2":
-  version: 10.3.0
-  resolution: "@sinonjs/fake-timers@npm:10.3.0"
-  dependencies:
-    "@sinonjs/commons": ^3.0.0
-  checksum: 614d30cb4d5201550c940945d44c9e0b6d64a888ff2cd5b357f95ad6721070d6b8839cd10e15b76bf5e14af0bcc1d8f9ec00d49a46318f1f669a4bec1d7f3148
+"@rollup/rollup-darwin-x64@npm:4.9.4":
+  version: 4.9.4
+  resolution: "@rollup/rollup-darwin-x64@npm:4.9.4"
+  conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@svgr/babel-plugin-add-jsx-attribute@npm:^6.5.1":
-  version: 6.5.1
-  resolution: "@svgr/babel-plugin-add-jsx-attribute@npm:6.5.1"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: cab83832830a57735329ed68f67c03b57ca21fa037b0134847b0c5c0ef4beca89956d7dacfbf7b2a10fd901e7009e877512086db2ee918b8c69aee7742ae32c0
+"@rollup/rollup-linux-arm-gnueabihf@npm:4.9.4":
+  version: 4.9.4
+  resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.9.4"
+  conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
 
-"@svgr/babel-plugin-remove-jsx-attribute@npm:*":
-  version: 8.0.0
-  resolution: "@svgr/babel-plugin-remove-jsx-attribute@npm:8.0.0"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: ff992893c6c4ac802713ba3a97c13be34e62e6d981c813af40daabcd676df68a72a61bd1e692bb1eda3587f1b1d700ea462222ae2153bb0f46886632d4f88d08
+"@rollup/rollup-linux-arm64-gnu@npm:4.9.4":
+  version: 4.9.4
+  resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.9.4"
+  conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@svgr/babel-plugin-remove-jsx-empty-expression@npm:*":
-  version: 8.0.0
-  resolution: "@svgr/babel-plugin-remove-jsx-empty-expression@npm:8.0.0"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 0fb691b63a21bac00da3aa2dccec50d0d5a5b347ff408d60803b84410d8af168f2656e4ba1ee1f24dab0ae4e4af77901f2928752bb0434c1f6788133ec599ec8
+"@rollup/rollup-linux-arm64-musl@npm:4.9.4":
+  version: 4.9.4
+  resolution: "@rollup/rollup-linux-arm64-musl@npm:4.9.4"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-riscv64-gnu@npm:4.9.4":
+  version: 4.9.4
+  resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.9.4"
+  conditions: os=linux & cpu=riscv64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-x64-gnu@npm:4.9.4":
+  version: 4.9.4
+  resolution: "@rollup/rollup-linux-x64-gnu@npm:4.9.4"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-x64-musl@npm:4.9.4":
+  version: 4.9.4
+  resolution: "@rollup/rollup-linux-x64-musl@npm:4.9.4"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-win32-arm64-msvc@npm:4.9.4":
+  version: 4.9.4
+  resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.9.4"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-win32-ia32-msvc@npm:4.9.4":
+  version: 4.9.4
+  resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.9.4"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-win32-x64-msvc@npm:4.9.4":
+  version: 4.9.4
+  resolution: "@rollup/rollup-win32-x64-msvc@npm:4.9.4"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@rushstack/eslint-patch@npm:^1.1.0":
+  version: 1.6.1
+  resolution: "@rushstack/eslint-patch@npm:1.6.1"
+  checksum: d0c0fcc430dae71d9d929e593844aeaec8d326b1d6c27f18059e22dad486d8df43d6f0206b2021a0df789baf514642355bd86eae7a42c457b7b2f48a29bb0f53
+  languageName: node
+  linkType: hard
+
+"@sinclair/typebox@npm:^0.27.8":
+  version: 0.27.8
+  resolution: "@sinclair/typebox@npm:0.27.8"
+  checksum: 00bd7362a3439021aa1ea51b0e0d0a0e8ca1351a3d54c606b115fdcc49b51b16db6e5f43b4fe7a28c38688523e22a94d49dd31168868b655f0d4d50f032d07a1
+  languageName: node
+  linkType: hard
+
+"@sinonjs/commons@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "@sinonjs/commons@npm:3.0.0"
+  dependencies:
+    type-detect: 4.0.8
+  checksum: b4b5b73d4df4560fb8c0c7b38c7ad4aeabedd362f3373859d804c988c725889cde33550e4bcc7cd316a30f5152a2d1d43db71b6d0c38f5feef71fd8d016763f8
+  languageName: node
+  linkType: hard
+
+"@sinonjs/fake-timers@npm:^10.0.2":
+  version: 10.3.0
+  resolution: "@sinonjs/fake-timers@npm:10.3.0"
+  dependencies:
+    "@sinonjs/commons": ^3.0.0
+  checksum: 614d30cb4d5201550c940945d44c9e0b6d64a888ff2cd5b357f95ad6721070d6b8839cd10e15b76bf5e14af0bcc1d8f9ec00d49a46318f1f669a4bec1d7f3148
+  languageName: node
+  linkType: hard
+
+"@svgr/babel-plugin-add-jsx-attribute@npm:^6.5.1":
+  version: 6.5.1
+  resolution: "@svgr/babel-plugin-add-jsx-attribute@npm:6.5.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: cab83832830a57735329ed68f67c03b57ca21fa037b0134847b0c5c0ef4beca89956d7dacfbf7b2a10fd901e7009e877512086db2ee918b8c69aee7742ae32c0
+  languageName: node
+  linkType: hard
+
+"@svgr/babel-plugin-remove-jsx-attribute@npm:*":
+  version: 8.0.0
+  resolution: "@svgr/babel-plugin-remove-jsx-attribute@npm:8.0.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: ff992893c6c4ac802713ba3a97c13be34e62e6d981c813af40daabcd676df68a72a61bd1e692bb1eda3587f1b1d700ea462222ae2153bb0f46886632d4f88d08
+  languageName: node
+  linkType: hard
+
+"@svgr/babel-plugin-remove-jsx-empty-expression@npm:*":
+  version: 8.0.0
+  resolution: "@svgr/babel-plugin-remove-jsx-empty-expression@npm:8.0.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 0fb691b63a21bac00da3aa2dccec50d0d5a5b347ff408d60803b84410d8af168f2656e4ba1ee1f24dab0ae4e4af77901f2928752bb0434c1f6788133ec599ec8
   languageName: node
   linkType: hard
 
@@ -3821,9 +3955,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/dom@npm:^8.0.0":
-  version: 8.20.1
-  resolution: "@testing-library/dom@npm:8.20.1"
+"@testing-library/dom@npm:^9.0.0":
+  version: 9.3.3
+  resolution: "@testing-library/dom@npm:9.3.3"
   dependencies:
     "@babel/code-frame": ^7.10.4
     "@babel/runtime": ^7.12.5
@@ -3833,7 +3967,7 @@ __metadata:
     dom-accessibility-api: ^0.5.9
     lz-string: ^1.5.0
     pretty-format: ^27.0.2
-  checksum: 06fc8dc67849aadb726cbbad0e7546afdf8923bd39acb64c576d706249bd7d0d05f08e08a31913fb621162e3b9c2bd0dce15964437f030f9fa4476326fdd3007
+  checksum: 34e0a564da7beb92aa9cc44a9080221e2412b1a132eb37be3d513fe6c58027674868deb9f86195756d98d15ba969a30fe00632a4e26e25df2a5a4f6ac0686e37
   languageName: node
   linkType: hard
 
@@ -3854,28 +3988,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/react@npm:^12.0.0":
-  version: 12.1.5
-  resolution: "@testing-library/react@npm:12.1.5"
+"@testing-library/react@npm:^14.1.2":
+  version: 14.1.2
+  resolution: "@testing-library/react@npm:14.1.2"
   dependencies:
     "@babel/runtime": ^7.12.5
-    "@testing-library/dom": ^8.0.0
-    "@types/react-dom": <18.0.0
+    "@testing-library/dom": ^9.0.0
+    "@types/react-dom": ^18.0.0
   peerDependencies:
-    react: <18.0.0
-    react-dom: <18.0.0
-  checksum: 4abd0490405e709a7df584a0db604e508a4612398bb1326e8fa32dd9393b15badc826dcf6d2f7525437886d507871f719f127b9860ed69ddd204d1fa834f576a
+    react: ^18.0.0
+    react-dom: ^18.0.0
+  checksum: 0269903e53412cf96fddb55c8a97a9987a89c3308d71fa1418fe61c47d275445e7044c5387f57cf39b8cda319a41623dbad2cce7a17016aed3a9e85185aac75a
   languageName: node
   linkType: hard
 
-"@testing-library/user-event@npm:^13.2.1":
-  version: 13.5.0
-  resolution: "@testing-library/user-event@npm:13.5.0"
-  dependencies:
-    "@babel/runtime": ^7.12.5
+"@testing-library/user-event@npm:^14.5.1":
+  version: 14.5.2
+  resolution: "@testing-library/user-event@npm:14.5.2"
   peerDependencies:
     "@testing-library/dom": ">=7.21.4"
-  checksum: 16319de685fbb7008f1ba667928f458b2d08196918002daca56996de80ef35e6d9de26e9e1ece7d00a004692b95a597cf9142fff0dc53f2f51606a776584f549
+  checksum: d76937dffcf0082fbf3bb89eb2b81a31bf5448048dd61c33928c5f10e33a58e035321d39145cefd469bb5a499c68a5b4086b22f1a44e3e7c7e817dc5f6782867
   languageName: node
   linkType: hard
 
@@ -3893,13 +4025,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/ali-oss@npm:^6.16.4":
-  version: 6.16.11
-  resolution: "@types/ali-oss@npm:6.16.11"
-  checksum: 1932d908edf7d71aef24de60792c4d4cbe3a31a692a785e6a85c13d866ddb3c397eff7875bc169177eef347a194492dc2cab5a127097248aac0f1367d52064da
-  languageName: node
-  linkType: hard
-
 "@types/aria-query@npm:^5.0.1":
   version: 5.0.4
   resolution: "@types/aria-query@npm:5.0.4"
@@ -3930,11 +4055,11 @@ __metadata:
   linkType: hard
 
 "@types/babel__generator@npm:*":
-  version: 7.6.7
-  resolution: "@types/babel__generator@npm:7.6.7"
+  version: 7.6.8
+  resolution: "@types/babel__generator@npm:7.6.8"
   dependencies:
     "@babel/types": ^7.0.0
-  checksum: 03e96ea327a5238f00c38394a05cc01619b9f5f3ea57371419a1c25cf21676a6d327daf802435819f8cb3b8fa10e938a94bcbaf79a38c132068c813a1807ff93
+  checksum: 5b332ea336a2efffbdeedb92b6781949b73498606ddd4205462f7d96dafd45ff3618770b41de04c4881e333dd84388bfb8afbdf6f2764cbd98be550d85c6bb48
   languageName: node
   linkType: hard
 
@@ -3949,11 +4074,11 @@ __metadata:
   linkType: hard
 
 "@types/babel__traverse@npm:*, @types/babel__traverse@npm:^7.0.6":
-  version: 7.20.4
-  resolution: "@types/babel__traverse@npm:7.20.4"
+  version: 7.20.5
+  resolution: "@types/babel__traverse@npm:7.20.5"
   dependencies:
     "@babel/types": ^7.20.7
-  checksum: f044ba80e00d07e46ee917c44f96cfc268fcf6d3871f7dfb8db8d3c6dab1508302f3e6bc508352a4a3ae627d2522e3fc500fa55907e0410a08e2e0902a8f3576
+  checksum: 608e0ab4fc31cd47011d98942e6241b34d461608c0c0e153377c5fd822c436c475f1ded76a56bfa76a1adf8d9266b727bbf9bfac90c4cb152c97f30dadc5b7e8
   languageName: node
   linkType: hard
 
@@ -3996,7 +4121,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/estree@npm:*, @types/estree@npm:^1.0.0":
+"@types/estree@npm:*, @types/estree@npm:1.0.5, @types/estree@npm:^1.0.0":
   version: 1.0.5
   resolution: "@types/estree@npm:1.0.5"
   checksum: dd8b5bed28e6213b7acd0fb665a84e693554d850b0df423ac8076cc3ad5823a6bc26b0251d080bdc545af83179ede51dd3f6fa78cad2c46ed1f29624ddf3e41a
@@ -4037,11 +4162,11 @@ __metadata:
   linkType: hard
 
 "@types/hast@npm:^2.0.0":
-  version: 2.3.8
-  resolution: "@types/hast@npm:2.3.8"
+  version: 2.3.9
+  resolution: "@types/hast@npm:2.3.9"
   dependencies:
     "@types/unist": ^2
-  checksum: 4c3b3efb7067d32a568a9bf5d2a7599f99ec08c2eaade3aaeb579b7a31bcdf8f6475f56c1ac5bc3f4e4e07b84a93a9b1cf1ef9a8b52b39e3deabea7989e5dd4b
+  checksum: 32a742021a973b1e23399f09a21325fda89bf55486068ef7c6364f5054b991cc8ab007f1134cc9d6c7030b6ed60633d70f7401dffb3dec8d10c997330d458a3f
   languageName: node
   linkType: hard
 
@@ -4183,18 +4308,18 @@ __metadata:
   linkType: hard
 
 "@types/node@npm:*":
-  version: 20.10.4
-  resolution: "@types/node@npm:20.10.4"
+  version: 20.10.6
+  resolution: "@types/node@npm:20.10.6"
   dependencies:
     undici-types: ~5.26.4
-  checksum: 054b296417e771ab524bea63cf3289559c6bdf290d45428f7cc68e9b00030ff7a0ece47b8c99a26b4f47a443919813bcf42beadff2f0bea7d8125fa541d92eb0
+  checksum: ada40e4ccbda3697dca88f8d13f4c996c493be6fbc15f5f5d3b91096d56bd700786a2c148a92a2b4c5d1f133379e63f754a786b3aebfc6a7d09fc7ea16dc017b
   languageName: node
   linkType: hard
 
 "@types/node@npm:^16.7.13":
-  version: 16.18.68
-  resolution: "@types/node@npm:16.18.68"
-  checksum: 094ae9ed80eed2af4bd34d551467e307f2ecb6efb0f8b872feebfb9da5ea4b446c5883c9abe2349f8ea2b78bdacd8726a946c27c2a246676c4c330e41ccb9284
+  version: 16.18.69
+  resolution: "@types/node@npm:16.18.69"
+  checksum: ac7076062e59169ac1907e9347d939ed5f79c6a3ec2a531fe7186caf2fcf8d66de9b87ad42d92c4dfa6cb44b1018ab89fef1e054a82af36deea04ba32a5a670a
   languageName: node
   linkType: hard
 
@@ -4246,12 +4371,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:17, @types/react-dom@npm:<18.0.0, @types/react-dom@npm:^17.0.9":
-  version: 17.0.25
-  resolution: "@types/react-dom@npm:17.0.25"
+"@types/react-dom@npm:^18.0.0, @types/react-dom@npm:^18.2.18":
+  version: 18.2.18
+  resolution: "@types/react-dom@npm:18.2.18"
   dependencies:
-    "@types/react": ^17
-  checksum: d1e582682478e0848c8d54ea3e89d02047bac6d916266b85ce63731b06987575919653ea7159d98fda47ade3362b8c4d5796831549564b83088e7aa9ce8b60ed
+    "@types/react": "*"
+  checksum: 8e3da404c980e2b2a76da3852f812ea6d8b9d0e7f5923fbaf3bfbbbfa1d59116ff91c129de8f68e9b7668a67ae34484fe9df74d5a7518cf8591ec07a0c4dad57
   languageName: node
   linkType: hard
 
@@ -4344,14 +4469,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:^17":
-  version: 17.0.73
-  resolution: "@types/react@npm:17.0.73"
+"@types/react@npm:^18":
+  version: 18.2.46
+  resolution: "@types/react@npm:18.2.46"
   dependencies:
     "@types/prop-types": "*"
     "@types/scheduler": "*"
     csstype: ^3.0.2
-  checksum: 08107645acdd734c8ddb4d26f1b43dfa0d75f7a8d268eaacb897337e103eaa620fe8c3c6972dab9860aaa47bbee1da587cf06b11bb4e655588e38485daf48a6c
+  checksum: cb0e4dc7f41988a059e1246a19ec377101f5b16097ec4bf7000ef3c431ec0c8c873f40e95075821f908db1f4e3352775f0f18cea53dcad14dce67c0f5110f2bd
   languageName: node
   linkType: hard
 
@@ -4416,7 +4541,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/styled-components@npm:^5.1.19":
+"@types/styled-components@npm:^5.1.34":
   version: 5.1.34
   resolution: "@types/styled-components@npm:5.1.34"
   dependencies:
@@ -4427,10 +4552,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/stylis@npm:4.2.0":
+  version: 4.2.0
+  resolution: "@types/stylis@npm:4.2.0"
+  checksum: 02a47584acd2fcb664f7d8270a69686c83752bdfb855f804015d33116a2b09c0b2ac535213a4a7b6d3a78b2915b22b4024cce067ae979beee0e4f8f5fdbc26a9
+  languageName: node
+  linkType: hard
+
 "@types/stylis@npm:^4.0.2":
-  version: 4.2.4
-  resolution: "@types/stylis@npm:4.2.4"
-  checksum: 0734b4136192f97f4c8792ea41f1293091dfda53434ede08281fa42689d31f16cd1ad0e058de88c11980c18aae29e62a87027b235b98ab0cb237641b6ec44bcb
+  version: 4.2.5
+  resolution: "@types/stylis@npm:4.2.5"
+  checksum: 24f91719db5569979e9e2f197e050ef82e1fd72474e8dc45bca38d48ee56481eae0f0d4a7ac172540d7774b45a2a78d901a4c6d07bba77a33dbccff464ea3edf
   languageName: node
   linkType: hard
 
@@ -4452,13 +4584,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/toposort@npm:^2.0.3":
-  version: 2.0.7
-  resolution: "@types/toposort@npm:2.0.7"
-  checksum: 7424224e96675419f4f2adb1c2f26d2cc94da9f0af7afb6c67e434a6929ff895fbffc6707ec75fe7169df2af73f9fd573c282ae7db991513909a4c5fc03be9f1
-  languageName: node
-  linkType: hard
-
 "@types/tough-cookie@npm:*":
   version: 4.0.5
   resolution: "@types/tough-cookie@npm:4.0.5"
@@ -4635,15 +4760,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@umijs/use-params@npm:^1.0.9":
-  version: 1.0.9
-  resolution: "@umijs/use-params@npm:1.0.9"
-  peerDependencies:
-    react: "*"
-  checksum: 7f72436440dff0e1911ee916340bd26c6c9a510bad4af536d3ec9a5a175d37255d42dbd1cb0dc996daf4d0c3b76e44816ac423ac73e6b3c1655b6b839fed175c
-  languageName: node
-  linkType: hard
-
 "@ungap/structured-clone@npm:^1.2.0":
   version: 1.2.0
   resolution: "@ungap/structured-clone@npm:1.2.0"
@@ -4827,11 +4943,11 @@ __metadata:
   linkType: hard
 
 "acorn@npm:^8.1.0, acorn@npm:^8.8.1, acorn@npm:^8.8.2, acorn@npm:^8.9.0":
-  version: 8.11.2
-  resolution: "acorn@npm:8.11.2"
+  version: 8.11.3
+  resolution: "acorn@npm:8.11.3"
   bin:
     acorn: bin/acorn
-  checksum: 818450408684da89423e3daae24e4dc9b68692db8ab49ea4569c7c5abb7a3f23669438bf129cc81dfdada95e1c9b944ee1bfca2c57a05a4dc73834a612fbf6a7
+  checksum: 76d8e7d559512566b43ab4aadc374f11f563f0a9e21626dd59cb2888444e9445923ae9f3699972767f18af61df89cd89f5eaaf772d1327b055b45cb829b4a88c
   languageName: node
   linkType: hard
 
@@ -4842,13 +4958,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"address@npm:^1.2.2":
-  version: 1.2.2
-  resolution: "address@npm:1.2.2"
-  checksum: ace439960c1e3564d8f523aff23a841904bf33a2a7c2e064f7f60a064194075758b9690e65bd9785692a4ef698a998c57eb74d145881a1cecab8ba658ddb1607
-  languageName: node
-  linkType: hard
-
 "adler-32@npm:~1.3.0":
   version: 1.3.1
   resolution: "adler-32@npm:1.3.1"
@@ -4874,15 +4983,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"agentkeepalive@npm:^3.4.1":
-  version: 3.5.2
-  resolution: "agentkeepalive@npm:3.5.2"
-  dependencies:
-    humanize-ms: ^1.2.1
-  checksum: 75ecb0f764cae3b3c2ba919e2230ac5ff82051e029d8c74d5044e29ddbec14106f696be0196ac83ed370c8dabd2e5ff67bd7601b24660f3d9ed62bd3cdf0f23a
-  languageName: node
-  linkType: hard
-
 "aggregate-error@npm:^3.0.0":
   version: 3.1.0
   resolution: "aggregate-error@npm:3.1.0"
@@ -4998,37 +5098,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ali-oss@npm:^6.17.1":
-  version: 6.18.1
-  resolution: "ali-oss@npm:6.18.1"
-  dependencies:
-    address: ^1.2.2
-    agentkeepalive: ^3.4.1
-    bowser: ^1.6.0
-    copy-to: ^2.0.1
-    dateformat: ^2.0.0
-    debug: ^4.3.4
-    destroy: ^1.0.4
-    end-or-error: ^1.0.1
-    get-ready: ^1.0.0
-    humanize-ms: ^1.2.0
-    is-type-of: ^1.4.0
-    js-base64: ^2.5.2
-    jstoxml: ^2.0.0
-    merge-descriptors: ^1.0.1
-    mime: ^2.4.5
-    platform: ^1.3.1
-    pump: ^3.0.0
-    sdk-base: ^2.0.1
-    stream-http: 2.8.2
-    stream-wormhole: ^1.0.4
-    urllib: 2.41.0
-    utility: ^1.18.0
-    xml2js: ^0.6.2
-  checksum: be188f80a6aed655362ca3f0b4d02554407f72e163df9f8414273e83fe6ce742d7e560f8f95c335e96ece9eeb67f0a70f637a1545226bb0349adb5076750e99a
-  languageName: node
-  linkType: hard
-
 "ansi-escapes@npm:^4.2.1, ansi-escapes@npm:^4.3.0":
   version: 4.3.2
   resolution: "ansi-escapes@npm:4.3.2"
@@ -5093,21 +5162,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"antd-img-crop@npm:^4.12.2":
-  version: 4.18.0
-  resolution: "antd-img-crop@npm:4.18.0"
-  dependencies:
-    compare-versions: 6.1.0
-    react-easy-crop: ^5.0.2
-    tslib: ^2.6.2
-  peerDependencies:
-    antd: ">=4.0.0"
-    react: ">=16.8.0"
-    react-dom: ">=16.8.0"
-  checksum: ed9a8149652c44de383980fd93fd88383c49c6aa1e18560e47a1f3e1c960771779c778cde6f433ce24622be6dd0263ab07908e44d83ab32d03edffd73f12e002
-  languageName: node
-  linkType: hard
-
 "antd-mobile-icons@npm:^0.3.0":
   version: 0.3.0
   resolution: "antd-mobile-icons@npm:0.3.0"
@@ -5123,8 +5177,8 @@ __metadata:
   linkType: hard
 
 "antd-mobile@npm:^5.28.0":
-  version: 5.33.1
-  resolution: "antd-mobile@npm:5.33.1"
+  version: 5.34.0
+  resolution: "antd-mobile@npm:5.34.0"
   dependencies:
     "@floating-ui/dom": ^1.4.2
     "@rc-component/mini-decimal": ^1.1.0
@@ -5137,7 +5191,7 @@ __metadata:
     dayjs: ^1.11.7
     lodash: ^4.17.21
     rc-field-form: ~1.27.4
-    rc-util: ^5.30.0
+    rc-util: ^5.38.1
     react-is: ^18.2.0
     runes2: ^1.1.2
     staged-components: ^1.1.3
@@ -5145,81 +5199,26 @@ __metadata:
     use-sync-external-store: ^1.2.0
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: e57c563460ea5cc89a7e4d0a97d78c53a5532d7f5100c3766054b3a51c229e324bf111c51448b3e7b5dc019cbd26d59f8e2f467e322cfbd53228286db3da92ac
-  languageName: node
-  linkType: hard
-
-"antd@npm:^4.20.0 ":
-  version: 4.24.15
-  resolution: "antd@npm:4.24.15"
-  dependencies:
-    "@ant-design/colors": ^6.0.0
-    "@ant-design/icons": ^4.8.1
-    "@ant-design/react-slick": ~1.0.2
-    "@babel/runtime": ^7.18.3
-    "@ctrl/tinycolor": ^3.6.1
-    classnames: ^2.2.6
-    copy-to-clipboard: ^3.2.0
-    lodash: ^4.17.21
-    moment: ^2.29.2
-    rc-cascader: ~3.7.3
-    rc-checkbox: ~3.0.1
-    rc-collapse: ~3.4.2
-    rc-dialog: ~9.0.2
-    rc-drawer: ~6.3.0
-    rc-dropdown: ~4.0.1
-    rc-field-form: ~1.38.2
-    rc-image: ~5.13.0
-    rc-input: ~0.1.4
-    rc-input-number: ~7.3.11
-    rc-mentions: ~1.13.1
-    rc-menu: ~9.8.4
-    rc-motion: ^2.9.0
-    rc-notification: ~4.6.1
-    rc-pagination: ~3.2.0
-    rc-picker: ~2.7.6
-    rc-progress: ~3.4.2
-    rc-rate: ~2.9.3
-    rc-resize-observer: ^1.3.1
-    rc-segmented: ~2.1.2
-    rc-select: ~14.1.18
-    rc-slider: ~10.0.1
-    rc-steps: ~5.0.0
-    rc-switch: ~3.2.2
-    rc-table: ~7.26.0
-    rc-tabs: ~12.5.10
-    rc-textarea: ~0.4.7
-    rc-tooltip: ~5.2.2
-    rc-tree: ~5.7.12
-    rc-tree-select: ~5.5.5
-    rc-trigger: ^5.3.4
-    rc-upload: ~4.3.5
-    rc-util: ^5.37.0
-    scroll-into-view-if-needed: ^2.2.25
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 44fb3657b99f870dd3852bb646bec0ab83da43ecebd017a22e437a25350f9441150c548d2ac83c623f99275ac7dc566e3fedc5e0404c2baf8343a87ca75f7016
+  checksum: b30dae9507a6e0ee2fb15dea9a1700a8a625668604d6656530ceaff178efb96d16674c86080456af51a3ac6ac9d6c78f1abc3d375e1bdf3ffb18464a91af527c
   languageName: node
   linkType: hard
 
-"antd@npm:^5.12.2":
-  version: 5.12.2
-  resolution: "antd@npm:5.12.2"
+"antd@npm:^5.12.5":
+  version: 5.12.8
+  resolution: "antd@npm:5.12.8"
   dependencies:
-    "@ant-design/colors": ^7.0.0
-    "@ant-design/cssinjs": ^1.18.1
+    "@ant-design/colors": ^7.0.2
+    "@ant-design/cssinjs": ^1.18.2
     "@ant-design/icons": ^5.2.6
     "@ant-design/react-slick": ~1.0.2
-    "@babel/runtime": ^7.23.4
     "@ctrl/tinycolor": ^3.6.1
-    "@rc-component/color-picker": ~1.4.1
+    "@rc-component/color-picker": ~1.5.1
     "@rc-component/mutate-observer": ^1.1.0
     "@rc-component/tour": ~1.11.1
     "@rc-component/trigger": ^1.18.2
-    classnames: ^2.3.2
+    classnames: ^2.5.1
     copy-to-clipboard: ^3.3.3
-    dayjs: ^1.11.1
+    dayjs: ^1.11.10
     qrcode.react: ^3.1.0
     rc-cascader: ~3.20.0
     rc-checkbox: ~3.1.0
@@ -5229,13 +5228,13 @@ __metadata:
     rc-dropdown: ~4.1.0
     rc-field-form: ~1.41.0
     rc-image: ~7.5.1
-    rc-input: ~1.3.6
+    rc-input: ~1.3.11
     rc-input-number: ~8.4.0
     rc-mentions: ~2.9.1
     rc-menu: ~9.12.4
     rc-motion: ^2.9.0
     rc-notification: ~5.3.0
-    rc-pagination: ~4.0.3
+    rc-pagination: ~4.0.4
     rc-picker: ~3.14.6
     rc-progress: ~3.5.1
     rc-rate: ~2.12.0
@@ -5245,24 +5244,24 @@ __metadata:
     rc-slider: ~10.5.0
     rc-steps: ~6.0.1
     rc-switch: ~4.1.0
-    rc-table: ~7.36.0
+    rc-table: ~7.36.1
     rc-tabs: ~12.14.1
     rc-textarea: ~1.5.3
-    rc-tooltip: ~6.1.2
+    rc-tooltip: ~6.1.3
     rc-tree: ~5.8.2
     rc-tree-select: ~5.15.0
-    rc-upload: ~4.3.5
+    rc-upload: ~4.5.2
     rc-util: ^5.38.1
     scroll-into-view-if-needed: ^3.1.0
     throttle-debounce: ^5.0.0
   peerDependencies:
     react: ">=16.9.0"
     react-dom: ">=16.9.0"
-  checksum: de4daf00999b27a9414378c9c2d484ab5e99a0e344735ea45f7f938ba15565c939416308097cfcff19d24a90a7e780de965fa42cfb6258ac34f2f2e3a13161d3
+  checksum: 827334d691daccfbb59519f998b5718c20cffd8a1c718557ca7f59425a3524515a655129040b6d8b53b9e0a3c0c58c391c752f0573ccc738c41028c3c39c06ac
   languageName: node
   linkType: hard
 
-"any-promise@npm:^1.0.0, any-promise@npm:^1.3.0":
+"any-promise@npm:^1.0.0":
   version: 1.3.0
   resolution: "any-promise@npm:1.3.0"
   checksum: 0ee8a9bdbe882c90464d75d1f55cf027f5458650c4bd1f0467e65aec38ccccda07ca5844969ee77ed46d04e7dded3eaceb027e8d32f385688523fe305fa7e1de
@@ -5522,23 +5521,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"axios@npm:*, axios@npm:^1.1.3":
-  version: 1.6.2
-  resolution: "axios@npm:1.6.2"
+"axios@npm:*, axios@npm:^1.1.3, axios@npm:^1.6.2":
+  version: 1.6.4
+  resolution: "axios@npm:1.6.4"
   dependencies:
-    follow-redirects: ^1.15.0
+    follow-redirects: ^1.15.4
     form-data: ^4.0.0
     proxy-from-env: ^1.1.0
-  checksum: 4a7429e2b784be0f2902ca2680964391eae7236faa3967715f30ea45464b98ae3f1c6f631303b13dfe721b17126b01f486c7644b9ef276bfc63112db9fd379f8
-  languageName: node
-  linkType: hard
-
-"axios@npm:^0.21.1":
-  version: 0.21.4
-  resolution: "axios@npm:0.21.4"
-  dependencies:
-    follow-redirects: ^1.14.0
-  checksum: 44245f24ac971e7458f3120c92f9d66d1fc695e8b97019139de5b0cc65d9b8104647db01e5f46917728edfc0cfd88eb30fc4c55e6053eef4ace76768ce95ff3c
+  checksum: 48d8af8488ac7402fae312437c0189b3b609a472fca2f7fc796129c804d98520589b6317096eba8509711d49f855a3f620b6a24ff23acd73ac26433d0383b8f9
   languageName: node
   linkType: hard
 
@@ -5614,7 +5604,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-polyfill-corejs2@npm:^0.4.6":
+"babel-plugin-polyfill-corejs2@npm:^0.4.7":
   version: 0.4.7
   resolution: "babel-plugin-polyfill-corejs2@npm:0.4.7"
   dependencies:
@@ -5627,7 +5617,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-polyfill-corejs3@npm:^0.8.5":
+"babel-plugin-polyfill-corejs3@npm:^0.8.7":
   version: 0.8.7
   resolution: "babel-plugin-polyfill-corejs3@npm:0.8.7"
   dependencies:
@@ -5639,7 +5629,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-polyfill-regenerator@npm:^0.5.3":
+"babel-plugin-polyfill-regenerator@npm:^0.5.4":
   version: 0.5.4
   resolution: "babel-plugin-polyfill-regenerator@npm:0.5.4"
   dependencies:
@@ -5650,21 +5640,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-styled-components@npm:>= 1.12.0":
-  version: 2.1.4
-  resolution: "babel-plugin-styled-components@npm:2.1.4"
-  dependencies:
-    "@babel/helper-annotate-as-pure": ^7.22.5
-    "@babel/helper-module-imports": ^7.22.5
-    "@babel/plugin-syntax-jsx": ^7.22.5
-    lodash: ^4.17.21
-    picomatch: ^2.3.1
-  peerDependencies:
-    styled-components: ">= 2"
-  checksum: d791aed68d975dae4f73055f86cd47afa99cb402b8113acdaf5678c8b6fba2cbc15543f2debe8ed09becb198aae8be2adfe268ad41f4bca917288e073a622bf8
-  languageName: node
-  linkType: hard
-
 "babel-plugin-transform-react-remove-prop-types@npm:^0.4.24":
   version: 0.4.24
   resolution: "babel-plugin-transform-react-remove-prop-types@npm:0.4.24"
@@ -5818,13 +5793,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bowser@npm:^1.6.0":
-  version: 1.9.4
-  resolution: "bowser@npm:1.9.4"
-  checksum: 127584ee1b8f0c27f410f652d409ea8bcb23d185a4269bcbe0229069720be9d83dc80a939e0fa33d8a9055141a0cf2fee5a02b2b5515c38841ddc899d67dec8d
-  languageName: node
-  linkType: hard
-
 "brace-expansion@npm:^1.1.7":
   version: 1.1.11
   resolution: "brace-expansion@npm:1.1.11"
@@ -6003,16 +5971,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"builtin-status-codes@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "builtin-status-codes@npm:3.0.0"
-  checksum: 1119429cf4b0d57bf76b248ad6f529167d343156ebbcc4d4e4ad600484f6bc63002595cbb61b67ad03ce55cd1d3c4711c03bbf198bf24653b8392420482f3773
-  languageName: node
-  linkType: hard
-
 "cacache@npm:^18.0.0":
-  version: 18.0.1
-  resolution: "cacache@npm:18.0.1"
+  version: 18.0.2
+  resolution: "cacache@npm:18.0.2"
   dependencies:
     "@npmcli/fs": ^3.1.0
     fs-minipass: ^3.0.0
@@ -6026,7 +5987,7 @@ __metadata:
     ssri: ^10.0.0
     tar: ^6.1.11
     unique-filename: ^3.0.0
-  checksum: 5a0b3b2ea451a0379814dc1d3c81af48c7c6db15cd8f7d72e028501ae0036a599a99bbac9687bfec307afb2760808d1c7708e9477c8c70d2b166e7d80b162a23
+  checksum: 0250df80e1ad0c828c956744850c5f742c24244e9deb5b7dc81bca90f8c10e011e132ecc58b64497cc1cad9a98968676147fb6575f4f94722f7619757b17a11b
   languageName: node
   linkType: hard
 
@@ -6087,9 +6048,9 @@ __metadata:
   linkType: hard
 
 "caniuse-lite@npm:^1.0.30001565":
-  version: 1.0.30001570
-  resolution: "caniuse-lite@npm:1.0.30001570"
-  checksum: 460be2c7a9b1c8a83b6aae4226661c276d9dada6c84209dee547699cf4b28030b9d1fc29ddd7626acee77412b6401993878ea0ef3eadbf3a63ded9034896ae20
+  version: 1.0.30001574
+  resolution: "caniuse-lite@npm:1.0.30001574"
+  checksum: 4064719755371a9716446ee79714ff5cee347861492d6325c2e3db00c37cb27f184742f53f2b6e4c15cc2e1a47fae32cc44c9b15e957a9290982bf4108933245
   languageName: node
   linkType: hard
 
@@ -6226,10 +6187,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"classnames@npm:2.x, classnames@npm:^2.2.1, classnames@npm:^2.2.3, classnames@npm:^2.2.5, classnames@npm:^2.2.6, classnames@npm:^2.3.1, classnames@npm:^2.3.2":
-  version: 2.3.2
-  resolution: "classnames@npm:2.3.2"
-  checksum: 2c62199789618d95545c872787137262e741f9db13328e216b093eea91c85ef2bfb152c1f9e63027204e2559a006a92eb74147d46c800a9f96297ae1d9f96f4e
+"classnames@npm:2.x, classnames@npm:^2.2.1, classnames@npm:^2.2.3, classnames@npm:^2.2.5, classnames@npm:^2.2.6, classnames@npm:^2.3.1, classnames@npm:^2.3.2, classnames@npm:^2.5.1":
+  version: 2.5.1
+  resolution: "classnames@npm:2.5.1"
+  checksum: da424a8a6f3a96a2e87d01a432ba19315503294ac7e025f9fece656db6b6a0f7b5003bb1fbb51cbb0d9624d964f1b9bb35a51c73af9b2434c7b292c42231c1e5
   languageName: node
   linkType: hard
 
@@ -6301,25 +6262,25 @@ __metadata:
   linkType: hard
 
 "clsx@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "clsx@npm:2.0.0"
-  checksum: a2cfb2351b254611acf92faa0daf15220f4cd648bdf96ce369d729813b85336993871a4bf6978ddea2b81b5a130478339c20d9d0b5c6fc287e5147f0c059276e
+  version: 2.1.0
+  resolution: "clsx@npm:2.1.0"
+  checksum: 43fefc29b6b49c9476fbce4f8b1cc75c27b67747738e598e6651dd40d63692135dc60b18fa1c5b78a2a9ba8ae6fd2055a068924b94e20b42039bd53b78b98e1d
   languageName: node
   linkType: hard
 
-"cnchar-types@npm:^3.2.4":
-  version: 3.2.4
-  resolution: "cnchar-types@npm:3.2.4"
-  checksum: 5a79f30632cbc34e94c1fa5a81efa535956a1d9ad2c6f0dcf4f5fdaa20cbe3983056769806b04a37ed6e9aa2e80f529eaa90436ebb6faac7c8341e4a9440bb4d
+"cnchar-types@npm:^3.2.5":
+  version: 3.2.5
+  resolution: "cnchar-types@npm:3.2.5"
+  checksum: fbbe186b03c20c50499d37027ae3fbeea695d4f2bd6144baf55a35e890f892ae59d17e1b6918c13addf5f134c8e28dba490a2ad2a2f79cf0eb542b0b3c3343cb
   languageName: node
   linkType: hard
 
 "cnchar@npm:^3.2.4":
-  version: 3.2.4
-  resolution: "cnchar@npm:3.2.4"
+  version: 3.2.5
+  resolution: "cnchar@npm:3.2.5"
   dependencies:
-    cnchar-types: ^3.2.4
-  checksum: 536502ce4e5e3087ce33658fe250350bf247f8a546b5bb7e67fe760ee122618a7cdc5d3019171d326b7123afc05ddc573f70adf949587375c70685e23a95c172
+    cnchar-types: ^3.2.5
+  checksum: b12317386642a04b41f791631d7af25cfaa9251572083b102c684a786ac280c61dedcfab31e870acaa1be4498580f1794725ff965c40e9e2fe1fcfde99ef6e1b
   languageName: node
   linkType: hard
 
@@ -6413,6 +6374,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"commander@npm:2, commander@npm:^2.20.0":
+  version: 2.20.3
+  resolution: "commander@npm:2.20.3"
+  checksum: ab8c07884e42c3a8dbc5dd9592c606176c7eb5c1ca5ff274bcf907039b2c41de3626f684ea75ccf4d361ba004bbaff1f577d5384c155f3871e456bdf27becf9e
+  languageName: node
+  linkType: hard
+
 "commander@npm:7, commander@npm:^7.2.0":
   version: 7.2.0
   resolution: "commander@npm:7.2.0"
@@ -6420,13 +6388,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"commander@npm:^2.20.0":
-  version: 2.20.3
-  resolution: "commander@npm:2.20.3"
-  checksum: ab8c07884e42c3a8dbc5dd9592c606176c7eb5c1ca5ff274bcf907039b2c41de3626f684ea75ccf4d361ba004bbaff1f577d5384c155f3871e456bdf27becf9e
-  languageName: node
-  linkType: hard
-
 "commander@npm:^4.0.0":
   version: 4.1.1
   resolution: "commander@npm:4.1.1"
@@ -6455,13 +6416,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"compare-versions@npm:6.1.0":
-  version: 6.1.0
-  resolution: "compare-versions@npm:6.1.0"
-  checksum: d4e2a45706a023d8d0b6680338b66b79e20bd02d1947f0ac6531dab634cbed89fa373b3f03d503c5e489761194258d6e1bae67a07f88b1efc61648454f2d47e7
-  languageName: node
-  linkType: hard
-
 "compute-gcd@npm:^1.2.1":
   version: 1.2.1
   resolution: "compute-gcd@npm:1.2.1"
@@ -6485,13 +6439,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"compute-scroll-into-view@npm:^1.0.20":
-  version: 1.0.20
-  resolution: "compute-scroll-into-view@npm:1.0.20"
-  checksum: f15fab29221953620735393ac1866541aab0d27d28078bedbba071a291ee9c8cc1a72bee302cf0bc06ed83c5e55afb74ebcbd634a63671ba33cf1fb1c51d3308
-  languageName: node
-  linkType: hard
-
 "compute-scroll-into-view@npm:^3.0.2":
   version: 3.1.0
   resolution: "compute-scroll-into-view@npm:3.1.0"
@@ -6539,13 +6486,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"content-type@npm:^1.0.2":
-  version: 1.0.5
-  resolution: "content-type@npm:1.0.5"
-  checksum: 566271e0a251642254cde0f845f9dd4f9856e52d988f4eb0d0dcffbb7a1f8ec98de7a5215fc628f3bce30fe2fb6fd2bc064b562d721658c59b544e2d34ea2766
-  languageName: node
-  linkType: hard
-
 "convert-source-map@npm:^2.0.0":
   version: 2.0.0
   resolution: "convert-source-map@npm:2.0.0"
@@ -6562,7 +6502,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"copy-to-clipboard@npm:^3.2.0, copy-to-clipboard@npm:^3.3.1, copy-to-clipboard@npm:^3.3.3":
+"copy-to-clipboard@npm:^3.3.1, copy-to-clipboard@npm:^3.3.3":
   version: 3.3.3
   resolution: "copy-to-clipboard@npm:3.3.3"
   dependencies:
@@ -6571,26 +6511,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"copy-to@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "copy-to@npm:2.0.1"
-  checksum: 05ea12875bdc96ae053a3b30148e9d992026035ff2bfcc0b615e8d49d1cf8fc3d1f40843f9a4b7b1b6d9118eeebcba31e621076d7de525828aa9c07d22a81dab
-  languageName: node
-  linkType: hard
-
 "core-js-compat@npm:^3.31.0, core-js-compat@npm:^3.33.1":
-  version: 3.34.0
-  resolution: "core-js-compat@npm:3.34.0"
+  version: 3.35.0
+  resolution: "core-js-compat@npm:3.35.0"
   dependencies:
     browserslist: ^4.22.2
-  checksum: 6281f7f57a72f254c06611ec088445e11cf84e0b4edfb5f43dece1a1ff8b0ed0e81ed0bc291024761cd90c39d0f007d8bc46548265139808081d311c7cbc9c81
+  checksum: 64c41ce6870aa9130b9d0cb8f00c05204094f46db7e345d520ec2e38f8b6e1d51e921d4974ceb880948f19c0a79e5639e55be0e56f88ea20e32e9a6274da7f82
   languageName: node
   linkType: hard
 
 "core-js@npm:^3.0.1, core-js@npm:^3.25.2":
-  version: 3.34.0
-  resolution: "core-js@npm:3.34.0"
-  checksum: 26b0d103716b33fc660ee8737da7bc9475fbc655f93bbf1360ab692966449d18f2fc393805095937283db9f919ca2aa5c88d86d16f2846217983ad7da707e31e
+  version: 3.35.0
+  resolution: "core-js@npm:3.35.0"
+  checksum: 25c224aca3df012b98f08f13ccbd8171ef5852acd33fd5e58e106d27f5f0c97de2fdbc520f0b4364d26253caf2deb3e5d265310f57d2a66ae6cc922850e649f0
   languageName: node
   linkType: hard
 
@@ -6601,7 +6534,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-util-is@npm:^1.0.2, core-util-is@npm:~1.0.0":
+"core-util-is@npm:~1.0.0":
   version: 1.0.3
   resolution: "core-util-is@npm:1.0.3"
   checksum: 9de8597363a8e9b9952491ebe18167e3b36e7707569eed0ebf14f8bba773611376466ae34575bca8cfe3c767890c859c74056084738f09d4e4a6f902b2ad7d99
@@ -6802,7 +6735,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-to-react-native@npm:^3.0.0":
+"css-to-react-native@npm:3.2.0":
   version: 3.2.0
   resolution: "css-to-react-native@npm:3.2.0"
   dependencies:
@@ -6823,7 +6756,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-tree@npm:^2.2.1":
+"css-tree@npm:^2.3.1":
   version: 2.3.1
   resolution: "css-tree@npm:2.3.1"
   dependencies:
@@ -6864,15 +6797,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"csso@npm:5.0.5":
-  version: 5.0.5
-  resolution: "csso@npm:5.0.5"
-  dependencies:
-    css-tree: ~2.2.0
-  checksum: 0ad858d36bf5012ed243e9ec69962a867509061986d2ee07cc040a4b26e4d062c00d4c07e5ba8d430706ceb02dd87edd30a52b5937fd45b1b6f2119c4993d59a
-  languageName: node
-  linkType: hard
-
 "csso@npm:^4.2.0":
   version: 4.2.0
   resolution: "csso@npm:4.2.0"
@@ -6882,6 +6806,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"csso@npm:^5.0.5":
+  version: 5.0.5
+  resolution: "csso@npm:5.0.5"
+  dependencies:
+    css-tree: ~2.2.0
+  checksum: 0ad858d36bf5012ed243e9ec69962a867509061986d2ee07cc040a4b26e4d062c00d4c07e5ba8d430706ceb02dd87edd30a52b5937fd45b1b6f2119c4993d59a
+  languageName: node
+  linkType: hard
+
 "cssom@npm:^0.4.1":
   version: 0.4.4
   resolution: "cssom@npm:0.4.4"
@@ -6919,7 +6852,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"csstype@npm:^3.0.2, csstype@npm:^3.1.2":
+"csstype@npm:^3.0.2, csstype@npm:^3.1.2, csstype@npm:^3.1.3":
   version: 3.1.3
   resolution: "csstype@npm:3.1.3"
   checksum: 8db785cc92d259102725b3c694ec0c823f5619a84741b5c7991b8ad135dfaa66093038a1cc63e03361a6cd28d122be48f2106ae72334e067dd619a51f49eddf7
@@ -6956,12 +6889,12 @@ __metadata:
   linkType: hard
 
 "cytoscape@npm:^3.23.0":
-  version: 3.28.0
-  resolution: "cytoscape@npm:3.28.0"
+  version: 3.28.1
+  resolution: "cytoscape@npm:3.28.1"
   dependencies:
     heap: ^0.2.6
     lodash: ^4.17.21
-  checksum: 7db2d05fd53b507356d321af300ea7c0fdc334ab1478a3f593aad94bb7d607aad10f7c2627c282156b8b1c56dca647420ccb5d78011282cdc2ee2a4487573b32
+  checksum: d9fcb14e909931ebead0fffaf230be7302156166372b7f0d446fea96bc5dfed2c36024842a8d80cd8817d6120125422beaee4a1e9ece4ba53a9addc880116afd
   languageName: node
   linkType: hard
 
@@ -7075,6 +7008,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"d3-dsv@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "d3-dsv@npm:2.0.0"
+  dependencies:
+    commander: 2
+    iconv-lite: 0.4
+    rw: 1
+  bin:
+    csv2json: bin/dsv2json
+    csv2tsv: bin/dsv2dsv
+    dsv2dsv: bin/dsv2dsv
+    dsv2json: bin/dsv2json
+    json2csv: bin/json2dsv
+    json2dsv: bin/json2dsv
+    json2tsv: bin/json2dsv
+    tsv2csv: bin/dsv2dsv
+    tsv2json: bin/dsv2json
+  checksum: 01b12d81e4ca3996f2e921388b1929c358a39711bf250f2c53dd0e452b80465ebe31ddb58a4064f160322dec7aaf2ceae1a249874af989404705fcfdf1e9b64d
+  languageName: node
+  linkType: hard
+
 "d3-ease@npm:1 - 3, d3-ease@npm:3":
   version: 3.0.1
   resolution: "d3-ease@npm:3.0.1"
@@ -7169,6 +7123,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"d3-require@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "d3-require@npm:1.3.0"
+  checksum: 126369f4cdbfa70fe68c207875f7c2dca4e9f656a1b55a89b41be99e0d833d7cb61857ee3d126076981bb86a93d386f1b016c633185eb1fc9d2b602ccc5a77b9
+  languageName: node
+  linkType: hard
+
 "d3-sankey@npm:^0.12.3":
   version: 0.12.3
   resolution: "d3-sankey@npm:0.12.3"
@@ -7375,14 +7336,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dateformat@npm:^2.0.0":
-  version: 2.2.0
-  resolution: "dateformat@npm:2.2.0"
-  checksum: 1a276434222757b99ce8ed352188db90ce6667389f32e7ff9565d8715531ff2213454b55fbe06d8fd97fb6f2be095656a95195c9cda9c0738d9aab92a9d59688
-  languageName: node
-  linkType: hard
-
-"dayjs@npm:1.x, dayjs@npm:^1.11.1, dayjs@npm:^1.11.7, dayjs@npm:^1.9.1":
+"dayjs@npm:1.x, dayjs@npm:^1.11.10, dayjs@npm:^1.11.7, dayjs@npm:^1.9.1":
   version: 1.11.10
   resolution: "dayjs@npm:1.11.10"
   checksum: a6b5a3813b8884f5cd557e2e6b7fa569f4c5d0c97aca9558e38534af4f2d60daafd3ff8c2000fed3435cfcec9e805bcebd99f90130c6d1c5ef524084ced588c4
@@ -7401,15 +7355,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:^2.6.9":
-  version: 2.6.9
-  resolution: "debug@npm:2.6.9"
-  dependencies:
-    ms: 2.0.0
-  checksum: d2f51589ca66df60bf36e1fa6e4386b318c3f1e06772280eea5b1ae9fd3d05e9c2b7fd8a7d862457d00853c75b00451aa2d7459b924629ee385287a650f58fe6
-  languageName: node
-  linkType: hard
-
 "debug@npm:^3.2.7":
   version: 3.2.7
   resolution: "debug@npm:3.2.7"
@@ -7508,15 +7453,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"default-user-agent@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "default-user-agent@npm:1.0.0"
-  dependencies:
-    os-name: ~1.0.3
-  checksum: b1ef07c8e7de846a66e1e120d7ba11969faa36c8db4af2317f9b64d30e7507d129e3f721c7cc3f531a1719c1ab463d830bf426fbcda87b11defe23689f4d2b60
-  languageName: node
-  linkType: hard
-
 "deferred-leveldown@npm:~0.2.0":
   version: 0.2.0
   resolution: "deferred-leveldown@npm:0.2.0"
@@ -7588,13 +7524,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"destroy@npm:^1.0.4":
-  version: 1.2.0
-  resolution: "destroy@npm:1.2.0"
-  checksum: 0acb300b7478a08b92d810ab229d5afe0d2f4399272045ab22affa0d99dbaf12637659411530a6fcd597a9bdac718fc94373a61a95b4651bbc7b83684a565e38
-  languageName: node
-  linkType: hard
-
 "detect-newline@npm:^3.0.0":
   version: 3.1.0
   resolution: "detect-newline@npm:3.1.0"
@@ -7627,13 +7556,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"digest-header@npm:^1.0.0":
-  version: 1.1.0
-  resolution: "digest-header@npm:1.1.0"
-  checksum: fadbdda75e1cc650e460c8fe2064f74c43cc005d0eab66cc390dd1ae2678cfb41f69f151323fbd3e059e28c941f1b9adc6ea4dbd9c918cb246f34a5eb8e103f0
-  languageName: node
-  linkType: hard
-
 "dir-glob@npm:^3.0.1":
   version: 3.0.1
   resolution: "dir-glob@npm:3.0.1"
@@ -7758,9 +7680,9 @@ __metadata:
   linkType: hard
 
 "dompurify@npm:^3.0.5":
-  version: 3.0.6
-  resolution: "dompurify@npm:3.0.6"
-  checksum: e5c6cdc5fe972a9d0859d939f1d86320de275be00bbef7bd5591c80b1e538935f6ce236624459a1b0c84ecd7c6a1e248684aa4637512659fccc0ce7c353828a6
+  version: 3.0.7
+  resolution: "dompurify@npm:3.0.7"
+  checksum: 4c1381d4c5d28a42ff3b09238e44fdd88078015ab7c451b532305f9c8c45d85cf8e4529767502ff3eac1b6127b5e39cc1506ba0ea1ec17b02cc1d8f73b71a1b1
   languageName: node
   linkType: hard
 
@@ -7853,13 +7775,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ee-first@npm:~1.1.1":
-  version: 1.1.1
-  resolution: "ee-first@npm:1.1.1"
-  checksum: 1b4cac778d64ce3b582a7e26b218afe07e207a0f9bfe13cc7395a6d307849cfe361e65033c3251e00c27dd060cab43014c2d6b2647676135e18b77d2d05b3f4f
-  languageName: node
-  linkType: hard
-
 "ejs@npm:^3.1.6":
   version: 3.1.9
   resolution: "ejs@npm:3.1.9"
@@ -7872,9 +7787,9 @@ __metadata:
   linkType: hard
 
 "electron-to-chromium@npm:^1.4.601":
-  version: 1.4.612
-  resolution: "electron-to-chromium@npm:1.4.612"
-  checksum: fbb044289dcea34246254520b05245549013c68c7cc25ce69604ebd496a59d3b41defd10be4a2fca2d5e6e46d92481736e3d1498093e28c96cbe86e48d19634b
+  version: 1.4.622
+  resolution: "electron-to-chromium@npm:1.4.622"
+  checksum: 38da56a5f723626880c1790555a15c26b40b1470b68298dceb246f3fdbfc635753d924a331cd9b27d21f8f2b4ae63a2bbf9aae58f248d214bd6d2520a8cda7bc
   languageName: node
   linkType: hard
 
@@ -7930,25 +7845,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"end-of-stream@npm:^1.1.0":
-  version: 1.4.4
-  resolution: "end-of-stream@npm:1.4.4"
-  dependencies:
-    once: ^1.4.0
-  checksum: 530a5a5a1e517e962854a31693dbb5c0b2fc40b46dad2a56a2deec656ca040631124f4795823acc68238147805f8b021abbe221f4afed5ef3c8e8efc2024908b
-  languageName: node
-  linkType: hard
-
-"end-or-error@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "end-or-error@npm:1.0.1"
-  checksum: 12d5aaa572e83fd567f999f133f02626f28481f6fc83fb5a9b6610a2cd48cdbbe36491483291bd366ae4073af3a9d6495ffde39ae417cb74b7bbf8d8bd76d7a6
-  languageName: node
-  linkType: hard
-
-"enhanced-resolve@npm:^2.2.2":
-  version: 2.3.0
-  resolution: "enhanced-resolve@npm:2.3.0"
+"enhanced-resolve@npm:^2.2.2":
+  version: 2.3.0
+  resolution: "enhanced-resolve@npm:2.3.0"
   dependencies:
     graceful-fs: ^4.1.2
     memory-fs: ^0.3.0
@@ -8209,6 +8108,86 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild@npm:^0.19.3":
+  version: 0.19.11
+  resolution: "esbuild@npm:0.19.11"
+  dependencies:
+    "@esbuild/aix-ppc64": 0.19.11
+    "@esbuild/android-arm": 0.19.11
+    "@esbuild/android-arm64": 0.19.11
+    "@esbuild/android-x64": 0.19.11
+    "@esbuild/darwin-arm64": 0.19.11
+    "@esbuild/darwin-x64": 0.19.11
+    "@esbuild/freebsd-arm64": 0.19.11
+    "@esbuild/freebsd-x64": 0.19.11
+    "@esbuild/linux-arm": 0.19.11
+    "@esbuild/linux-arm64": 0.19.11
+    "@esbuild/linux-ia32": 0.19.11
+    "@esbuild/linux-loong64": 0.19.11
+    "@esbuild/linux-mips64el": 0.19.11
+    "@esbuild/linux-ppc64": 0.19.11
+    "@esbuild/linux-riscv64": 0.19.11
+    "@esbuild/linux-s390x": 0.19.11
+    "@esbuild/linux-x64": 0.19.11
+    "@esbuild/netbsd-x64": 0.19.11
+    "@esbuild/openbsd-x64": 0.19.11
+    "@esbuild/sunos-x64": 0.19.11
+    "@esbuild/win32-arm64": 0.19.11
+    "@esbuild/win32-ia32": 0.19.11
+    "@esbuild/win32-x64": 0.19.11
+  dependenciesMeta:
+    "@esbuild/aix-ppc64":
+      optional: true
+    "@esbuild/android-arm":
+      optional: true
+    "@esbuild/android-arm64":
+      optional: true
+    "@esbuild/android-x64":
+      optional: true
+    "@esbuild/darwin-arm64":
+      optional: true
+    "@esbuild/darwin-x64":
+      optional: true
+    "@esbuild/freebsd-arm64":
+      optional: true
+    "@esbuild/freebsd-x64":
+      optional: true
+    "@esbuild/linux-arm":
+      optional: true
+    "@esbuild/linux-arm64":
+      optional: true
+    "@esbuild/linux-ia32":
+      optional: true
+    "@esbuild/linux-loong64":
+      optional: true
+    "@esbuild/linux-mips64el":
+      optional: true
+    "@esbuild/linux-ppc64":
+      optional: true
+    "@esbuild/linux-riscv64":
+      optional: true
+    "@esbuild/linux-s390x":
+      optional: true
+    "@esbuild/linux-x64":
+      optional: true
+    "@esbuild/netbsd-x64":
+      optional: true
+    "@esbuild/openbsd-x64":
+      optional: true
+    "@esbuild/sunos-x64":
+      optional: true
+    "@esbuild/win32-arm64":
+      optional: true
+    "@esbuild/win32-ia32":
+      optional: true
+    "@esbuild/win32-x64":
+      optional: true
+  bin:
+    esbuild: bin/esbuild
+  checksum: ae949a796d1d06b55275ae7491ce137857468f69a93d8cc9c0943d2a701ac54e14dbb250a2ba56f2ad98283669578f1ec3bd85a4681910a5ff29a2470c3bd62c
+  languageName: node
+  linkType: hard
+
 "escalade@npm:^3.1.1":
   version: 3.1.1
   resolution: "escalade@npm:3.1.1"
@@ -8216,13 +8195,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"escape-html@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "escape-html@npm:1.0.3"
-  checksum: 6213ca9ae00d0ab8bccb6d8d4e0a98e76237b2410302cf7df70aaa6591d509a2a37ce8998008cbecae8fc8ffaadf3fb0229535e6a145f3ce0b211d060decbb24
-  languageName: node
-  linkType: hard
-
 "escape-string-regexp@npm:^1.0.5":
   version: 1.0.5
   resolution: "escape-string-regexp@npm:1.0.5"
@@ -8350,8 +8322,8 @@ __metadata:
   linkType: hard
 
 "eslint-plugin-import@npm:^2.25.3":
-  version: 2.29.0
-  resolution: "eslint-plugin-import@npm:2.29.0"
+  version: 2.29.1
+  resolution: "eslint-plugin-import@npm:2.29.1"
   dependencies:
     array-includes: ^3.1.7
     array.prototype.findlastindex: ^1.2.3
@@ -8369,10 +8341,10 @@ __metadata:
     object.groupby: ^1.0.1
     object.values: ^1.1.7
     semver: ^6.3.1
-    tsconfig-paths: ^3.14.2
+    tsconfig-paths: ^3.15.0
   peerDependencies:
     eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
-  checksum: 19ee541fb95eb7a796f3daebe42387b8d8262bbbcc4fd8a6e92f63a12035f3d2c6cb8bc0b6a70864fa14b1b50ed6b8e6eed5833e625e16cb6bb98b665beff269
+  checksum: e65159aef808136d26d029b71c8c6e4cb5c628e65e5de77f1eb4c13a379315ae55c9c3afa847f43f4ff9df7e54515c77ffc6489c6a6f81f7dd7359267577468c
   languageName: node
   linkType: hard
 
@@ -8525,13 +8497,13 @@ __metadata:
   linkType: hard
 
 "eslint@npm:^8.0.0":
-  version: 8.55.0
-  resolution: "eslint@npm:8.55.0"
+  version: 8.56.0
+  resolution: "eslint@npm:8.56.0"
   dependencies:
     "@eslint-community/eslint-utils": ^4.2.0
     "@eslint-community/regexpp": ^4.6.1
     "@eslint/eslintrc": ^2.1.4
-    "@eslint/js": 8.55.0
+    "@eslint/js": 8.56.0
     "@humanwhocodes/config-array": ^0.11.13
     "@humanwhocodes/module-importer": ^1.0.1
     "@nodelib/fs.walk": ^1.2.8
@@ -8568,7 +8540,7 @@ __metadata:
     text-table: ^0.2.0
   bin:
     eslint: bin/eslint.js
-  checksum: 83f82a604559dc1faae79d28fdf3dfc9e592ca221052e2ea516e1b379b37e77e4597705a16880e2f5ece4f79087c1dd13fd7f6e9746f794a401175519db18b41
+  checksum: 883436d1e809b4a25d9eb03d42f584b84c408dbac28b0019f6ea07b5177940bf3cca86208f749a6a1e0039b63e085ee47aca1236c30721e91f0deef5cc5a5136
   languageName: node
   linkType: hard
 
@@ -8769,15 +8741,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"extend-shallow@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "extend-shallow@npm:2.0.1"
-  dependencies:
-    is-extendable: ^0.1.0
-  checksum: 8fb58d9d7a511f4baf78d383e637bd7d2e80843bd9cd0853649108ea835208fb614da502a553acc30208e1325240bb7cc4a68473021612496bb89725483656d8
-  languageName: node
-  linkType: hard
-
 "extend@npm:^3.0.0, extend@npm:^3.0.2, extend@npm:~3.0.2":
   version: 3.0.2
   resolution: "extend@npm:3.0.2"
@@ -8884,11 +8847,11 @@ __metadata:
   linkType: hard
 
 "fastq@npm:^1.6.0":
-  version: 1.15.0
-  resolution: "fastq@npm:1.15.0"
+  version: 1.16.0
+  resolution: "fastq@npm:1.16.0"
   dependencies:
     reusify: ^1.0.4
-  checksum: 0170e6bfcd5d57a70412440b8ef600da6de3b2a6c5966aeaf0a852d542daff506a0ee92d6de7679d1de82e644bce69d7a574a6c93f0b03964b5337eed75ada1a
+  checksum: 1d40ed1f100ae625e5720484e8602b7ad07649370f1cbc3e34a6b9630a0bfed6946bab0322d8a368a1e3cde87bb9bbb8d3bc2ae01a0c1f022fac1d07c04e4feb
   languageName: node
   linkType: hard
 
@@ -9026,13 +8989,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"follow-redirects@npm:^1.0.0, follow-redirects@npm:^1.14.0, follow-redirects@npm:^1.14.9, follow-redirects@npm:^1.15.0":
-  version: 1.15.3
-  resolution: "follow-redirects@npm:1.15.3"
+"follow-redirects@npm:^1.0.0, follow-redirects@npm:^1.14.9, follow-redirects@npm:^1.15.4":
+  version: 1.15.4
+  resolution: "follow-redirects@npm:1.15.4"
   peerDependenciesMeta:
     debug:
       optional: true
-  checksum: 584da22ec5420c837bd096559ebfb8fe69d82512d5585004e36a3b4a6ef6d5905780e0c74508c7b72f907d1fa2b7bd339e613859e9c304d0dc96af2027fd0231
+  checksum: e178d1deff8b23d5d24ec3f7a94cde6e47d74d0dc649c35fc9857041267c12ec5d44650a0c5597ef83056ada9ea6ca0c30e7c4f97dbf07d035086be9e6a5b7b6
   languageName: node
   linkType: hard
 
@@ -9100,17 +9063,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"formstream@npm:^1.1.0":
-  version: 1.3.1
-  resolution: "formstream@npm:1.3.1"
-  dependencies:
-    destroy: ^1.0.4
-    mime: ^2.5.2
-    pause-stream: ~0.0.11
-  checksum: a4047bca9399dcd978d0bfd2e5dae52198dce8a53eb281f2e65dcb49e2e65bcaaa8573b46eeaa0c2a136ea69ff3d1137bb2b0f359cbe7110b5dcd12fc4a38155
-  languageName: node
-  linkType: hard
-
 "frac@npm:~1.1.2":
   version: 1.1.2
   resolution: "frac@npm:1.1.2"
@@ -9165,7 +9117,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fsevents@npm:^2.3.2, fsevents@npm:~2.3.2":
+"fsevents@npm:^2.3.2, fsevents@npm:~2.3.2, fsevents@npm:~2.3.3":
   version: 2.3.3
   resolution: "fsevents@npm:2.3.3"
   dependencies:
@@ -9175,7 +9127,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fsevents@patch:fsevents@^2.3.2#~builtin<compat/fsevents>, fsevents@patch:fsevents@~2.3.2#~builtin<compat/fsevents>":
+"fsevents@patch:fsevents@^2.3.2#~builtin<compat/fsevents>, fsevents@patch:fsevents@~2.3.2#~builtin<compat/fsevents>, fsevents@patch:fsevents@~2.3.3#~builtin<compat/fsevents>":
   version: 2.3.3
   resolution: "fsevents@patch:fsevents@npm%3A2.3.3#~builtin<compat/fsevents>::version=2.3.3&hash=df0bf1"
   dependencies:
@@ -9252,13 +9204,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-ready@npm:^1.0.0, get-ready@npm:~1.0.0":
-  version: 1.0.0
-  resolution: "get-ready@npm:1.0.0"
-  checksum: a4f3a2d7af3721d03f0f20206d1e6783671c276518ff6837b5f8b5c8fe77c6dad331353fe002c19163e1607fd47d377e5d4e8abbd28616a00ad4072d48840994
-  languageName: node
-  linkType: hard
-
 "get-stream@npm:^6.0.0, get-stream@npm:^6.0.1":
   version: 6.0.1
   resolution: "get-stream@npm:6.0.1"
@@ -9317,20 +9262,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob@npm:7.1.6":
-  version: 7.1.6
-  resolution: "glob@npm:7.1.6"
-  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
-  checksum: 351d549dd90553b87c2d3f90ce11aed9e1093c74130440e7ae0592e11bbcd2ce7f0ebb8ba6bfe63aaf9b62166a7f4c80cb84490ae5d78408bb2572bf7d4ee0a6
-  languageName: node
-  linkType: hard
-
 "glob@npm:^10.2.2, glob@npm:^10.3.10":
   version: 10.3.10
   resolution: "glob@npm:10.3.10"
@@ -9669,7 +9600,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.1.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.2":
+"hoist-non-react-statics@npm:^3.1.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.2":
   version: 3.3.2
   resolution: "hoist-non-react-statics@npm:3.3.2"
   dependencies:
@@ -9679,9 +9610,9 @@ __metadata:
   linkType: hard
 
 "hotkeys-js@npm:^3.8.7":
-  version: 3.13.2
-  resolution: "hotkeys-js@npm:3.13.2"
-  checksum: 9c44e02a52273bc4ae489a8efd397acfac8ac6f39d72a808ef7c30726d5d1f92ecf186130b2392eea36290a7524b3ed9834c7281c6e86d9475e20c4957147ff5
+  version: 3.13.3
+  resolution: "hotkeys-js@npm:3.13.3"
+  checksum: fdd2b088671dbf2b2434ba40a4d604bf3f5cbe2f121233f8474f493a557d8a1cced0f1cb0c812b62e34ee9c2ad4ec6c4fd25035aa836ebe12da5dfa11f5afc2d
   languageName: node
   linkType: hard
 
@@ -9836,15 +9767,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"humanize-ms@npm:^1.2.0, humanize-ms@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "humanize-ms@npm:1.2.1"
-  dependencies:
-    ms: ^2.0.0
-  checksum: 9c7a74a2827f9294c009266c82031030eae811ca87b0da3dceb8d6071b9bde22c9f3daef0469c3c533cc67a97d8a167cd9fc0389350e5f415f61a79b171ded16
-  languageName: node
-  linkType: hard
-
 "husky@npm:^8.0.1":
   version: 8.0.3
   resolution: "husky@npm:8.0.3"
@@ -9861,7 +9783,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"iconv-lite@npm:0.4.24, iconv-lite@npm:^0.4.15":
+"iconv-lite@npm:0.4, iconv-lite@npm:0.4.24":
   version: 0.4.24
   resolution: "iconv-lite@npm:0.4.24"
   dependencies:
@@ -10060,13 +9982,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ip@npm:^1.1.5":
-  version: 1.1.8
-  resolution: "ip@npm:1.1.8"
-  checksum: a2ade53eb339fb0cbe9e69a44caab10d6e3784662285eb5d2677117ee4facc33a64679051c35e0dfdb1a3983a51ce2f5d2cb36446d52e10d01881789b76e28fb
-  languageName: node
-  linkType: hard
-
 "ip@npm:^2.0.0":
   version: 2.0.0
   resolution: "ip@npm:2.0.0"
@@ -10162,13 +10077,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-class-hotfix@npm:~0.0.6":
-  version: 0.0.6
-  resolution: "is-class-hotfix@npm:0.0.6"
-  checksum: 7a0d5f14ef6db81c38f78f53fb08e440068e1ff62d5717fe4af1ca419fa0b68e6559a166c7d9953700e83efc290ef8fa24cf3363382014f9d6a74623d037ad7f
-  languageName: node
-  linkType: hard
-
 "is-core-module@npm:^2.13.0, is-core-module@npm:^2.13.1":
   version: 2.13.1
   resolution: "is-core-module@npm:2.13.1"
@@ -10196,13 +10104,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-extendable@npm:^0.1.0":
-  version: 0.1.1
-  resolution: "is-extendable@npm:0.1.1"
-  checksum: 3875571d20a7563772ecc7a5f36cb03167e9be31ad259041b4a8f73f33f885441f778cee1f1fe0085eb4bc71679b9d8c923690003a36a6a5fdf8023e6e3f0672
-  languageName: node
-  linkType: hard
-
 "is-extglob@npm:^2.1.1":
   version: 2.1.1
   resolution: "is-extglob@npm:2.1.1"
@@ -10273,9 +10174,9 @@ __metadata:
   linkType: hard
 
 "is-lite@npm:^1.2.0":
-  version: 1.2.0
-  resolution: "is-lite@npm:1.2.0"
-  checksum: 3b891a4fca8bc1c0db7656035e0e29cee3f7c2eee91f414035eab40f037c92b97b94d2eb1a1469ba0eb584649655f62119e02dff86236f9d408e2eff387c56bc
+  version: 1.2.1
+  resolution: "is-lite@npm:1.2.1"
+  checksum: 44ecdfce4a40714c97a59c3ee98dfd525c552cebdb253a5c409f6248ad4a62c050f5029a022d6153ddb415775c50655d070c670d8d70b084ebc598ca35c899c6
   languageName: node
   linkType: hard
 
@@ -10427,17 +10328,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-type-of@npm:^1.4.0":
-  version: 1.4.0
-  resolution: "is-type-of@npm:1.4.0"
-  dependencies:
-    core-util-is: ^1.0.2
-    is-class-hotfix: ~0.0.6
-    isstream: ~0.1.2
-  checksum: 9d8ca64d0cb00da0bffe1c52c8883e6a1581377a0152d5a1ddbfcdd46fafac9ad713ad07866de73218160c36217ed482a83a700f52e13dc385f88c50c5fc51fd
-  languageName: node
-  linkType: hard
-
 "is-typed-array@npm:^1.1.10, is-typed-array@npm:^1.1.12, is-typed-array@npm:^1.1.9":
   version: 1.1.12
   resolution: "is-typed-array@npm:1.1.12"
@@ -10545,6 +10435,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"isoformat@npm:^0.2.0":
+  version: 0.2.1
+  resolution: "isoformat@npm:0.2.1"
+  checksum: 28487777526c93360c2f49abbf03d45778ad2c55bfccb3a6bf04905b2ddfafcb9f29a68d6ab5251f2919afb47e0e018fe25f815fd68180f4117161c508878558
+  languageName: node
+  linkType: hard
+
 "isstream@npm:~0.1.2":
   version: 0.1.2
   resolution: "isstream@npm:0.1.2"
@@ -11157,13 +11054,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"js-base64@npm:^2.5.2":
-  version: 2.6.4
-  resolution: "js-base64@npm:2.6.4"
-  checksum: 5f4084078d6c46f8529741d110df84b14fac3276b903760c21fa8cc8521370d607325dfe1c1a9fbbeaae1ff8e602665aaeef1362427d8fef704f9e3659472ce8
-  languageName: node
-  linkType: hard
-
 "js-cookie@npm:^2.2.1, js-cookie@npm:^2.x.x":
   version: 2.2.1
   resolution: "js-cookie@npm:2.2.1"
@@ -11434,13 +11324,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jstoxml@npm:^2.0.0":
-  version: 2.2.9
-  resolution: "jstoxml@npm:2.2.9"
-  checksum: 6a80183a646f415a2e959f31fa2e04f07e538b68daa8d47ebc38ff1576060ac958c76685516d1cc0c213f64acd3d0488f53e7f79db094b7b3a48d2b70acc4edb
-  languageName: node
-  linkType: hard
-
 "jsx-ast-utils@npm:^2.4.1 || ^3.0.0, jsx-ast-utils@npm:^3.3.5":
   version: 3.3.5
   resolution: "jsx-ast-utils@npm:3.3.5"
@@ -11798,13 +11681,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash.omit@npm:^4.5.0":
-  version: 4.5.0
-  resolution: "lodash.omit@npm:4.5.0"
-  checksum: 434645e49fe84ab315719bd5a9a3a585a0f624aa4160bc09157dd041a414bcc287c15840365c1379476a3f3eda41fbe838976c3f7bdecbbf4c5478e86c471a30
-  languageName: node
-  linkType: hard
-
 "lodash.pick@npm:^4.4.0":
   version: 4.4.0
   resolution: "lodash.pick@npm:4.4.0"
@@ -11826,13 +11702,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash.tonumber@npm:^4.0.3":
-  version: 4.0.3
-  resolution: "lodash.tonumber@npm:4.0.3"
-  checksum: d8156cf76eb1c5960ec1c20bc16a647a7fe4d1289365d2dc05f7e3dd1915e2f0767d9ad3a1ac2419903a0309701f051fcb6a923a928d15afa6e17a3e32d6ea3a
-  languageName: node
-  linkType: hard
-
 "lodash@npm:^3.9.1":
   version: 3.10.1
   resolution: "lodash@npm:3.10.1"
@@ -11840,7 +11709,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash@npm:^4, lodash@npm:^4.0.1, lodash@npm:^4.17.15, lodash@npm:^4.17.19, lodash@npm:^4.17.20, lodash@npm:^4.17.21, lodash@npm:^4.17.4":
+"lodash@npm:^4, lodash@npm:^4.17.15, lodash@npm:^4.17.19, lodash@npm:^4.17.20, lodash@npm:^4.17.21, lodash@npm:^4.17.4":
   version: 4.17.21
   resolution: "lodash@npm:4.17.21"
   checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7
@@ -11896,14 +11765,21 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "lowcoder-cli-template-typescript@workspace:packages/lowcoder-cli-template-typescript"
   dependencies:
-    lowcoder-cli: "workspace:^"
-    lowcoder-sdk: "workspace:^"
-    typescript: ^4.8.4
-    vite: ^4.3.9
+    "@observablehq/runtime": ^4.8.2
+    "@types/react": ^18.2.45
+    "@types/react-dom": ^18.2.18
+    lowcoder-cli: ^0.0.30
+    lowcoder-sdk: ^2.1.10
+    prop-types: ^15.7.2
+    react: ^18.2.0
+    react-dom: ^18.2.0
+    react-resize-detector: ^7.0.0
+    typescript: 5.3.3
+    vite: ^5.0.10
   languageName: unknown
   linkType: soft
 
-"lowcoder-cli@workspace:^, lowcoder-cli@workspace:packages/lowcoder-cli":
+"lowcoder-cli@^0.0.30, lowcoder-cli@workspace:^, lowcoder-cli@workspace:packages/lowcoder-cli":
   version: 0.0.0-use.local
   resolution: "lowcoder-cli@workspace:packages/lowcoder-cli"
   dependencies:
@@ -11914,8 +11790,8 @@ __metadata:
     commander: ^9.4.1
     cross-spawn: ^7.0.3
     fs-extra: ^10.1.0
-    react: ^17
-    react-dom: ^17
+    react: ^18.2.0
+    react-dom: ^18.2.0
     react-json-view: ^1.21.3
     rollup-plugin-external-globals: ^0.7.1
     typescript: ^4.8.4
@@ -11940,18 +11816,17 @@ __metadata:
     "@fullcalendar/moment": ^6.1.6
     "@fullcalendar/react": ^6.1.6
     "@fullcalendar/timegrid": ^6.1.6
-    "@types/react": 17
-    "@types/react-dom": 17
+    "@types/react": ^18.2.45
+    "@types/react-dom": ^18.2.18
     big.js: ^6.2.1
     echarts-extension-gmap: ^1.6.0
     echarts-wordcloud: ^2.1.0
     jest: 29.3.0
-    jest-canvas-mock: ^2.5.2
     lowcoder-cli: "workspace:^"
     lowcoder-sdk: "workspace:^"
-    mermaid: ^10.2.4
-    react: 17
-    react-dom: 17
+    mermaid: ^10.6.1
+    react: ^18.2.0
+    react-dom: ^18.2.0
     typescript: 4.8.4
     vite: ^4.3.9
     vite-tsconfig-paths: ^3.6.0
@@ -12017,14 +11892,14 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "lowcoder-plugin-demo@workspace:packages/lowcoder-plugin-demo"
   dependencies:
-    "@types/react": 17
-    "@types/react-dom": 17
+    "@types/react": ^18.2.45
+    "@types/react-dom": ^18.2.18
     lowcoder-cli: "workspace:^"
     lowcoder-core: ^0.0.1
     lowcoder-design: ^0.0.1
     lowcoder-sdk: "workspace:^"
-    react: 17
-    react-dom: 17
+    react: ^18.2.0
+    react-dom: ^18.2.0
     typescript: 4.8.4
     vite: ^4.3.9
   languageName: unknown
@@ -12039,9 +11914,8 @@ __metadata:
     "@lottiefiles/react-lottie-player": ^3.5.3
     "@rollup/plugin-typescript": ^8.5.0
     "@testing-library/jest-dom": ^5.16.5
-    "@testing-library/react": ^12.0.0
-    "@testing-library/user-event": ^13.2.1
-    "@types/ali-oss": ^6.16.4
+    "@testing-library/react": ^14.1.2
+    "@testing-library/user-event": ^14.5.1
     "@types/file-saver": ^2.0.5
     "@types/jest": ^29.2.2
     "@types/mime": ^2.0.3
@@ -12051,10 +11925,9 @@ __metadata:
     "@types/react-resizable": ^3.0.5
     "@types/react-router-dom": ^5.3.2
     "@types/shelljs": ^0.8.11
-    "@types/styled-components": ^5.1.19
+    "@types/styled-components": ^5.1.34
     "@types/stylis": ^4.0.2
     "@types/tern": 0.23.4
-    "@types/toposort": ^2.0.3
     "@types/ua-parser-js": ^0.7.36
     "@welldone-software/why-did-you-render": ^6.2.3
     add: ^2.0.6
@@ -12064,6 +11937,7 @@ __metadata:
     chalk: 4
     husky: ^8.0.1
     jest: ^29.5.0
+    jest-canvas-mock: ^2.5.2
     jest-environment-jsdom: ^29.5.0
     lint-staged: ^13.0.1
     lowcoder-cli: "workspace:^"
@@ -12081,7 +11955,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"lowcoder-sdk@workspace:^, lowcoder-sdk@workspace:packages/lowcoder-sdk":
+"lowcoder-sdk@^2.1.10, lowcoder-sdk@workspace:^, lowcoder-sdk@workspace:packages/lowcoder-sdk":
   version: 0.0.0-use.local
   resolution: "lowcoder-sdk@workspace:packages/lowcoder-sdk"
   dependencies:
@@ -12105,8 +11979,8 @@ __metadata:
     vite-plugin-svgr: ^2.2.2
     vite-tsconfig-paths: ^3.6.0
   peerDependencies:
-    react: ">=17"
-    react-dom: ">=17"
+    react: ">=18"
+    react-dom: ">=18"
   languageName: unknown
   linkType: soft
 
@@ -12115,15 +11989,14 @@ __metadata:
   resolution: "lowcoder@workspace:packages/lowcoder"
   dependencies:
     "@ant-design/icons": ^4.7.0
-    "@ant-design/pro-form": ^1.52.9
-    "@ant-design/pro-table": ^2.62.7
-    "@codemirror/autocomplete": ^0.20.3
-    "@codemirror/basic-setup": ^0.20.0
-    "@codemirror/lang-css": 0.20
-    "@codemirror/lang-html": 0.20
-    "@codemirror/lang-javascript": ^0.20.1
-    "@codemirror/lang-json": 0.20.0
-    "@codemirror/lang-sql": ^0.20.4
+    "@codemirror/autocomplete": ^6.11.1
+    "@codemirror/commands": ^6.3.2
+    "@codemirror/lang-css": ^6.2.1
+    "@codemirror/lang-html": ^6.4.7
+    "@codemirror/lang-javascript": ^6.2.1
+    "@codemirror/lang-json": ^6.0.1
+    "@codemirror/lang-sql": ^6.5.4
+    "@codemirror/search": ^6.5.5
     "@dnd-kit/core": ^5.0.1
     "@dnd-kit/modifiers": ^5.0.0
     "@dnd-kit/sortable": ^6.0.0
@@ -12133,17 +12006,17 @@ __metadata:
     "@fortawesome/free-solid-svg-icons": ^6.4.0
     "@fortawesome/react-fontawesome": latest
     "@manaflair/redux-batch": ^1.0.0
-    "@rjsf/antd": ^5.10.0
-    "@rjsf/core": ^5.10.0
-    "@rjsf/utils": ^5.10.0
-    "@rjsf/validator-ajv8": ^5.10.0
+    "@rjsf/antd": ^5.15.1
+    "@rjsf/core": ^5.15.1
+    "@rjsf/utils": ^5.15.1
+    "@rjsf/validator-ajv8": ^5.15.1
     "@types/core-js": ^2.5.5
     "@types/intl": ^1.2.1
     "@types/lodash": ^4.14.194
     "@types/node": ^16.7.13
     "@types/papaparse": ^5.3.5
-    "@types/react": ^17.0.20
-    "@types/react-dom": ^17.0.9
+    "@types/react": ^18.2.45
+    "@types/react-dom": ^18.2.18
     "@types/react-signature-canvas": ^1.0.2
     "@types/react-test-renderer": ^18.0.0
     "@types/react-virtualized": ^9.21.21
@@ -12153,10 +12026,8 @@ __metadata:
     agora-access-token: ^2.0.4
     agora-rtc-sdk-ng: ^4.19.0
     agora-rtm-sdk: ^1.5.1
-    ali-oss: ^6.17.1
-    antd: ^5.12.2
-    antd-img-crop: ^4.12.2
-    axios: ^0.21.1
+    antd: ^5.12.5
+    axios: ^1.6.2
     buffer: ^6.0.3
     clsx: ^2.0.0
     cnchar: ^3.2.4
@@ -12185,10 +12056,10 @@ __metadata:
     papaparse: ^5.3.2
     qrcode.react: ^3.1.0
     rc-trigger: ^5.3.1
-    react: ^17.0.2
+    react: ^18.2.0
     react-colorful: ^5.5.1
     react-documents: ^1.2.1
-    react-dom: ^17.0.2
+    react-dom: ^18.2.0
     react-draggable: ^4.4.4
     react-grid-layout: ^1.3.0
     react-helmet: ^6.1.0
@@ -12203,6 +12074,7 @@ __metadata:
     react-router: ^5.2.1
     react-router-dom: ^5.3.0
     react-signature-canvas: ^1.0.6
+    react-sortable-hoc: ^2.0.0
     react-test-renderer: ^18.1.0
     react-use: ^17.3.2
     really-relaxed-json: ^0.3.2
@@ -12216,10 +12088,9 @@ __metadata:
     rollup-plugin-visualizer: ^5.9.2
     simplebar-react: 2.3.6
     sql-formatter: ^8.2.0
-    styled-components: ^5.3.3
+    styled-components: ^6.1.6
     stylis: ^4.1.1
     tern: ^0.24.3
-    toposort: ^2.0.2
     typescript: ^4.8.4
     typescript-collections: ^1.3.3
     ua-parser-js: ^1.0.33
@@ -12400,11 +12271,11 @@ __metadata:
   linkType: hard
 
 "markdown-to-jsx@npm:^7.3.2":
-  version: 7.3.2
-  resolution: "markdown-to-jsx@npm:7.3.2"
+  version: 7.4.0
+  resolution: "markdown-to-jsx@npm:7.4.0"
   peerDependencies:
     react: ">= 0.14.0"
-  checksum: 8885c6343b71570b0a7ec16cd85a49b853a830234790ee7430e2517ea5d8d361ff138bd52147f650790f3e7b3a28a15c755fc16f8856dd01ddf09a6161782e06
+  checksum: 59959d14d7927ed8a97e42d39771e2b445b90fa098477fb6ab040f044d230517dc4a95ba38a4f924cfc965a96b32211d93def150a6184f0e51d2cefdc8cb415d
   languageName: node
   linkType: hard
 
@@ -12621,13 +12492,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"merge-descriptors@npm:^1.0.1":
-  version: 1.0.3
-  resolution: "merge-descriptors@npm:1.0.3"
-  checksum: 52117adbe0313d5defa771c9993fe081e2d2df9b840597e966aadafde04ae8d0e3da46bac7ca4efc37d4d2b839436582659cd49c6a43eacb3fe3050896a105d1
-  languageName: node
-  linkType: hard
-
 "merge-stream@npm:^2.0.0":
   version: 2.0.0
   resolution: "merge-stream@npm:2.0.0"
@@ -12642,7 +12506,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mermaid@npm:^10.2.4":
+"mermaid@npm:^10.6.1":
   version: 10.6.1
   resolution: "mermaid@npm:10.6.1"
   dependencies:
@@ -13046,7 +12910,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mime@npm:^2.4.5, mime@npm:^2.4.6, mime@npm:^2.5.2":
+"mime@npm:^2.4.6":
   version: 2.6.0
   resolution: "mime@npm:2.6.0"
   bin:
@@ -13126,7 +12990,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimist@npm:^1.1.0, minimist@npm:^1.2.0, minimist@npm:^1.2.6":
+"minimist@npm:^1.2.0, minimist@npm:^1.2.6":
   version: 1.2.8
   resolution: "minimist@npm:1.2.8"
   checksum: 75a6d645fb122dad29c06a7597bddea977258957ed88d7a6df59b5cd3fe4a527e253e9bbf2e783e4b73657f9098b96a5fe96ab8a113655d4109108577ecf85b0
@@ -13217,17 +13081,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mkdirp@npm:^0.5.1":
-  version: 0.5.6
-  resolution: "mkdirp@npm:0.5.6"
-  dependencies:
-    minimist: ^1.2.6
-  bin:
-    mkdirp: bin/cmd.js
-  checksum: 0c91b721bb12c3f9af4b77ebf73604baf350e64d80df91754dc509491ae93bf238581e59c7188360cec7cb62fc4100959245a42cfe01834efedc5e9d068376c2
-  languageName: node
-  linkType: hard
-
 "mkdirp@npm:^1.0.3":
   version: 1.0.4
   resolution: "mkdirp@npm:1.0.4"
@@ -13267,13 +13120,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ms@npm:2.0.0":
-  version: 2.0.0
-  resolution: "ms@npm:2.0.0"
-  checksum: 0e6a22b8b746d2e0b65a430519934fefd41b6db0682e3477c10f60c76e947c4c0ad06f63ffdf1d78d335f83edee8c0aa928aa66a36c7cd95b69b26f468d527f4
-  languageName: node
-  linkType: hard
-
 "ms@npm:2.1.2":
   version: 2.1.2
   resolution: "ms@npm:2.1.2"
@@ -13281,7 +13127,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ms@npm:^2.0.0, ms@npm:^2.1.1":
+"ms@npm:^2.1.1":
   version: 2.1.3
   resolution: "ms@npm:2.1.3"
   checksum: aa92de608021b242401676e35cfa5aa42dd70cbdc082b916da7fb925c542173e36bce97ea3e804923fe92c0ad991434e4a38327e15a1b5b5f945d66df615ae6d
@@ -13460,13 +13306,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"normalize-wheel@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "normalize-wheel@npm:1.0.1"
-  checksum: 00b32efa040bad9438e732385a4ca27f8532fa2c8c06b54be43b9f75b2da6642bf41a0b4f81e542639dc8d682cde8b059b0a02ae0723fb8ebc3c8f036c8e51d8
-  languageName: node
-  linkType: hard
-
 "npm-run-path@npm:^4.0.1":
   version: 4.0.1
   resolution: "npm-run-path@npm:4.0.1"
@@ -13477,11 +13316,11 @@ __metadata:
   linkType: hard
 
 "npm-run-path@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "npm-run-path@npm:5.1.0"
+  version: 5.2.0
+  resolution: "npm-run-path@npm:5.2.0"
   dependencies:
     path-key: ^4.0.0
-  checksum: dc184eb5ec239d6a2b990b43236845332ef12f4e0beaa9701de724aa797fe40b6bbd0157fb7639d24d3ab13f5d5cf22d223a19c6300846b8126f335f788bee66
+  checksum: c5325e016014e715689c4014f7e0be16cc4cbf529f32a1723e511bc4689b5f823b704d2bca61ac152ce2bda65e0205dc8b3ba0ec0f5e4c3e162d302f6f5b9efb
   languageName: node
   linkType: hard
 
@@ -13647,14 +13486,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"omit.js@npm:^2.0.2":
-  version: 2.0.2
-  resolution: "omit.js@npm:2.0.2"
-  checksum: 5d802b9fd7640250aada82f3b9b7243b554b38911f29b3de0d1066c00f24dd4ee72d3b9c94c582e373fb6511bd21e107917d419a7b2a04287f26c31133b48a15
-  languageName: node
-  linkType: hard
-
-"once@npm:^1.3.0, once@npm:^1.3.1, once@npm:^1.4.0":
+"once@npm:^1.3.0":
   version: 1.4.0
   resolution: "once@npm:1.4.0"
   dependencies:
@@ -13720,29 +13552,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"os-name@npm:~1.0.3":
-  version: 1.0.3
-  resolution: "os-name@npm:1.0.3"
-  dependencies:
-    osx-release: ^1.0.0
-    win-release: ^1.0.0
-  bin:
-    os-name: cli.js
-  checksum: 2fc86cc199f8b4992bb00041401c5ab0407e3069e05981f3aa3e5a44cee9b7f22c2b0f5db2c0c1d55656c519884272b5e1e55517358c2e5f728b37dd38f5af78
-  languageName: node
-  linkType: hard
-
-"osx-release@npm:^1.0.0":
-  version: 1.1.0
-  resolution: "osx-release@npm:1.1.0"
-  dependencies:
-    minimist: ^1.1.0
-  bin:
-    osx-release: cli.js
-  checksum: abd437ef21dbfb04f098acc90112cc92ef10c17213e3fd75f8eba45931bd85f6d564ecade0642fac51acff2015597194a76a11773009a90baeb35a03b1c36b06
-  languageName: node
-  linkType: hard
-
 "p-limit@npm:^2.2.0":
   version: 2.3.0
   resolution: "p-limit@npm:2.3.0"
@@ -13968,15 +13777,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pause-stream@npm:~0.0.11":
-  version: 0.0.11
-  resolution: "pause-stream@npm:0.0.11"
-  dependencies:
-    through: ~2.3
-  checksum: 3c4a14052a638b92e0c96eb00c0d7977df7f79ea28395250c525d197f1fc02d34ce1165d5362e2e6ebbb251524b94a76f3f0d4abc39ab8b016d97449fe15583c
-  languageName: node
-  linkType: hard
-
 "pbkdf2@npm:^3.0.3":
   version: 3.1.2
   resolution: "pbkdf2@npm:3.1.2"
@@ -14043,13 +13843,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"platform@npm:^1.3.1":
-  version: 1.3.6
-  resolution: "platform@npm:1.3.6"
-  checksum: 6f472a09c61d418c7e26c1c16d0bdc029549d512dbec6526216a1e59ec68100d07007d0097dcba69dddad883d6f2a83361b4bdfe0094a3d9a2af24158643d85e
-  languageName: node
-  linkType: hard
-
 "pn@npm:^1.1.0":
   version: 1.1.0
   resolution: "pn@npm:1.1.0"
@@ -14071,14 +13864,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.4.27":
-  version: 8.4.32
-  resolution: "postcss@npm:8.4.32"
+"postcss@npm:8.4.31":
+  version: 8.4.31
+  resolution: "postcss@npm:8.4.31"
+  dependencies:
+    nanoid: ^3.3.6
+    picocolors: ^1.0.0
+    source-map-js: ^1.0.2
+  checksum: 1d8611341b073143ad90486fcdfeab49edd243377b1f51834dc4f6d028e82ce5190e4f11bb2633276864503654fb7cab28e67abdc0fbf9d1f88cad4a0ff0beea
+  languageName: node
+  linkType: hard
+
+"postcss@npm:^8.4.27, postcss@npm:^8.4.32":
+  version: 8.4.33
+  resolution: "postcss@npm:8.4.33"
   dependencies:
     nanoid: ^3.3.7
     picocolors: ^1.0.0
     source-map-js: ^1.0.2
-  checksum: 220d9d0bf5d65be7ed31006c523bfb11619461d296245c1231831f90150aeb4a31eab9983ac9c5c89759a3ca8b60b3e0d098574964e1691673c3ce5c494305ae
+  checksum: 6f98b2af4b76632a3de20c4f47bf0e984a1ce1a531cf11adcb0b1d63a6cbda0aae4165e578b66c32ca4879038e3eaad386a6be725a8fb4429c78e3c1ab858fe9
   languageName: node
   linkType: hard
 
@@ -14253,16 +14057,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pump@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "pump@npm:3.0.0"
-  dependencies:
-    end-of-stream: ^1.1.0
-    once: ^1.3.1
-  checksum: e42e9229fba14732593a718b04cb5e1cfef8254544870997e0ecd9732b189a48e1256e4e5478148ecb47c8511dca2b09eae56b4d0aad8009e6fac8072923cfc9
-  languageName: node
-  linkType: hard
-
 "punycode@npm:^2.1.0, punycode@npm:^2.1.1":
   version: 2.3.1
   resolution: "punycode@npm:2.3.1"
@@ -14293,15 +14087,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"qs@npm:^6.4.0":
-  version: 6.11.2
-  resolution: "qs@npm:6.11.2"
-  dependencies:
-    side-channel: ^1.0.4
-  checksum: e812f3c590b2262548647d62f1637b6989cc56656dc960b893fe2098d96e1bd633f36576f4cd7564dfbff9db42e17775884db96d846bebe4f37420d073ecdc0b
-  languageName: node
-  linkType: hard
-
 "qs@npm:~6.5.2":
   version: 6.5.3
   resolution: "qs@npm:6.5.3"
@@ -14400,37 +14185,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-cascader@npm:~3.7.3":
-  version: 3.7.3
-  resolution: "rc-cascader@npm:3.7.3"
-  dependencies:
-    "@babel/runtime": ^7.12.5
-    array-tree-filter: ^2.1.0
-    classnames: ^2.3.1
-    rc-select: ~14.1.0
-    rc-tree: ~5.7.0
-    rc-util: ^5.6.1
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 6c01218c65ed30c2638773fd8bb0ea4bc91263860c67797c8664d815c7db7ed1cdf11d80a385dff58b8d5ffe68dcfdc5299b186d31b894b4113dbaeb92ea2aca
-  languageName: node
-  linkType: hard
-
-"rc-checkbox@npm:~3.0.1":
-  version: 3.0.1
-  resolution: "rc-checkbox@npm:3.0.1"
-  dependencies:
-    "@babel/runtime": ^7.10.1
-    classnames: ^2.3.2
-    rc-util: ^5.25.2
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 046b138e95c1b77fb0fb0d06ef3cdb00e34ae551adfe0a0b886cd0fb0ee34a98d1bef43a2c0122e6731862c2ec031d0d2fff9b4ea6c36857777532ad29115265
-  languageName: node
-  linkType: hard
-
 "rc-checkbox@npm:~3.1.0":
   version: 3.1.0
   resolution: "rc-checkbox@npm:3.1.0"
@@ -14445,22 +14199,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-collapse@npm:~3.4.2":
-  version: 3.4.2
-  resolution: "rc-collapse@npm:3.4.2"
-  dependencies:
-    "@babel/runtime": ^7.10.1
-    classnames: 2.x
-    rc-motion: ^2.3.4
-    rc-util: ^5.2.1
-    shallowequal: ^1.1.0
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 617409c4ca8cbcad85df7de33f40fc0526ff28f54304d687b82add8c7c4e442c5fdf2935a645d51e44afa87b23d673f4a8a4d9ee1033b473f6fd4bd5b94df4bc
-  languageName: node
-  linkType: hard
-
 "rc-collapse@npm:~3.7.2":
   version: 3.7.2
   resolution: "rc-collapse@npm:3.7.2"
@@ -14476,22 +14214,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-dialog@npm:~9.0.0, rc-dialog@npm:~9.0.2":
-  version: 9.0.2
-  resolution: "rc-dialog@npm:9.0.2"
-  dependencies:
-    "@babel/runtime": ^7.10.1
-    "@rc-component/portal": ^1.0.0-8
-    classnames: ^2.2.6
-    rc-motion: ^2.3.0
-    rc-util: ^5.21.0
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 470953c33123c984d7c18685435f08fb7cc4111fdbd01f032a8b111e1b0c06b2a9edcc26bc6895e1a426529e8c2842d6f79441f6bfceaa9c1c273e6b56f0f16d
-  languageName: node
-  linkType: hard
-
 "rc-dialog@npm:~9.3.4":
   version: 9.3.4
   resolution: "rc-dialog@npm:9.3.4"
@@ -14508,22 +14230,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-drawer@npm:~6.3.0":
-  version: 6.3.0
-  resolution: "rc-drawer@npm:6.3.0"
-  dependencies:
-    "@babel/runtime": ^7.10.1
-    "@rc-component/portal": ^1.1.1
-    classnames: ^2.2.6
-    rc-motion: ^2.6.1
-    rc-util: ^5.21.2
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 63c9c5d05590a35dc9a66b03544626180e8df08c593568e32f5ac86e0078b09a7388a60441f357b7c71a31715aa18f43fc4a1e165d745d58861380c88b8c9d36
-  languageName: node
-  linkType: hard
-
 "rc-drawer@npm:~6.5.2":
   version: 6.5.2
   resolution: "rc-drawer@npm:6.5.2"
@@ -14540,21 +14246,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-dropdown@npm:~4.0.0, rc-dropdown@npm:~4.0.1":
-  version: 4.0.1
-  resolution: "rc-dropdown@npm:4.0.1"
-  dependencies:
-    "@babel/runtime": ^7.18.3
-    classnames: ^2.2.6
-    rc-trigger: ^5.3.1
-    rc-util: ^5.17.0
-  peerDependencies:
-    react: ">=16.11.0"
-    react-dom: ">=16.11.0"
-  checksum: 12d16fc49dbab3f548ba1674b12cf688f58bcb73932285354a506b2f443aa58dc09cad3e07edb5d8de8e659c91b985022eef0734f233b76261af1b17a61ce619
-  languageName: node
-  linkType: hard
-
 "rc-dropdown@npm:~4.1.0":
   version: 4.1.0
   resolution: "rc-dropdown@npm:4.1.0"
@@ -14584,20 +14275,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-field-form@npm:~1.38.2":
-  version: 1.38.2
-  resolution: "rc-field-form@npm:1.38.2"
-  dependencies:
-    "@babel/runtime": ^7.18.0
-    async-validator: ^4.1.0
-    rc-util: ^5.32.2
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: a1d180f231220a632b25e317fba107e2d579b18e83dc95f4dfbc014ee8631c4a1167e3ac58838b66fe8116594e81454e69cd8093fa5c023b5f69bd64b4ad5875
-  languageName: node
-  linkType: hard
-
 "rc-field-form@npm:~1.41.0":
   version: 1.41.0
   resolution: "rc-field-form@npm:1.41.0"
@@ -14612,23 +14289,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-image@npm:~5.13.0":
-  version: 5.13.0
-  resolution: "rc-image@npm:5.13.0"
-  dependencies:
-    "@babel/runtime": ^7.11.2
-    "@rc-component/portal": ^1.0.2
-    classnames: ^2.2.6
-    rc-dialog: ~9.0.0
-    rc-motion: ^2.6.2
-    rc-util: ^5.0.6
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 720ecb531474f272366a1769a831f49cc6aeabcb5e0aaa3d2395b3cdc8a8b9b08733e1b92a37c229170fa3520433efbed2d03f573f35df3efffd32998690f68e
-  languageName: node
-  linkType: hard
-
 "rc-image@npm:~7.5.1":
   version: 7.5.1
   resolution: "rc-image@npm:7.5.1"
@@ -14646,20 +14306,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-input-number@npm:~7.3.11":
-  version: 7.3.11
-  resolution: "rc-input-number@npm:7.3.11"
-  dependencies:
-    "@babel/runtime": ^7.10.1
-    classnames: ^2.2.5
-    rc-util: ^5.23.0
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 8555171aed72a277721a7d22cdfadc56585f20f9422ce55b0f505eaae43837586d85bd7ebc5dca7b6eec96cbd8798b622ffd03f0187464dbaf6d741a5c20ee7d
-  languageName: node
-  linkType: hard
-
 "rc-input-number@npm:~8.4.0":
   version: 8.4.0
   resolution: "rc-input-number@npm:8.4.0"
@@ -14676,21 +14322,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-input@npm:~0.1.4":
-  version: 0.1.4
-  resolution: "rc-input@npm:0.1.4"
-  dependencies:
-    "@babel/runtime": ^7.11.1
-    classnames: ^2.2.1
-    rc-util: ^5.18.1
-  peerDependencies:
-    react: ">=16.0.0"
-    react-dom: ">=16.0.0"
-  checksum: 1c1935856d7f991ec6f6f8d17945ad501ce956116fdd79b8fcbe1e265465a59b348ba61f1f90045ef14b24e93cc4963b87d5333b9b784f5f28407b6601e8570e
-  languageName: node
-  linkType: hard
-
-"rc-input@npm:~1.3.5, rc-input@npm:~1.3.6":
+"rc-input@npm:~1.3.11, rc-input@npm:~1.3.5":
   version: 1.3.11
   resolution: "rc-input@npm:1.3.11"
   dependencies:
@@ -14704,23 +14336,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-mentions@npm:~1.13.1":
-  version: 1.13.1
-  resolution: "rc-mentions@npm:1.13.1"
-  dependencies:
-    "@babel/runtime": ^7.10.1
-    classnames: ^2.2.6
-    rc-menu: ~9.8.0
-    rc-textarea: ^0.4.0
-    rc-trigger: ^5.0.4
-    rc-util: ^5.22.5
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 7893c56f91a9ef60d70d607d0fb415c07398d35096a25488d49ea4829a56eda2c9cc0334af919330978e20fe85d39393caddbb52484f9bf39a80e78df4057b2e
-  languageName: node
-  linkType: hard
-
 "rc-mentions@npm:~2.9.1":
   version: 2.9.1
   resolution: "rc-mentions@npm:2.9.1"
@@ -14756,24 +14371,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-menu@npm:~9.8.0, rc-menu@npm:~9.8.4":
-  version: 9.8.4
-  resolution: "rc-menu@npm:9.8.4"
-  dependencies:
-    "@babel/runtime": ^7.10.1
-    classnames: 2.x
-    rc-motion: ^2.4.3
-    rc-overflow: ^1.2.8
-    rc-trigger: ^5.1.2
-    rc-util: ^5.27.0
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: a646dea20e8f5638aa25da8e9fa552ffb833b13fbfce04b7ae876892e7ea1592143cbf57bcb943fa9ea96f29e65a1987c2aab5c1407874e825e0ba20e16109f2
-  languageName: node
-  linkType: hard
-
-"rc-motion@npm:^2.0.0, rc-motion@npm:^2.0.1, rc-motion@npm:^2.2.0, rc-motion@npm:^2.3.0, rc-motion@npm:^2.3.4, rc-motion@npm:^2.4.3, rc-motion@npm:^2.4.4, rc-motion@npm:^2.6.1, rc-motion@npm:^2.6.2, rc-motion@npm:^2.9.0":
+"rc-motion@npm:^2.0.0, rc-motion@npm:^2.0.1, rc-motion@npm:^2.3.0, rc-motion@npm:^2.3.4, rc-motion@npm:^2.4.3, rc-motion@npm:^2.4.4, rc-motion@npm:^2.6.1, rc-motion@npm:^2.6.2, rc-motion@npm:^2.9.0":
   version: 2.9.0
   resolution: "rc-motion@npm:2.9.0"
   dependencies:
@@ -14787,21 +14385,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-notification@npm:~4.6.1":
-  version: 4.6.1
-  resolution: "rc-notification@npm:4.6.1"
-  dependencies:
-    "@babel/runtime": ^7.10.1
-    classnames: 2.x
-    rc-motion: ^2.2.0
-    rc-util: ^5.20.1
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: e953a85a6061103485db33f76b5c25907c273a03fd39be942b26eace33c83b42c26054d0d6f063d2239cc2d52462e9638c818be59da966ea18a74a0b168c4c36
-  languageName: node
-  linkType: hard
-
 "rc-notification@npm:~5.3.0":
   version: 5.3.0
   resolution: "rc-notification@npm:5.3.0"
@@ -14817,7 +14400,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-overflow@npm:^1.0.0, rc-overflow@npm:^1.2.8, rc-overflow@npm:^1.3.1":
+"rc-overflow@npm:^1.3.1":
   version: 1.3.2
   resolution: "rc-overflow@npm:1.3.2"
   dependencies:
@@ -14832,22 +14415,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-pagination@npm:~3.2.0":
-  version: 3.2.0
-  resolution: "rc-pagination@npm:3.2.0"
-  dependencies:
-    "@babel/runtime": ^7.10.1
-    classnames: ^2.2.1
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: deca480696346bbe729945e19fca2b1b50defebd9251ddcc821cc0aa6f58383e9f6fcc7fe4571f48299ba74f30a370687cc099e44e77e2d3d43d4b2d845f91e5
-  languageName: node
-  linkType: hard
-
-"rc-pagination@npm:~4.0.3":
-  version: 4.0.3
-  resolution: "rc-pagination@npm:4.0.3"
+"rc-pagination@npm:~4.0.4":
+  version: 4.0.4
+  resolution: "rc-pagination@npm:4.0.4"
   dependencies:
     "@babel/runtime": ^7.10.1
     classnames: ^2.3.2
@@ -14855,11 +14425,11 @@ __metadata:
   peerDependencies:
     react: ">=16.9.0"
     react-dom: ">=16.9.0"
-  checksum: 7b238f0c9c2d7e3d0d42b54007ca3e60adae67b04455c186a3c9038c52257bdd1ff90690f0ca0087233b35a5132207a0c197e93caeb301ec41085d8162e052a3
+  checksum: 2ff6f2dd6ad0b855d1e747d09534f2efe9a124af4ff4cd5d5550a6cae9392879c06f471d4ee29d2a72c2c416f89dac6e43a7788650db5b8e54001affba2b172c
   languageName: node
   linkType: hard
 
-"rc-picker@npm:^2.7.6, rc-picker@npm:~2.7.6":
+"rc-picker@npm:^2.7.6":
   version: 2.7.6
   resolution: "rc-picker@npm:2.7.6"
   dependencies:
@@ -14906,20 +14476,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-progress@npm:~3.4.2":
-  version: 3.4.2
-  resolution: "rc-progress@npm:3.4.2"
-  dependencies:
-    "@babel/runtime": ^7.10.1
-    classnames: ^2.2.6
-    rc-util: ^5.16.1
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 738aa7a7d00c1a550884bcfa55e0a55bad799f97207889bc9b43c17d2c1b66b6a42e75d635a1c6cdb1696d01f8dddcf8d7d0656356b5871b46b63343db96777b
-  languageName: node
-  linkType: hard
-
 "rc-progress@npm:~3.5.1":
   version: 3.5.1
   resolution: "rc-progress@npm:3.5.1"
@@ -14948,20 +14504,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-rate@npm:~2.9.3":
-  version: 2.9.3
-  resolution: "rc-rate@npm:2.9.3"
-  dependencies:
-    "@babel/runtime": ^7.10.1
-    classnames: ^2.2.5
-    rc-util: ^5.0.1
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 044f51145b414adf351b4e643cc86ecc33c8332fb3499c606aea52ae80e4bfc60e471ff46511ca9770a5c73d42ac80ceacf4e092a9de3ba23a6a8493caa76ba4
-  languageName: node
-  linkType: hard
-
 "rc-resize-observer@npm:^1.0.0, rc-resize-observer@npm:^1.1.0, rc-resize-observer@npm:^1.3.1, rc-resize-observer@npm:^1.4.0":
   version: 1.4.0
   resolution: "rc-resize-observer@npm:1.4.0"
@@ -14977,21 +14519,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-segmented@npm:~2.1.2":
-  version: 2.1.2
-  resolution: "rc-segmented@npm:2.1.2"
-  dependencies:
-    "@babel/runtime": ^7.11.1
-    classnames: ^2.2.1
-    rc-motion: ^2.4.4
-    rc-util: ^5.17.0
-  peerDependencies:
-    react: ">=16.0.0"
-    react-dom: ">=16.0.0"
-  checksum: 9ebba682e70b480cacea79985b6c3fcd024d564a3105a9d48c6a0481a87002f8382987195014ce00e37d455e84dbd0def05d24e3671a52bd89aeeec43c82a91a
-  languageName: node
-  linkType: hard
-
 "rc-segmented@npm:~2.2.2":
   version: 2.2.2
   resolution: "rc-segmented@npm:2.2.2"
@@ -15007,24 +14534,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-select@npm:~14.1.0, rc-select@npm:~14.1.18":
-  version: 14.1.18
-  resolution: "rc-select@npm:14.1.18"
-  dependencies:
-    "@babel/runtime": ^7.10.1
-    classnames: 2.x
-    rc-motion: ^2.0.1
-    rc-overflow: ^1.0.0
-    rc-trigger: ^5.0.4
-    rc-util: ^5.16.1
-    rc-virtual-list: ^3.2.0
-  peerDependencies:
-    react: "*"
-    react-dom: "*"
-  checksum: 6d0bf03480e8e1a8a98550f5ce0fc695f465bac548963014103ad5fc0aae5104f5b6e3bf83cb881362d9d87181a79d4945ffe30efc129c922e040b35eba5e4de
-  languageName: node
-  linkType: hard
-
 "rc-select@npm:~14.10.0":
   version: 14.10.0
   resolution: "rc-select@npm:14.10.0"
@@ -15043,21 +14552,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-slider@npm:~10.0.1":
-  version: 10.0.1
-  resolution: "rc-slider@npm:10.0.1"
-  dependencies:
-    "@babel/runtime": ^7.10.1
-    classnames: ^2.2.5
-    rc-util: ^5.18.1
-    shallowequal: ^1.1.0
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 803f0cc39d43897c0b24549e87232a668d26ff5b0e14b528fd454aa455cdf96ebc60654832c51bb1a6c7b7594ca39017d6c96b3237662471efb863f1723e3d9c
-  languageName: node
-  linkType: hard
-
 "rc-slider@npm:~10.5.0":
   version: 10.5.0
   resolution: "rc-slider@npm:10.5.0"
@@ -15072,20 +14566,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-steps@npm:~5.0.0":
-  version: 5.0.0
-  resolution: "rc-steps@npm:5.0.0"
-  dependencies:
-    "@babel/runtime": ^7.16.7
-    classnames: ^2.2.3
-    rc-util: ^5.16.1
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: b58507b807d648a425b339fbbd49472da0b7213e5464cd021d2cbcb3273818e4bf8d6e6b2d5dda7608160887e156a14f97585d3029ce9f501db9444bcb365618
-  languageName: node
-  linkType: hard
-
 "rc-steps@npm:~6.0.1":
   version: 6.0.1
   resolution: "rc-steps@npm:6.0.1"
@@ -15100,20 +14580,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-switch@npm:~3.2.2":
-  version: 3.2.2
-  resolution: "rc-switch@npm:3.2.2"
-  dependencies:
-    "@babel/runtime": ^7.10.1
-    classnames: ^2.2.1
-    rc-util: ^5.0.1
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: c0242385fa93a9aa5cc65500cf6f83a673ff91caf70eed8c1335af2cd695aafda2c4c972da0daae8ea26478e314b9a9212074364d44110ff9b453c0d3debb851
-  languageName: node
-  linkType: hard
-
 "rc-switch@npm:~4.1.0":
   version: 4.1.0
   resolution: "rc-switch@npm:4.1.0"
@@ -15128,25 +14594,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-table@npm:~7.26.0":
-  version: 7.26.0
-  resolution: "rc-table@npm:7.26.0"
-  dependencies:
-    "@babel/runtime": ^7.10.1
-    classnames: ^2.2.5
-    rc-resize-observer: ^1.1.0
-    rc-util: ^5.22.5
-    shallowequal: ^1.1.0
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 78970d0140203d57541bf5952c542ca7448608bbd29da949e51007c4b3f94570a35b4e95b35ce4d49954c6c88a9e44d2f36f8f4015bfe1b97e926a381141d251
-  languageName: node
-  linkType: hard
-
-"rc-table@npm:~7.36.0":
-  version: 7.36.0
-  resolution: "rc-table@npm:7.36.0"
+"rc-table@npm:~7.36.1":
+  version: 7.36.1
+  resolution: "rc-table@npm:7.36.1"
   dependencies:
     "@babel/runtime": ^7.10.1
     "@rc-component/context": ^1.4.0
@@ -15157,59 +14607,25 @@ __metadata:
   peerDependencies:
     react: ">=16.9.0"
     react-dom: ">=16.9.0"
-  checksum: 4db1fbd348bd2ebde767f87e047abd07c60a2ddd054f74bf3193a6bf789714512c5aca36e946ee7491d08b202b625a652c7ac9f48d213f034816a6ad6d8dcffe
+  checksum: b4441944eb0feb011091caeb433d455dbf52c8c16b39b0730a48bce05b28ce8928344053c8b9eb5f3dab60f1590edcfaeca05b5cf6e9c77832cf379e6f1568c7
   languageName: node
   linkType: hard
 
 "rc-tabs@npm:~12.14.1":
   version: 12.14.1
-  resolution: "rc-tabs@npm:12.14.1"
-  dependencies:
-    "@babel/runtime": ^7.11.2
-    classnames: 2.x
-    rc-dropdown: ~4.1.0
-    rc-menu: ~9.12.0
-    rc-motion: ^2.6.2
-    rc-resize-observer: ^1.0.0
-    rc-util: ^5.34.1
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 6f8c39336670f7f21b970a4fcad73b711f45982c76ea2d83a4c00e7d06f707da21b107211548b16320cd13ba292eb5a4edccdc95179aaa88e6db24eea488e18c
-  languageName: node
-  linkType: hard
-
-"rc-tabs@npm:~12.5.10":
-  version: 12.5.10
-  resolution: "rc-tabs@npm:12.5.10"
-  dependencies:
-    "@babel/runtime": ^7.11.2
-    classnames: 2.x
-    rc-dropdown: ~4.0.0
-    rc-menu: ~9.8.0
-    rc-motion: ^2.6.2
-    rc-resize-observer: ^1.0.0
-    rc-util: ^5.16.0
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 0b26b61ce96f525c2d4c74b89561997176b8673c842d28f542cbc056cc26ee16953ea34d9a591b599872717a342ffbdded4e6115d95bcfe1ec594048fe669d31
-  languageName: node
-  linkType: hard
-
-"rc-textarea@npm:^0.4.0, rc-textarea@npm:~0.4.7":
-  version: 0.4.7
-  resolution: "rc-textarea@npm:0.4.7"
+  resolution: "rc-tabs@npm:12.14.1"
   dependencies:
-    "@babel/runtime": ^7.10.1
-    classnames: ^2.2.1
+    "@babel/runtime": ^7.11.2
+    classnames: 2.x
+    rc-dropdown: ~4.1.0
+    rc-menu: ~9.12.0
+    rc-motion: ^2.6.2
     rc-resize-observer: ^1.0.0
-    rc-util: ^5.24.4
-    shallowequal: ^1.1.0
+    rc-util: ^5.34.1
   peerDependencies:
     react: ">=16.9.0"
     react-dom: ">=16.9.0"
-  checksum: 3e682c81aeca9da03b86a18c6a4c3f580d8250fb3042f32de9fb05aad8b64522a88a02b40b99ca8dd9fd8d6869edf5832eee8537b8af0f1b662f63824577f4ce
+  checksum: 6f8c39336670f7f21b970a4fcad73b711f45982c76ea2d83a4c00e7d06f707da21b107211548b16320cd13ba292eb5a4edccdc95179aaa88e6db24eea488e18c
   languageName: node
   linkType: hard
 
@@ -15229,23 +14645,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-tooltip@npm:~5.2.2":
-  version: 5.2.2
-  resolution: "rc-tooltip@npm:5.2.2"
-  dependencies:
-    "@babel/runtime": ^7.11.2
-    classnames: ^2.3.1
-    rc-trigger: ^5.0.0
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: df6a59096876becf930df0347cfe6379cde9647f338a333dd0aae99039bf45e72db866f03ab6b5fd5ce616b074ec888f50e61ebe0f8d2a135c2617595dbf0583
-  languageName: node
-  linkType: hard
-
-"rc-tooltip@npm:~6.1.2":
-  version: 6.1.2
-  resolution: "rc-tooltip@npm:6.1.2"
+"rc-tooltip@npm:~6.1.3":
+  version: 6.1.3
+  resolution: "rc-tooltip@npm:6.1.3"
   dependencies:
     "@babel/runtime": ^7.11.2
     "@rc-component/trigger": ^1.18.0
@@ -15253,7 +14655,7 @@ __metadata:
   peerDependencies:
     react: ">=16.9.0"
     react-dom: ">=16.9.0"
-  checksum: 0450fe0bac954fe13cc1117cef1e632ec65e5fbb7bc9d31069925e7df026ff39211cad95509ec93500541bf55e70efaf0ee99694fdd18deac7e804b1b3f72240
+  checksum: f67cf4e409d110f9f4098807303bd4590297f45ffb21d20f3c59a93de45b38c477eeee346e78b9c2e07bffd2ed53e22f435023113a08b553ed10e269754507e2
   languageName: node
   linkType: hard
 
@@ -15273,38 +14675,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-tree-select@npm:~5.5.5":
-  version: 5.5.5
-  resolution: "rc-tree-select@npm:5.5.5"
-  dependencies:
-    "@babel/runtime": ^7.10.1
-    classnames: 2.x
-    rc-select: ~14.1.0
-    rc-tree: ~5.7.0
-    rc-util: ^5.16.1
-  peerDependencies:
-    react: "*"
-    react-dom: "*"
-  checksum: 6d7de4d9b80583b3bd39be0c8bad5138a62770805048da9fd177eb3f21acc7d02cd68ea64d9ca3accf8bfefa41b0db84c1ac50a3637c7b3c97060d7d3e9d60e5
-  languageName: node
-  linkType: hard
-
-"rc-tree@npm:~5.7.0, rc-tree@npm:~5.7.12":
-  version: 5.7.12
-  resolution: "rc-tree@npm:5.7.12"
-  dependencies:
-    "@babel/runtime": ^7.10.1
-    classnames: 2.x
-    rc-motion: ^2.0.1
-    rc-util: ^5.16.1
-    rc-virtual-list: ^3.5.1
-  peerDependencies:
-    react: "*"
-    react-dom: "*"
-  checksum: 107a85407c774616cd06bc54164f3413d4e85fbe0909efee16d6bf45486ee624ba67ff07e523c25249724d6be99ec155a2503d89e14d5b3ed28acf06b4cdabab
-  languageName: node
-  linkType: hard
-
 "rc-tree@npm:~5.8.1, rc-tree@npm:~5.8.2":
   version: 5.8.2
   resolution: "rc-tree@npm:5.8.2"
@@ -15321,7 +14691,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-trigger@npm:^5.0.0, rc-trigger@npm:^5.0.4, rc-trigger@npm:^5.1.2, rc-trigger@npm:^5.3.1, rc-trigger@npm:^5.3.4":
+"rc-trigger@npm:^5.0.4, rc-trigger@npm:^5.3.1":
   version: 5.3.4
   resolution: "rc-trigger@npm:5.3.4"
   dependencies:
@@ -15337,9 +14707,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-upload@npm:~4.3.5":
-  version: 4.3.5
-  resolution: "rc-upload@npm:4.3.5"
+"rc-upload@npm:~4.5.2":
+  version: 4.5.2
+  resolution: "rc-upload@npm:4.5.2"
   dependencies:
     "@babel/runtime": ^7.18.3
     classnames: ^2.2.5
@@ -15347,11 +14717,11 @@ __metadata:
   peerDependencies:
     react: ">=16.9.0"
     react-dom: ">=16.9.0"
-  checksum: 00758b3f34d5850a37cba8e1b4d7c5e2e60c8bd21e44b42c4ac2fe5f641575464e4209d7b9bdbdab70e46ff55705f5be71b1df7f13bbe15fd5950e895474c0cd
+  checksum: 5a7e1942657d91d78dab3a84367629d8dac7c3dcd961d8839d1d481e982504de2944c74c5b79fb63e3971ff84bc667e841e0e4305af10b37615c185e6d92d644
   languageName: node
   linkType: hard
 
-"rc-util@npm:^5.0.1, rc-util@npm:^5.0.6, rc-util@npm:^5.16.0, rc-util@npm:^5.16.1, rc-util@npm:^5.17.0, rc-util@npm:^5.18.1, rc-util@npm:^5.19.2, rc-util@npm:^5.2.0, rc-util@npm:^5.2.1, rc-util@npm:^5.20.1, rc-util@npm:^5.21.0, rc-util@npm:^5.21.2, rc-util@npm:^5.22.5, rc-util@npm:^5.23.0, rc-util@npm:^5.24.4, rc-util@npm:^5.25.2, rc-util@npm:^5.26.0, rc-util@npm:^5.27.0, rc-util@npm:^5.28.0, rc-util@npm:^5.30.0, rc-util@npm:^5.31.1, rc-util@npm:^5.32.2, rc-util@npm:^5.34.1, rc-util@npm:^5.35.0, rc-util@npm:^5.36.0, rc-util@npm:^5.37.0, rc-util@npm:^5.38.0, rc-util@npm:^5.38.1, rc-util@npm:^5.4.0, rc-util@npm:^5.6.1, rc-util@npm:^5.8.0, rc-util@npm:^5.9.4":
+"rc-util@npm:^5.0.1, rc-util@npm:^5.16.1, rc-util@npm:^5.17.0, rc-util@npm:^5.18.1, rc-util@npm:^5.19.2, rc-util@npm:^5.2.0, rc-util@npm:^5.20.1, rc-util@npm:^5.21.0, rc-util@npm:^5.24.4, rc-util@npm:^5.25.2, rc-util@npm:^5.26.0, rc-util@npm:^5.27.0, rc-util@npm:^5.28.0, rc-util@npm:^5.30.0, rc-util@npm:^5.31.1, rc-util@npm:^5.32.2, rc-util@npm:^5.34.1, rc-util@npm:^5.35.0, rc-util@npm:^5.36.0, rc-util@npm:^5.37.0, rc-util@npm:^5.38.0, rc-util@npm:^5.38.1, rc-util@npm:^5.8.0, rc-util@npm:^5.9.4":
   version: 5.38.1
   resolution: "rc-util@npm:5.38.1"
   dependencies:
@@ -15364,7 +14734,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-virtual-list@npm:^3.11.1, rc-virtual-list@npm:^3.2.0, rc-virtual-list@npm:^3.5.1, rc-virtual-list@npm:^3.5.2":
+"rc-virtual-list@npm:^3.11.1, rc-virtual-list@npm:^3.5.1, rc-virtual-list@npm:^3.5.2":
   version: 3.11.3
   resolution: "rc-virtual-list@npm:3.11.3"
   dependencies:
@@ -15413,16 +14783,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:17, react-dom@npm:^17, react-dom@npm:^17.0.2":
-  version: 17.0.2
-  resolution: "react-dom@npm:17.0.2"
+"react-dom@npm:^18.2.0":
+  version: 18.2.0
+  resolution: "react-dom@npm:18.2.0"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-    scheduler: ^0.20.2
+    scheduler: ^0.23.0
   peerDependencies:
-    react: 17.0.2
-  checksum: 1c1eaa3bca7c7228d24b70932e3d7c99e70d1d04e13bb0843bbf321582bc25d7961d6b8a6978a58a598af2af496d1cedcfb1bf65f6b0960a0a8161cb8dab743c
+    react: ^18.2.0
+  checksum: 7d323310bea3a91be2965f9468d552f201b1c27891e45ddc2d6b8f717680c95a75ae0bc1e3f5cf41472446a2589a75aed4483aee8169287909fcd59ad149e8cc
   languageName: node
   linkType: hard
 
@@ -15439,19 +14808,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-easy-crop@npm:^5.0.2":
-  version: 5.0.3
-  resolution: "react-easy-crop@npm:5.0.3"
-  dependencies:
-    normalize-wheel: ^1.0.1
-    tslib: 2.0.1
-  peerDependencies:
-    react: ">=16.4.0"
-    react-dom: ">=16.4.0"
-  checksum: 58cdc85350839b6efc69bef8bf4d93ca5f8431e7482c86e1424d585b4697d49b220d830e27cf3eb5d78fff11641a8bac39fe5ef31d090bba0fdbc2b9f2b67044
-  languageName: node
-  linkType: hard
-
 "react-fast-compare@npm:^3.0.1, react-fast-compare@npm:^3.1.1":
   version: 3.2.2
   resolution: "react-fast-compare@npm:3.2.2"
@@ -15549,8 +14905,8 @@ __metadata:
   linkType: hard
 
 "react-joyride@npm:^2.4.0":
-  version: 2.7.1
-  resolution: "react-joyride@npm:2.7.1"
+  version: 2.7.2
+  resolution: "react-joyride@npm:2.7.2"
   dependencies:
     "@gilbarbara/deep-equal": ^0.3.1
     "@gilbarbara/helpers": ^0.9.0
@@ -15567,7 +14923,7 @@ __metadata:
   peerDependencies:
     react: 15 - 18
     react-dom: 15 - 18
-  checksum: ea0eaa93318b29aa6e527509a546bbd52ba7109c4ee54c04796fdbd35de8ebbdd53d8ff9f90863ca8cc7d35536c035fac0421df33d065066f0c1f7094995a8aa
+  checksum: acd27052770ac784b4acfd075764f1c4ca7060751f1ea47a4a4ae9a26376533dbc7a1a0d587220411dc4ced238bc11362724039e7de876ae249980e1f0f0ba32
   languageName: node
   linkType: hard
 
@@ -15620,8 +14976,8 @@ __metadata:
   linkType: hard
 
 "react-player@npm:^2.11.0":
-  version: 2.13.0
-  resolution: "react-player@npm:2.13.0"
+  version: 2.14.1
+  resolution: "react-player@npm:2.14.1"
   dependencies:
     deepmerge: ^4.0.0
     load-script: ^1.0.0
@@ -15630,7 +14986,7 @@ __metadata:
     react-fast-compare: ^3.0.1
   peerDependencies:
     react: ">=16.6.0"
-  checksum: 7e0e69e0ac37227ab5bfdda73991d4f5d4741585562f3ad9cfb787ae2c427510b69ddf6ef3f23f319d699b790af852fca57f3e9b1dae94f385d545a3db200d67
+  checksum: 19b496d26d571a8dd7cb60930ba32e31d83a17cf11846e59d70954c206d025665106528a1fafc429ce08fd2cdfaadbd8301746a5f92a6c13b8c27963d0c80a05
   languageName: node
   linkType: hard
 
@@ -15905,22 +15261,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:17, react@npm:^17, react@npm:^17.0.2":
-  version: 17.0.2
-  resolution: "react@npm:17.0.2"
+"react@npm:^18.2.0":
+  version: 18.2.0
+  resolution: "react@npm:18.2.0"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-  checksum: b254cc17ce3011788330f7bbf383ab653c6848902d7936a87b09d835d091e3f295f7e9dd1597c6daac5dc80f90e778c8230218ba8ad599f74adcc11e33b9d61b
-  languageName: node
-  linkType: hard
-
-"reactcss@npm:^1.2.3":
-  version: 1.2.3
-  resolution: "reactcss@npm:1.2.3"
-  dependencies:
-    lodash: ^4.0.1
-  checksum: c53e386a0881f1477e1cff661f6a6ad4c662230941f3827862193ac30f9b75cdf7bc7b4c7e5ca543d3e4e80fee1a3e9fa0056c206b1c0423726c41773ab3fe45
+  checksum: 88e38092da8839b830cda6feef2e8505dec8ace60579e46aa5490fc3dc9bba0bd50336507dc166f43e3afc1c42939c09fe33b25fae889d6f402721dcd78fca1b
   languageName: node
   linkType: hard
 
@@ -15936,7 +15282,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"readable-stream@npm:^2.0.1, readable-stream@npm:^2.2.2, readable-stream@npm:^2.3.6":
+"readable-stream@npm:^2.0.1, readable-stream@npm:^2.2.2":
   version: 2.3.8
   resolution: "readable-stream@npm:2.3.8"
   dependencies:
@@ -16032,15 +15378,15 @@ __metadata:
   linkType: hard
 
 "redux-saga@npm:^1.1.3":
-  version: 1.2.3
-  resolution: "redux-saga@npm:1.2.3"
+  version: 1.3.0
+  resolution: "redux-saga@npm:1.3.0"
   dependencies:
-    "@redux-saga/core": ^1.2.3
-  checksum: 5c70799272cfbc94e046992d04bbe967e9f86ca3a35aa0c1562e6727e85b96b1a5aae68e180fdbbbc58de453dc22b39d99c81d7c604fbda7c45a8b60a729ef9d
+    "@redux-saga/core": ^1.3.0
+  checksum: 77c2fa106f6fdee7bb88970d6bdd60d6ba961a271b06c287636788d8597c437b615f7af1f65f3ed1d9e9972894e77443ccc6cfe6a24b1fd840cd9c9504c2cef2
   languageName: node
   linkType: hard
 
-"redux@npm:^4.0.0, redux@npm:^4.0.4":
+"redux@npm:^4.0.0":
   version: 4.2.1
   resolution: "redux@npm:4.2.1"
   dependencies:
@@ -16087,9 +15433,9 @@ __metadata:
   linkType: hard
 
 "regenerator-runtime@npm:^0.14.0":
-  version: 0.14.0
-  resolution: "regenerator-runtime@npm:0.14.0"
-  checksum: 1c977ad82a82a4412e4f639d65d22be376d3ebdd30da2c003eeafdaaacd03fc00c2320f18120007ee700900979284fc78a9f00da7fb593f6e6eeebc673fba9a3
+  version: 0.14.1
+  resolution: "regenerator-runtime@npm:0.14.1"
+  checksum: 9f57c93277b5585d3c83b0cf76be47b473ae8c6d9142a46ce8b0291a04bb2cf902059f0f8445dcabb3fb7378e5fe4bb4ea1e008876343d42e46d3b484534ce38
   languageName: node
   linkType: hard
 
@@ -16572,8 +15918,8 @@ __metadata:
   linkType: hard
 
 "rollup-plugin-visualizer@npm:^5.9.2":
-  version: 5.11.0
-  resolution: "rollup-plugin-visualizer@npm:5.11.0"
+  version: 5.12.0
+  resolution: "rollup-plugin-visualizer@npm:5.12.0"
   dependencies:
     open: ^8.4.0
     picomatch: ^2.3.1
@@ -16586,7 +15932,7 @@ __metadata:
       optional: true
   bin:
     rollup-plugin-visualizer: dist/bin/cli.js
-  checksum: 9f4469f83a63f57462258f7e4327cb85f5218cc3e49de9f06213728e35aff72f613d48331788e3e666bb16ccd5a9ab7e478cc1dd8cbceafb78bf397c8e30cc4d
+  checksum: 17dc10a93d4bd457c8bb7796a57c284487fb00f4b9703a33a1a954f5d40c66a89b24aca98564569922456f4fa8f72281c3ef96a95502195e6930b3fac62fce8e
   languageName: node
   linkType: hard
 
@@ -16627,6 +15973,60 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rollup@npm:^4.2.0":
+  version: 4.9.4
+  resolution: "rollup@npm:4.9.4"
+  dependencies:
+    "@rollup/rollup-android-arm-eabi": 4.9.4
+    "@rollup/rollup-android-arm64": 4.9.4
+    "@rollup/rollup-darwin-arm64": 4.9.4
+    "@rollup/rollup-darwin-x64": 4.9.4
+    "@rollup/rollup-linux-arm-gnueabihf": 4.9.4
+    "@rollup/rollup-linux-arm64-gnu": 4.9.4
+    "@rollup/rollup-linux-arm64-musl": 4.9.4
+    "@rollup/rollup-linux-riscv64-gnu": 4.9.4
+    "@rollup/rollup-linux-x64-gnu": 4.9.4
+    "@rollup/rollup-linux-x64-musl": 4.9.4
+    "@rollup/rollup-win32-arm64-msvc": 4.9.4
+    "@rollup/rollup-win32-ia32-msvc": 4.9.4
+    "@rollup/rollup-win32-x64-msvc": 4.9.4
+    "@types/estree": 1.0.5
+    fsevents: ~2.3.2
+  dependenciesMeta:
+    "@rollup/rollup-android-arm-eabi":
+      optional: true
+    "@rollup/rollup-android-arm64":
+      optional: true
+    "@rollup/rollup-darwin-arm64":
+      optional: true
+    "@rollup/rollup-darwin-x64":
+      optional: true
+    "@rollup/rollup-linux-arm-gnueabihf":
+      optional: true
+    "@rollup/rollup-linux-arm64-gnu":
+      optional: true
+    "@rollup/rollup-linux-arm64-musl":
+      optional: true
+    "@rollup/rollup-linux-riscv64-gnu":
+      optional: true
+    "@rollup/rollup-linux-x64-gnu":
+      optional: true
+    "@rollup/rollup-linux-x64-musl":
+      optional: true
+    "@rollup/rollup-win32-arm64-msvc":
+      optional: true
+    "@rollup/rollup-win32-ia32-msvc":
+      optional: true
+    "@rollup/rollup-win32-x64-msvc":
+      optional: true
+    fsevents:
+      optional: true
+  bin:
+    rollup: dist/bin/rollup
+  checksum: 134b1fd8886a1dc86b2cadada979174e736a39aec12d069261fe8b799ad0c4aa3213188ea49adeee155669315016617260e43eea754436c50121aa359899da4d
+  languageName: node
+  linkType: hard
+
 "rtl-css-js@npm:^1.16.1":
   version: 1.16.1
   resolution: "rtl-css-js@npm:1.16.1"
@@ -16712,7 +16112,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sax@npm:>=0.6.0, sax@npm:^1.2.4":
+"sax@npm:^1.2.4":
   version: 1.3.0
   resolution: "sax@npm:1.3.0"
   checksum: 238ab3a9ba8c8f8aaf1c5ea9120386391f6ee0af52f1a6a40bbb6df78241dd05d782f2359d614ac6aae08c4c4125208b456548a6cf68625aa4fe178486e63ecd
@@ -16737,16 +16137,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scheduler@npm:^0.20.2":
-  version: 0.20.2
-  resolution: "scheduler@npm:0.20.2"
-  dependencies:
-    loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-  checksum: c4b35cf967c8f0d3e65753252d0f260271f81a81e427241295c5a7b783abf4ea9e905f22f815ab66676f5313be0a25f47be582254db8f9241b259213e999b8fc
-  languageName: node
-  linkType: hard
-
 "scheduler@npm:^0.23.0":
   version: 0.23.0
   resolution: "scheduler@npm:0.23.0"
@@ -16763,15 +16153,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scroll-into-view-if-needed@npm:^2.2.25":
-  version: 2.2.31
-  resolution: "scroll-into-view-if-needed@npm:2.2.31"
-  dependencies:
-    compute-scroll-into-view: ^1.0.20
-  checksum: 93b28f3723a462245b40d4120c40c542c8449473e2b157a5f8e18f04d95d66cd35249d96c625e8a440a56891f7d8905b1d026c690bdda07fcfb4f1a48d643ad1
-  languageName: node
-  linkType: hard
-
 "scroll-into-view-if-needed@npm:^3.1.0":
   version: 3.1.0
   resolution: "scroll-into-view-if-needed@npm:3.1.0"
@@ -16795,15 +16176,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sdk-base@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "sdk-base@npm:2.0.1"
-  dependencies:
-    get-ready: ~1.0.0
-  checksum: 8475cca6182ae16078e863cf251b995ce925710619af1a1adca46a21f0f1a3169dc005051f3041761420c342038712a2e09f67b0e034419a9dbe3b07a2bf8b00
-  languageName: node
-  linkType: hard
-
 "sdp@npm:^3.0.2":
   version: 3.2.0
   resolution: "sdp@npm:3.2.0"
@@ -16811,7 +16183,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:^5.0.1, semver@npm:^5.6.0":
+"semver@npm:^5.6.0":
   version: 5.7.2
   resolution: "semver@npm:5.7.2"
   bin:
@@ -16907,7 +16279,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"shallowequal@npm:^1.1.0":
+"shallowequal@npm:1.1.0, shallowequal@npm:^1.1.0":
   version: 1.1.0
   resolution: "shallowequal@npm:1.1.0"
   checksum: f4c1de0837f106d2dbbfd5d0720a5d059d1c66b42b580965c8f06bb1db684be8783538b684092648c981294bf817869f743a066538771dbecb293df78f765e00
@@ -17235,13 +16607,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"statuses@npm:^1.3.1":
-  version: 1.5.0
-  resolution: "statuses@npm:1.5.0"
-  checksum: c469b9519de16a4bb19600205cffb39ee471a5f17b82589757ca7bd40a8d92ebb6ed9f98b5a540c5d302ccbc78f15dc03cc0280dd6e00df1335568a5d5758a5c
-  languageName: node
-  linkType: hard
-
 "stealthy-require@npm:^1.1.1":
   version: 1.1.1
   resolution: "stealthy-require@npm:1.1.1"
@@ -17258,26 +16623,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stream-http@npm:2.8.2":
-  version: 2.8.2
-  resolution: "stream-http@npm:2.8.2"
-  dependencies:
-    builtin-status-codes: ^3.0.0
-    inherits: ^2.0.1
-    readable-stream: ^2.3.6
-    to-arraybuffer: ^1.0.0
-    xtend: ^4.0.0
-  checksum: d72df90581ba5acb93b84d5e80fda1b40b149c3e0c893193b378dc4cc262dd737c202b0c8b0a8155a063ede8bc719c393e3ea089fd10f29a72d2f64676c990f5
-  languageName: node
-  linkType: hard
-
-"stream-wormhole@npm:^1.0.4":
-  version: 1.1.0
-  resolution: "stream-wormhole@npm:1.1.0"
-  checksum: cc19e0235c5d031bd530fa83913c807d9525fa4ba33d51691dd822c0726b8b7ef138b34f289d063a3018cddba67d3ba7fd0ecedaa97242a0f1ed2eed3c6a2ab1
-  languageName: node
-  linkType: hard
-
 "string-argv@npm:0.3.2":
   version: 0.3.2
   resolution: "string-argv@npm:0.3.2"
@@ -17475,7 +16820,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"style-mod@npm:^4.0.0":
+"style-mod@npm:^4.0.0, style-mod@npm:^4.1.0":
   version: 4.1.0
   resolution: "style-mod@npm:4.1.0"
   checksum: 8402b14ca11113a3640d46b3cf7ba49f05452df7846bc5185a3535d9b6a64a3019e7fb636b59ccbb7816aeb0725b24723e77a85b05612a9360e419958e13b4e6
@@ -17491,42 +16836,40 @@ __metadata:
   languageName: node
   linkType: hard
 
-"styled-components@npm:^5.3.3":
-  version: 5.3.11
-  resolution: "styled-components@npm:5.3.11"
+"styled-components@npm:^6.1.6":
+  version: 6.1.6
+  resolution: "styled-components@npm:6.1.6"
   dependencies:
-    "@babel/helper-module-imports": ^7.0.0
-    "@babel/traverse": ^7.4.5
-    "@emotion/is-prop-valid": ^1.1.0
-    "@emotion/stylis": ^0.8.4
-    "@emotion/unitless": ^0.7.4
-    babel-plugin-styled-components: ">= 1.12.0"
-    css-to-react-native: ^3.0.0
-    hoist-non-react-statics: ^3.0.0
-    shallowequal: ^1.1.0
-    supports-color: ^5.5.0
+    "@emotion/is-prop-valid": 1.2.1
+    "@emotion/unitless": 0.8.0
+    "@types/stylis": 4.2.0
+    css-to-react-native: 3.2.0
+    csstype: 3.1.2
+    postcss: 8.4.31
+    shallowequal: 1.1.0
+    stylis: 4.3.1
+    tslib: 2.5.0
   peerDependencies:
     react: ">= 16.8.0"
     react-dom: ">= 16.8.0"
-    react-is: ">= 16.8.0"
-  checksum: 10edd4dae3b0231ec02d86bdd09c88e894eedfa7e9d4f8e562b09fb69c67a27d586cbcf35c785002d59b3bf11e6c0940b0efce40d13ae9ed148b26b1dc8f3284
+  checksum: 8bcda3719af222ebde8be358d0db4019e6fb03b6f9b19797ec20acc26aad4b1ede83b3820b25b8dd4aa7a1dfa7bb26d82e69f063b8e1f3b0d8a8e6e095f1b643
   languageName: node
   linkType: hard
 
-"stylis@npm:^4.0.13, stylis@npm:^4.1.1, stylis@npm:^4.1.3, stylis@npm:^4.3.0":
-  version: 4.3.0
-  resolution: "stylis@npm:4.3.0"
-  checksum: 6120de3f03eacf3b5adc8e7919c4cca991089156a6badc5248752a3088106afaaf74996211a6817a7760ebeadca09004048eea31875bd8d4df51386365c50025
+"stylis@npm:4.3.1, stylis@npm:^4.0.13, stylis@npm:^4.1.1, stylis@npm:^4.1.3, stylis@npm:^4.3.0":
+  version: 4.3.1
+  resolution: "stylis@npm:4.3.1"
+  checksum: d365f1b008677b2147e8391e9cf20094a4202a5f9789562e7d9d0a3bd6f0b3067d39e8fd17cce5323903a56f6c45388e3d839e9c0bb5a738c91726992b14966d
   languageName: node
   linkType: hard
 
 "sucrase@npm:^3.20.3":
-  version: 3.34.0
-  resolution: "sucrase@npm:3.34.0"
+  version: 3.35.0
+  resolution: "sucrase@npm:3.35.0"
   dependencies:
     "@jridgewell/gen-mapping": ^0.3.2
     commander: ^4.0.0
-    glob: 7.1.6
+    glob: ^10.3.10
     lines-and-columns: ^1.1.6
     mz: ^2.7.0
     pirates: ^4.0.1
@@ -17534,11 +16877,11 @@ __metadata:
   bin:
     sucrase: bin/sucrase
     sucrase-node: bin/sucrase-node
-  checksum: 61860063bdf6103413698e13247a3074d25843e91170825a9752e4af7668ffadd331b6e99e92fc32ee5b3c484ee134936f926fa9039d5711fafff29d017a2110
+  checksum: 9fc5792a9ab8a14dcf9c47dcb704431d35c1cdff1d17d55d382a31c2e8e3063870ad32ce120a80915498486246d612e30cda44f1624d9d9a10423e1a43487ad1
   languageName: node
   linkType: hard
 
-"supports-color@npm:^5.3.0, supports-color@npm:^5.5.0":
+"supports-color@npm:^5.3.0":
   version: 5.5.0
   resolution: "supports-color@npm:5.5.0"
   dependencies:
@@ -17597,28 +16940,19 @@ __metadata:
   linkType: hard
 
 "svgo@npm:^3.0.0":
-  version: 3.1.0
-  resolution: "svgo@npm:3.1.0"
+  version: 3.2.0
+  resolution: "svgo@npm:3.2.0"
   dependencies:
     "@trysound/sax": 0.2.0
     commander: ^7.2.0
     css-select: ^5.1.0
-    css-tree: ^2.2.1
+    css-tree: ^2.3.1
     css-what: ^6.1.0
-    csso: 5.0.5
+    csso: ^5.0.5
     picocolors: ^1.0.0
   bin:
     svgo: ./bin/svgo
-  checksum: c07d49757264d9122090e8b6c674c25d25608feec7eb5df5276f8c8e3ec113e9b515ffc3cb5b57a4c24942980b15b5078321105a15f379650271dc1f25b05eb6
-  languageName: node
-  linkType: hard
-
-"swr@npm:^1.2.0":
-  version: 1.3.0
-  resolution: "swr@npm:1.3.0"
-  peerDependencies:
-    react: ^16.11.0 || ^17.0.0 || ^18.0.0
-  checksum: e7a184f0d560e9c8be85c023cc8e65e56a88a6ed46f9394b301b07f838edca23d2e303685319a4fcd620b81d447a7bcb489c7fa0a752c259f91764903c690cdb
+  checksum: 42168748a5586d85d447bec2867bc19814a4897f973ff023e6aad4ff19ba7408be37cf3736e982bb78e3f1e52df8785da5dca77a8ebc64c0ebd6fcf9915d2895
   languageName: node
   linkType: hard
 
@@ -17731,13 +17065,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"through@npm:~2.3":
-  version: 2.3.8
-  resolution: "through@npm:2.3.8"
-  checksum: a38c3e059853c494af95d50c072b83f8b676a9ba2818dcc5b108ef252230735c54e0185437618596c790bbba8fcdaef5b290405981ffa09dce67b1f1bf190cbd
-  languageName: node
-  linkType: hard
-
 "tiny-invariant@npm:^1.0.2, tiny-invariant@npm:^1.1.0":
   version: 1.3.1
   resolution: "tiny-invariant@npm:1.3.1"
@@ -17752,13 +17079,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tinycolor2@npm:^1.4.2":
-  version: 1.6.0
-  resolution: "tinycolor2@npm:1.6.0"
-  checksum: 6df4d07fceeedc0a878d7bac47e2cd47c1ceeb1078340a9eb8a295bc0651e17c750f73d47b3028d829f30b85c15e0572c0fd4142083e4c21a30a597e47f47230
-  languageName: node
-  linkType: hard
-
 "tmpl@npm:1.0.5":
   version: 1.0.5
   resolution: "tmpl@npm:1.0.5"
@@ -17766,13 +17086,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"to-arraybuffer@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "to-arraybuffer@npm:1.0.1"
-  checksum: 31433c10b388722729f5da04c6b2a06f40dc84f797bb802a5a171ced1e599454099c6c5bc5118f4b9105e7d049d3ad9d0f71182b77650e4fdb04539695489941
-  languageName: node
-  linkType: hard
-
 "to-fast-properties@npm:^2.0.0":
   version: 2.0.0
   resolution: "to-fast-properties@npm:2.0.0"
@@ -17796,13 +17109,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"toposort@npm:^2.0.2":
-  version: 2.0.2
-  resolution: "toposort@npm:2.0.2"
-  checksum: d64c74b570391c9432873f48e231b439ee56bc49f7cb9780b505cfdf5cb832f808d0bae072515d93834dd6bceca5bb34448b5b4b408335e4d4716eaf68195dcb
-  languageName: node
-  linkType: hard
-
 "tough-cookie@npm:^2.3.3, tough-cookie@npm:~2.5.0":
   version: 2.5.0
   resolution: "tough-cookie@npm:2.5.0"
@@ -17930,15 +17236,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tsconfig-paths@npm:^3.14.2":
-  version: 3.14.2
-  resolution: "tsconfig-paths@npm:3.14.2"
+"tsconfig-paths@npm:^3.15.0":
+  version: 3.15.0
+  resolution: "tsconfig-paths@npm:3.15.0"
   dependencies:
     "@types/json5": ^0.0.29
     json5: ^1.0.2
     minimist: ^1.2.6
     strip-bom: ^3.0.0
-  checksum: a6162eaa1aed680537f93621b82399c7856afd10ec299867b13a0675e981acac4e0ec00896860480efc59fc10fd0b16fdc928c0b885865b52be62cadac692447
+  checksum: 59f35407a390d9482b320451f52a411a256a130ff0e7543d18c6f20afab29ac19fbe55c360a93d6476213cc335a4d76ce90f67df54c4e9037f7d240920832201
   languageName: node
   linkType: hard
 
@@ -17953,13 +17259,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:2.0.1":
-  version: 2.0.1
-  resolution: "tslib@npm:2.0.1"
-  checksum: 507f32fc24a614c5097d414b622373b6cbb99e305413517e7fd49bef1e63570c0dd15b417ae68152088c3496218e82a5d8c7cd6b48c7a32dcee1a3f7191fff74
-  languageName: node
-  linkType: hard
-
 "tslib@npm:2.3.0":
   version: 2.3.0
   resolution: "tslib@npm:2.3.0"
@@ -17967,6 +17266,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tslib@npm:2.5.0":
+  version: 2.5.0
+  resolution: "tslib@npm:2.5.0"
+  checksum: ae3ed5f9ce29932d049908ebfdf21b3a003a85653a9a140d614da6b767a93ef94f460e52c3d787f0e4f383546981713f165037dc2274df212ea9f8a4541004e1
+  languageName: node
+  linkType: hard
+
 "tslib@npm:^1.8.1, tslib@npm:^1.9.3":
   version: 1.14.1
   resolution: "tslib@npm:1.14.1"
@@ -17974,7 +17280,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.0, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.3.0, tslib@npm:^2.4.0, tslib@npm:^2.4.1, tslib@npm:^2.5.0, tslib@npm:^2.6.2":
+"tslib@npm:^2.0.0, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.3.0, tslib@npm:^2.4.0, tslib@npm:^2.4.1, tslib@npm:^2.5.0":
   version: 2.6.2
   resolution: "tslib@npm:2.6.2"
   checksum: 329ea56123005922f39642318e3d1f0f8265d1e7fcb92c633e0809521da75eeaca28d2cf96d7248229deb40e5c19adf408259f4b9640afd20d13aecc1430f3ad
@@ -18080,9 +17386,9 @@ __metadata:
   linkType: hard
 
 "type-fest@npm:^4.1.0, type-fest@npm:^4.8.3":
-  version: 4.8.3
-  resolution: "type-fest@npm:4.8.3"
-  checksum: cd8c9a20a32b9d813f5f6d84bd81e52e22fb779a7ef0ae53974bae5baac427974bc8243269e9832b22ce2b6277d857b44769b3664f97dcac344e600bdd95f186
+  version: 4.9.0
+  resolution: "type-fest@npm:4.9.0"
+  checksum: 73383de23237b399a70397a53101152548846d919aebcc7d8733000c6c354dc2632fe37c4a70b8571b79fdbfa099e2d8304c5ac56b3254780acff93e4c7a797f
   languageName: node
   linkType: hard
 
@@ -18189,6 +17495,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript@npm:5.3.3":
+  version: 5.3.3
+  resolution: "typescript@npm:5.3.3"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 2007ccb6e51bbbf6fde0a78099efe04dc1c3dfbdff04ca3b6a8bc717991862b39fd6126c0c3ebf2d2d98ac5e960bcaa873826bb2bb241f14277034148f41f6a2
+  languageName: node
+  linkType: hard
+
 "typescript@npm:^4.8.4":
   version: 4.9.5
   resolution: "typescript@npm:4.9.5"
@@ -18209,6 +17525,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript@patch:typescript@5.3.3#~builtin<compat/typescript>":
+  version: 5.3.3
+  resolution: "typescript@patch:typescript@npm%3A5.3.3#~builtin<compat/typescript>::version=5.3.3&hash=29ae49"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: f61375590b3162599f0f0d5b8737877ac0a7bc52761dbb585d67e7b8753a3a4c42d9a554c4cc929f591ffcf3a2b0602f65ae3ce74714fd5652623a816862b610
+  languageName: node
+  linkType: hard
+
 "typescript@patch:typescript@^4.8.4#~builtin<compat/typescript>":
   version: 4.9.5
   resolution: "typescript@patch:typescript@npm%3A4.9.5#~builtin<compat/typescript>::version=4.9.5&hash=289587"
@@ -18252,15 +17578,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unescape@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "unescape@npm:1.0.1"
-  dependencies:
-    extend-shallow: ^2.0.1
-  checksum: 0d89b0f55e08a2843e635f1ccf8472a35b367c41d9a8014dd7de5cc3af710a6e988a950b86b6229e143147ade21772f2d72054bc846f4972eb448df472b856ec
-  languageName: node
-  linkType: hard
-
 "unicode-canonical-property-names-ecmascript@npm:^2.0.0":
   version: 2.0.0
   resolution: "unicode-canonical-property-names-ecmascript@npm:2.0.0"
@@ -18394,13 +17711,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unstated-next@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "unstated-next@npm:1.1.0"
-  checksum: 8e1c75ea3fe524268a52d12298d3f2f097db2c6292d638a59011ad52eef467e8416e1f523d1deaceefccb3b877f2bd3bf43f5014967a9caa6ae537d0441f09d2
-  languageName: node
-  linkType: hard
-
 "update-browserslist-db@npm:^1.0.13":
   version: 1.0.13
   resolution: "update-browserslist-db@npm:1.0.13"
@@ -18434,33 +17744,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"urllib@npm:2.41.0":
-  version: 2.41.0
-  resolution: "urllib@npm:2.41.0"
-  dependencies:
-    any-promise: ^1.3.0
-    content-type: ^1.0.2
-    debug: ^2.6.9
-    default-user-agent: ^1.0.0
-    digest-header: ^1.0.0
-    ee-first: ~1.1.1
-    formstream: ^1.1.0
-    humanize-ms: ^1.2.0
-    iconv-lite: ^0.4.15
-    ip: ^1.1.5
-    pump: ^3.0.0
-    qs: ^6.4.0
-    statuses: ^1.3.1
-    utility: ^1.16.1
-  peerDependencies:
-    proxy-agent: ^5.0.0
-  peerDependenciesMeta:
-    proxy-agent:
-      optional: true
-  checksum: b1f8ffbcce6c87e294798595db45922531a18b0f37f7c1e90eeb47e6cfb7091c20084a918ecb88cc79bf155519ff7855f80d3a04090fca386bfdc5c3005f33f3
-  languageName: node
-  linkType: hard
-
 "use-composed-ref@npm:^1.3.0":
   version: 1.3.0
   resolution: "use-composed-ref@npm:1.3.0"
@@ -18482,15 +17765,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"use-json-comparison@npm:^1.0.5":
-  version: 1.0.6
-  resolution: "use-json-comparison@npm:1.0.6"
-  peerDependencies:
-    react: ">=16.9.0"
-  checksum: 1054bc5ec16ba728e6a176e0d0eea9edf57a55d19a3579a17329b7b71b6bf9e647d952ea9b87d765a11de536dd994dc7f9d3011a6cd86ec791b67322889d03e6
-  languageName: node
-  linkType: hard
-
 "use-latest@npm:^1.2.1":
   version: 1.2.1
   resolution: "use-latest@npm:1.2.1"
@@ -18505,15 +17779,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"use-media-antd-query@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "use-media-antd-query@npm:1.1.0"
-  peerDependencies:
-    react: ">=16.9.0"
-  checksum: ec9ef1c6ae9a044ee7ad2e39e6289902134201036d4406cbc07611846f0dc7ae8e82d4c82c244990e934d4c442cafab6f1e380787ec8d7eaa998a0205bcfadeb
-  languageName: node
-  linkType: hard
-
 "use-sync-external-store@npm:^1.2.0":
   version: 1.2.0
   resolution: "use-sync-external-store@npm:1.2.0"
@@ -18530,19 +17795,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"utility@npm:^1.16.1, utility@npm:^1.18.0":
-  version: 1.18.0
-  resolution: "utility@npm:1.18.0"
-  dependencies:
-    copy-to: ^2.0.1
-    escape-html: ^1.0.3
-    mkdirp: ^0.5.1
-    mz: ^2.7.0
-    unescape: ^1.0.1
-  checksum: 7cf4a75fa9adebba0740aa5d3f19ed0fbbd99bb1e7a2d0c30152ae144ccf45f272febdbbf01564cc980582cacc300fa4843ac19a633a50fa6d8e5adfc74d0138
-  languageName: node
-  linkType: hard
-
 "uuid@npm:^3.3.2":
   version: 3.4.0
   resolution: "uuid@npm:3.4.0"
@@ -18737,8 +17989,8 @@ __metadata:
   linkType: hard
 
 "vite-plugin-html@npm:^3.2.0":
-  version: 3.2.0
-  resolution: "vite-plugin-html@npm:3.2.0"
+  version: 3.2.1
+  resolution: "vite-plugin-html@npm:3.2.1"
   dependencies:
     "@rollup/pluginutils": ^4.2.0
     colorette: ^2.0.16
@@ -18754,7 +18006,7 @@ __metadata:
     pathe: ^0.2.0
   peerDependencies:
     vite: ">=2.0.0"
-  checksum: f5222247b65da1c36215f0b2f509fd3975a7426b8d44546beb49f3ba51ee87b3a6b6e6afc9e7567a0d8bd1016631f2db3f934808f62a7c8f7f83fa83d8561d2d
+  checksum: 6add7cd7a8f9e83b0c58b20cde2d4da7e132ef56db6a60f3d4cc7022c944896236aeca6bde4c6dc2da3d506f756f63de56251adc47f0ae359c07485b24dd64db
   languageName: node
   linkType: hard
 
@@ -18824,6 +18076,46 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vite@npm:^5.0.10":
+  version: 5.0.11
+  resolution: "vite@npm:5.0.11"
+  dependencies:
+    esbuild: ^0.19.3
+    fsevents: ~2.3.3
+    postcss: ^8.4.32
+    rollup: ^4.2.0
+  peerDependencies:
+    "@types/node": ^18.0.0 || >=20.0.0
+    less: "*"
+    lightningcss: ^1.21.0
+    sass: "*"
+    stylus: "*"
+    sugarss: "*"
+    terser: ^5.4.0
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  peerDependenciesMeta:
+    "@types/node":
+      optional: true
+    less:
+      optional: true
+    lightningcss:
+      optional: true
+    sass:
+      optional: true
+    stylus:
+      optional: true
+    sugarss:
+      optional: true
+    terser:
+      optional: true
+  bin:
+    vite: bin/vite.js
+  checksum: 262e41f25ce0cc5fc3c2065b1796f64ec115d3ac2d9625dbfb36d6628ba10e63684ef5515bb2ff1aa8e34c6f89e9c10e8211cb88f6c7f0da6869362851345437
+  languageName: node
+  linkType: hard
+
 "vlq@npm:^0.2.2":
   version: 0.2.3
   resolution: "vlq@npm:0.2.3"
@@ -18944,9 +18236,9 @@ __metadata:
   linkType: hard
 
 "web-streams-polyfill@npm:^3.0.3":
-  version: 3.2.1
-  resolution: "web-streams-polyfill@npm:3.2.1"
-  checksum: b119c78574b6d65935e35098c2afdcd752b84268e18746606af149e3c424e15621b6f1ff0b42b2676dc012fc4f0d313f964b41a4b5031e525faa03997457da02
+  version: 3.3.2
+  resolution: "web-streams-polyfill@npm:3.3.2"
+  checksum: 0292f4113c1bda40d8e8ecebee39eb14cc2e2e560a65a6867980e394537a2645130e2c73f5ef6e641fd3697d2f71720ccf659aebaf69a9d5a773f653a0fdf39d
   languageName: node
   linkType: hard
 
@@ -18958,9 +18250,9 @@ __metadata:
   linkType: hard
 
 "web-worker@npm:^1.2.0":
-  version: 1.2.0
-  resolution: "web-worker@npm:1.2.0"
-  checksum: 1bb28348ddcf9b2e7c62c5fd02e49a84098795856cd905456de957271bba288e9618941cf69d8960f0a7ae81f5dfb74b427c0634be47ec69e3e955c4ec5213be
+  version: 1.3.0
+  resolution: "web-worker@npm:1.3.0"
+  checksum: ed1f869aefd1d81a43d0fbfe7b315a65beb6d7d2486b378c436a7047eed4216be34b2e6afca738b6fa95d016326b765f5f816355db33267dbf43b2b8a1837c0c
   languageName: node
   linkType: hard
 
@@ -19144,15 +18436,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"win-release@npm:^1.0.0":
-  version: 1.1.1
-  resolution: "win-release@npm:1.1.1"
-  dependencies:
-    semver: ^5.0.1
-  checksum: 8943898cc4badaf8598342d63093e49ae9a64c140cf190e81472d3a8890f3387b8408181412e1b58658fe7777ce5d1e3f02eee4beeaee49909d1d17a72d52fc1
-  languageName: node
-  linkType: hard
-
 "wmf@npm:~1.0.1":
   version: 1.0.2
   resolution: "wmf@npm:1.0.2"
@@ -19229,8 +18512,8 @@ __metadata:
   linkType: hard
 
 "ws@npm:^8.11.0":
-  version: 8.15.1
-  resolution: "ws@npm:8.15.1"
+  version: 8.16.0
+  resolution: "ws@npm:8.16.0"
   peerDependencies:
     bufferutil: ^4.0.1
     utf-8-validate: ">=5.0.2"
@@ -19239,7 +18522,7 @@ __metadata:
       optional: true
     utf-8-validate:
       optional: true
-  checksum: 8c67365f6e6134278ad635d558bfce466d7ef7543a043baea333aaa430429f0af8a130c0c36e7dd78f918d68167a659ba9b5067330b77c4b279e91533395952b
+  checksum: feb3eecd2bae82fa8a8beef800290ce437d8b8063bdc69712725f21aef77c49cb2ff45c6e5e7fce622248f9c7abaee506bae0a9064067ffd6935460c7357321b
   languageName: node
   linkType: hard
 
@@ -19274,23 +18557,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"xml2js@npm:^0.6.2":
-  version: 0.6.2
-  resolution: "xml2js@npm:0.6.2"
-  dependencies:
-    sax: ">=0.6.0"
-    xmlbuilder: ~11.0.0
-  checksum: 458a83806193008edff44562c0bdb982801d61ee7867ae58fd35fab781e69e17f40dfeb8fc05391a4648c9c54012066d3955fe5d993ffbe4dc63399023f32ac2
-  languageName: node
-  linkType: hard
-
-"xmlbuilder@npm:~11.0.0":
-  version: 11.0.1
-  resolution: "xmlbuilder@npm:11.0.1"
-  checksum: 7152695e16f1a9976658215abab27e55d08b1b97bca901d58b048d2b6e106b5af31efccbdecf9b07af37c8377d8e7e821b494af10b3a68b0ff4ae60331b415b0
-  languageName: node
-  linkType: hard
-
 "xmlchars@npm:^2.1.1, xmlchars@npm:^2.2.0":
   version: 2.2.0
   resolution: "xmlchars@npm:2.2.0"
@@ -19305,13 +18571,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"xtend@npm:^4.0.0":
-  version: 4.0.2
-  resolution: "xtend@npm:4.0.2"
-  checksum: ac5dfa738b21f6e7f0dd6e65e1b3155036d68104e67e5d5d1bde74892e327d7e5636a076f625599dc394330a731861e87343ff184b0047fef1360a7ec0a5a36a
-  languageName: node
-  linkType: hard
-
 "xtend@npm:~2.0.4":
   version: 2.0.6
   resolution: "xtend@npm:2.0.6"
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/query/service/QueryExecutionService.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/query/service/QueryExecutionService.java
index dc345993cd..f58887d382 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/query/service/QueryExecutionService.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/query/service/QueryExecutionService.java
@@ -1,15 +1,6 @@
 package org.lowcoder.domain.query.service;
 
-import static org.lowcoder.sdk.exception.BizError.QUERY_EXECUTION_ERROR;
-import static org.lowcoder.sdk.exception.PluginCommonError.QUERY_EXECUTION_TIMEOUT;
-import static org.lowcoder.sdk.util.ExceptionUtils.ofException;
-
-import java.time.Duration;
-import java.util.List;
-import java.util.Map;
-import java.util.concurrent.TimeoutException;
-import java.util.stream.Collectors;
-
+import lombok.extern.slf4j.Slf4j;
 import org.lowcoder.domain.datasource.model.Datasource;
 import org.lowcoder.domain.datasource.model.DatasourceConnectionHolder;
 import org.lowcoder.domain.datasource.service.DatasourceConnectionPool;
@@ -24,10 +15,18 @@
 import org.lowcoder.sdk.query.QueryVisitorContext;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
-
-import lombok.extern.slf4j.Slf4j;
 import reactor.core.publisher.Mono;
 
+import java.time.Duration;
+import java.util.List;
+import java.util.Map;
+import java.util.concurrent.TimeoutException;
+import java.util.stream.Collectors;
+
+import static org.lowcoder.sdk.exception.BizError.QUERY_EXECUTION_ERROR;
+import static org.lowcoder.sdk.exception.PluginCommonError.QUERY_EXECUTION_TIMEOUT;
+import static org.lowcoder.sdk.util.ExceptionUtils.ofException;
+
 @Slf4j
 @Service
 public class QueryExecutionService {
diff --git a/server/api-service/lowcoder-plugins/graphqlPlugin/src/main/java/org/lowcoder/plugin/graphql/GraphQLExecutor.java b/server/api-service/lowcoder-plugins/graphqlPlugin/src/main/java/org/lowcoder/plugin/graphql/GraphQLExecutor.java
index f2c90b49e4..cc18bf0aa0 100644
--- a/server/api-service/lowcoder-plugins/graphqlPlugin/src/main/java/org/lowcoder/plugin/graphql/GraphQLExecutor.java
+++ b/server/api-service/lowcoder-plugins/graphqlPlugin/src/main/java/org/lowcoder/plugin/graphql/GraphQLExecutor.java
@@ -1,6 +1,7 @@
 package org.lowcoder.plugin.graphql;
 
 import static com.google.common.base.MoreObjects.firstNonNull;
+import static org.apache.commons.collections4.MapUtils.emptyIfNull;
 import static org.apache.commons.lang3.StringUtils.firstNonBlank;
 import static org.apache.commons.lang3.StringUtils.trimToEmpty;
 import static org.lowcoder.plugin.graphql.GraphQLError.GRAPHQL_EXECUTION_ERROR;
@@ -10,6 +11,8 @@
 import static org.lowcoder.sdk.exception.PluginCommonError.QUERY_EXECUTION_ERROR;
 import static org.lowcoder.sdk.exception.PluginCommonError.QUERY_EXECUTION_TIMEOUT;
 import static org.lowcoder.sdk.plugin.restapi.auth.RestApiAuthType.DIGEST_AUTH;
+import static org.lowcoder.sdk.plugin.restapi.auth.RestApiAuthType.OAUTH2_INHERIT_FROM_LOGIN;
+import static org.lowcoder.sdk.util.ExceptionUtils.propagateError;
 import static org.lowcoder.sdk.util.JsonUtils.readTree;
 import static org.lowcoder.sdk.util.JsonUtils.toJsonThrows;
 import static org.lowcoder.sdk.util.MustacheHelper.renderMustacheString;
@@ -30,6 +33,8 @@
 
 import javax.annotation.Nullable;
 
+import com.google.common.collect.ImmutableMap;
+import org.apache.commons.collections4.CollectionUtils;
 import org.apache.commons.lang3.ObjectUtils;
 import org.apache.commons.lang3.StringUtils;
 import org.lowcoder.plugin.graphql.constants.ResponseDataType;
@@ -83,6 +88,8 @@
 public class GraphQLExecutor implements QueryExecutor<GraphQLDatasourceConfig, Object, GraphQLQueryExecutionContext> {
     private static final String RESPONSE_DATA_TYPE = "X-LOWCODER-RESPONSE-DATA-TYPE";
     private static final String GRAPHQL_TYPE = "application/graphql";
+
+    private static final String DEFAULT_GRAPHQL_ERROR_CODE = "GRAPHQL_EXECUTION_ERROR";
     private static final int MAX_REDIRECTS = 5;
     private static final Set<String> BINARY_DATA_TYPES = Set.of("application/zip",
             "application/octet-stream",
@@ -245,53 +252,54 @@ private List<Property> buildBodyParams(List<Property> datasourceBodyFormData, Li
 
     @Override
     public Mono<QueryExecutionResult> executeQuery(Object o, GraphQLQueryExecutionContext context) {
-        return Mono.defer(() -> {
-            URI uri = RestApiUriBuilder.buildUri(context.getUrl(), new HashMap<>(), context.getUrlParams());
-            WebClient.Builder webClientBuilder = WebClientBuildHelper.builder()
-                    .disallowedHosts(commonConfig.getDisallowedHosts())
-                    .toWebClientBuilder();
-
-            Map<String, String> allHeaders = context.getHeaders();
-            String contentType = context.getContentType();
-            allHeaders.forEach(webClientBuilder::defaultHeader);
-
-            //basic auth
-            AuthConfig authConfig = context.getAuthConfig();
-            if (authConfig != null && authConfig.getType() == RestApiAuthType.BASIC_AUTH) {
-                webClientBuilder.defaultHeaders(AuthHelper.basicAuth((BasicAuthConfig) authConfig));
-            }
+        return Mono.defer(() -> authByOauth2InheritFromLogin(context))
+                .then(Mono.defer(() -> {
+                    URI uri = RestApiUriBuilder.buildUri(context.getUrl(), new HashMap<>(), context.getUrlParams());
+                    WebClient.Builder webClientBuilder = WebClientBuildHelper.builder()
+                            .disallowedHosts(commonConfig.getDisallowedHosts())
+                            .toWebClientBuilder();
+
+                    Map<String, String> allHeaders = context.getHeaders();
+                    String contentType = context.getContentType();
+                    allHeaders.forEach(webClientBuilder::defaultHeader);
+
+                    //basic auth
+                    AuthConfig authConfig = context.getAuthConfig();
+                    if (authConfig != null && authConfig.getType() == RestApiAuthType.BASIC_AUTH) {
+                        webClientBuilder.defaultHeaders(AuthHelper.basicAuth((BasicAuthConfig) authConfig));
+                    }
 
-            if (MediaType.MULTIPART_FORM_DATA_VALUE.equals(contentType)) {
-                webClientBuilder.filter(new BufferingFilter());
-            }
+                    if (MediaType.MULTIPART_FORM_DATA_VALUE.equals(contentType)) {
+                        webClientBuilder.filter(new BufferingFilter());
+                    }
 
-            webClientBuilder.defaultCookies(injectCookies(context));
+                    webClientBuilder.defaultCookies(injectCookies(context));
 
-            WebClient client = webClientBuilder
-                    .exchangeStrategies(EXCHANGE_STRATEGIES)
-                    .build();
-            if (!GRAPHQL_TYPE.equalsIgnoreCase(contentType)) {
-                context.setQueryBody(convertToGraphQLBody(context));
-            }
-            BodyInserter<?, ? super ClientHttpRequest> bodyInserter = buildBodyInserter(
-                    context.isEncodeParams(),
-                    contentType,
-                    context.getQueryBody(),
-                    context.getBodyParams());
-            return httpCall(client, context.getHttpMethod(), uri, bodyInserter, 0, authConfig, DEFAULT_HEADERS_CONSUMER)
-                    .flatMap(clientResponse -> clientResponse.toEntity(byte[].class))
-                    .map(this::convertToQueryExecutionResult)
-                    .onErrorResume(error -> {
-                        if (error instanceof TimeoutException) {
-                            return Mono.just(QueryExecutionResult.error(QUERY_EXECUTION_TIMEOUT, "QUERY_TIMEOUT_ERROR", error));
-                        }
-                        if (error instanceof PluginException pluginException) {
-                            throw pluginException;
-                        }
-                        return Mono.just(
-                                QueryExecutionResult.error(GRAPHQL_EXECUTION_ERROR, "GRAPHQL_EXECUTION_ERROR", error));
-                    });
-        });
+                    WebClient client = webClientBuilder
+                            .exchangeStrategies(EXCHANGE_STRATEGIES)
+                            .build();
+                    if (!GRAPHQL_TYPE.equalsIgnoreCase(contentType)) {
+                        context.setQueryBody(convertToGraphQLBody(context));
+                    }
+                    BodyInserter<?, ? super ClientHttpRequest> bodyInserter = buildBodyInserter(
+                            context.isEncodeParams(),
+                            contentType,
+                            context.getQueryBody(),
+                            context.getBodyParams());
+                    return httpCall(client, context.getHttpMethod(), uri, bodyInserter, 0, authConfig, DEFAULT_HEADERS_CONSUMER)
+                            .flatMap(clientResponse -> clientResponse.toEntity(byte[].class))
+                            .map(this::convertToQueryExecutionResult)
+                            .onErrorResume(error -> {
+                                if (error instanceof TimeoutException) {
+                                    return Mono.just(QueryExecutionResult.error(QUERY_EXECUTION_TIMEOUT, "QUERY_TIMEOUT_ERROR", error));
+                                }
+                                if (error instanceof PluginException pluginException) {
+                                    throw pluginException;
+                                }
+                                return Mono.just(
+                                        QueryExecutionResult.error(GRAPHQL_EXECUTION_ERROR, "GRAPHQL_EXECUTION_ERROR", error));
+                            });
+                }));
     }
 
     private Consumer<MultiValueMap<String, String>> injectCookies(GraphQLQueryExecutionContext request) {
@@ -458,6 +466,39 @@ private ResponseBodyData parseResponseDataInfo(byte[] body, MediaType contentTyp
         }
     }
 
+    private Mono<Void> authByOauth2InheritFromLogin(GraphQLQueryExecutionContext context) {
+        if (context.getAuthConfig() == null || context.getAuthConfig().getType() != OAUTH2_INHERIT_FROM_LOGIN) {
+            return Mono.empty();
+        }
+        return context.getAuthTokenMono()
+                .doOnNext(properties -> {
+                    Map<String, List<Property>> propertyMap = properties.stream()
+                            .collect(Collectors.groupingBy(Property::getType));
+
+                    List<Property> params = propertyMap.get("param");
+                    if (CollectionUtils.isNotEmpty(params)) {
+                        Map<String, String> paramMap = new HashMap<>(emptyIfNull(context.getUrlParams()));
+                        for (Property param : params) {
+                            paramMap.put(param.getKey(), param.getValue());
+                        }
+                        context.setUrlParams(ImmutableMap.copyOf(paramMap));
+                    }
+
+                    List<Property> headers = propertyMap.get("header");
+                    if (CollectionUtils.isNotEmpty(headers)) {
+                        Map<String, String> headerMap = new HashMap<>(emptyIfNull(context.getHeaders()));
+                        for (Property header : headers) {
+                            headerMap.put(header.getKey(), header.getValue());
+                        }
+                        context.setHeaders(ImmutableMap.copyOf(headerMap));
+                    }
+                })
+                .switchIfEmpty(Mono.error(new PluginException(GRAPHQL_EXECUTION_ERROR, DEFAULT_GRAPHQL_ERROR_CODE,
+                        "$ACCESS_TOKEN parameter missing.")))
+                .onErrorResume(throwable -> propagateError(GRAPHQL_EXECUTION_ERROR, DEFAULT_GRAPHQL_ERROR_CODE, throwable))
+                .then();
+    }
+
     @Getter
     @Builder
     private static class ResponseBodyData {
diff --git a/server/api-service/lowcoder-sdk/src/main/java/org/lowcoder/sdk/plugin/graphql/GraphQLDatasourceConfig.java b/server/api-service/lowcoder-sdk/src/main/java/org/lowcoder/sdk/plugin/graphql/GraphQLDatasourceConfig.java
index 3c9d3392e5..0099ae2fa9 100644
--- a/server/api-service/lowcoder-sdk/src/main/java/org/lowcoder/sdk/plugin/graphql/GraphQLDatasourceConfig.java
+++ b/server/api-service/lowcoder-sdk/src/main/java/org/lowcoder/sdk/plugin/graphql/GraphQLDatasourceConfig.java
@@ -110,6 +110,13 @@ public boolean isForwardAllCookies() {
         return forwardAllCookies;
     }
 
+    public boolean isOauth2InheritFromLogin() {
+        if (this.authConfig != null) {
+            return this.authConfig.getType().name().equals(RestApiAuthType.OAUTH2_INHERIT_FROM_LOGIN.name());
+        }
+        return false;
+    }
+
     @Override
     public DatasourceConnectionConfig mergeWithUpdatedConfig(DatasourceConnectionConfig updatedConfig) {
         if (!(updatedConfig instanceof GraphQLDatasourceConfig updatedApiConfig)) {
diff --git a/server/api-service/lowcoder-sdk/src/main/java/org/lowcoder/sdk/plugin/restapi/RestApiDatasourceConfig.java b/server/api-service/lowcoder-sdk/src/main/java/org/lowcoder/sdk/plugin/restapi/RestApiDatasourceConfig.java
index b4924e9855..f60caa9bb6 100644
--- a/server/api-service/lowcoder-sdk/src/main/java/org/lowcoder/sdk/plugin/restapi/RestApiDatasourceConfig.java
+++ b/server/api-service/lowcoder-sdk/src/main/java/org/lowcoder/sdk/plugin/restapi/RestApiDatasourceConfig.java
@@ -108,6 +108,13 @@ public RestApiAuthType getAuthType() {
         return RestApiAuthType.NO_AUTH;
     }
 
+    public boolean isOauth2InheritFromLogin() {
+        if (this.authConfig != null) {
+            return this.authConfig.getType().name().equals(RestApiAuthType.OAUTH2_INHERIT_FROM_LOGIN.name());
+        }
+        return false;
+    }
+
     public Set<String> getForwardCookies() {
         return SetUtils.emptyIfNull(forwardCookies);
     }
diff --git a/server/api-service/lowcoder-sdk/src/main/java/org/lowcoder/sdk/plugin/restapi/auth/AuthConfig.java b/server/api-service/lowcoder-sdk/src/main/java/org/lowcoder/sdk/plugin/restapi/auth/AuthConfig.java
index 16b85fd850..599896a5bb 100644
--- a/server/api-service/lowcoder-sdk/src/main/java/org/lowcoder/sdk/plugin/restapi/auth/AuthConfig.java
+++ b/server/api-service/lowcoder-sdk/src/main/java/org/lowcoder/sdk/plugin/restapi/auth/AuthConfig.java
@@ -17,7 +17,7 @@
         @Type(value = BasicAuthConfig.class, name = "DIGEST_AUTH"),
         @Type(value = BasicAuthConfig.class, name = "BASIC_AUTH"),
         @Type(value = NoneAuthConfig.class, name = "NO_AUTH"),
-        @Type(value = DefaultAuthConfig.class, name = "OAUTH2_INHERIT_FROM_LOGIN")
+        @Type(value = OAuthInheritAuthConfig.class, name = "OAUTH2_INHERIT_FROM_LOGIN")
 })
 public abstract class AuthConfig implements Encrypt {
 
diff --git a/server/api-service/lowcoder-sdk/src/main/java/org/lowcoder/sdk/plugin/restapi/auth/OAuthInheritAuthConfig.java b/server/api-service/lowcoder-sdk/src/main/java/org/lowcoder/sdk/plugin/restapi/auth/OAuthInheritAuthConfig.java
new file mode 100644
index 0000000000..08e56a26cf
--- /dev/null
+++ b/server/api-service/lowcoder-sdk/src/main/java/org/lowcoder/sdk/plugin/restapi/auth/OAuthInheritAuthConfig.java
@@ -0,0 +1,32 @@
+package org.lowcoder.sdk.plugin.restapi.auth;
+
+import com.fasterxml.jackson.annotation.JsonCreator;
+import lombok.Getter;
+
+import javax.annotation.Nullable;
+
+/**
+ * oauth(inherit from login) auth config
+ */
+@Getter
+public final class OAuthInheritAuthConfig extends AuthConfig {
+
+    private String authId;
+
+    @JsonCreator
+    public OAuthInheritAuthConfig(String authId, RestApiAuthType type) {
+        super(type);
+        this.authId = authId;
+    }
+
+    @Override
+    public AuthConfig mergeWithUpdatedConfig(@Nullable AuthConfig updatedConfig) {
+        // return new auth config if auth type changed
+        if (!(updatedConfig instanceof OAuthInheritAuthConfig oAuthInheritAuthConfig)) {
+            return updatedConfig;
+        }
+        // otherwise merge oauth auth config
+        return new OAuthInheritAuthConfig(oAuthInheritAuthConfig.getAuthId(),
+                oAuthInheritAuthConfig.getType());
+    }
+}
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/authentication/request/oauth2/request/GithubRequest.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/authentication/request/oauth2/request/GithubRequest.java
index 6d5217678e..135c9c3831 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/authentication/request/oauth2/request/GithubRequest.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/authentication/request/oauth2/request/GithubRequest.java
@@ -91,9 +91,10 @@ protected Mono<AuthUser> getAuthUser(AuthToken authToken) {
                     if (map.containsKey("error")) {
                         return Mono.error(new AuthException(JsonUtils.toJson(map)));
                     }
+                    String username = MapUtils.getString(map, "email");
                     AuthUser authUser = AuthUser.builder()
                             .uid(map.get("id").toString())
-                            .username(MapUtils.getString(map, "login"))
+                            .username(username == null ? MapUtils.getString(map, "login") : username)
                             .avatar(MapUtils.getString(map, "avatar_url"))
                             .rawUserInfo(map)
                             .build();
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/authentication/request/oauth2/request/GoogleRequest.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/authentication/request/oauth2/request/GoogleRequest.java
index fa1e0be5db..de95fa41f5 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/authentication/request/oauth2/request/GoogleRequest.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/authentication/request/oauth2/request/GoogleRequest.java
@@ -110,7 +110,7 @@ protected Mono<AuthUser> getAuthUser(AuthToken authToken) {
                     }
                     AuthUser authUser = AuthUser.builder()
                             .uid(MapUtils.getString(map, "sub"))
-                            .username(MapUtils.getString(map, "name"))
+                            .username(MapUtils.getString(map, "email"))
                             .avatar(MapUtils.getString(map, "picture"))
                             .rawUserInfo(map)
                             .build();
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/authentication/request/oauth2/request/OryRequest.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/authentication/request/oauth2/request/OryRequest.java
index 72e634a243..4c2ce21a80 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/authentication/request/oauth2/request/OryRequest.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/authentication/request/oauth2/request/OryRequest.java
@@ -113,7 +113,7 @@ protected Mono<AuthUser> getAuthUser(AuthToken authToken) {
                     }
                     AuthUser authUser = AuthUser.builder()
                             .uid(MapUtils.getString(map, "sub"))
-                            .username(MapUtils.getString(map, "name"))
+                            .username(MapUtils.getString(map, "email"))
                             .avatar(MapUtils.getString(map, "picture"))
                             .rawUserInfo(map)
                             .build();
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/query/ApplicationQueryApiService.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/query/ApplicationQueryApiService.java
index 2bf1ece3ad..dbf77db111 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/query/ApplicationQueryApiService.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/query/ApplicationQueryApiService.java
@@ -1,16 +1,5 @@
 package org.lowcoder.api.query;
 
-import static org.lowcoder.domain.permission.model.ResourceAction.READ_APPLICATIONS;
-import static org.lowcoder.sdk.exception.BizError.DATASOURCE_AND_APP_ORG_NOT_MATCH;
-import static org.lowcoder.sdk.exception.BizError.INVALID_PARAMETER;
-import static org.lowcoder.sdk.util.ExceptionUtils.deferredError;
-import static org.lowcoder.sdk.util.ExceptionUtils.ofError;
-
-import java.util.List;
-import java.util.stream.Collectors;
-
-import javax.annotation.Nullable;
-
 import org.apache.commons.lang.ArrayUtils;
 import org.apache.commons.lang3.StringUtils;
 import org.lowcoder.api.home.SessionUserService;
@@ -27,11 +16,16 @@
 import org.lowcoder.domain.query.service.LibraryQueryRecordService;
 import org.lowcoder.domain.query.service.LibraryQueryService;
 import org.lowcoder.domain.query.service.QueryExecutionService;
+import org.lowcoder.domain.user.model.Connection;
+import org.lowcoder.domain.user.model.User;
 import org.lowcoder.infra.util.TupleUtils;
 import org.lowcoder.sdk.config.CommonConfig;
 import org.lowcoder.sdk.exception.BizError;
 import org.lowcoder.sdk.models.Property;
 import org.lowcoder.sdk.models.QueryExecutionResult;
+import org.lowcoder.sdk.plugin.graphql.GraphQLDatasourceConfig;
+import org.lowcoder.sdk.plugin.restapi.RestApiDatasourceConfig;
+import org.lowcoder.sdk.plugin.restapi.auth.OAuthInheritAuthConfig;
 import org.lowcoder.sdk.query.QueryVisitorContext;
 import org.lowcoder.sdk.util.ExceptionUtils;
 import org.springframework.beans.factory.annotation.Autowired;
@@ -40,10 +34,21 @@
 import org.springframework.stereotype.Service;
 import org.springframework.util.MultiValueMap;
 import org.springframework.web.server.ServerWebExchange;
-
 import reactor.core.publisher.Mono;
 import reactor.core.publisher.Timed;
 
+import javax.annotation.Nullable;
+import java.util.Collections;
+import java.util.List;
+import java.util.Optional;
+import java.util.stream.Collectors;
+
+import static org.lowcoder.domain.permission.model.ResourceAction.READ_APPLICATIONS;
+import static org.lowcoder.sdk.exception.BizError.DATASOURCE_AND_APP_ORG_NOT_MATCH;
+import static org.lowcoder.sdk.exception.BizError.INVALID_PARAMETER;
+import static org.lowcoder.sdk.util.ExceptionUtils.deferredError;
+import static org.lowcoder.sdk.util.ExceptionUtils.ofError;
+
 @Service
 public class ApplicationQueryApiService {
 
@@ -93,12 +98,13 @@ public Mono<QueryExecutionResult> executeApplicationQuery(ServerWebExchange exch
         Mono<Datasource> datasourceMono = baseQueryMono.flatMap(query -> datasourceService.getById(query.getDatasourceId())
                         .switchIfEmpty(deferredError(BizError.DATASOURCE_NOT_FOUND, "DATASOURCE_NOT_FOUND", query.getDatasourceId())))
                 .cache();
-        return sessionUserService.getVisitorId()
-                .delayUntil(userId -> checkExecutePermission(userId, queryExecutionRequest.getPath(), appId,
+
+        return sessionUserService.getVisitor()
+                .delayUntil(user -> checkExecutePermission(user.getId(), queryExecutionRequest.getPath(), appId,
                         queryExecutionRequest.isViewMode()))
                 .zipWhen(visitorId -> Mono.zip(appMono, appQueryMono, baseQueryMono, datasourceMono), TupleUtils::merge)
                 .flatMap(tuple -> {
-                    String userId = tuple.getT1();
+                    String userId = tuple.getT1().getId();
                     Application app = tuple.getT2();
                     ApplicationQuery appQuery = tuple.getT3();
                     BaseQuery baseQuery = tuple.getT4();
@@ -109,8 +115,22 @@ public Mono<QueryExecutionResult> executeApplicationQuery(ServerWebExchange exch
                     }
 
                     MultiValueMap<String, HttpCookie> cookies = exchange.getRequest().getCookies();
-                    QueryVisitorContext queryVisitorContext = new QueryVisitorContext(userId, app.getOrganizationId(), port, cookies,
-                            getAuthParamsAndHeadersInheritFromLogin(userId, app.getOrganizationId()), commonConfig.getDisallowedHosts());
+
+                    Mono<List<Property>> paramsAndHeadersInheritFromLogin = Mono.empty();
+
+
+                    // Check if oauth inherited from login and save token
+                    if(datasource.getDetailConfig() instanceof RestApiDatasourceConfig restApiDatasourceConfig
+                            && restApiDatasourceConfig.isOauth2InheritFromLogin()) {
+                        paramsAndHeadersInheritFromLogin = getAuthParamsAndHeadersInheritFromLogin(tuple.getT1(), ((OAuthInheritAuthConfig)restApiDatasourceConfig.getAuthConfig()).getAuthId());
+                    }
+
+                    if(datasource.getDetailConfig() instanceof GraphQLDatasourceConfig graphQLDatasourceConfig
+                            && graphQLDatasourceConfig.isOauth2InheritFromLogin()) {
+                        paramsAndHeadersInheritFromLogin = getAuthParamsAndHeadersInheritFromLogin(tuple.getT1(), ((OAuthInheritAuthConfig)graphQLDatasourceConfig.getAuthConfig()).getAuthId());
+                    }
+
+                    QueryVisitorContext queryVisitorContext = new QueryVisitorContext(userId, app.getOrganizationId(), port, cookies, paramsAndHeadersInheritFromLogin, commonConfig.getDisallowedHosts());
                     return queryExecutionService.executeQuery(datasource, baseQuery.getQueryConfig(), queryExecutionRequest.paramMap(),
                                     appQuery.getTimeoutStr(), queryVisitorContext
                             )
@@ -176,8 +196,18 @@ private Mono<BaseQuery> getBaseQueryFromLibraryQuery(ApplicationQuery query) {
                 .map(LibraryQueryRecord::getQuery);
     }
 
-    protected Mono<List<Property>> getAuthParamsAndHeadersInheritFromLogin(String userId, String orgId) {
-        return Mono.empty();
+    protected Mono<List<Property>> getAuthParamsAndHeadersInheritFromLogin(User user, String authId) {
+        if(authId == null) {
+            return Mono.empty();
+        }
+        Optional<Connection> activeConnectionOptional = user.getConnections()
+                .stream()
+                .filter(connection -> connection.getAuthId().equals(authId))
+                .findFirst();
+        if(!activeConnectionOptional.isPresent() || activeConnectionOptional.get().getAuthConnectionAuthToken() == null) {
+            return Mono.empty();
+        }
+        return Mono.just(Collections.singletonList(new Property("Authorization","Bearer " + activeConnectionOptional.get().getAuthConnectionAuthToken().getAccessToken(),"header")));
     }
 
     protected void onNextOrError(QueryExecutionRequest queryExecutionRequest, QueryVisitorContext queryVisitorContext,
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/query/LibraryQueryApiService.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/query/LibraryQueryApiService.java
index 52768afbf3..663a3be5d8 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/query/LibraryQueryApiService.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/query/LibraryQueryApiService.java
@@ -6,9 +6,7 @@
 import static org.lowcoder.sdk.util.ExceptionUtils.deferredError;
 import static org.lowcoder.sdk.util.ExceptionUtils.ofError;
 
-import java.util.HashSet;
-import java.util.List;
-import java.util.Map;
+import java.util.*;
 
 import org.apache.commons.collections4.CollectionUtils;
 import org.apache.commons.lang3.StringUtils;
@@ -23,6 +21,7 @@
 import org.lowcoder.api.usermanagement.OrgDevChecker;
 import org.lowcoder.api.util.BusinessEventPublisher;
 import org.lowcoder.api.util.ViewBuilder;
+import org.lowcoder.domain.authentication.AuthenticationService;
 import org.lowcoder.domain.datasource.model.Datasource;
 import org.lowcoder.domain.datasource.service.DatasourceService;
 import org.lowcoder.domain.organization.model.OrgMember;
@@ -35,6 +34,7 @@
 import org.lowcoder.domain.query.service.LibraryQueryRecordService;
 import org.lowcoder.domain.query.service.LibraryQueryService;
 import org.lowcoder.domain.query.service.QueryExecutionService;
+import org.lowcoder.domain.user.model.Connection;
 import org.lowcoder.domain.user.model.User;
 import org.lowcoder.domain.user.service.UserService;
 import org.lowcoder.sdk.config.CommonConfig;
@@ -42,6 +42,9 @@
 import org.lowcoder.sdk.exception.PluginCommonError;
 import org.lowcoder.sdk.models.Property;
 import org.lowcoder.sdk.models.QueryExecutionResult;
+import org.lowcoder.sdk.plugin.graphql.GraphQLDatasourceConfig;
+import org.lowcoder.sdk.plugin.restapi.RestApiDatasourceConfig;
+import org.lowcoder.sdk.plugin.restapi.auth.OAuthInheritAuthConfig;
 import org.lowcoder.sdk.query.QueryVisitorContext;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.beans.factory.annotation.Value;
@@ -87,6 +90,9 @@ public class LibraryQueryApiService {
     @Autowired
     private CommonConfig commonConfig;
 
+    @Autowired
+    private AuthenticationService authenticationService;
+
     @Value("${server.port}")
     private int port;
 
@@ -245,15 +251,19 @@ public Mono<QueryExecutionResult> executeLibraryQueryFromJs(ServerWebExchange ex
 
         Mono<OrgMember> visitorOrgMemberCache = sessionUserService.getVisitorOrgMemberCache()
                 .onErrorReturn(NOT_EXIST);
-        return Mono.zip(visitorOrgMemberCache, baseQueryMono, datasourceMono)
+
+        Mono<User> userMono = sessionUserService.getVisitor();
+
+        return Mono.zip(visitorOrgMemberCache, baseQueryMono, datasourceMono, userMono)
                 .flatMap(tuple -> {
                     OrgMember orgMember = tuple.getT1();
                     String orgId = orgMember.getOrgId();
                     String userId = orgMember.getUserId();
                     BaseQuery baseQuery = tuple.getT2();
                     Datasource datasource = tuple.getT3();
+                    User user = tuple.getT4();
                     Mono<List<Property>> paramsAndHeadersInheritFromLogin = orgMember.isInvalid()
-                                                                            ? Mono.empty() : getParamsAndHeadersInheritFromLogin(userId, orgId);
+                                                                            ? Mono.empty() : getParamsAndHeadersInheritFromLogin(user, null);
 
                     QueryVisitorContext queryVisitorContext = new QueryVisitorContext(userId, orgId, port,
                             exchange.getRequest().getCookies(),
@@ -284,17 +294,33 @@ public Mono<QueryExecutionResult> executeLibraryQuery(ServerWebExchange exchange
         Mono<Datasource> datasourceMono = baseQueryMono.flatMap(query -> datasourceService.getById(query.getDatasourceId())
                 .switchIfEmpty(deferredError(BizError.DATASOURCE_NOT_FOUND, "DATASOURCE_NOT_FOUND", query.getDatasourceId()))).cache();
 
+        Mono<User> userMono = sessionUserService.getVisitor();
+
         return orgDevChecker.checkCurrentOrgDev()
                 .then(Mono.zip(sessionUserService.getVisitorOrgMemberCache(),
-                        baseQueryMono, datasourceMono))
+                        baseQueryMono, datasourceMono, userMono))
                 .flatMap(tuple -> {
                     OrgMember orgMember = tuple.getT1();
                     String orgId = orgMember.getOrgId();
                     String userId = orgMember.getUserId();
                     BaseQuery baseQuery = tuple.getT2();
                     Datasource datasource = tuple.getT3();
-                    Mono<List<Property>> paramsAndHeadersInheritFromLogin =
-                            getParamsAndHeadersInheritFromLogin(userId, orgId);
+                    User user = tuple.getT4();
+
+                    Mono<List<Property>> paramsAndHeadersInheritFromLogin = Mono.empty();
+
+
+                    // check if oauth inherited from login and save token
+                    if(datasource.getDetailConfig() instanceof RestApiDatasourceConfig restApiDatasourceConfig && restApiDatasourceConfig.isOauth2InheritFromLogin()) {
+                        paramsAndHeadersInheritFromLogin = getParamsAndHeadersInheritFromLogin
+                                (user, ((OAuthInheritAuthConfig)restApiDatasourceConfig.getAuthConfig()).getAuthId());
+                    }
+
+                    if(datasource.getDetailConfig() instanceof GraphQLDatasourceConfig graphQLDatasourceConfig && graphQLDatasourceConfig.isOauth2InheritFromLogin()) {
+                        paramsAndHeadersInheritFromLogin = getParamsAndHeadersInheritFromLogin
+                                (user, ((OAuthInheritAuthConfig)graphQLDatasourceConfig.getAuthConfig()).getAuthId());
+                    }
+
                     QueryVisitorContext queryVisitorContext = new QueryVisitorContext(userId, orgId, port, cookies, paramsAndHeadersInheritFromLogin,
                             commonConfig.getDisallowedHosts());
                     Map<String, Object> queryConfig = baseQuery.getQueryConfig();
@@ -322,8 +348,18 @@ private Mono<BaseQuery> getBaseQuery(LibraryQueryCombineId libraryQueryCombineId
                 .map(LibraryQueryRecord::getQuery);
     }
 
-    protected Mono<List<Property>> getParamsAndHeadersInheritFromLogin(String userId, String orgId) {
-        return Mono.empty();
+    protected Mono<List<Property>> getParamsAndHeadersInheritFromLogin(User user, String authId) {
+        if(authId == null) {
+            return Mono.empty();
+        }
+        Optional<Connection> activeConnectionOptional = user.getConnections()
+                .stream()
+                .filter(connection -> connection.getAuthId().equals(authId))
+                .findFirst();
+        if(!activeConnectionOptional.isPresent() || activeConnectionOptional.get().getAuthConnectionAuthToken() == null) {
+            return Mono.empty();
+        }
+        return Mono.just(Collections.singletonList(new Property("Authorization","Bearer " + activeConnectionOptional.get().getAuthConnectionAuthToken().getAccessToken(),"header")));
     }
 
     protected void onNextOrError(QueryExecutionRequest queryExecutionRequest, QueryVisitorContext queryVisitorContext, BaseQuery baseQuery,
diff --git a/server/api-service/lowcoder-server/src/main/resources/application-lowcoder.yml b/server/api-service/lowcoder-server/src/main/resources/application-lowcoder.yml
index b223846d4f..75ae0dba94 100644
--- a/server/api-service/lowcoder-server/src/main/resources/application-lowcoder.yml
+++ b/server/api-service/lowcoder-server/src/main/resources/application-lowcoder.yml
@@ -3,9 +3,9 @@ spring:
     mongodb:
       authentication-database: admin
       auto-index-creation: false
-      uri: mongodb://192.168.8.103:27017/lowcoder?authSource=admin
+      uri: mongodb://localhost:27017/lowcoder?authSource=admin
     redis:
-      url: redis://192.168.8.103:6379
+      url: redis://localhost:6379
   main:
     allow-bean-definition-overriding: true
     allow-circular-references: true
@@ -62,4 +62,4 @@ auth:
   email:
     enable: true
     enable-register: true
-  workspace-creation: false
\ No newline at end of file
+  workspace-creation: true
\ No newline at end of file