diff --git a/src/api/model/baseModel.ts b/src/api/model/baseModel.ts
index 913f2ec8..1a365118 100644
--- a/src/api/model/baseModel.ts
+++ b/src/api/model/baseModel.ts
@@ -3,7 +3,7 @@ export interface BasicPageParams {
   pageSize: number;
 }
 
-export interface BasicFetchResult<T extends any> {
+export interface BasicFetchResult<T> {
   items: T[];
   total: number;
 }
diff --git a/src/components/Application/src/AppDarkModeToggle.vue b/src/components/Application/src/AppDarkModeToggle.vue
index 6df9c499..19ba3b15 100644
--- a/src/components/Application/src/AppDarkModeToggle.vue
+++ b/src/components/Application/src/AppDarkModeToggle.vue
@@ -39,7 +39,7 @@
 
   html[data-theme='dark'] {
     .@{prefix-cls} {
-      border: 1px solid rgb(196, 188, 188);
+      border: 1px solid rgb(196 188 188);
     }
   }
 
diff --git a/src/components/Application/src/search/AppSearchFooter.vue b/src/components/Application/src/search/AppSearchFooter.vue
index 62b5870a..97bd93a9 100644
--- a/src/components/Application/src/search/AppSearchFooter.vue
+++ b/src/components/Application/src/search/AppSearchFooter.vue
@@ -42,7 +42,7 @@
       background-color: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
       border-radius: 2px;
       box-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff,
-        0 1px 2px 1px rgba(30, 35, 90, 0.4);
+        0 1px 2px 1px rgb(30 35 90 / 40%);
       align-items: center;
       justify-content: center;
 
diff --git a/src/components/Application/src/search/AppSearchModal.vue b/src/components/Application/src/search/AppSearchModal.vue
index 975c03ce..76b78824 100644
--- a/src/components/Application/src/search/AppSearchModal.vue
+++ b/src/components/Application/src/search/AppSearchModal.vue
@@ -125,7 +125,7 @@
     width: 100%;
     height: 100%;
     padding-top: 50px;
-    background-color: rgba(0, 0, 0, 0.25);
+    background-color: rgb(0 0 0 / 25%);
     justify-content: center;
 
     &--mobile {
@@ -159,7 +159,7 @@
 
         &__item {
           &-enter {
-            opacity: 0 !important;
+            opacity: 0% !important;
           }
         }
       }
@@ -168,16 +168,16 @@
     &-content {
       position: relative;
       width: 632px;
-      margin: 0 auto auto auto;
+      margin: 0 auto auto;
       background-color: @component-background;
       border-radius: 16px;
-      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+      box-shadow: 0 25px 50px -12px rgb(0 0 0 / 25%);
       flex-direction: column;
     }
 
     &-input__wrapper {
       display: flex;
-      padding: 14px 14px 0 14px;
+      padding: 14px 14px 0;
       justify-content: space-between;
       align-items: center;
     }
@@ -245,7 +245,7 @@
           background-color: @primary-color;
 
           .@{prefix-cls}-list__item-enter {
-            opacity: 1;
+            opacity: 100%;
           }
         }
 
@@ -259,7 +259,7 @@
 
         &-enter {
           width: 30px;
-          opacity: 0;
+          opacity: 0%;
         }
       }
     }
diff --git a/src/components/CodeEditor/src/codemirror/codemirror.css b/src/components/CodeEditor/src/codemirror/codemirror.css
index dc7c681e..8e9cbd86 100644
--- a/src/components/CodeEditor/src/codemirror/codemirror.css
+++ b/src/components/CodeEditor/src/codemirror/codemirror.css
@@ -2,7 +2,7 @@
 
 .CodeMirror {
   --base: #545281;
-  --comment: hsl(210, 25%, 60%);
+  --comment: hsl(210deg 25% 60%);
   --keyword: #af4ab1;
   --variable: #0055d1;
   --function: #c25205;
@@ -53,7 +53,7 @@
   color: var(--comment);
   text-align: right;
   white-space: nowrap;
-  opacity: 0.6;
+  opacity: 60%;
 }
 
 .CodeMirror-guttermarker {
@@ -90,7 +90,7 @@
   display: inline-block;
   font-size: 0.8em;
   content: '>';
-  opacity: 0.8;
+  opacity: 80%;
   transform: rotate(90deg);
   transition: transform 0.2s;
 }
@@ -125,9 +125,7 @@
 }
 
 .cm-fat-cursor-mark {
-  background-color: rgba(20, 255, 20, 0.5);
-  -webkit-animation: blink 1.06s steps(1) infinite;
-  -moz-animation: blink 1.06s steps(1) infinite;
+  background-color: rgb(20 255 20 / 50%);
   animation: blink 1.06s steps(1) infinite;
 }
 
@@ -135,16 +133,14 @@
   width: auto;
   background-color: #7e7;
   border: 0;
-  -webkit-animation: blink 1.06s steps(1) infinite;
-  -moz-animation: blink 1.06s steps(1) infinite;
   animation: blink 1.06s steps(1) infinite;
 }
