diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml
new file mode 100644
index 000000000..38f939d4b
--- /dev/null
+++ b/.github/workflows/eslint.yml
@@ -0,0 +1,44 @@
+name: ESLint
+
+on:
+  push:
+    branches: ["master", "dev"]
+  pull_request:
+    branches: ["master", "dev"]
+  schedule:
+    - cron: '28 1 * * * 0'
+
+jobs:
+  eslint:
+    name: Run eslint scanning
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      security-events: write
+      actions: read
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Install ESLint
+        run: |
+          pnpm install eslint@8.10.0
+          pnpm install @microsoft/eslint-formatter-sarif@2.1.7
+
+      - name: Run ESLint
+        run: |
+          pnpx eslint .
+            --config .eslintrc.js
+            --ext .js,.jsx,.ts,.tsx
+            --format @microsoft/eslint-formatter-sarif
+            --output-file eslint-results.sarif
+        continue-on-error: true
+
+      - name: Upload analysis results to GitHub
+        uses: github/codeql-action/upload-sarif@v2
+        with:
+          sarif_file: eslint-results.sarif
+
+      - name: Wait for processing
+        run: echo "Waiting for analysis results to be processed..."
diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
new file mode 100644
index 000000000..74efa66d6
--- /dev/null
+++ b/.github/workflows/node.js.yml
@@ -0,0 +1,33 @@
+name: Node.js CI
+
+on:
+  push:
+    branches: [master, dev]
+  pull_request:
+    branches: [master, dev]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x, 18.x]
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install pnpm
+        run: npm install -g pnpm
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build
+        run: pnpm build
diff --git a/.gitignore b/.gitignore
index 955e6d7e6..06b117d6e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -104,3 +104,6 @@ dist
 
 # vscode private configuration file
 .vscode/redis.json
+
+# webstorm idea
+.idea
diff --git a/src/components/Application/src/AppDarkModeToggle.vue b/src/components/Application/src/AppDarkModeToggle.vue
index 301655a4c..13c229958 100644
--- a/src/components/Application/src/AppDarkModeToggle.vue
+++ b/src/components/Application/src/AppDarkModeToggle.vue
@@ -32,7 +32,7 @@
   }
 </script>
 <style lang="less" scoped>
-  @prefix-cls: ~'@{namespace}-dark-switch';
+  @prefix-cls: ~'@{name-space}-dark-switch';
 
   html[data-theme='dark'] {
     .@{prefix-cls} {
diff --git a/src/components/Application/src/AppLogo.vue b/src/components/Application/src/AppLogo.vue
index c9d992875..b0dcf5552 100644
--- a/src/components/Application/src/AppLogo.vue
+++ b/src/components/Application/src/AppLogo.vue
@@ -58,7 +58,7 @@
   }
 </script>
 <style lang="less" scoped>
-  @prefix-cls: ~'@{namespace}-app-logo';
+  @prefix-cls: ~'@{name-space}-app-logo';
 
   .@{prefix-cls} {
     display: flex;
diff --git a/src/components/Application/src/search/AppSearchFooter.vue b/src/components/Application/src/search/AppSearchFooter.vue
index 6c3993854..12a7a60e2 100644
--- a/src/components/Application/src/search/AppSearchFooter.vue
+++ b/src/components/Application/src/search/AppSearchFooter.vue
@@ -19,7 +19,7 @@
   const { t } = useI18n();
 </script>
 <style lang="less" scoped>
-  @prefix-cls: ~'@{namespace}-app-search-footer';
+  @prefix-cls: ~'@{name-space}-app-search-footer';
 
   .@{prefix-cls} {
     display: flex;
diff --git a/src/components/Application/src/search/AppSearchModal.vue b/src/components/Application/src/search/AppSearchModal.vue
index 83d385050..9737833a2 100644
--- a/src/components/Application/src/search/AppSearchModal.vue
+++ b/src/components/Application/src/search/AppSearchModal.vue
@@ -114,8 +114,8 @@
   }
 </script>
 <style lang="less" scoped>
-  @prefix-cls: ~'@{namespace}-app-search-modal';
-  @footer-prefix-cls: ~'@{namespace}-app-search-footer';
+  @prefix-cls: ~'@{name-space}-app-search-modal';
+  @footer-prefix-cls: ~'@{name-space}-app-search-footer';
   .@{prefix-cls} {
     display: flex;
     position: fixed;
diff --git a/src/components/Basic/src/BasicArrow.vue b/src/components/Basic/src/BasicArrow.vue
index 883b22f7e..a8d399e56 100644
--- a/src/components/Basic/src/BasicArrow.vue
+++ b/src/components/Basic/src/BasicArrow.vue
@@ -48,7 +48,7 @@
   });
 </script>
 <style lang="less" scoped>
-  @prefix-cls: ~'@{namespace}-basic-arrow';
+  @prefix-cls: ~'@{name-space}-basic-arrow';
 
   .@{prefix-cls} {
     display: inline-block;
diff --git a/src/components/Basic/src/BasicHelp.vue b/src/components/Basic/src/BasicHelp.vue
index 3b7dd4c4e..c7fb048ac 100644
--- a/src/components/Basic/src/BasicHelp.vue
+++ b/src/components/Basic/src/BasicHelp.vue
@@ -92,7 +92,7 @@
   });
 </script>
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-basic-help';
+  @prefix-cls: ~'@{name-space}-basic-help';
 
   .@{prefix-cls} {
     display: inline-block;
diff --git a/src/components/Basic/src/BasicTitle.vue b/src/components/Basic/src/BasicTitle.vue
index 0d8902036..9e12bde03 100644
--- a/src/components/Basic/src/BasicTitle.vue
+++ b/src/components/Basic/src/BasicTitle.vue
@@ -40,7 +40,7 @@
   ]);
 </script>
 <style lang="less" scoped>