-@-moz-keyframes blink {
+@keyframes blink {
   50% {
     background-color: transparent;
   }
 }
-@-webkit-keyframes blink {
+@keyframes blink {
   50% {
     background-color: transparent;
   }
@@ -294,7 +290,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
 }
 
 .CodeMirror-matchingtag {
-  background: rgba(255, 150, 0, 0.3);
+  background: rgb(255 150 0 / 30%);
 }
 
 .CodeMirror-activeline-background {
@@ -394,7 +390,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
   background-color: transparent;
 }
 
-.CodeMirror-gutter-wrapper ::-moz-selection {
+.CodeMirrorwrapper ::selection {
   background-color: transparent;
 }
 
@@ -414,11 +410,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
   border-width: 0;
 
   /* Reset some styles that the rest of the page might have set */
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
   border-radius: 0;
   -webkit-tap-highlight-color: transparent;
-  -webkit-font-variant-ligatures: contextual;
   font-variant-ligatures: contextual;
 }
 
@@ -457,7 +450,6 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
 .CodeMirror-gutter,
 .CodeMirror-gutters,
 .CodeMirror-linenumber {
-  -moz-box-sizing: content-box;
   box-sizing: content-box;
 }
 
@@ -505,15 +497,9 @@ div.CodeMirror-dragcursors {
   background: #d7d4f0;
 }
 
-.CodeMirror-line::-moz-selection,
-.CodeMirror-line > span::-moz-selection,
-.CodeMirror-line > span > span::-moz-selection {
-  background: #d7d4f0;
-}
-
 .cm-searching {
   background-color: #ffa;
-  background-color: rgba(255, 255, 0, 0.4);
+  background-color: rgb(255 255 0 / 40%);
 }
 
 /* Used to force a border model for a node */
diff --git a/src/components/ContextMenu/src/ContextMenu.vue b/src/components/ContextMenu/src/ContextMenu.vue
index 41e49a69..77f250fd 100644
--- a/src/components/ContextMenu/src/ContextMenu.vue
+++ b/src/components/ContextMenu/src/ContextMenu.vue
@@ -178,22 +178,22 @@
     margin: 0;
     list-style: none;
     background-color: @component-background;
-    border: 1px solid rgba(0, 0, 0, 0.08);
+    border: 1px solid rgb(0 0 0 / 8%);
     border-radius: 0.25rem;
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.1),
-      0 1px 5px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 10%),
+      0 1px 5px 0 rgb(0 0 0 / 6%);
     background-clip: padding-box;
     user-select: none;
 
     .item-style();
 
     .ant-divider {
-      margin: 0 0;
+      margin: 0;
     }
 
     &__popup {
       .ant-divider {
-        margin: 0 0;
+        margin: 0;
       }
 
       .item-style();
diff --git a/src/components/Cropper/src/CopperModal.vue b/src/components/Cropper/src/CopperModal.vue
index 61b93208..2ec7f4fd 100644
--- a/src/components/Cropper/src/CopperModal.vue
+++ b/src/components/Cropper/src/CopperModal.vue
@@ -234,17 +234,17 @@
       background: #eee;
       background-image: linear-gradient(
           45deg,
-          rgba(0, 0, 0, 0.25) 25%,
+          rgb(0 0 0 / 25%) 25%,
           transparent 0,
           transparent 75%,
-          rgba(0, 0, 0, 0.25) 0
+          rgb(0 0 0 / 25%) 0
         ),
         linear-gradient(
           45deg,
-          rgba(0, 0, 0, 0.25) 25%,
+          rgb(0 0 0 / 25%) 25%,
           transparent 0,
           transparent 75%,
-          rgba(0, 0, 0, 0.25) 0
+          rgb(0 0 0 / 25%) 0
         );
       background-position: 0 0, 12px 12px;
       background-size: 24px 24px;
diff --git a/src/components/Cropper/src/CropperAvatar.vue b/src/components/Cropper/src/CropperAvatar.vue
index 5b11d082..6478e7e4 100644
--- a/src/components/Cropper/src/CropperAvatar.vue
+++ b/src/components/Cropper/src/CropperAvatar.vue
@@ -135,15 +135,14 @@
     }
 
     &-image-mask {
-      opacity: 0;
+      opacity: 0%;
       position: absolute;
       width: inherit;
       height: inherit;
       border-radius: inherit;
       border: inherit;
-      background: rgba(0, 0, 0, 0.4);
+      background: rgb(0 0 0 / 40%);
       cursor: pointer;
-      -webkit-transition: opacity 0.4s;
       transition: opacity 0.4s;
 
       ::v-deep(svg) {
@@ -152,7 +151,7 @@
     }
 
     &-image-mask:hover {
-      opacity: 40;
+      opacity: 4000%;
     }
 
     &-upload-btn {
diff --git a/src/components/Loading/src/Loading.vue b/src/components/Loading/src/Loading.vue
index f626b181..0f52b289 100644
--- a/src/components/Loading/src/Loading.vue
+++ b/src/components/Loading/src/Loading.vue
@@ -57,7 +57,7 @@
     height: 100%;
     justify-content: center;
     align-items: center;
-    background-color: rgba(240, 242, 245, 0.4);
+    background-color: rgb(240 242 245 / 40%);
 
     &.absolute {
       position: absolute;
diff --git a/src/components/Markdown/src/MarkdownViewer.vue b/src/components/Markdown/src/MarkdownViewer.vue
index b453451e..0091a909 100644
--- a/src/components/Markdown/src/MarkdownViewer.vue
+++ b/src/components/Markdown/src/MarkdownViewer.vue
@@ -1,4 +1,5 @@
 <template>
+  <!-- eslint-disable vue/no-v-html -->
   <div v-html="getHtmlData" :class="$props.class" class="markdown-viewer"></div>
 </template>
 
diff --git a/src/components/Modal/src/index.less b/src/components/Modal/src/index.less
index be64b204..5bd86a25 100644
--- a/src/components/Modal/src/index.less
+++ b/src/components/Modal/src/index.less
@@ -54,7 +54,7 @@
   }
 
   &-content {
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
   }
 
   &-footer {
diff --git a/src/components/Page/src/PageFooter.vue b/src/components/Page/src/PageFooter.vue
index 0db3f743..e89a6ce9 100644
--- a/src/components/Page/src/PageFooter.vue
+++ b/src/components/Page/src/PageFooter.vue
@@ -39,8 +39,8 @@
     line-height: 44px;
     background-color: @component-background;
     border-top: 1px solid @border-color-base;
-    box-shadow: 0 -6px 16px -8px rgba(0, 0, 0, 0.08), 0 -9px 28px 0 rgba(0, 0, 0, 0.05),
-      0 -12px 48px 16px rgba(0, 0, 0, 0.03);
+    box-shadow: 0 -6px 16px -8px rgb(0 0 0 / 8%), 0 -9px 28px 0 rgb(0 0 0 / 5%),
+      0 -12px 48px 16px rgb(0 0 0 / 3%);
     transition: width 0.2s;
 
     &__left {
diff --git a/src/components/Preview/src/Functional.vue b/src/components/Preview/src/Functional.vue
index 8fdab665..1c919297 100644
--- a/src/components/Preview/src/Functional.vue
+++ b/src/components/Preview/src/Functional.vue
@@ -432,7 +432,7 @@
     bottom: 0;
     left: 0;
     z-index: @preview-comp-z-index;
-    background: rgba(0, 0, 0, 0.5);
+    background: rgb(0 0 0 / 50%);
     user-select: none;
 
     &-content {
@@ -458,7 +458,7 @@
       overflow: hidden;
       color: @white;
       cursor: pointer;
-      background-color: rgba(0, 0, 0, 0.5);
+      background-color: rgb(0 0 0 / 50%);
       border-radius: 50%;
       transition: all 0.2s;
 
@@ -470,7 +470,7 @@
       }
 
       &:hover {
-        background-color: rgba(0, 0, 0, 0.8);
+        background-color: rgb(0 0 0 / 80%);
       }
     }
 
@@ -480,7 +480,7 @@
       left: 50%;
       padding: 0 22px;
       font-size: 16px;
-      background: rgba(109, 109, 109, 0.6);
+      background: rgb(109 109 109 / 60%);
       border-radius: 15px;
       transform: translateX(-50%);
     }
@@ -494,7 +494,7 @@
       height: 44px;
       padding: 0 22px;
       margin-left: -139px;
-      background: rgba(109, 109, 109, 0.6);
+      background: rgb(109 109 109 / 60%);
       border-radius: 22px;
       justify-content: center;
 
@@ -526,12 +526,12 @@
       height: 50px;
       font-size: 28px;
       cursor: pointer;
-      background-color: rgba(0, 0, 0, 0.5);
+      background-color: rgb(0 0 0 / 50%);
       border-radius: 50%;
       transition: all 0.2s;
 
       &:hover {
-        background-color: rgba(0, 0, 0, 0.8);
+        background-color: rgb(0 0 0 / 80%);
       }
 
       &.left {
diff --git a/src/components/Preview/src/Preview.vue b/src/components/Preview/src/Preview.vue
index 3bb0b146..9996d0b7 100644
--- a/src/components/Preview/src/Preview.vue
+++ b/src/components/Preview/src/Preview.vue
@@ -88,7 +88,7 @@
     }
 
     .ant-image-preview-operations {
-      background-color: rgba(0, 0, 0, 0.4);
+      background-color: rgb(0 0 0 / 40%);
     }
   }
 </style>
diff --git a/src/components/Scrollbar/src/Scrollbar.vue b/src/components/Scrollbar/src/Scrollbar.vue
index ec567805..ed08026a 100644
--- a/src/components/Scrollbar/src/Scrollbar.vue
+++ b/src/components/Scrollbar/src/Scrollbar.vue
@@ -148,7 +148,7 @@
           display: none;
           width: 0;
           height: 0;
-          opacity: 0;
+          opacity: 0%;
         }
       }
     }
@@ -159,12 +159,12 @@
       width: 0;
       height: 0;
       cursor: pointer;
-      background-color: rgba(144, 147, 153, 0.3);
+      background-color: rgb(144 147 153 / 30%);
       border-radius: inherit;
       transition: 0.3s background-color;
 
       &:hover {
-        background-color: rgba(144, 147, 153, 0.5);
+        background-color: rgb(144 147 153 / 50%);
       }
     }
 
@@ -174,8 +174,7 @@
       bottom: 2px;
       z-index: 1;
       border-radius: 4px;
-      opacity: 0;
-      -webkit-transition: opacity 80ms ease;
+      opacity: 0%;
       transition: opacity 80ms ease;
 
       &.is-vertical {
@@ -201,7 +200,7 @@
   .scrollbar:active > .scrollbar__bar,
   .scrollbar:focus > .scrollbar__bar,
   .scrollbar:hover > .scrollbar__bar {
-    opacity: 1;
+    opacity: 100%;
     transition: opacity 340ms ease-out;
   }
 </style>
diff --git a/src/components/SimpleMenu/src/components/menu.less b/src/components/SimpleMenu/src/components/menu.less
index 84ff2dab..b9ef388e 100644
--- a/src/components/SimpleMenu/src/components/menu.less
+++ b/src/components/SimpleMenu/src/components/menu.less
@@ -188,7 +188,7 @@
 
     &-vertical&-collapse &-item,
     &-vertical&-collapse &-submenu-title {
-      padding: 0 0;
+      padding: 0;
     }
 
     &-vertical &-submenu-title-icon {
diff --git a/src/components/StrengthMeter/src/StrengthMeter.vue b/src/components/StrengthMeter/src/StrengthMeter.vue
index 738a3470..e0fc3317 100644
--- a/src/components/StrengthMeter/src/StrengthMeter.vue
+++ b/src/components/StrengthMeter/src/StrengthMeter.vue
@@ -92,7 +92,7 @@
         background-color: transparent;
         border-color: @white;
         border-style: solid;
-        border-width: 0 5px 0 5px;
+        border-width: 0 5px;
         content: '';
       }
 
diff --git a/src/components/Table/src/BasicTable.vue b/src/components/Table/src/BasicTable.vue
index 6ba20f28..7fb1071d 100644
--- a/src/components/Table/src/BasicTable.vue
+++ b/src/components/Table/src/BasicTable.vue
@@ -357,7 +357,7 @@
       padding: 16px;
 
       .ant-form {
-        padding: 12px 10px 6px 10px;
+        padding: 12px 10px 6px;
         margin-bottom: 16px;
         background-color: @component-background;
         border-radius: 2px;
@@ -375,7 +375,7 @@
 
       .ant-table-title {
         min-height: 40px;
-        padding: 0 0 8px 0 !important;
+        padding: 0 0 8px !important;
       }
 
       .ant-table.ant-table-bordered .ant-table-title {
@@ -401,7 +401,7 @@
     }
 
     .ant-pagination {
-      margin: 10px 0 0 0;
+      margin: 10px 0 0;
     }
 
     .ant-table-footer {
diff --git a/src/components/Table/src/components/HeaderCell.vue b/src/components/Table/src/components/HeaderCell.vue
index 4c75682f..91c63737 100644
--- a/src/components/Table/src/components/HeaderCell.vue
+++ b/src/components/Table/src/components/HeaderCell.vue
@@ -42,7 +42,7 @@
   .@{prefix-cls} {
     &__help {
       margin-left: 8px;
-      color: rgba(0, 0, 0, 0.65) !important;
+      color: rgb(0 0 0 / 65%) !important;
     }
   }
 </style>
diff --git a/src/components/Table/src/components/settings/ColumnSetting.vue b/src/components/Table/src/components/settings/ColumnSetting.vue
index 889c82f3..24e42d4d 100644
--- a/src/components/Table/src/components/settings/ColumnSetting.vue
+++ b/src/components/Table/src/components/settings/ColumnSetting.vue
@@ -420,7 +420,7 @@
 
     &__fixed-left,
     &__fixed-right {
-      color: rgba(0, 0, 0, 0.45);
+      color: rgb(0 0 0 / 45%);
       cursor: pointer;
 
       &.active,
diff --git a/src/components/Table/src/hooks/useDataSource.ts b/src/components/Table/src/hooks/useDataSource.ts
index 81137266..76cba22a 100644
--- a/src/components/Table/src/hooks/useDataSource.ts
+++ b/src/components/Table/src/hooks/useDataSource.ts
@@ -241,8 +241,16 @@ export function useDataSource(
   }
 
   async function fetch(opt?: FetchParams) {
-    const { api, searchInfo, defSort, fetchSetting, beforeFetch, afterFetch, useSearchForm, pagination } =
-      unref(propsRef);
+    const {
+      api,
+      searchInfo,
+      defSort,
+      fetchSetting,
+      beforeFetch,
+      afterFetch,
+      useSearchForm,
+      pagination,
+    } = unref(propsRef);
     if (!api || !isFunction(api)) return;
     try {
       setLoading(true);
diff --git a/src/components/Verify/src/DragVerify.vue b/src/components/Verify/src/DragVerify.vue
index e1f7d402..c457bc03 100644
--- a/src/components/Verify/src/DragVerify.vue
+++ b/src/components/Verify/src/DragVerify.vue
@@ -292,7 +292,7 @@
     position: relative;
     overflow: hidden;
     text-align: center;
-    background-color: rgb(238, 238, 238);
+    background-color: rgb(238 238 238);
     border: 1px solid #ddd;
     border-radius: @radius;
 
@@ -313,7 +313,7 @@
       position: absolute;
       top: 0;
       font-size: 12px;
-      -webkit-text-size-adjust: none;
+      text-size-adjust: none;
       background-color: -webkit-gradient(
         linear,
         left top,
diff --git a/src/components/Verify/src/ImgRotate.vue b/src/components/Verify/src/ImgRotate.vue
index db44eb4c..53788ed6 100644
--- a/src/components/Verify/src/ImgRotate.vue
+++ b/src/components/Verify/src/ImgRotate.vue
@@ -209,7 +209,7 @@
       }
 
       &.normal {
-        background-color: rgba(0, 0, 0, 0.3);
+        background-color: rgb(0 0 0 / 30%);
       }
     }
 
diff --git a/src/design/ant/btn.less b/src/design/ant/btn.less
index 2659f397..ab194f16 100644
--- a/src/design/ant/btn.less
+++ b/src/design/ant/btn.less
@@ -67,7 +67,7 @@
   }
 
   [data-theme='light'] &.ant-btn-link.is-disabled {
-    color: rgba(0, 0, 0, 0.25);
+    color: rgb(0 0 0 / 25%);
     text-shadow: none;
     cursor: not-allowed !important;
     background-color: transparent !important;
@@ -76,7 +76,7 @@
   }
 
   [data-theme='dark'] &.ant-btn-link.is-disabled {
-    color: rgba(255, 255, 255, 0.25) !important;
+    color: rgb(255 255 255 / 25%) !important;
     text-shadow: none;
     cursor: not-allowed !important;
     background-color: transparent !important;
diff --git a/src/design/ant/index.less b/src/design/ant/index.less
index e9ed4f7d..fc9349ce 100644
--- a/src/design/ant/index.less
+++ b/src/design/ant/index.less
@@ -30,12 +30,12 @@ span.anticon:not(.app-iconify) {
 }
 
 .ant-image-preview-operations {
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: rgb(0 0 0 / 30%);
 }
 
 .ant-popover {
   &-content {
-    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
   }
 }
 
diff --git a/src/design/index.less b/src/design/index.less
index 5e172272..1d52f05c 100644
--- a/src/design/index.less
+++ b/src/design/index.less
@@ -5,7 +5,7 @@
 @import './theme.less';
 
 input:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 1000px white inset !important;
+  box-shadow: 0 0 0 1000px white inset !important;
 }
 
 :-webkit-autofill {
@@ -14,7 +14,7 @@ input:-webkit-autofill {
 
 html {
   overflow: hidden;
-  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
 }
 
 html,
diff --git a/src/design/public.less b/src/design/public.less
index 07ce5f65..798fe022 100644
--- a/src/design/public.less
+++ b/src/design/public.less
@@ -17,15 +17,15 @@
 // }
 
 ::-webkit-scrollbar-track {
-  background-color: rgba(0, 0, 0, 0.05);
+  background-color: rgb(0 0 0 / 5%);
 }
 
 ::-webkit-scrollbar-thumb {
   // background: rgba(0, 0, 0, 0.6);
-  background-color: rgba(144, 147, 153, 0.3);
+  background-color: rgb(144 147 153 / 30%);
   // background-color: rgba(144, 147, 153, 0.3);
   border-radius: 2px;
-  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
+  box-shadow: inset 0 0 6px rgb(0 0 0 / 20%);
 }
 
 ::-webkit-scrollbar-thumb:hover {
@@ -46,6 +46,6 @@
     width: 100%;
     height: 2px;
     background-color: @primary-color;
-    opacity: 0.75;
+    opacity: 75%;
   }
 }
diff --git a/src/design/theme.less b/src/design/theme.less
index fb1e61e9..aa05033d 100644
--- a/src/design/theme.less
+++ b/src/design/theme.less
@@ -4,7 +4,7 @@
 
 html[data-theme='light'] {
   .text-secondary {
-    color: rgba(0, 0, 0, 0.45);
+    color: rgb(0 0 0 / 45%);
   }
 
   .ant-alert-success {
@@ -43,10 +43,10 @@ html[data-theme='light'] {
   }
 
   .ant-calendar-selected-day .ant-calendar-date {
-    color: rgba(0, 0, 0, 0.8);
+    color: rgb(0 0 0 / 80%);
   }
 
   .ant-select-tree li .ant-select-tree-node-content-wrapper.ant-select-tree-node-selected {
-    color: rgba(0, 0, 0, 0.9);
+    color: rgb(0 0 0 / 90%);
   }
 }
diff --git a/src/design/transition/fade.less b/src/design/transition/fade.less
index 1f8e63e8..420f1441 100644
--- a/src/design/transition/fade.less
+++ b/src/design/transition/fade.less
@@ -5,7 +5,7 @@
 
 .fade-enter-from,
 .fade-leave-to {
-  opacity: 0;
+  opacity: 0%;
 }
 
 /* fade-slide */
@@ -15,12 +15,12 @@
 }
 
 .fade-slide-enter-from {
-  opacity: 0;
+  opacity: 0%;
   transform: translateX(-30px);
 }
 
 .fade-slide-leave-to {
-  opacity: 0;
+  opacity: 0%;
   transform: translateX(30px);
 }
 
@@ -35,12 +35,12 @@
 }
 
 .fade-bottom-enter-from {
-  opacity: 0;
+  opacity: 0%;
   transform: translateY(-10%);
 }
 
 .fade-bottom-leave-to {
-  opacity: 0;
+  opacity: 0%;
   transform: translateY(10%);
 }
 
@@ -51,12 +51,12 @@
 }
 
 .fade-scale-enter-from {
-  opacity: 0;
+  opacity: 0%;
   transform: scale(1.2);
 }
 
 .fade-scale-leave-to {
-  opacity: 0;
+  opacity: 0%;
   transform: scale(0.8);
 }
 
@@ -71,11 +71,11 @@
 }
 
 .fade-top-enter-from {
-  opacity: 0;
+  opacity: 0%;
   transform: translateY(8%);
 }
 
 .fade-top-leave-to {
-  opacity: 0;
+  opacity: 0%;
   transform: translateY(-8%);
 }
diff --git a/src/design/transition/scale.less b/src/design/transition/scale.less
index c9654935..d5c30b69 100644
--- a/src/design/transition/scale.less
+++ b/src/design/transition/scale.less
@@ -4,7 +4,7 @@
   &-enter-from,
   &-leave,
   &-leave-to {
-    opacity: 0;
+    opacity: 0%;
     transform: scale(0);
   }
 }
@@ -15,7 +15,7 @@
   &-enter-from,
   &-leave,
   &-leave-to {
-    opacity: 0;
+    opacity: 0%;
     transform: scale(0) rotate(-45deg);
   }
 }