-  @prefix-cls: ~'@{namespace}-basic-title';
+  @prefix-cls: ~'@{name-space}-basic-title';
 
   [data-theme='dark'] {
     .@{prefix-cls} {
diff --git a/src/components/Container/src/collapse/CollapseContainer.vue b/src/components/Container/src/collapse/CollapseContainer.vue
index 6a30566f3..4196de542 100644
--- a/src/components/Container/src/collapse/CollapseContainer.vue
+++ b/src/components/Container/src/collapse/CollapseContainer.vue
@@ -88,7 +88,7 @@
 </script>
 
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-collapse-container';
+  @prefix-cls: ~'@{name-space}-collapse-container';
 
   [data-theme='dark'] {
     .@{prefix-cls} {
diff --git a/src/components/CountDown/src/CountdownInput.vue b/src/components/CountDown/src/CountdownInput.vue
index 5cd939d85..779d48831 100644
--- a/src/components/CountDown/src/CountdownInput.vue
+++ b/src/components/CountDown/src/CountdownInput.vue
@@ -38,7 +38,7 @@
   });
 </script>
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-countdown-input';
+  @prefix-cls: ~'@{name-space}-countdown-input';
 
   .@{prefix-cls} {
     .ant-input-group-addon {
diff --git a/src/components/Cropper/src/CopperModal.vue b/src/components/Cropper/src/CopperModal.vue
index 2d143d79b..5d1e67d47 100644
--- a/src/components/Cropper/src/CopperModal.vue
+++ b/src/components/Cropper/src/CopperModal.vue
@@ -240,7 +240,7 @@
 </script>
 
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-cropper-am';
+  @prefix-cls: ~'@{name-space}-cropper-am';
 
   .@{prefix-cls} {
     display: flex;
diff --git a/src/components/Cropper/src/Cropper.vue b/src/components/Cropper/src/Cropper.vue
index 4523ad434..0cc47f462 100644
--- a/src/components/Cropper/src/Cropper.vue
+++ b/src/components/Cropper/src/Cropper.vue
@@ -175,7 +175,7 @@
   });
 </script>
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-cropper-image';
+  @prefix-cls: ~'@{name-space}-cropper-image';
 
   .@{prefix-cls} {
     &--circled {
diff --git a/src/components/Cropper/src/CropperAvatar.vue b/src/components/Cropper/src/CropperAvatar.vue
index 55e0055b5..6ecd1c2aa 100644
--- a/src/components/Cropper/src/CropperAvatar.vue
+++ b/src/components/Cropper/src/CropperAvatar.vue
@@ -122,7 +122,7 @@
 </script>
 
 <style lang="less" scoped>
-  @prefix-cls: ~'@{namespace}-cropper-avatar';
+  @prefix-cls: ~'@{name-space}-cropper-avatar';
 
   .@{prefix-cls} {
     display: inline-block;
diff --git a/src/components/Drawer/src/BasicDrawer.vue b/src/components/Drawer/src/BasicDrawer.vue
index e2a1f649e..1ee42e880 100644
--- a/src/components/Drawer/src/BasicDrawer.vue
+++ b/src/components/Drawer/src/BasicDrawer.vue
@@ -199,8 +199,8 @@
 <style lang="less">
   @header-height: 60px;
   @detail-header-height: 40px;
-  @prefix-cls: ~'@{namespace}-basic-drawer';
-  @prefix-cls-detail: ~'@{namespace}-basic-drawer__detail';
+  @prefix-cls: ~'@{name-space}-basic-drawer';
+  @prefix-cls-detail: ~'@{name-space}-basic-drawer__detail';
 
   [data-theme='dark'] {
     .@{prefix-cls} {
diff --git a/src/components/Drawer/src/components/DrawerFooter.vue b/src/components/Drawer/src/components/DrawerFooter.vue
index 0a2f6ebe9..f17b5a747 100644
--- a/src/components/Drawer/src/components/DrawerFooter.vue
+++ b/src/components/Drawer/src/components/DrawerFooter.vue
@@ -65,7 +65,7 @@
 </script>
 
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-basic-drawer-footer';
+  @prefix-cls: ~'@{name-space}-basic-drawer-footer';
 
   @footer-height: 60px;
 
diff --git a/src/components/Drawer/src/components/DrawerHeader.vue b/src/components/Drawer/src/components/DrawerHeader.vue
index 09a3ad040..3d08e616e 100644
--- a/src/components/Drawer/src/components/DrawerHeader.vue
+++ b/src/components/Drawer/src/components/DrawerHeader.vue
@@ -48,7 +48,7 @@
 </script>
 
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-basic-drawer-header';
+  @prefix-cls: ~'@{name-space}-basic-drawer-header';
   @footer-height: 60px;
   .@{prefix-cls} {
     display: flex;
diff --git a/src/components/FlowChart/src/FlowChartToolbar.vue b/src/components/FlowChart/src/FlowChartToolbar.vue
index 129e3a938..6388cc8b7 100644
--- a/src/components/FlowChart/src/FlowChartToolbar.vue
+++ b/src/components/FlowChart/src/FlowChartToolbar.vue
@@ -133,7 +133,7 @@
   });
 </script>
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-flow-chart-toolbar';
+  @prefix-cls: ~'@{name-space}-flow-chart-toolbar';
 
   [data-theme='dark'] {
     // .lf-dnd {
diff --git a/src/components/Form/src/BasicForm.vue b/src/components/Form/src/BasicForm.vue
index f561a9a4e..41177b920 100644
--- a/src/components/Form/src/BasicForm.vue
+++ b/src/components/Form/src/BasicForm.vue
@@ -303,7 +303,7 @@
   });
 </script>
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-basic-form';
+  @prefix-cls: ~'@{name-space}-basic-form';
 
   .@{prefix-cls} {
     .ant-form-item {
diff --git a/src/components/Icon/src/IconPicker.vue b/src/components/Icon/src/IconPicker.vue
index adcf01a14..4b618986f 100644
--- a/src/components/Icon/src/IconPicker.vue
+++ b/src/components/Icon/src/IconPicker.vue
@@ -178,7 +178,7 @@
   }
 </script>
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-icon-picker';
+  @prefix-cls: ~'@{name-space}-icon-picker';
 
   .@{prefix-cls} {
     .ant-input-group-addon {
diff --git a/src/components/Icon/src/SvgIcon.vue b/src/components/Icon/src/SvgIcon.vue
index c79c6444e..31a2315cc 100644
--- a/src/components/Icon/src/SvgIcon.vue
+++ b/src/components/Icon/src/SvgIcon.vue
@@ -50,7 +50,7 @@
   });
 </script>
 <style lang="less" scoped>
-  @prefix-cls: ~'@{namespace}-svg-icon';
+  @prefix-cls: ~'@{name-space}-svg-icon';
 
   .@{prefix-cls} {
     display: inline-block;
diff --git a/src/components/Menu/src/index.less b/src/components/Menu/src/index.less
index ff85930f4..71b5fe752 100644
--- a/src/components/Menu/src/index.less
+++ b/src/components/Menu/src/index.less
@@ -1,4 +1,4 @@
-@basic-menu-prefix-cls: ~'@{namespace}-basic-menu';
+@basic-menu-prefix-cls: ~'@{name-space}-basic-menu';
 
 .app-top-menu-popup {
   min-width: 150px;
diff --git a/src/components/Modal/src/components/ModalClose.vue b/src/components/Modal/src/components/ModalClose.vue
index 6dbf2c0e7..45948b483 100644
--- a/src/components/Modal/src/components/ModalClose.vue
+++ b/src/components/Modal/src/components/ModalClose.vue
@@ -63,7 +63,7 @@
   });
 </script>
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-basic-modal-close';
+  @prefix-cls: ~'@{name-space}-basic-modal-close';
   .@{prefix-cls} {
     display: flex;
     align-items: center;
diff --git a/src/components/Page/src/PageFooter.vue b/src/components/Page/src/PageFooter.vue
index 70e8db005..cf087e2c2 100644
--- a/src/components/Page/src/PageFooter.vue
+++ b/src/components/Page/src/PageFooter.vue
@@ -25,7 +25,7 @@
   });
 </script>
 <style lang="less" scoped>
-  @prefix-cls: ~'@{namespace}-page-footer';
+  @prefix-cls: ~'@{name-space}-page-footer';
 
   .@{prefix-cls} {
     display: flex;
diff --git a/src/components/Page/src/PageWrapper.vue b/src/components/Page/src/PageWrapper.vue
index ce3a19dfd..bf246ed01 100644
--- a/src/components/Page/src/PageWrapper.vue
+++ b/src/components/Page/src/PageWrapper.vue
@@ -171,7 +171,7 @@
   });
 </script>
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-page-wrapper';
+  @prefix-cls: ~'@{name-space}-page-wrapper';
 
   [data-theme='dark'] {
     .@{prefix-cls} {
diff --git a/src/components/Preview/src/Preview.vue b/src/components/Preview/src/Preview.vue
index 9996d0b7b..4bdd39dbd 100644
--- a/src/components/Preview/src/Preview.vue
+++ b/src/components/Preview/src/Preview.vue
@@ -80,7 +80,7 @@
   });
 </script>
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-image-preview';
+  @prefix-cls: ~'@{name-space}-image-preview';
 
   .@{prefix-cls} {
     .ant-image {
diff --git a/src/components/SimpleMenu/src/components/menu.less b/src/components/SimpleMenu/src/components/menu.less
index 0c4c5ca54..f0ef2815c 100644
--- a/src/components/SimpleMenu/src/components/menu.less
+++ b/src/components/SimpleMenu/src/components/menu.less
@@ -1,6 +1,6 @@
-@menu-prefix-cls: ~'@{namespace}-menu';
-@menu-popup-prefix-cls: ~'@{namespace}-menu-popup';
-@submenu-popup-prefix-cls: ~'@{namespace}-menu-submenu-popup';
+@menu-prefix-cls: ~'@{name-space}-menu';
+@menu-popup-prefix-cls: ~'@{name-space}-menu-popup';
+@submenu-popup-prefix-cls: ~'@{name-space}-menu-submenu-popup';
 
 @transition-time: 0.2s;
 @menu-dark-subsidiary-color: rgba(255, 255, 255, 0.7);
diff --git a/src/components/SimpleMenu/src/index.less b/src/components/SimpleMenu/src/index.less
index 4f9c9ce17..e3f4b8d75 100644
--- a/src/components/SimpleMenu/src/index.less
+++ b/src/components/SimpleMenu/src/index.less
@@ -1,5 +1,5 @@
-@simple-prefix-cls: ~'@{namespace}-simple-menu';
-@prefix-cls: ~'@{namespace}-menu';
+@simple-prefix-cls: ~'@{name-space}-simple-menu';
+@prefix-cls: ~'@{name-space}-menu';
 
 .@{prefix-cls} {
   &-dark&-vertical .@{simple-prefix-cls}__parent {
diff --git a/src/components/StrengthMeter/src/StrengthMeter.vue b/src/components/StrengthMeter/src/StrengthMeter.vue
index 39074d980..022a67dfc 100644
--- a/src/components/StrengthMeter/src/StrengthMeter.vue
+++ b/src/components/StrengthMeter/src/StrengthMeter.vue
@@ -72,7 +72,7 @@
   });
 </script>
 <style lang="less" scoped>
-  @prefix-cls: ~'@{namespace}-strength-meter';
+  @prefix-cls: ~'@{name-space}-strength-meter';
 
   .@{prefix-cls} {
     &-bar {
diff --git a/src/components/Table/src/BasicTable.vue b/src/components/Table/src/BasicTable.vue
index e662c8b1d..8fc04f555 100644
--- a/src/components/Table/src/BasicTable.vue
+++ b/src/components/Table/src/BasicTable.vue
@@ -361,7 +361,7 @@
 <style lang="less">
   @border-color: #cecece4d;
 
-  @prefix-cls: ~'@{namespace}-basic-table';
+  @prefix-cls: ~'@{name-space}-basic-table';
 
   [data-theme='dark'] {
     .@{prefix-cls} {
diff --git a/src/components/Table/src/components/HeaderCell.vue b/src/components/Table/src/components/HeaderCell.vue
index c21bfd040..805613e5d 100644
--- a/src/components/Table/src/components/HeaderCell.vue
+++ b/src/components/Table/src/components/HeaderCell.vue
@@ -37,7 +37,7 @@
   });
 </script>
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-basic-table-header-cell';
+  @prefix-cls: ~'@{name-space}-basic-table-header-cell';
 
   .@{prefix-cls} {
     &__help {
diff --git a/src/components/Table/src/components/TableAction.vue b/src/components/Table/src/components/TableAction.vue
index b1f4d870b..c8bdb26ea 100644
--- a/src/components/Table/src/components/TableAction.vue
+++ b/src/components/Table/src/components/TableAction.vue
@@ -148,7 +148,7 @@
   });
 </script>
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-basic-table-action';
+  @prefix-cls: ~'@{name-space}-basic-table-action';
 
   .@{prefix-cls} {
     display: flex;
diff --git a/src/components/Table/src/components/TableHeader.vue b/src/components/Table/src/components/TableHeader.vue
index d415257c5..ace72f6b7 100644
--- a/src/components/Table/src/components/TableHeader.vue
+++ b/src/components/Table/src/components/TableHeader.vue
@@ -64,7 +64,7 @@
   });
 </script>
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-basic-table-header';
+  @prefix-cls: ~'@{name-space}-basic-table-header';
 
   .@{prefix-cls} {
     &__toolbar {
diff --git a/src/components/Table/src/components/TableImg.vue b/src/components/Table/src/components/TableImg.vue
index 0867bda58..13f881a3c 100644
--- a/src/components/Table/src/components/TableImg.vue
+++ b/src/components/Table/src/components/TableImg.vue
@@ -72,7 +72,7 @@
   });
 </script>
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-basic-table-img';
+  @prefix-cls: ~'@{name-space}-basic-table-img';
 
   .@{prefix-cls} {
     .ant-image {
diff --git a/src/components/Table/src/components/TableTitle.vue b/src/components/Table/src/components/TableTitle.vue
index c66bb1b9f..0068a6e3d 100644
--- a/src/components/Table/src/components/TableTitle.vue
+++ b/src/components/Table/src/components/TableTitle.vue
@@ -43,7 +43,7 @@
   });
 </script>
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-basic-table-title';
+  @prefix-cls: ~'@{name-space}-basic-table-title';
 
   .@{prefix-cls} {
     display: flex;
diff --git a/src/components/Table/src/components/editable/EditableCell.vue b/src/components/Table/src/components/editable/EditableCell.vue
index 5ae35a69f..75389f77f 100644
--- a/src/components/Table/src/components/editable/EditableCell.vue
+++ b/src/components/Table/src/components/editable/EditableCell.vue
@@ -447,7 +447,7 @@
   });
 </script>
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-editable-cell';
+  @prefix-cls: ~'@{name-space}-editable-cell';
 
   .edit-cell-align-left {
     text-align: left;
diff --git a/src/components/Table/src/components/settings/ColumnSetting.vue b/src/components/Table/src/components/settings/ColumnSetting.vue
index cd140403f..9107303b2 100644
--- a/src/components/Table/src/components/settings/ColumnSetting.vue
+++ b/src/components/Table/src/components/settings/ColumnSetting.vue
@@ -405,7 +405,7 @@
   });
 </script>
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-basic-column-setting';
+  @prefix-cls: ~'@{name-space}-basic-column-setting';
 
   .table-column-drag-icon {
     margin: 0 5px;
diff --git a/src/components/Tinymce/src/Editor.vue b/src/components/Tinymce/src/Editor.vue
index f8a62db0a..c956e2396 100644
--- a/src/components/Tinymce/src/Editor.vue
+++ b/src/components/Tinymce/src/Editor.vue
@@ -327,7 +327,7 @@
 <style lang="less" scoped></style>
 
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-tinymce-container';
+  @prefix-cls: ~'@{name-space}-tinymce-container';
 
   .@{prefix-cls} {
     position: relative;
diff --git a/src/components/Tinymce/src/ImgUpload.vue b/src/components/Tinymce/src/ImgUpload.vue
index 4945565c7..27d0f3db1 100644
--- a/src/components/Tinymce/src/ImgUpload.vue
+++ b/src/components/Tinymce/src/ImgUpload.vue
@@ -92,7 +92,7 @@
   });
 </script>
 <style lang="less" scoped>
-  @prefix-cls: ~'@{namespace}-tinymce-img-upload';
+  @prefix-cls: ~'@{name-space}-tinymce-img-upload';
 
   .@{prefix-cls} {
     position: absolute;
diff --git a/src/components/Tree/style/index.less b/src/components/Tree/style/index.less
index 472d4caa5..6d7e55217 100644
--- a/src/components/Tree/style/index.less
+++ b/src/components/Tree/style/index.less
@@ -1,4 +1,4 @@
-@tree-prefix-cls: ~'@{namespace}-tree';
+@tree-prefix-cls: ~'@{name-space}-tree';
 
 .@{tree-prefix-cls} {
   background-color: @component-background;
diff --git a/src/design/ant/table.less b/src/design/ant/table.less
index 32589def0..a72d3f6b0 100644
--- a/src/design/ant/table.less
+++ b/src/design/ant/table.less
@@ -1,4 +1,4 @@
-@prefix-cls: ~'@{namespace}-basic-table';
+@prefix-cls: ~'@{name-space}-basic-table';
 
 // fix table unnecessary scrollbar
 .@{prefix-cls} {
diff --git a/src/design/index.less b/src/design/index.less
index 772758691..3a8ff9b1b 100644
--- a/src/design/index.less
+++ b/src/design/index.less
@@ -29,16 +29,27 @@ body {
   }
 
   &.gray-mode {
-    filter: grayscale(100%);
     filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
   }
 }
 
-a:focus,
-a:active,
+a {
+  &:focus,
+  &:active {
+    outline: none;
+  }
+}
+
 button,
 div,
 svg,
 span {
   outline: none;
 }
+
+// 保持 和 windi 一样的全局样式，减少升级带来的影响
+ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
diff --git a/src/design/var/index.less b/src/design/var/index.less
index 1689f76d2..b415ebdb8 100644
--- a/src/design/var/index.less
+++ b/src/design/var/index.less
@@ -2,7 +2,7 @@
 @import 'easing';
 @import 'breakpoint';
 
-@namespace: vben;
+@name-space: vben;
 
 // tabs
 @multiple-height: 30px;
@@ -33,7 +33,7 @@
 @page-footer-z-index: 99;
 
 .bem(@n; @content) {
-  @{namespace}-@{n} {
+  @{name-space}-@{n} {
     @content();
   }
 }
diff --git a/src/hooks/web/useI18n.ts b/src/hooks/web/useI18n.ts
index 2a777b781..a54c8a537 100644
--- a/src/hooks/web/useI18n.ts
+++ b/src/hooks/web/useI18n.ts
@@ -18,7 +18,7 @@ function getKey(namespace: string | undefined, key: string) {
   if (key.startsWith(namespace)) {
     return key;
   }
-  return `${namespace}.${key}`;
+  return `${name-space}.${key}`;
 }
 
 export function useI18n(namespace?: string): {
diff --git a/src/layouts/default/content/index.vue b/src/layouts/default/content/index.vue
index adfdcc84d..56f73190f 100644
--- a/src/layouts/default/content/index.vue
+++ b/src/layouts/default/content/index.vue
@@ -30,7 +30,7 @@
   });
 </script>
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-layout-content';
+  @prefix-cls: ~'@{name-space}-layout-content';
 
   [data-theme='dark'] {
     .@{prefix-cls} {
diff --git a/src/layouts/default/feature/index.vue b/src/layouts/default/feature/index.vue
index f3876674c..241a5263d 100644
--- a/src/layouts/default/feature/index.vue
+++ b/src/layouts/default/feature/index.vue
@@ -59,7 +59,7 @@
 </template>
 
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-setting-drawer-feature';
+  @prefix-cls: ~'@{name-space}-setting-drawer-feature';
 
   .@{prefix-cls} {
     display: flex;
diff --git a/src/layouts/default/footer/index.vue b/src/layouts/default/footer/index.vue
index 04466e232..4b906eb0b 100644
--- a/src/layouts/default/footer/index.vue
+++ b/src/layouts/default/footer/index.vue
@@ -62,7 +62,7 @@
   });
 </script>
 <style lang="less" scoped>
-  @prefix-cls: ~'@{namespace}-layout-footer';
+  @prefix-cls: ~'@{name-space}-layout-footer';
 
   @normal-color: rgba(0, 0, 0, 0.45);
 
diff --git a/src/layouts/default/header/MultipleHeader.vue b/src/layouts/default/header/MultipleHeader.vue
index 72442218f..8391a262b 100644
--- a/src/layouts/default/header/MultipleHeader.vue
+++ b/src/layouts/default/header/MultipleHeader.vue
@@ -106,7 +106,7 @@
   });
 </script>
 <style lang="less" scoped>
-  @prefix-cls: ~'@{namespace}-layout-multiple-header';
+  @prefix-cls: ~'@{name-space}-layout-multiple-header';
 
   .@{prefix-cls} {
     flex: 0 0 auto;
diff --git a/src/layouts/default/header/components/Breadcrumb.vue b/src/layouts/default/header/components/Breadcrumb.vue
index 9715fce03..f5914f008 100644
--- a/src/layouts/default/header/components/Breadcrumb.vue
+++ b/src/layouts/default/header/components/Breadcrumb.vue
@@ -150,7 +150,7 @@
   });
 </script>
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-layout-breadcrumb';
+  @prefix-cls: ~'@{name-space}-layout-breadcrumb';
 
   .@{prefix-cls} {
     display: flex;
diff --git a/src/layouts/default/header/components/lock/LockModal.vue b/src/layouts/default/header/components/lock/LockModal.vue
index 2b0efad93..4deae14b9 100644
--- a/src/layouts/default/header/components/lock/LockModal.vue
+++ b/src/layouts/default/header/components/lock/LockModal.vue
@@ -93,7 +93,7 @@
   });
 </script>
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-header-lock-modal';
+  @prefix-cls: ~'@{name-space}-header-lock-modal';
 
   .@{prefix-cls} {
     &__entry {
diff --git a/src/layouts/default/header/components/notify/NoticeList.vue b/src/layouts/default/header/components/notify/NoticeList.vue
index b0914ee24..83084b1ed 100644
--- a/src/layouts/default/header/components/notify/NoticeList.vue
+++ b/src/layouts/default/header/components/notify/NoticeList.vue
@@ -138,7 +138,7 @@
   });
 </script>
 <style lang="less" scoped>
-  @prefix-cls: ~'@{namespace}-header-notify-list';
+  @prefix-cls: ~'@{name-space}-header-notify-list';
 
   .@{prefix-cls} {
     &::-webkit-scrollbar {
diff --git a/src/layouts/default/header/components/notify/index.vue b/src/layouts/default/header/components/notify/index.vue
index da66affb7..6fa9eac28 100644
--- a/src/layouts/default/header/components/notify/index.vue
+++ b/src/layouts/default/header/components/notify/index.vue
@@ -63,7 +63,7 @@
   });
 </script>
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-header-notify';
+  @prefix-cls: ~'@{name-space}-header-notify';
 
   .@{prefix-cls} {
     padding-top: 2px;
diff --git a/src/layouts/default/header/components/user-dropdown/index.vue b/src/layouts/default/header/components/user-dropdown/index.vue
index cd2461aee..ccf4c9da0 100644
--- a/src/layouts/default/header/components/user-dropdown/index.vue
+++ b/src/layouts/default/header/components/user-dropdown/index.vue
@@ -148,7 +148,7 @@
   });
 </script>
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-header-user-dropdown';
+  @prefix-cls: ~'@{name-space}-header-user-dropdown';
 
   .@{prefix-cls} {
     align-items: center;
diff --git a/src/layouts/default/header/index.less b/src/layouts/default/header/index.less
index 58ab1cedb..c3cf8de7f 100644
--- a/src/layouts/default/header/index.less
+++ b/src/layouts/default/header/index.less
@@ -1,8 +1,8 @@
 /* stylelint-disable order/properties-order */
-@header-trigger-prefix-cls: ~'@{namespace}-layout-header-trigger';
-@header-prefix-cls: ~'@{namespace}-layout-header';
-@breadcrumb-prefix-cls: ~'@{namespace}-layout-breadcrumb';
-@logo-prefix-cls: ~'@{namespace}-app-logo';
+@header-trigger-prefix-cls: ~'@{name-space}-layout-header-trigger';
+@header-prefix-cls: ~'@{name-space}-layout-header';
+@breadcrumb-prefix-cls: ~'@{name-space}-layout-breadcrumb';
+@logo-prefix-cls: ~'@{name-space}-app-logo';
 
 .@{header-prefix-cls} {
   display: flex;
diff --git a/src/layouts/default/index.vue b/src/layouts/default/index.vue
index 0c8b97b6b..553d2e31c 100644
--- a/src/layouts/default/index.vue
+++ b/src/layouts/default/index.vue
@@ -71,7 +71,7 @@
   });
 </script>
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-default-layout';
+  @prefix-cls: ~'@{name-space}-default-layout';
 
   .@{prefix-cls} {
     display: flex;
diff --git a/src/layouts/default/menu/index.vue b/src/layouts/default/menu/index.vue
index 35f8fcf5f..6aae21565 100644
--- a/src/layouts/default/menu/index.vue
+++ b/src/layouts/default/menu/index.vue
@@ -172,8 +172,8 @@
   });
 </script>
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-layout-menu';
-  @logo-prefix-cls: ~'@{namespace}-app-logo';
+  @prefix-cls: ~'@{name-space}-layout-menu';
+  @logo-prefix-cls: ~'@{name-space}-app-logo';
 
   .@{prefix-cls} {
     &-logo {
diff --git a/src/layouts/default/setting/components/InputNumberItem.vue b/src/layouts/default/setting/components/InputNumberItem.vue
index 9f350ef1d..5eb8fe9bf 100644
--- a/src/layouts/default/setting/components/InputNumberItem.vue
+++ b/src/layouts/default/setting/components/InputNumberItem.vue
@@ -42,7 +42,7 @@
   });
 </script>
 <style lang="less" scoped>
-  @prefix-cls: ~'@{namespace}-setting-input-number-item';
+  @prefix-cls: ~'@{name-space}-setting-input-number-item';
 
   .@{prefix-cls} {
     display: flex;
diff --git a/src/layouts/default/setting/components/SelectItem.vue b/src/layouts/default/setting/components/SelectItem.vue
index 676ca9125..4bde68a43 100644
--- a/src/layouts/default/setting/components/SelectItem.vue
+++ b/src/layouts/default/setting/components/SelectItem.vue
@@ -61,7 +61,7 @@
   });
 </script>
 <style lang="less" scoped>
-  @prefix-cls: ~'@{namespace}-setting-select-item';
+  @prefix-cls: ~'@{name-space}-setting-select-item';
 
   .@{prefix-cls} {
     display: flex;
diff --git a/src/layouts/default/setting/components/SettingFooter.vue b/src/layouts/default/setting/components/SettingFooter.vue
index 35a1ef3ad..c1e9a62a5 100644
--- a/src/layouts/default/setting/components/SettingFooter.vue
+++ b/src/layouts/default/setting/components/SettingFooter.vue
@@ -107,7 +107,7 @@
   });
 </script>
 <style lang="less" scoped>
-  @prefix-cls: ~'@{namespace}-setting-footer';
+  @prefix-cls: ~'@{name-space}-setting-footer';
 
   .@{prefix-cls} {
     display: flex;
diff --git a/src/layouts/default/setting/components/SwitchItem.vue b/src/layouts/default/setting/components/SwitchItem.vue
index 505908b42..c04eb13e9 100644
--- a/src/layouts/default/setting/components/SwitchItem.vue
+++ b/src/layouts/default/setting/components/SwitchItem.vue
@@ -57,7 +57,7 @@
 </script>
 
 <style lang="less" scoped>
-  @prefix-cls: ~'@{namespace}-setting-switch-item';
+  @prefix-cls: ~'@{name-space}-setting-switch-item';
 
   [data-theme='dark'] {
     .@{prefix-cls} {
diff --git a/src/layouts/default/setting/components/ThemeColorPicker.vue b/src/layouts/default/setting/components/ThemeColorPicker.vue
index 95c73a0fe..4eb3e4575 100644
--- a/src/layouts/default/setting/components/ThemeColorPicker.vue
+++ b/src/layouts/default/setting/components/ThemeColorPicker.vue
@@ -54,7 +54,7 @@
   });
 </script>
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-setting-theme-picker';
+  @prefix-cls: ~'@{name-space}-setting-theme-picker';
 
   .@{prefix-cls} {
     display: flex;
diff --git a/src/layouts/default/setting/components/TypePicker.vue b/src/layouts/default/setting/components/TypePicker.vue
index 3015a7046..f0d00978f 100644
--- a/src/layouts/default/setting/components/TypePicker.vue
+++ b/src/layouts/default/setting/components/TypePicker.vue
@@ -52,7 +52,7 @@
   });
 </script>
 <style lang="less" scoped>
-  @prefix-cls: ~'@{namespace}-setting-menu-type-picker';
+  @prefix-cls: ~'@{name-space}-setting-menu-type-picker';
 
   .@{prefix-cls} {
     display: flex;
diff --git a/src/layouts/default/sider/DragBar.vue b/src/layouts/default/sider/DragBar.vue
index ce74d856f..9f153535d 100644
--- a/src/layouts/default/sider/DragBar.vue
+++ b/src/layouts/default/sider/DragBar.vue
@@ -41,7 +41,7 @@
   });
 </script>
 <style lang="less" scoped>