diff --git a/src/design/transition/scroll.less b/src/design/transition/scroll.less
index a5f45e4c..10d05670 100644
--- a/src/design/transition/scroll.less
+++ b/src/design/transition/scroll.less
@@ -3,7 +3,7 @@
 
   &-enter-from,
   &-leave-to {
-    opacity: 0;
+    opacity: 0%;
   }
 
   &-enter-from {
@@ -20,7 +20,7 @@
 
   &-enter-from,
   &-leave-to {
-    opacity: 0;
+    opacity: 0%;
   }
 
   &-enter-from {
@@ -37,7 +37,7 @@
 
   &-enter-from,
   &-leave-to {
-    opacity: 0;
+    opacity: 0%;
   }
 
   &-enter-from {
@@ -54,7 +54,7 @@
 
   &-enter-from,
   &-leave-to {
-    opacity: 0;
+    opacity: 0%;
   }
 
   &-enter-from {
diff --git a/src/design/transition/slide.less b/src/design/transition/slide.less
index 79b00df8..6c3166d1 100644
--- a/src/design/transition/slide.less
+++ b/src/design/transition/slide.less
@@ -3,7 +3,7 @@
 
   &-enter-from,
   &-leave-to {
-    opacity: 0;
+    opacity: 0%;
     transform: translateY(-15px);
   }
 }
@@ -13,7 +13,7 @@
 
   &-enter-from,
   &-leave-to {
-    opacity: 0;
+    opacity: 0%;
     transform: translateY(15px);
   }
 }
@@ -23,7 +23,7 @@
 
   &-enter-from,
   &-leave-to {
-    opacity: 0;
+    opacity: 0%;
     transform: translateX(-15px);
   }
 }
@@ -33,7 +33,7 @@
 
   &-enter-from,
   &-leave-to {
-    opacity: 0;
+    opacity: 0%;
     transform: translateX(15px);
   }
 }