-  @prefix-cls: ~'@{namespace}-darg-bar';
+  @prefix-cls: ~'@{name-space}-darg-bar';
 
   .@{prefix-cls} {
     position: absolute;
diff --git a/src/layouts/default/sider/LayoutSider.vue b/src/layouts/default/sider/LayoutSider.vue
index 960ca69da..9ada66541 100644
--- a/src/layouts/default/sider/LayoutSider.vue
+++ b/src/layouts/default/sider/LayoutSider.vue
@@ -132,7 +132,7 @@
   });
 </script>
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-layout-sideBar';
+  @prefix-cls: ~'@{name-space}-layout-sideBar';
 
   .@{prefix-cls} {
     z-index: @layout-sider-fixed-z-index;
diff --git a/src/layouts/default/sider/MixSider.vue b/src/layouts/default/sider/MixSider.vue
index 43c1624a3..a67415d03 100644
--- a/src/layouts/default/sider/MixSider.vue
+++ b/src/layouts/default/sider/MixSider.vue
@@ -343,7 +343,7 @@
   });
 </script>
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-layout-mix-sider';
+  @prefix-cls: ~'@{name-space}-layout-mix-sider';
   @width: 80px;
   .@{prefix-cls} {
     position: fixed;
diff --git a/src/layouts/default/sider/index.vue b/src/layouts/default/sider/index.vue
index b7c3c8515..16575f4d7 100644
--- a/src/layouts/default/sider/index.vue
+++ b/src/layouts/default/sider/index.vue
@@ -43,7 +43,7 @@
   });
 </script>
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-layout-sider-wrapper';
+  @prefix-cls: ~'@{name-space}-layout-sider-wrapper';
 
   .@{prefix-cls} {
     .ant-drawer-body {
diff --git a/src/layouts/default/tabs/index.less b/src/layouts/default/tabs/index.less
index 199c7f1db..83a2f06fe 100644
--- a/src/layouts/default/tabs/index.less
+++ b/src/layouts/default/tabs/index.less
@@ -1,5 +1,5 @@
 /* stylelint-disable order/properties-order */
-@prefix-cls: ~'@{namespace}-multiple-tabs';
+@prefix-cls: ~'@{name-space}-multiple-tabs';
 
 [data-theme='dark'] {
   .@{prefix-cls} {
diff --git a/src/logics/mitt/routeChange.ts b/src/logics/mitt/routeChange.ts
index a985fe2f5..96bdaa01e 100644
--- a/src/logics/mitt/routeChange.ts
+++ b/src/logics/mitt/routeChange.ts
@@ -2,7 +2,7 @@
  * Used to monitor routing changes to change the status of menus and tabs. There is no need to monitor the route, because the route status change is affected by the page rendering time, which will be slow
  */
 
-import { mitt } from '/@/utils/mitt';
+import {Handler, mitt} from '/@/utils/mitt';
 import type { RouteLocationNormalized } from 'vue-router';
 import { getRawRoute } from '/@/utils';
 
@@ -22,7 +22,7 @@ export function listenerRouteChange(
   callback: (route: RouteLocationNormalized) => void,
   immediate = true,
 ) {
-  emitter.on(key, callback);
+  emitter.on(key, callback as Handler);
   immediate && lastChangeTab && callback(lastChangeTab);
 }
 
diff --git a/src/views/sys/exception/Exception.vue b/src/views/sys/exception/Exception.vue
index 9faac8add..22e571dfb 100644
--- a/src/views/sys/exception/Exception.vue
+++ b/src/views/sys/exception/Exception.vue
@@ -131,7 +131,7 @@
   });
 </script>
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-app-exception-page';
+  @prefix-cls: ~'@{name-space}-app-exception-page';
 
   .@{prefix-cls} {
     display: flex;
diff --git a/src/views/sys/iframe/index.vue b/src/views/sys/iframe/index.vue
index 41eb1deb2..6077c9a0e 100644
--- a/src/views/sys/iframe/index.vue
+++ b/src/views/sys/iframe/index.vue
@@ -56,7 +56,7 @@
   }
 </script>
 <style lang="less" scoped>
-  @prefix-cls: ~'@{namespace}-iframe-page';
+  @prefix-cls: ~'@{name-space}-iframe-page';
 
   .@{prefix-cls} {
     .ant-spin-nested-loading {
diff --git a/src/views/sys/lock/LockPage.vue b/src/views/sys/lock/LockPage.vue
index 6e1963a2f..1953f15dd 100644
--- a/src/views/sys/lock/LockPage.vue
+++ b/src/views/sys/lock/LockPage.vue
@@ -133,7 +133,7 @@
   }
 </script>
 <style lang="less" scoped>
-  @prefix-cls: ~'@{namespace}-lock-page';
+  @prefix-cls: ~'@{name-space}-lock-page';
 
   .@{prefix-cls} {
     z-index: @lock-page-z-index;
diff --git a/src/views/sys/login/Login.vue b/src/views/sys/login/Login.vue
index a58521cec..1bef3763f 100644
--- a/src/views/sys/login/Login.vue
+++ b/src/views/sys/login/Login.vue
@@ -69,9 +69,9 @@
   const title = computed(() => globSetting?.title ?? '');
 </script>
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-login';
-  @logo-prefix-cls: ~'@{namespace}-app-logo';
-  @countdown-prefix-cls: ~'@{namespace}-countdown-input';
+  @prefix-cls: ~'@{name-space}-login';
+  @logo-prefix-cls: ~'@{name-space}-app-logo';
+  @countdown-prefix-cls: ~'@{name-space}-countdown-input';
   @dark-bg: #293146;
 
   html[data-theme='dark'] {
diff --git a/src/views/sys/login/SessionTimeoutLogin.vue b/src/views/sys/login/SessionTimeoutLogin.vue
index d1a2f34e5..6c290fda8 100644
--- a/src/views/sys/login/SessionTimeoutLogin.vue
+++ b/src/views/sys/login/SessionTimeoutLogin.vue
@@ -41,7 +41,7 @@
   });
 </script>
 <style lang="less" scoped>
-  @prefix-cls: ~'@{namespace}-st-login';
+  @prefix-cls: ~'@{name-space}-st-login';
 
   .@{prefix-cls} {
     position: fixed;