diff --git a/src/design/transition/zoom.less b/src/design/transition/zoom.less
index 2ea378ca..f9b14dde 100644
--- a/src/design/transition/zoom.less
+++ b/src/design/transition/zoom.less
@@ -6,7 +6,7 @@
 
 .zoom-out-enter-from,
 .zoom-out-leave-to {
-  opacity: 0;
+  opacity: 0%;
   transform: scale(0);
 }
 
@@ -17,11 +17,11 @@
 }
 
 .zoom-fade-enter-from {
-  opacity: 0;
+  opacity: 0%;
   transform: scale(0.92);
 }
 
 .zoom-fade-leave-to {
-  opacity: 0;
+  opacity: 0%;
   transform: scale(1.06);
 }
diff --git a/src/hooks/core/useLockFn.ts b/src/hooks/core/useLockFn.ts
index 13a10612..0a8b3a79 100644
--- a/src/hooks/core/useLockFn.ts
+++ b/src/hooks/core/useLockFn.ts
@@ -1,8 +1,6 @@
 import { ref, unref } from 'vue';
 
-export function useLockFn<P extends any[] = any[], V extends any = any>(
-  fn: (...args: P) => Promise<V>,
-) {
+export function useLockFn<P extends any[] = any[], V = any>(fn: (...args: P) => Promise<V>) {
   const lockRef = ref(false);
   return async function (...args: P) {
     if (unref(lockRef)) return;
diff --git a/src/layouts/default/header/components/Breadcrumb.vue b/src/layouts/default/header/components/Breadcrumb.vue
index 8ffd58ee..9f2e77b7 100644
--- a/src/layouts/default/header/components/Breadcrumb.vue
+++ b/src/layouts/default/header/components/Breadcrumb.vue
@@ -169,7 +169,7 @@
         color: @breadcrumb-item-normal-color;
 
         a {
-          color: rgba(0, 0, 0, 0.65);
+          color: rgb(0 0 0 / 65%);
 
           &:hover {
             color: @primary-color;
@@ -184,10 +184,10 @@
 
     &--dark {
       .ant-breadcrumb-link {
-        color: rgba(255, 255, 255, 0.6);
+        color: rgb(255 255 255 / 60%);
 
         a {
-          color: rgba(255, 255, 255, 0.8);
+          color: rgb(255 255 255 / 80%);
 
           &:hover {
             color: @white;
@@ -197,7 +197,7 @@
 
       .ant-breadcrumb-separator,
       .anticon {
-        color: rgba(255, 255, 255, 0.8);
+        color: rgb(255 255 255 / 80%);
       }
     }
   }
diff --git a/src/layouts/default/header/components/lock/LockModal.vue b/src/layouts/default/header/components/lock/LockModal.vue
index 0a7ba613..90a3f7c7 100644
--- a/src/layouts/default/header/components/lock/LockModal.vue
+++ b/src/layouts/default/header/components/lock/LockModal.vue
@@ -95,7 +95,7 @@
     &__entry {
       position: relative;
       //height: 240px;
-      padding: 130px 30px 30px 30px;
+      padding: 130px 30px 30px;
       border-radius: 10px;
     }
 
diff --git a/src/layouts/default/header/index.less b/src/layouts/default/header/index.less
index 38ca493a..b16007e7 100644
--- a/src/layouts/default/header/index.less
+++ b/src/layouts/default/header/index.less
@@ -67,7 +67,7 @@
     .@{header-trigger-prefix-cls} {
       display: flex;
       height: 100%;
-      padding: 1px 10px 0 10px;
+      padding: 1px 10px 0;
       cursor: pointer;
       align-items: center;
 
diff --git a/src/layouts/default/menu/index.vue b/src/layouts/default/menu/index.vue
index 598a7bea..a6b7dff6 100644
--- a/src/layouts/default/menu/index.vue
+++ b/src/layouts/default/menu/index.vue
@@ -189,7 +189,7 @@
     &--mobile {
       .@{logo-prefix-cls} {
         &__title {
-          opacity: 1;
+          opacity: 100%;
         }
       }
     }
diff --git a/src/layouts/default/setting/components/TypePicker.vue b/src/layouts/default/setting/components/TypePicker.vue
index ab46aa8b..ce8610a2 100644
--- a/src/layouts/default/setting/components/TypePicker.vue
+++ b/src/layouts/default/setting/components/TypePicker.vue
@@ -66,7 +66,7 @@
       cursor: pointer;
       background-color: #f0f2f5;
       border-radius: 4px;
-      box-shadow: 0 1px 2.5px 0 rgba(0, 0, 0, 0.18);
+      box-shadow: 0 1px 2.5px 0 rgb(0 0 0 / 18%);
 
       &::before,
       &::after {
diff --git a/src/layouts/default/sider/DragBar.vue b/src/layouts/default/sider/DragBar.vue
index 3bc6fb9a..9bae60c1 100644
--- a/src/layouts/default/sider/DragBar.vue
+++ b/src/layouts/default/sider/DragBar.vue
@@ -60,7 +60,7 @@
 
     &:hover {
       background-color: @primary-color;
-      box-shadow: 0 0 4px 0 rgba(28, 36, 56, 0.15);
+      box-shadow: 0 0 4px 0 rgb(28 36 56 / 15%);
     }
   }
 </style>
diff --git a/src/layouts/default/sider/MixSider.vue b/src/layouts/default/sider/MixSider.vue
index 5fd37c4b..2a30c8ce 100644
--- a/src/layouts/default/sider/MixSider.vue
+++ b/src/layouts/default/sider/MixSider.vue
@@ -362,19 +362,19 @@
 
     &.light {
       .@{prefix-cls}-logo {
-        border-bottom: 1px solid rgb(238, 238, 238);
+        border-bottom: 1px solid rgb(238 238 238);
       }
 
       &.open {
         > .scrollbar {
-          border-right: 1px solid rgb(238, 238, 238);
+          border-right: 1px solid rgb(238 238 238);
         }
       }
 
       .@{prefix-cls}-module {
         &__item {
           font-weight: normal;
-          color: rgba(0, 0, 0, 0.65);
+          color: rgb(0 0 0 / 65%);
 
           &--active {
             color: @primary-color;
@@ -384,15 +384,15 @@
       }
       .@{prefix-cls}-menu-list {
         &__content {
-          box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
+          box-shadow: 0 0 4px 0 rgb(0 0 0 / 10%);
         }
 
         &__title {
           .pushpin {
-            color: rgba(0, 0, 0, 0.35);
+            color: rgb(0 0 0 / 35%);
 
             &:hover {
-              color: rgba(0, 0, 0, 0.85);
+              color: rgb(0 0 0 / 85%);
             }
           }
         }
@@ -442,7 +442,7 @@
       &__item {
         position: relative;
         padding: 12px 0;
-        color: rgba(255, 255, 255, 0.65);
+        color: rgb(255 255 255 / 65%);
         text-align: center;
         cursor: pointer;
         transition: all 0.3s ease;
@@ -487,7 +487,7 @@
       left: 0;
       width: 100%;
       font-size: 14px;
-      color: rgba(255, 255, 255, 0.65);
+      color: rgb(255 255 255 / 65%);
       text-align: center;
       cursor: pointer;
       background-color: @trigger-dark-bg-color;
@@ -496,7 +496,7 @@
     }
 
     &.light &-trigger {
-      color: rgba(0, 0, 0, 0.65);
+      color: rgb(0 0 0 / 65%);
       background-color: #fff;
       border-top: 1px solid #eee;
     }
@@ -515,21 +515,21 @@
         // margin-left: -6px;
         font-size: 18px;
         color: @primary-color;
-        border-bottom: 1px solid rgb(238, 238, 238);
-        opacity: 0;
+        border-bottom: 1px solid rgb(238 238 238);
+        opacity: 0%;
         transition: unset;
         align-items: center;
         justify-content: space-between;
 
         &.show {
           min-width: 130px;
-          opacity: 1;
+          opacity: 100%;
           transition: all 0.5s ease;
         }
 
         .pushpin {
           margin-right: 6px;
-          color: rgba(255, 255, 255, 0.65);
+          color: rgb(255 255 255 / 65%);
           cursor: pointer;
 
           &:hover {
@@ -572,7 +572,7 @@
       background-color: #f8f8f9;
       border-top: none;
       border-bottom: none;
-      box-shadow: 0 0 4px 0 rgba(28, 36, 56, 0.15);
+      box-shadow: 0 0 4px 0 rgb(28 36 56 / 15%);
     }
   }
 </style>
diff --git a/src/layouts/default/tabs/index.less b/src/layouts/default/tabs/index.less
index 1eb3bc28..6cc48784 100644
--- a/src/layouts/default/tabs/index.less
+++ b/src/layouts/default/tabs/index.less
@@ -50,7 +50,7 @@ html[data-theme='light'] {
 
         &:hover {
           .ant-tabs-close-x {
-            opacity: 1;
+            opacity: 100%;
           }
         }
 
@@ -59,7 +59,7 @@ html[data-theme='light'] {
           height: 12px;
           font-size: 12px;
           color: inherit;
-          opacity: 0;
+          opacity: 0%;
           transition: none;
 
           &:hover {
@@ -95,7 +95,7 @@ html[data-theme='light'] {
         transition: none;
 
         .ant-tabs-close-x {
-          opacity: 1;
+          opacity: 100%;
         }
 
         svg {
@@ -135,7 +135,7 @@ html[data-theme='light'] {
 
   &--hide-close {
     .ant-tabs-close-x {
-      opacity: 0 !important;
+      opacity: 0% !important;
     }
   }
 
diff --git a/src/router/types.ts b/src/router/types.ts
index a8d9546a..082d2084 100644
--- a/src/router/types.ts
+++ b/src/router/types.ts
@@ -2,7 +2,7 @@ import type { RouteRecordRaw, RouteMeta } from 'vue-router';
 import { RoleEnum } from '/@/enums/roleEnum';
 import { defineComponent } from 'vue';
 
-export type Component<T extends any = any> =
+export type Component<T = any> =
   | ReturnType<typeof defineComponent>
   | (() => Promise<typeof import('*.vue')>)
   | (() => Promise<T>);
diff --git a/src/views/demo/comp/lazy/Transition.vue b/src/views/demo/comp/lazy/Transition.vue
index 420dd986..b8c69ae1 100644
--- a/src/views/demo/comp/lazy/Transition.vue
+++ b/src/views/demo/comp/lazy/Transition.vue
@@ -47,12 +47,12 @@
   }
 
   .custom-enter {
-    opacity: 0;
+    opacity: 0%;
     transform: scale(0.4) translate(100%);
   }
 
   .custom-enter-to {
-    opacity: 1;
+    opacity: 100%;
   }
 
   .custom-enter-active {
@@ -63,11 +63,11 @@
   }
 
   .custom-leave {
-    opacity: 1;
+    opacity: 100%;
   }
 
   .custom-leave-to {
-    opacity: 0;
+    opacity: 0%;
     transform: scale(0.4) translate(-100%);
   }
 
diff --git a/src/views/demo/comp/transition/index.vue b/src/views/demo/comp/transition/index.vue
index 1d237d09..71c7ca8c 100644
--- a/src/views/demo/comp/transition/index.vue
+++ b/src/views/demo/comp/transition/index.vue
@@ -91,6 +91,6 @@
     width: 150px;
     height: 150px;
     margin-top: 20px;
-    background-color: rgb(126, 170, 236);
+    background-color: rgb(126 170 236);
   }
 </style>
diff --git a/src/views/demo/page/account/center/Article.vue b/src/views/demo/page/account/center/Article.vue
index 505f16d5..bb71cc91 100644
--- a/src/views/demo/page/account/center/Article.vue
+++ b/src/views/demo/page/account/center/Article.vue
@@ -70,17 +70,17 @@
     }
 
     &__content {
-      color: rgba(0, 0, 0, 0.65);
+      color: rgb(0 0 0 / 65%);
     }
 
     &__action {
       display: inline-block;
       padding: 0 16px;
-      color: rgba(0, 0, 0, 0.45);
+      color: rgb(0 0 0 / 45%);
 
       &:nth-child(1),
       &:nth-child(2) {
-        border-right: 1px solid rgba(206, 206, 206, 0.4);
+        border-right: 1px solid rgb(206 206 206 / 40%);
       }
 
       &-icon {
@@ -91,7 +91,7 @@
     &__time {
       position: absolute;
       right: 20px;
-      color: rgba(0, 0, 0, 0.45);
+      color: rgb(0 0 0 / 45%);
     }
   }
 </style>
diff --git a/src/views/demo/page/account/center/Project.vue b/src/views/demo/page/account/center/Project.vue
index 520ba131..296cbc7e 100644
--- a/src/views/demo/page/account/center/Project.vue
+++ b/src/views/demo/page/account/center/Project.vue
@@ -48,7 +48,7 @@
       width: 100%;
 
       .ant-card-body {
-        padding: 0 0 24px 0;
+        padding: 0 0 24px;
       }
 
       img {
@@ -60,7 +60,7 @@
         margin: 5px 10px;
         font-size: 16px;
         font-weight: 500;
-        color: rgba(0, 0, 0, 0.85);
+        color: rgb(0 0 0 / 85%);
       }
 
       &-content {
diff --git a/src/views/demo/page/account/center/index.vue b/src/views/demo/page/account/center/index.vue
index fc127388..ae82aeba 100644
--- a/src/views/demo/page/account/center/index.vue
+++ b/src/views/demo/page/account/center/index.vue
@@ -98,13 +98,13 @@
       padding: 0 10px;
 
       &:not(:last-child) {
-        border-right: 1px dashed rgb(206, 206, 206, 0.5);
+        border-right: 1px dashed rgb(206 206 206 / 50%);
       }
     }
 
     &-top {
       padding: 10px;
-      margin: 16px 16px 12px 16px;
+      margin: 16px 16px 12px;
       background-color: @component-background;
       border-radius: 3px;
 
@@ -147,7 +147,7 @@
 
     &-bottom {
       padding: 10px;
-      margin: 0 16px 16px 16px;
+      margin: 0 16px 16px;
       background-color: @component-background;
       border-radius: 3px;
     }
diff --git a/src/views/demo/page/list/search/index.vue b/src/views/demo/page/list/search/index.vue
index cb2258b1..9ada74f3 100644
--- a/src/views/demo/page/list/search/index.vue
+++ b/src/views/demo/page/list/search/index.vue
@@ -129,7 +129,7 @@
     &__time {
       position: absolute;
       right: 20px;
-      color: rgba(0, 0, 0, 0.45);
+      color: rgb(0 0 0 / 45%);
     }
   }
 </style>
diff --git a/src/views/sys/lock/LockPage.vue b/src/views/sys/lock/LockPage.vue
index f16bfe23..11037f9f 100644
--- a/src/views/sys/lock/LockPage.vue
+++ b/src/views/sys/lock/LockPage.vue
@@ -210,7 +210,7 @@
       display: flex;
       width: 100%;
       height: 100%;
-      background-color: rgba(0, 0, 0, 0.5);
+      background-color: rgb(0 0 0 / 50%);
       backdrop-filter: blur(8px);
       justify-content: center;
       align-items: center;
diff --git a/stylelint.config.js b/stylelint.config.js
index 73ce0654..26bc40c6 100644
--- a/stylelint.config.js
+++ b/stylelint.config.js
@@ -1,8 +1,10 @@
 module.exports = {
   root: true,
   plugins: ['stylelint-order'],
+  customSyntax: 'postcss-less',
   extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
   rules: {
+    'selector-class-pattern': null,
     'selector-pseudo-class-no-unknown': [
       true,
       {