Refactor(css): Change all less to module mode

src/renderer/src/assets/css/base.less

@@ -8,31 +8,29 @@ html {
   scroll-behavior: smooth;
 }
 
-em,
+em, i {
-i {
+  font-style: normal;
-  font-style: normal
 }
 
 li {
-  list-style: none
+  list-style: none;
 }
 
 img {
   border: 0;
-  vertical-align: middle
+  vertical-align: middle;
 }
 
 button {
-  cursor: pointer
+  cursor: pointer;
 }
 
 a {
   color: #666;
-  text-decoration: none
+  text-decoration: none;
 }
 
-button,
+button, input {
-input {
   font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
   border: 0;
   outline: none;
@@ -42,12 +40,11 @@ body {
   -webkit-font-smoothing: antialiased;
   background-color: #fff;
   font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
-  color: #666
+  color: #666;
 }
 
-.hide,
+.hide, .none {
-.none {
+  display: none;
-  display: none
 }
 
 .clearfix:after {
@@ -55,9 +52,9 @@ body {
   clear: both;
   display: block;
   content: ".";
-  height: 0
+  height: 0;
 }
 
 .clearfix {
-  *zoom: 1
+  zoom: 1;
-}
+}

src/renderer/src/assets/css/components/common/card.module.less

@@ -1,6 +1,6 @@
 @import '@/assets/css/constants';
 
-.card-box {
+.cardBox {
   background-color: @origin-color;
   border-radius: 8px;
   overflow: hidden;

src/renderer/src/assets/css/components/common/fit-center.module.less

@@ -1,4 +1,4 @@
-.fit-center {
+.fitCenter {
   display: flex;
   justify-content: center;
   align-items: center;

src/renderer/src/assets/css/components/common/fit-fullscreen.module.less

@@ -1,4 +1,4 @@
-.fit-fullscreen {
+.fitFullscreen {
   position: relative;
   width: 100%;
   height: 100vh;

src/renderer/src/assets/css/components/common/flex-box.module.less

@@ -1,4 +1,4 @@
-.flex-box {
+.flexBox {
   > * {
     flex: 1;
   }

src/renderer/src/assets/css/components/common/fullscreen-loading-mask.module.less

@@ -1,4 +1,4 @@
-.fullscreen-loading-mask {
+.fullscreenLoadingMask {
   position: absolute;
   display: flex;
   justify-content: center;

src/renderer/src/assets/css/components/common/hide-scrollbar.module.less

@@ -1,19 +1,19 @@
 @import "@/assets/css/constants";
 @import "@/assets/css/mixins";
 
-.hide-scrollbar-mask {
+.hideScrollbarMask {
   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
 
-  .hide-scrollbar-selection {
+  .hideScrollbarSelection {
     position: relative;
     overflow: scroll;
     scrollbar-width: none;
     -ms-overflow-style: none;
 
-    .hide-scrollbar-content {
+    .hideScrollbarContent {
       min-width: 100%;
     }
   }
@@ -66,7 +66,7 @@
     }
   }
 
-  .vertical-scrollbar {
+  .verticalScrollbar {
     height: 100%;
     left: 100%;
     top: 0;
@@ -77,7 +77,7 @@
     }
   }
 
-  .horizontal-scrollbar {
+  .horizontalScrollbar {
     width: 100%;
     left: 0;
     top: 100%;

src/renderer/src/assets/css/components/common/indicator.module.less

@@ -1,6 +1,6 @@
 @import '@/assets/css/constants';
 
-.dot-list {
+.dotList {
   display: flex;
   justify-content: center;
   align-items: center;

src/renderer/src/assets/css/components/common/loading-mask.module.less

@@ -1,4 +1,4 @@
-.loading-mask {
+.loadingMask {
   display: flex;
   justify-content: center;
   align-items: center;

src/renderer/src/assets/css/components/common/sidebar.module.less

@@ -17,7 +17,7 @@
     color: @main-color;
     overflow: hidden;
 
-    .icon-box {
+    .iconBox {
       display: flex;
       justify-content: center;
       align-items: center;
@@ -47,7 +47,7 @@
     }
   }
 
-  .content, .bottom-fixed {
+  .content, .bottomFixed {
     display: flex;
     min-height: 0;
     flex-direction: column;
@@ -67,12 +67,12 @@
           position: relative;
           font-size: 1rem;
 
-          > .menu-bt {
+          > .menuBt {
             border-radius: 8px;
             overflow: hidden;
             height: 40px;
 
-            .icon-box {
+            .iconBox {
               display: flex;
               justify-content: center;
               align-items: center;
@@ -113,6 +113,12 @@
                 }
               }
             }
+
+            &:hover {
+              > * {
+                background-color: @background-color;
+              }
+            }
           }
 
           .submenu {
@@ -194,8 +200,8 @@
         }
       }
 
-      .delete {
+      :global .delete {
-        .menu-bt {
+        :local .menuBt {
           border: 1px dashed @error-secondary-color;
           filter: drop-shadow(1000px 0 0 @error-secondary-color);
           transform: translate(-1000px);
@@ -222,7 +228,7 @@
     padding: 8px 14px;
     color: @main-color;
 
-    .icon-user {
+    .iconUser {
       display: flex;
       justify-content: center;
       align-items: center;
@@ -258,7 +264,7 @@
       }
     }
 
-    .icon-exit {
+    .iconExit {
       font-size: @SIZE_ICON_XS;
       color: @error-color;
       padding: 6px 10px;
@@ -275,7 +281,7 @@
     width: 68px !important;
 
     .title {
-      .icon-box {
+      .iconBox {
         span {
           transform: rotateZ(360deg);
           transition: all .3s;
@@ -287,14 +293,14 @@
       }
     }
 
-    .menu-bt {
+    .menuBt {
       .text, .extend {
         display: none;
       }
     }
 
     .submenu {
-      .menu-bt {
+      .menuBt {
         .text {
           display: block;
         }
@@ -308,7 +314,7 @@
         display: none;
       }
 
-      .submenu-exit {
+      .submenuExit {
         display: none;
         position: absolute;
         padding-left: 6px;
@@ -321,7 +327,7 @@
           border-radius: 8px;
           background-color: @origin-color;
 
-          .icon-exit {
+          .iconExit {
             padding: 4px 8px;
 
             &:hover {
@@ -336,7 +342,7 @@
         }
       }
 
-      &:hover .submenu-exit {
+      &:hover .submenuExit {
         display: block;
         animation: 0.3s ease;
         .keyframes(mfdCZC, {

src/renderer/src/assets/css/components/common/url-card.module.less

@@ -1,9 +1,9 @@
 @import "@/assets/css/constants";
 
-[data-component=component-url-card] {
+.root {
   cursor: pointer;
 
-  .url-card {
+  .urlCard {
     width: 100%;
     height: 100%;
     margin-top: 80px;

src/renderer/src/assets/css/components/dnd/drag-handle.module.less

@@ -1,4 +1,4 @@
-[data-component=component-drag-handle] {
+.root {
   background-color: transparent;
   color: unset;
   cursor: grab;

src/renderer/src/assets/css/components/dnd/drop-mask.module.less

@@ -1,6 +1,6 @@
 @import "@/assets/css/constants";
 
-[data-component=component-drop-mask] {
+.root {
   position: absolute;
   left: 0;
   top: 0;
@@ -9,7 +9,7 @@
   padding: 0 10px 10px;
   background-color: @origin-color;
 
-  .drop-mask-border {
+  .dropMaskBorder {
     display: flex;
     width: 100%;
     height: 100%;

src/renderer/src/assets/css/components/system/setting-card.module.less

@@ -1,7 +1,7 @@
 @import "@/assets/css/constants";
 
-[data-component=component-setting-card] {
+.root {
-  .settings-card {
+  .settingsCard {
     padding: 20px;
     gap: 20px;
     color: @main-color;
@@ -25,7 +25,7 @@
         color: @font-main-color;
       }
 
-      .bt-save {
+      .btSave {
         color: @main-color;
       }
     }

src/renderer/src/assets/css/components/system/statistics-card.module.less

@@ -1,7 +1,7 @@
 @import "@/assets/css/constants";
 
-[data-component=component-statistics-card] {
+.root {
-  .statistics-card {
+  .statisticsCard {
     padding: 20px;
     gap: 20px;
 
@@ -26,7 +26,7 @@
       }
     }
 
-    .card-content {
+    :global .card-content {
       font-size: 1.1em;
       padding: 0 10px;
       gap: 10px;

src/renderer/src/assets/css/components/tools/load-more-card.module.less

@@ -1,9 +1,9 @@
 @import "@/assets/css/constants";
 
-[data-component=component-load-more-card] {
+.root {
   cursor: pointer;
 
-  .load-more-card {
+  .loadMoreCard {
     width: 100%;
     height: 100%;
     text-align: center;

src/renderer/src/assets/css/components/tools/local-card.module.less

@@ -1,10 +1,10 @@
 @import "@/assets/css/constants";
 
-[data-component=component-local-card] {
+.root {
   height: 100%;
   cursor: pointer;
 
-  .local-card {
+  .localCard {
     width: 100%;
     height: 100%;
     text-align: center;
@@ -55,12 +55,12 @@
     .info {
       padding-top: 20px;
 
-      .tool-name {
+      .toolName {
         font-weight: bolder;
         font-size: 1.6em;
       }
 
-      .tool-desc {
+      .toolDesc {
         margin: 10px auto 0;
         color: @font-secondary-color;
         overflow: hidden;
@@ -85,7 +85,7 @@
         }
       }
 
-      .author-name {
+      .authorName {
         display: flex;
         align-items: center;
       }
@@ -104,3 +104,9 @@
     }
   }
 }
+
+.androidQrcode {
+  align-items: center;
+  transform: translateX(-16px);
+  gap: 20px;
+}

src/renderer/src/assets/css/components/tools/repository-card.less

@@ -1,51 +0,0 @@
-@import "@/assets/css/constants";
-
-[data-component=component-repository-card] {
-  height: 100%;
-
-  .repository-card {
-    width: 100%;
-    height: 100%;
-    text-align: center;
-    align-items: center;
-
-    > * {
-      display: block;
-      flex: 0 0 auto;
-    }
-
-    .header {
-      display: flex;
-      width: 100%;
-      align-items: center;
-      padding: 10px;
-
-      .version-select {
-        width: 9em;
-        margin-right: auto;
-      }
-
-      >:not(.version-select) {
-        font-size: 1.6em;
-      }
-    }
-
-    .icon {
-      display: flex;
-      padding-top: 10px;
-      padding-bottom: 20px;
-      color: @production-color;
-      font-size: @SIZE_ICON_XL;
-      justify-content: center;
-
-      img {
-        width: @SIZE_ICON_XL;
-      }
-    }
-
-    .tool-name {
-      font-weight: bolder;
-      font-size: 1.6em;
-    }
-  }
-}

src/renderer/src/assets/css/components/tools/repository-card.module.less

@@ -0,0 +1,94 @@
+@import "@/assets/css/constants";
+
+.root {
+  height: 100%;
+
+  .repositoryCard {
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    align-items: center;
+
+    > * {
+      display: block;
+      flex: 0 0 auto;
+    }
+
+    .header {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      padding: 10px;
+
+      :global .version-select {
+        width: 9em;
+        margin-right: auto;
+      }
+
+      >:not(:global .version-select) {
+        font-size: 1.6em;
+      }
+    }
+
+    .icon {
+      display: flex;
+      padding-top: 10px;
+      padding-bottom: 20px;
+      color: @production-color;
+      font-size: @SIZE_ICON_XL;
+      justify-content: center;
+
+      img {
+        width: @SIZE_ICON_XL;
+      }
+    }
+
+    .info {
+      transform: translateY(40px);
+      transition: all 0.1s ease;
+
+      .toolName {
+        font-weight: bolder;
+        font-size: 1.6em;
+      }
+    }
+
+    &:hover {
+      .info {
+        transform: translateY(-10px);
+        transition: all 0.2s ease;
+      }
+    }
+
+    .operation {
+      display: flex;
+      flex: 1;
+      justify-content: center;
+      padding-bottom: 20px;
+      gap: 4px;
+      width: 70%;
+      flex-direction: column;
+      align-items: center;
+      visibility: hidden;
+      opacity: 0;
+
+      > *, .edit > * {
+        width: 100%;
+      }
+
+      .edit {
+        > * {
+          > :first-child {
+            flex: 1;
+          }
+        }
+      }
+    }
+
+    &:hover .operation {
+      visibility: visible;
+      opacity: 1;
+      transition: all 0.4s ease;
+    }
+  }
+}

src/renderer/src/assets/css/components/tools/store-card.module.less

@@ -1,10 +1,10 @@
 @import "@/assets/css/constants";
 
-[data-component=component-store-card] {
+.root {
   height: 100%;
   cursor: pointer;
 
-  .store-card {
+  .storeCard {
     width: 100%;
     height: 100%;
     text-align: center;
@@ -56,12 +56,12 @@
     .info {
       padding-top: 20px;
 
-      .tool-name {
+      .toolName {
         font-weight: bolder;
         font-size: 1.6em;
       }
 
-      .tool-desc {
+      .toolDesc {
         margin: 10px auto 0;
         color: @font-secondary-color;
         overflow: hidden;
@@ -87,7 +87,7 @@
         }
       }
 
-      .author-name {
+      .authorName {
         display: flex;
         align-items: center;
       }
@@ -106,3 +106,9 @@
     }
   }
 }
+
+.androidQrcode {
+  align-items: center;
+  transform: translateX(-16px);
+  gap: 20px;
+}

src/renderer/src/assets/css/pages/sign/forget.module.less

@@ -0,0 +1,40 @@
+@import "@/assets/css/constants";
+
+.root {
+  .title {
+    margin-bottom: 20px;
+    transform: translateY(-10px);
+
+    .primary {
+      font-size: 2.4em;
+      font-weight: bolder;
+      color: @production-color;
+    }
+
+    .secondary {
+      font-size: 1.2em;
+    }
+  }
+
+  .form {
+    width: 300px;
+    font-size: 14px;
+
+    .retry, .success {
+      margin-bottom: 16px;
+
+      a {
+        font-weight: bolder;
+      }
+    }
+
+    .footer {
+      text-align: center;
+
+      a {
+        color: @production-color;
+        font-weight: bolder;
+      }
+    }
+  }
+}

src/renderer/src/assets/css/pages/sign/index.module.less

@@ -1,6 +1,6 @@
 @import "@/assets/css/constants";
 
-[data-component=sign] {
+.root {
   background-color: #D2D0DD;
   user-select: none;
 
@@ -12,7 +12,7 @@
     color: @production-color;
   }
 
-  .sign-box {
+  .signBox {
     position: relative;
     background-color: @origin-color;
     width: 900px;
@@ -32,74 +32,6 @@
       &.hidden {
         opacity: 0;
       }
-
-      > * {
-        .title {
-          margin-bottom: 20px;
-          transform: translateY(-10px);
-
-          .primary {
-            font-size: 2.4em;
-            font-weight: bolder;
-            color: @production-color;
-          }
-
-          .secondary {
-            font-size: 1.2em;
-          }
-        }
-
-        .form {
-          width: 300px;
-          font-size: 14px;
-
-          button {
-            font-weight: bolder;
-          }
-
-          .addition {
-            justify-content: space-between;
-            margin-bottom: 14px;
-
-            > * {
-              flex: 0 0 auto;
-            }
-          }
-
-          .footer {
-            text-align: center;
-
-            a {
-              color: @production-color;
-            }
-          }
-        }
-      }
-
-      .verify {
-        a {
-          color: @production-color;
-          font-weight: bolder;
-        }
-      }
-
-      .sign-up, .sign-in, .forget {
-        .footer {
-          a {
-            font-weight: bolder;
-          }
-        }
-      }
-
-      .sign-up, .forget {
-        .retry, .success {
-          margin-bottom: 16px;
-
-          a {
-            font-weight: bolder;
-          }
-        }
-      }
     }
 
     .cover {
@@ -109,7 +41,7 @@
       background-color: #F3F4F8;
       transition: all 0.8s ease;
 
-      .ball-box {
+      .ballBox {
         position: relative;
         overflow: hidden;
 

src/renderer/src/assets/css/pages/sign/sign-in.module.less

@@ -0,0 +1,41 @@
+@import "@/assets/css/constants";
+
+.root {
+  .title {
+    margin-bottom: 20px;
+    transform: translateY(-10px);
+
+    .primary {
+      font-size: 2.4em;
+      font-weight: bolder;
+      color: @production-color;
+    }
+
+    .secondary {
+      font-size: 1.2em;
+    }
+  }
+
+  .form {
+    width: 300px;
+    font-size: 14px;
+
+    .addition {
+      justify-content: space-between;
+      margin-bottom: 14px;
+
+      a {
+        flex: 0 0 auto;
+      }
+    }
+
+    .footer {
+      text-align: center;
+
+      a {
+        color: @production-color;
+        font-weight: bolder;
+      }
+    }
+  }
+}

src/renderer/src/assets/css/pages/sign/sign-up.module.less

@@ -0,0 +1,40 @@
+@import "@/assets/css/constants";
+
+.root {
+  .title {
+    margin-bottom: 20px;
+    transform: translateY(-10px);
+
+    .primary {
+      font-size: 2.4em;
+      font-weight: bolder;
+      color: @production-color;
+    }
+
+    .secondary {
+      font-size: 1.2em;
+    }
+  }
+
+  .form {
+    width: 300px;
+    font-size: 14px;
+
+    .retry, .success {
+      margin-bottom: 16px;
+
+      a {
+        font-weight: bolder;
+      }
+    }
+
+    .footer {
+      text-align: center;
+
+      a {
+        color: @production-color;
+        font-weight: bolder;
+      }
+    }
+  }
+}

src/renderer/src/assets/css/pages/sign/verify.module.less

@@ -0,0 +1,28 @@
+@import "@/assets/css/constants";
+
+.root {
+  .title {
+    margin-bottom: 20px;
+    transform: translateY(-10px);
+
+    .primary {
+      font-size: 2.4em;
+      font-weight: bolder;
+      color: @production-color;
+    }
+
+    .secondary {
+      font-size: 1.2em;
+    }
+  }
+
+  .form {
+    width: 300px;
+    font-size: 14px;
+
+    a {
+      color: @production-color;
+      font-weight: bolder;
+    }
+  }
+}

src/renderer/src/assets/css/pages/system-framework.module.less

@@ -1,11 +1,11 @@
 @import "@/assets/css/constants";
 
-[data-component=user-framework] {
+.root {
-  .left-panel {
+  .leftPanel {
     background-color: @origin-color;
   }
 
-  .right-panel {
+  .rightPanel {
     flex: 1;
     width: 0;
     background-color: @background-color;

src/renderer/src/assets/css/pages/system/index.module.less

@@ -1,11 +1,11 @@
-[data-component=system] {
+.root {
-  .root-content {
+  .rootContent {
     padding: 20px;
     gap: 20px;
     flex-wrap: wrap;
     justify-content: flex-start;
 
-    > .card-box {
+    > div {
       width: 200px;
       height: 320px;
       flex: 0 0 auto;

src/renderer/src/assets/css/pages/system/settings.module.less

@@ -1,9 +1,9 @@
-[data-component=system-settings] {
+.root {
-  .root-content {
+  .rootContent {
     padding: 20px;
     gap: 20px;
 
-    .root-col {
+    .rootCol {
       gap: 20px;
 
       > * {

src/renderer/src/assets/css/pages/system/statistics.module.less

@@ -1,11 +1,11 @@
-[data-component=system-statistics] {
+.root {
-  .root-content {
+  .rootContent {
     padding: 20px;
     gap: 20px;
     flex-wrap: wrap;
     justify-content: center;
 
-    > .card-box {
+    > div {
       width: 48%;
       flex: 0 0 auto;
     }

src/renderer/src/assets/css/pages/system/tools/base.module.less

@@ -1,13 +1,13 @@
 @import "@/assets/css/constants";
 
-[data-component=system-tools-base] {
+.root {
-  .root-content {
+  .rootContent {
     padding: 20px;
     gap: 10px;
     height: 100%;
     width: 100%;
 
-    .has-edited::after {
+    .hasEdited::after {
       content: '*';
       color: @font-secondary-color;
     }
@@ -23,7 +23,7 @@
       height: calc(100vh - 40px);
     }
 
-    .close-editor-btn {
+    .closeEditorBtn {
       display: flex;
       justify-content: center;
       align-items: center;

src/renderer/src/assets/css/pages/system/tools/code.module.less

@@ -1,12 +1,12 @@
-[data-component=system-tools-code] {
+.root {
   padding: 20px;
 
-  .card-box {
+  .rootBox {
     width: 100%;
     height: 100%;
   }
 
-  .draggable-content {
+  .draggableContent {
     position: fixed;
     inset-inline-end: 48px;
     inset-block-end: 48px;

src/renderer/src/assets/css/pages/system/tools/execute.module.less

@@ -1,7 +1,7 @@
-[data-component=tools-source] {
+.root {
   padding: 20px;
 
-  .card-box {
+  .rootBox {
     width: 100%;
     height: 100%;
   }

src/renderer/src/assets/css/pages/system/tools/template.module.less

@@ -1,13 +1,13 @@
 @import "@/assets/css/constants";
 
-[data-component=system-tools-template] {
+.root {
-  .root-content {
+  .rootContent {
     padding: 20px;
     gap: 10px;
     height: 100%;
     width: 100%;
 
-    .has-edited::after {
+    .hasEdited::after {
       content: '*';
       color: @font-secondary-color;
     }
@@ -23,7 +23,7 @@
       height: calc(100vh - 40px);
     }
 
-    .close-editor-btn {
+    .closeEditorBtn {
       display: flex;
       justify-content: center;
       align-items: center;

src/renderer/src/assets/css/pages/tools-framework.module.less

@@ -1,10 +1,10 @@
 @import "@/assets/css/constants";
 
-[data-component=tools-framework] {
+.root {
-  .left-panel {
+  .leftPanel {
     background-color: @origin-color;
 
-    .menu-droppable {
+    .menuDroppable {
       display: flex;
       position: relative;
       min-height: 0;
@@ -13,7 +13,7 @@
     }
   }
 
-  .right-panel {
+  .rightPanel {
     flex: 1;
     width: 0;
     background-color: @background-color;

src/renderer/src/assets/css/pages/tools/create.less

@@ -1,60 +0,0 @@
-@import "@/assets/css/constants";
-
-[data-component=tools-create] {
-  .root-content {
-    padding: 20px;
-    gap: 20px;
-    height: 100%;
-    width: 100%;
-
-    > * {
-      gap: 10px;
-      width: 0;
-
-      .title {
-        flex: 0 0 auto;
-        height: 40px;
-
-        > * {
-          height: 100%;
-          width: 100%;
-          justify-content: center;
-          align-items: center;
-          font-size: 1.6em;
-          color: @production-color;
-          font-weight: bolder;
-        }
-      }
-
-      .config {
-        .config-content {
-          padding: 20px;
-
-          .help {
-            margin-left: 6px;
-            color: @font-main-color;
-            font-size: 0.8em;
-          }
-
-          .create-bt {
-            width: 100%;
-            font-weight: bold;
-          }
-        }
-      }
-
-      .preview {
-        display: flex;
-        position: relative;
-        justify-content: center;
-        align-items: center;
-
-        .no-preview {
-          font-weight: bolder;
-          color: @font-secondary-color;
-          font-size: 1.4em;
-        }
-      }
-    }
-  }
-}

src/renderer/src/assets/css/pages/tools/create.module.less

@@ -0,0 +1,52 @@
+@import "@/assets/css/constants";
+
+.root {
+  padding: 20px;
+  gap: 20px;
+  height: 100%;
+  width: 100%;
+
+  > * {
+    gap: 10px;
+    width: 0;
+
+    .title {
+      flex: 0 0 auto;
+      height: 40px;
+
+      > * {
+        height: 100%;
+        width: 100%;
+        justify-content: center;
+        align-items: center;
+        font-size: 1.6em;
+        color: @production-color;
+        font-weight: bolder;
+      }
+    }
+
+    .config {
+      .configContent {
+        padding: 20px;
+
+        .createBt {
+          width: 100%;
+          font-weight: bold;
+        }
+      }
+    }
+
+    .preview {
+      display: flex;
+      position: relative;
+      justify-content: center;
+      align-items: center;
+
+      .noPreview {
+        font-weight: bolder;
+        color: @font-secondary-color;
+        font-size: 1.4em;
+      }
+    }
+  }
+}

src/renderer/src/assets/css/pages/tools/edit.module.less

@@ -1,11 +1,11 @@
-[data-component=tools-edit] {
+.root {
   padding: 20px;
 
-  .card-box {
+  .rootBox {
     height: 100%;
     width: 100%;
 
-    .root-content {
+    .rootContent {
       position: relative;
       width: 100%;
       height: 100%;
@@ -14,7 +14,7 @@
         width: 0;
       }
 
-      .draggable-mask {
+      .draggableMask {
         position: absolute;
         width: 100%;
         height: 100%;
@@ -22,7 +22,7 @@
     }
   }
 
-  .draggable-content {
+  .draggableContent {
     position: fixed;
     inset-inline-end: 48px;
     inset-block-end: 48px;

src/renderer/src/assets/css/pages/tools/index.less

@@ -1,105 +0,0 @@
-@import "@/assets/css/constants";
-
-[data-component=tools] {
-  .root-content {
-    padding: 20px;
-    gap: 20px;
-
-    .own-content {
-      gap: 20px;
-      flex-wrap: wrap;
-      justify-content: flex-start;
-
-      > .card-box, > div {
-        width: 180px;
-        min-height: 290px;
-        flex: 0 0 auto;
-      }
-
-
-      & > :first-child {
-        cursor: pointer;
-
-        .info {
-          padding-top: 50px;
-        }
-      }
-
-      & > :not(:first-child) {
-        .info {
-          transform: translateY(40px);
-          transition: all 0.1s ease;
-        }
-
-        .operation {
-          display: flex;
-          flex: 1;
-          justify-content: center;
-          padding-bottom: 20px;
-          gap: 4px;
-          width: 70%;
-          flex-direction: column;
-          align-items: center;
-          visibility: hidden;
-          opacity: 0;
-
-          > *, .edit > * {
-            width: 100%;
-          }
-
-          .edit {
-            > * {
-              > :first-child {
-                flex: 1;
-              }
-            }
-          }
-        }
-      }
-
-      & > :not(:first-child):hover {
-        .info {
-          transform: translateY(-10px);
-          transition: all 0.2s ease;
-        }
-
-        .operation {
-          visibility: visible;
-          opacity: 1;
-          transition: all 0.4s ease;
-        }
-      }
-    }
-
-    .favorite-divider {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      gap: 20px;
-      margin-top: 20px;
-
-      :first-child, :last-child {
-        height: 0;
-        border: 1px dashed @divide-color;
-      }
-
-      .divider-text {
-        flex: 0 0 auto;
-        font-size: 1.2em;
-        color: @font-secondary-color;
-      }
-    }
-
-    .star-content {
-      gap: 20px;
-      flex-wrap: wrap;
-      justify-content: flex-start;
-
-      > .card-box, > div {
-        width: 180px;
-        min-height: 290px;
-        flex: 0 0 auto;
-      }
-    }
-  }
-}

src/renderer/src/assets/css/pages/tools/index.module.less

@@ -0,0 +1,54 @@
+@import "@/assets/css/constants";
+
+.root {
+  padding: 20px;
+  gap: 20px;
+
+  .ownContent {
+    gap: 20px;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+
+    > div {
+      width: 180px;
+      min-height: 290px;
+      flex: 0 0 auto;
+    }
+
+
+    & > :first-child {
+      cursor: pointer;
+    }
+  }
+
+  .favoriteDivider {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 20px;
+    margin-top: 20px;
+
+    :first-child, :last-child {
+      height: 0;
+      border: 1px dashed @divide-color;
+    }
+
+    .dividerText {
+      flex: 0 0 auto;
+      font-size: 1.2em;
+      color: @font-secondary-color;
+    }
+  }
+
+  .starContent {
+    gap: 20px;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+
+    > div {
+      width: 180px;
+      min-height: 290px;
+      flex: 0 0 auto;
+    }
+  }
+}

src/renderer/src/assets/css/pages/tools/local.module.less

@@ -1,6 +1,6 @@
 @import "@/assets/css/constants";
 
-[data-component=tools-store] {
+.root {
   .search {
     display: flex;
     position: sticky;
@@ -20,7 +20,7 @@
     }
   }
 
-  .root-content {
+  .rootContent {
     padding: 20px;
     gap: 20px;
     flex-wrap: wrap;
@@ -32,7 +32,7 @@
       flex: 0 0 auto;
     }
 
-    .no-tool {
+    .noTool {
       display: flex;
       justify-content: center;
       font-size: 1.4em;
@@ -40,10 +40,4 @@
       color: @font-secondary-color;
     }
   }
-
-  .android-qrcode {
-    align-items: center;
-    transform: translateX(-16px);
-    gap: 20px;
-  }
 }

src/renderer/src/assets/css/pages/tools/source.module.less

@@ -1,7 +1,7 @@
-[data-component=system-tools-execute] {
+.root {
   padding: 20px;
 
-  .card-box {
+  .rootBox {
     width: 100%;
     height: 100%;
   }

src/renderer/src/assets/css/pages/tools/store.module.less

@@ -1,6 +1,6 @@
 @import "@/assets/css/constants";
 
-[data-component=tools-local] {
+.root {
   .search {
     display: flex;
     position: sticky;
@@ -20,7 +20,7 @@
     }
   }
 
-  .root-content {
+  .rootContent {
     padding: 20px;
     gap: 20px;
     flex-wrap: wrap;
@@ -32,7 +32,7 @@
       flex: 0 0 auto;
     }
 
-    .no-tool {
+    .noTool {
       display: flex;
       justify-content: center;
       font-size: 1.4em;
@@ -40,10 +40,4 @@
       color: @font-secondary-color;
     }
   }
-
-  .android-qrcode {
-    align-items: center;
-    transform: translateX(-16px);
-    gap: 20px;
-  }
 }

src/renderer/src/assets/css/pages/tools/user.module.less

@@ -1,9 +1,9 @@
 @import "@/assets/css/constants";
 
-[data-component=tools-store-user] .root-content {
+.root {
   padding: 80px 20px 20px 20px;
 
-  .root-box {
+  .rootBox {
     width: 100%;
     height: 100%;
     overflow: visible;
@@ -19,7 +19,7 @@
         flex: 0 0 auto;
       }
 
-      .avatar-box {
+      .avatarBox {
         background-color: white;
         padding: 4px;
         border-radius: 50%;
@@ -30,7 +30,7 @@
         }
       }
 
-      .info-name {
+      .infoName {
         margin: 20px 0 0 24px;
         justify-content: center;
 
@@ -66,7 +66,7 @@
         flex: 0 0 auto;
       }
 
-      .no-tool {
+      .noTool {
         display: flex;
         justify-content: center;
         margin-bottom: 20px;
@@ -76,10 +76,4 @@
       }
     }
   }
-
-  .android-qrcode {
-    align-items: center;
-    transform: translateX(-16px);
-    gap: 20px;
-  }
 }

src/renderer/src/assets/css/pages/tools/view.module.less

@@ -1,7 +1,7 @@
-[data-component=tools-view] {
+.root {
   padding: 20px;
 
-  .card-box {
+  .rootBox {
     position: relative;
     height: 100%;
     width: 100%;

src/renderer/src/assets/css/pages/user-framework.module.less

@@ -1,11 +1,11 @@
 @import "@/assets/css/constants";
 
-[data-component=system-framework] {
+.root {
-  .left-panel {
+  .leftPanel {
     background-color: @origin-color;
   }
 
-  .right-panel {
+  .rightPanel {
     flex: 1;
     width: 0;
     background-color: @background-color;

src/renderer/src/assets/css/pages/user/index.module.less

@@ -1,9 +1,9 @@
 @import "@/assets/css/constants";
 
-[data-component=user] .root-content {
+.root {
   padding: 80px 20px 20px 20px;
 
-  .card-box {
+  .content {
     width: 100%;
     height: 100%;
     overflow: visible;
@@ -30,7 +30,7 @@
         flex: 0 0 auto;
       }
 
-      .avatar-box {
+      .avatarBox {
         background-color: white;
         padding: 4px;
         border-radius: 50%;
@@ -41,7 +41,7 @@
         }
       }
 
-      .info-name {
+      .infoName {
         margin: 20px 0 0 24px;
         justify-content: center;
 
@@ -89,7 +89,7 @@
       }
     }
 
-    .table {
+    .profile, .security {
       gap: 24px;
       padding-top: 30px;
       padding-bottom: 20px;

src/renderer/src/components/Playground/CodeEditor/Editor/index.module.less

@@ -14,11 +14,11 @@
   }
 }
 
-[data-component=playground-code-editor-editor] {
+.root {
   position: relative;
   height: 0;
 
-  .monaco-editor-light {
+  :global .monaco-editor-light {
     height: 100%;
     overflow: hidden;
     background-color: var(--border);
@@ -40,7 +40,7 @@
     }
   }
 
-  .monaco-editor-vs-dark {
+  :global .monaco-editor-vs-dark {
     height: 100%;
     overflow: hidden;
     background-color: var(--border);
@@ -62,7 +62,7 @@
     }
   }
 
-  .playground-code-editor-loading {
+  .playgroundCodeEditorLoading {
     position: absolute;
     top: 0;
     right: 0;

src/renderer/src/components/Playground/CodeEditor/Editor/index.tsx

@@ -1,6 +1,6 @@
 import { editor, Selection } from 'monaco-editor'
 import MonacoEditor, { Monaco } from '@monaco-editor/react'
-import '@/components/Playground/CodeEditor/Editor/editor.less'
+import styles from '@/components/Playground/CodeEditor/Editor/index.module.less'
 import '@/components/Playground/CodeEditor/Editor/loader'
 import { IEditorOptions, IFiles, ITheme, ITsconfig } from '@/components/Playground/shared'
 import { fileNameToLanguage, tsconfigJsonDiagnosticsOptions } from '@/components/Playground/files'
@@ -112,7 +112,7 @@ const Editor = ({
 
     return (
         <>
-            <div data-component={'playground-code-editor-editor'}>
+            <div className={styles.root}>
                 <MonacoEditor
                     theme={theme}
                     path={file.name}
@@ -129,7 +129,7 @@ const Editor = ({
                         readOnly: readonly
                     }}
                 />
-                {total > 0 && !finished && <div className={'playground-code-editor-loading'} />}
+                {total > 0 && !finished && <div className={styles.playgroundCodeEditorLoading} />}
             </div>
         </>
     )

src/renderer/src/components/Playground/CodeEditor/FileSelector/Item.tsx

@@ -1,4 +1,5 @@
 import { Dispatch, SetStateAction, KeyboardEvent, ChangeEvent, MouseEvent } from 'react'
+import styles from '@/components/Playground/CodeEditor/FileSelector/item.module.less'
 
 interface ItemProps {
     className?: string
@@ -109,11 +110,11 @@ const Item = ({
 
     return (
         <div
-            className={`tab-item${active ? ' active' : ''}${className ? ` ${className}` : ''}`}
+            className={`${styles.root}${active ? ` ${styles.active}` : ''}${className ? ` ${className}` : ''}`}
             onClick={handleOnClick}
         >
             {isCreating ? (
-                <div className={'tab-item-input'}>
+                <div className={styles.tabItemInput}>
                     <input
                         ref={inputRef}
                         value={fileName}
@@ -122,13 +123,13 @@ const Item = ({
                         onKeyDown={handleKeyDown}
                         spellCheck={'false'}
                     />
-                    <span className={'tab-item-input-mask'}>{fileName}</span>
+                    <span className={styles.tabItemInputMask}>{fileName}</span>
                 </div>
             ) : (
                 <>
                     <div onDoubleClick={handleOnDoubleClick}>{value}</div>
                     {!readonly && (
-                        <div className={'tab-item-close'} onClick={handleOnDelete}>
+                        <div className={styles.tabItemClose} onClick={handleOnDelete}>
                             <IconOxygenClose />
                         </div>
                     )}

src/renderer/src/components/Playground/CodeEditor/FileSelector/file-selector.less

@@ -1,86 +0,0 @@
-[data-component=playground-file-selector].tab{
-  display: flex;
-  flex: 0 0 auto;
-  height: 40px;
-
-  .multiple {
-    flex: 1;
-    width: 0;
-
-    .tab-content {
-      height: 40px;
-      align-items: flex-end;
-      gap: 2px;
-      margin-left: 10px;
-
-      .tab-item-add {
-        padding: 0 12px;
-      }
-
-      .tabs-margin-right {
-        height: 100%;
-
-        > * {
-          height: 100%;
-          width: 10px;
-        }
-      }
-    }
-  }
-
-  .sticky {
-    display: flex;
-    flex: 0 0 auto;
-    align-items: flex-end;
-    margin-right: 10px;
-  }
-
-  .tab-item {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex: 0 0 auto;
-    height: 30px;
-    padding: 0 20px;
-    border: 1px solid #f0f0f0;
-    background-color: rgba(0, 0, 0, 0.04);
-    border-radius: 6px 6px 0 0;
-    cursor: pointer;
-
-    .tab-item-input {
-      position: relative;
-      min-width: 40px;
-      transform: translateY(1px);
-
-      .tab-item-input-mask {
-        display: inline-block;
-        color: transparent;
-      }
-      input {
-        position: absolute;
-        background-color: transparent;
-        width: 100%;
-        font-size: 1em;
-      }
-    }
-
-    .tab-item-close {
-      transform: translateX(10px);
-
-      :hover {
-        fill: #888;
-      }
-
-      svg {
-        height: 8px;
-        fill: #666;
-      }
-    }
-
-    &.active {
-      background-color: white;
-      border-bottom: none;
-    }
-  }
-
-}

src/renderer/src/components/Playground/CodeEditor/FileSelector/index.module.less

@@ -0,0 +1,37 @@
+.root{
+  display: flex;
+  flex: 0 0 auto;
+  height: 40px;
+
+  .multiple {
+    flex: 1;
+    width: 0;
+
+    .tabContent {
+      height: 40px;
+      align-items: flex-end;
+      gap: 2px;
+      margin-left: 10px;
+
+      .tabItemAdd {
+        padding: 0 12px;
+      }
+
+      .tabsMarginRight {
+        height: 100%;
+
+        > * {
+          height: 100%;
+          width: 10px;
+        }
+      }
+    }
+  }
+
+  .sticky {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: flex-end;
+    margin-right: 10px;
+  }
+}

src/renderer/src/components/Playground/CodeEditor/FileSelector/index.tsx

@@ -1,4 +1,4 @@
-import '@/components/Playground/CodeEditor/FileSelector/file-selector.less'
+import styles from '@/components/Playground/CodeEditor/FileSelector/index.module.less'
 import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
 import { IFiles } from '@/components/Playground/shared'
@@ -164,8 +164,8 @@ const FileSelector = ({
 
     return (
         <>
-            <div data-component={'playground-file-selector'} className={'tab'}>
+            <div className={styles.root}>
-                <div className={'multiple'}>
+                <div className={styles.multiple}>
                     <HideScrollbar
                         ref={hideScrollbarRef}
                         autoHideWaitingTime={800}
@@ -173,7 +173,7 @@ const FileSelector = ({
                         scrollbarAsidePadding={0}
                         scrollbarEdgePadding={0}
                     >
-                        <FlexBox direction={'horizontal'} className={'tab-content'}>
+                        <FlexBox direction={'horizontal'} className={styles.tabContent}>
                             {tabs.map((item, index) => (
                                 <Item
                                     key={index + item}
@@ -192,20 +192,20 @@ const FileSelector = ({
                             ))}
                             {!readonly && (
                                 <Item
-                                    className={'tab-item-add'}
+                                    className={styles.tabItemAdd}
                                     value={'+'}
                                     onClick={addTab}
                                     readonly
                                 />
                             )}
-                            <div className={'tabs-margin-right'}>
+                            <div className={styles.tabsMarginRight}>
                                 <div />
                             </div>
                         </FlexBox>
                     </HideScrollbar>
                 </div>
                 {(files[IMPORT_MAP_FILE_NAME] || files[TS_CONFIG_FILE_NAME]) && (
-                    <div className={'sticky'}>
+                    <div className={styles.sticky}>
                         {files[TS_CONFIG_FILE_NAME] && (
                             <Item
                                 value={'tsconfig.json'}

src/renderer/src/components/Playground/CodeEditor/FileSelector/item.module.less

@@ -0,0 +1,47 @@
+.root {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  height: 30px;
+  padding: 0 20px;
+  border: 1px solid #f0f0f0;
+  background-color: rgba(0, 0, 0, 0.04);
+  border-radius: 6px 6px 0 0;
+  cursor: pointer;
+
+  .tabItemInput {
+    position: relative;
+    min-width: 40px;
+    transform: translateY(1px);
+
+    .tabItemInputMask {
+      display: inline-block;
+      color: transparent;
+    }
+    input {
+      position: absolute;
+      background-color: transparent;
+      width: 100%;
+      font-size: 1em;
+    }
+  }
+
+  .tabItemClose {
+    transform: translateX(10px);
+
+    :hover {
+      fill: #888;
+    }
+
+    svg {
+      height: 8px;
+      fill: #666;
+    }
+  }
+
+  &.active {
+    background-color: white;
+    border-bottom: none;
+  }
+}

src/renderer/src/components/Playground/CodeEditor/code-editor.less

@@ -1,5 +0,0 @@
-[data-component=playground-code-editor] {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}

src/renderer/src/components/Playground/CodeEditor/index.module.less

@@ -0,0 +1,15 @@
+.root {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .errorMessage {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    color: white;
+    background-color: #FF4D4FAA;
+    padding: 5px 10px;
+    font-size: 1.2em;
+  }
+}

src/renderer/src/components/Playground/CodeEditor/index.tsx

@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import '@/components/Playground/CodeEditor/code-editor.less'
+import styles from '@/components/Playground/CodeEditor/index.module.less'
 import FlexBox from '@/components/common/FlexBox'
 import { IEditorOptions, IFiles, ITheme, ITsconfig } from '@/components/Playground/shared'
 import {
@@ -122,7 +122,7 @@ const CodeEditor = ({
 
     return (
         <>
-            <FlexBox data-component={'playground-code-editor'}>
+            <FlexBox className={styles.root}>
                 {showFileSelector && (
                     <FileSelector
                         files={files}
@@ -157,7 +157,7 @@ const CodeEditor = ({
                     onJumpFile={handleOnChangeSelectedFile}
                     extraLibs={extraLibs}
                 />
-                {errorMsg && <div className={'playground-error-message'}>{errorMsg}</div>}
+                {errorMsg && <div className={styles.errorMessage}>{errorMsg}</div>}
             </FlexBox>
         </>
     )

src/renderer/src/components/Playground/Output/Preview/Render.tsx

@@ -1,5 +1,5 @@
 import { ChangeEvent } from 'react'
-import '@/components/Playground/Output/Preview/render.less'
+import styles from '@/components/Playground/Output/Preview/render.module.less'
 import { COLOR_FONT_MAIN } from '@/constants/common.constants'
 import iframeRaw from '@/components/Playground/Output/Preview/iframe.html?raw'
 import HideScrollbar from '@/components/common/HideScrollbar'
@@ -174,16 +174,18 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
     return mobileMode ? (
         <>
             <HideScrollbar
-                className={'mobile-mode-background'}
+                className={styles.mobileModeRoot}
                 isShowVerticalScrollbar
                 isShowHorizontalScrollbar
                 autoHideWaitingTime={1000}
             >
-                <div className={'mobile-mode-content'} style={{ zoom }}>
+                <div className={styles.mobileModeContent} style={{ zoom }}>
-                    <div className={`device${isRotate ? ' rotate' : ''}`}>
+                    <div className={`${styles.device}${isRotate ? ` ${styles.rotate}` : ''}`}>
-                        <div className={`device-header${isRotate ? ' rotate' : ''}`} />
                         <div
-                            className={`device-content${isRotate ? ' rotate' : ''}`}
+                            className={`${styles.deviceHeader}${isRotate ? ` ${styles.rotate}` : ''}`}
+                        />
+                        <div
+                            className={`${styles.deviceContent}${isRotate ? ` ${styles.rotate}` : ''}`}
                             style={{
                                 width: isRotate
                                     ? (devices.find((value) => value.name === selectedDevice)
@@ -198,7 +200,7 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
                             }}
                         >
                             <iframe
-                                data-component={'playground-output-preview-render'}
+                                className={styles.renderRoot}
                                 key={iframeKey}
                                 ref={iframeRef}
                                 src={iframeUrl}
@@ -207,19 +209,21 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
                                 allow={'clipboard-read; clipboard-write'}
                             />
                         </div>
-                        <div className={`device-footer${isRotate ? ' rotate' : ''}`} />
+                        <div
+                            className={`${styles.deviceFooter}${isRotate ? ` ${styles.rotate}` : ''}`}
+                        />
                     </div>
                 </div>
             </HideScrollbar>
 
-            <div className={'switch-device'}>
+            <div className={styles.switchDevice}>
                 <IconOxygenMobile fill={COLOR_FONT_MAIN} />
                 <select value={selectedDevice} onChange={handleOnChangeDevice}>
                     {devices.map((value) => (
                         <option value={value.name}>{value.name}</option>
                     ))}
                 </select>
-                <div className={'rotate-device'} title={'旋转屏幕'} onClick={handleOnRotateDevice}>
+                <div title={'旋转屏幕'} onClick={handleOnRotateDevice}>
                     {isRotate ? (
                         <IconOxygenRotateRight fill={COLOR_FONT_MAIN} />
                     ) : (
@@ -227,7 +231,7 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
                     )}
                 </div>
             </div>
-            <div className={'switch-zoom'}>
+            <div className={styles.switchZoom}>
                 <IconOxygenZoom fill={COLOR_FONT_MAIN} />
                 <input
                     type={'range'}
@@ -241,7 +245,7 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
         </>
     ) : (
         <iframe
-            data-component={'playground-output-preview-render'}
+            className={styles.renderRoot}
             key={iframeKey}
             ref={iframeRef}
             src={iframeUrl}

src/renderer/src/components/Playground/Output/Preview/index.module.less

@@ -1,9 +1,9 @@
-[data-component=playground-preview] {
+.root {
   display: flex;
   position: relative;
   height: 0;
 
-  .playground-error-message {
+  .errorMessage {
     position: absolute;
     bottom: 0;
     width: 100%;

src/renderer/src/components/Playground/Output/Preview/index.tsx

@@ -1,4 +1,4 @@
-import '@/components/Playground/Output/Preview/preview.less'
+import styles from '@/components/Playground/Output/Preview/index.module.less'
 import { IFiles, IImportMap } from '@/components/Playground/shared'
 import Compiler from '@/components/Playground/compiler'
 import Render from '@/components/Playground/Output/Preview/Render'
@@ -42,9 +42,9 @@ const Preview = ({
     }, [files, Compiler, importMap, entryPoint])
 
     return (
-        <div data-component={'playground-preview'}>
+        <div className={styles.root}>
             <Render iframeKey={iframeKey} compiledCode={compiledCode} mobileMode={mobileMode} />
-            {errorMsg && <div className={'playground-error-message'}>{errorMsg}</div>}
+            {errorMsg && <div className={styles.errorMessage}>{errorMsg}</div>}
         </div>
     )
 }

src/renderer/src/components/Playground/Output/Preview/render.module.less

@@ -1,14 +1,14 @@
-[data-component=playground-output-preview-render] {
+.renderRoot {
   border: none;
   height: 100%;
   width: 100%;
   flex: 1;
 }
 
-.mobile-mode-background {
+.mobileModeRoot {
   background-color: rgba(204, 204, 204, 0.66);
 
-  .mobile-mode-content {
+  .mobileModeContent {
     padding: 80px;
   }
 
@@ -24,7 +24,7 @@
       flex-direction: row;
     }
 
-    .device-header {
+    .deviceHeader {
       margin: 20px auto;
       width: 60px;
       height: 10px;
@@ -38,7 +38,7 @@
       }
     }
 
-    .device-content {
+    .deviceContent {
       margin: 0 10px;
       background-color: white;
 
@@ -47,7 +47,7 @@
       }
     }
 
-    .device-footer {
+    .deviceFooter {
       margin: 20px auto;
       width: 40px;
       height: 40px;
@@ -61,7 +61,7 @@
   }
 }
 
-.switch-device, .switch-zoom {
+.switchDevice, .switchZoom {
   display: flex;
   position: absolute;
   top: 10px;
@@ -69,10 +69,10 @@
   gap: 4px;
 }
 
-.switch-device {
+.switchDevice {
   left: 10px;
 }
 
-.switch-zoom {
+.switchZoom {
   right: 10px;
 }

src/renderer/src/components/Playground/Output/Transform/index.module.less

@@ -0,0 +1,13 @@
+.root {
+  position: relative;
+
+  .errorMessage {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    color: white;
+    background-color: #FF4D4FAA;
+    padding: 5px 10px;
+    font-size: 1.2em;
+  }
+}

src/renderer/src/components/Playground/Output/Transform/index.tsx

@@ -1,6 +1,6 @@
 import MonacoEditor from '@monaco-editor/react'
 import { Loader } from 'esbuild-wasm'
-import '@/components/Playground/Output/Transform/transform.less'
+import styles from '@/components/Playground/Output/Transform/index.module.less'
 import { IFile, ITheme } from '@/components/Playground/shared'
 import { cssToJsFromFile, jsonToJsFromFile } from '@/components/Playground/files'
 import Compiler from '@/components/Playground/compiler'
@@ -57,14 +57,14 @@ const Transform = ({ file, theme }: OutputProps) => {
     }, [file, Compiler])
 
     return (
-        <div data-component={'playground-transform'}>
+        <div className={styles.root}>
             <MonacoEditor
                 theme={theme}
                 language={'javascript'}
                 value={compiledCode}
                 options={{ ...MonacoEditorConfig, readOnly: true }}
             />
-            {errorMsg && <div className={'playground-error-message'}>{errorMsg}</div>}
+            {errorMsg && <div className={styles.errorMessage}>{errorMsg}</div>}
         </div>
     )
 }

src/renderer/src/components/Playground/Output/Transform/transform.less

@@ -1,3 +0,0 @@
-[data-component=playground-transform] {
-  position: relative;
-}

src/renderer/src/components/Playground/Output/index.tsx

@@ -26,7 +26,7 @@ const Output = ({
     const [selectedTab, setSelectedTab] = useState('Preview')
 
     return (
-        <FlexBox data-component={'playground-code-output'}>
+        <FlexBox>
             <Playground.CodeEditor.FileSelector
                 files={{
                     Preview: { name: 'Preview', language: 'json', value: '' },

src/renderer/src/components/Playground/index.module.less

@@ -1,4 +1,4 @@
-[data-component=playground] {
+.root {
   width: 100%;
   height: 100%;
 

src/renderer/src/components/Playground/index.tsx

@@ -1,4 +1,4 @@
-import '@/components/Playground/playground.less'
+import styles from '@/components/Playground/index.module.less'
 import { IFiles, IImportMap, ITsconfig } from '@/components/Playground/shared'
 import {
     ENTRY_FILE_NAME,
@@ -77,7 +77,7 @@ const Playground = ({
     }, [tsconfigRaw])
 
     return (
-        <FlexBox data-component={'playground'} direction={'horizontal'}>
+        <FlexBox className={styles.root} direction={'horizontal'}>
             <CodeEditor
                 tsconfig={tsconfig}
                 files={{

src/renderer/src/components/common/Card.tsx

@@ -1,10 +1,16 @@
 import { DetailedHTMLProps, HTMLAttributes } from 'react'
-import '@/assets/css/components/common/card.less'
+import styles from '@/assets/css/components/common/card.module.less'
 
 type CardProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
 
 const Card = forwardRef<HTMLDivElement, CardProps>(({ className, ...props }, ref) => {
-    return <div className={`card-box${className ? ` ${className}` : ''}`} {...props} ref={ref} />
+    return (
+        <div
+            className={`${styles.cardBox}${className ? ` ${className}` : ''}`}
+            {...props}
+            ref={ref}
+        />
+    )
 })
 
 export default Card

src/renderer/src/components/common/FitCenter.tsx

@@ -1,5 +1,5 @@
 import { DetailedHTMLProps, HTMLAttributes } from 'react'
-import '@/assets/css/components/common/fit-center.less'
+import styles from '@/assets/css/components/common/fit-center.module.less'
 
 interface FitCenterProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     vertical?: boolean
@@ -8,7 +8,7 @@ interface FitCenterProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement
 const FitCenter = ({ className, vertical, ...props }: FitCenterProps) => {
     return (
         <div
-            className={`fit-center${className ? ` ${className}` : ''}${
+            className={`${styles.fitCenter}${className ? ` ${className}` : ''}${
                 vertical ? ' flex-vertical' : ' flex-horizontal'
             }`}
             {...props}

src/renderer/src/components/common/FitFullscreen.tsx

@@ -1,5 +1,5 @@
 import { DetailedHTMLProps, HTMLAttributes } from 'react'
-import '@/assets/css/components/common/fit-fullscreen.less'
+import styles from '@/assets/css/components/common/fit-fullscreen.module.less'
 
 interface FitFullscreenProps
     extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
@@ -11,7 +11,7 @@ const FitFullscreen = forwardRef<HTMLDivElement, FitFullscreenProps>(
     ({ zIndex, backgroundColor, className, style, ...props }, ref) => {
         return (
             <div
-                className={`fit-fullscreen${className ? ` ${className}` : ''}`}
+                className={`${styles.fitFullscreen}${className ? ` ${className}` : ''}`}
                 style={{
                     zIndex,
                     backgroundColor,

src/renderer/src/components/common/FlexBox.tsx

@@ -1,5 +1,5 @@
 import { DetailedHTMLProps, HTMLAttributes } from 'react'
-import '@/assets/css/components/common/flex-box.less'
+import styles from '@/assets/css/components/common/flex-box.module.less'
 
 interface FlexBoxProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     direction?: 'horizontal' | 'vertical'
@@ -10,7 +10,7 @@ const FlexBox = forwardRef<HTMLDivElement, FlexBoxProps>(
     ({ className, direction, gap, style, ...props }, ref) => {
         return (
             <div
-                className={`flex-box ${
+                className={`${styles.flexBox} ${
                     direction === 'horizontal' ? 'flex-horizontal' : 'flex-vertical'
                 }${className ? ` ${className}` : ''}`}
                 style={{ gap, ...style }}

src/renderer/src/components/common/FullscreenLoadingMask.tsx

@@ -1,5 +1,5 @@
 import Icon from '@ant-design/icons'
-import '@/assets/css/components/common/fullscreen-loading-mask.less'
+import styles from '@/assets/css/components/common/fullscreen-loading-mask.module.less'
 import { COLOR_FONT_MAIN } from '@/constants/common.constants'
 import FitFullscreen from '@/components/common/FitFullscreen'
 
@@ -16,7 +16,7 @@ const FullscreenLoadingMask = () => {
     return (
         <>
             <FitFullscreen>
-                <div className={'fullscreen-loading-mask'}>
+                <div className={styles.fullscreenLoadingMask}>
                     <AntdSpin indicator={loadingIcon} />
                 </div>
             </FitFullscreen>

src/renderer/src/components/common/HideScrollbar.tsx

@@ -6,7 +6,7 @@ import {
     HTMLAttributes,
     UIEvent
 } from 'react'
-import '@/assets/css/components/common/hide-scrollbar.less'
+import styles from '@/assets/css/components/common/hide-scrollbar.module.less'
 
 interface HideScrollbarProps
     extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
@@ -515,7 +515,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
         return (
             <>
                 <div
-                    className={'hide-scrollbar-mask'}
+                    className={styles.hideScrollbarMask}
                     ref={maskRef}
                     onMouseMove={
                         !isPreventScroll ? handleScrollbarMouseEvent('move', 'all') : undefined
@@ -538,7 +538,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
                 >
                     <div
                         ref={rootRef}
-                        className={`hide-scrollbar-selection${className ? ` ${className}` : ''}`}
+                        className={`${styles.hideScrollbarSelection}${className ? ` ${className}` : ''}`}
                         tabIndex={0}
                         style={{
                             width: `calc(${maskRef.current?.clientWidth}px + ${verticalScrollbarWidth}px)`,
@@ -555,7 +555,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
                         onScroll={handleDefaultScroll}
                     >
                         <div
-                            className={'hide-scrollbar-content'}
+                            className={styles.hideScrollbarContent}
                             ref={contentRef}
                             style={{ minWidth, minHeight }}
                             data-refresh={refreshTime}
@@ -566,8 +566,8 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
                     {isShowVerticalScrollbar &&
                         (!isHiddenVerticalScrollbarWhenFull || verticalScrollbarLength < 100) && (
                             <div
-                                className={`scrollbar vertical-scrollbar${
+                                className={`${styles.scrollbar} ${styles.verticalScrollbar}${
-                                    isVerticalScrollbarAutoHide ? ' hide' : ''
+                                    isVerticalScrollbarAutoHide ? ` ${styles.hide}` : ''
                                 }`}
                                 style={{
                                     height: maskRef.current
@@ -582,9 +582,9 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
                                     padding: `${scrollbarAsidePadding}px ${scrollbarEdgePadding}px`
                                 }}
                             >
-                                <div className={'box'} style={{ width: scrollbarWidth }}>
+                                <div className={styles.box} style={{ width: scrollbarWidth }}>
                                     <div
-                                        className={'block'}
+                                        className={styles.block}
                                         style={{
                                             height: `${verticalScrollbarLength}%`,
                                             top: `clamp(0px, ${verticalScrollbarPosition}%, ${
@@ -609,8 +609,8 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
                         (!isHiddenHorizontalScrollbarWhenFull ||
                             horizontalScrollbarLength < 100) && (
                             <div
-                                className={`scrollbar horizontal-scrollbar${
+                                className={`${styles.scrollbar} ${styles.horizontalScrollbar}${
-                                    isHorizontalScrollbarAutoHide ? ' hide' : ''
+                                    isHorizontalScrollbarAutoHide ? ` ${styles.hide}` : ''
                                 }`}
                                 style={{
                                     width: maskRef.current
@@ -625,9 +625,9 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
                                     padding: `${scrollbarEdgePadding}px ${scrollbarAsidePadding}px`
                                 }}
                             >
-                                <div className={'box'} style={{ height: scrollbarWidth }}>
+                                <div className={styles.box} style={{ height: scrollbarWidth }}>
                                     <div
-                                        className={'block'}
+                                        className={styles.block}
                                         style={{
                                             width: `${horizontalScrollbarLength}%`,
                                             left: `clamp(0px, ${horizontalScrollbarPosition}%, ${

src/renderer/src/components/common/Indicator.tsx

@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import '@/assets/css/components/common/indicator.less'
+import styles from '@/assets/css/components/common/indicator.module.less'
 
 interface IndicatorProps {
     total: number
@@ -16,15 +16,15 @@ const Indicator = ({ total, current, onSwitch }: IndicatorProps) => {
 
     return (
         <>
-            <ul className={'dot-list flex-vertical'}>
+            <ul className={`${styles.dotList} flex-vertical`}>
                 {_.range(0, total).map((_value, index) => {
                     return (
                         <li
                             key={index}
-                            className={`item center-box${index === current ? ' active' : ''}`}
+                            className={`${styles.item} center-box${index === current ? ` ${styles.active}` : ''}`}
                             onClick={handleClick(index)}
                         >
-                            <div className={'dot'} />
+                            <div className={styles.dot} />
                         </li>
                     )
                 })}

src/renderer/src/components/common/LoadingMask.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren, ReactNode } from 'react'
 import Icon from '@ant-design/icons'
-import '@/assets/css/components/common/loading-mask.less'
+import styles from '@/assets/css/components/common/loading-mask.module.less'
 import { COLOR_FONT_MAIN } from '@/constants/common.constants'
 
 interface LoadingMaskProps extends PropsWithChildren {
@@ -22,7 +22,7 @@ const LoadingMask = (props: LoadingMaskProps) => {
         props.children
     ) : (
         <>
-            <div className={'loading-mask'}>
+            <div className={styles.loadingMask}>
                 {props.maskContent || <AntdSpin indicator={loadingIcon} />}
             </div>
         </>

src/renderer/src/components/common/Sidebar/Footer.tsx

@@ -1,4 +1,5 @@
 import Icon from '@ant-design/icons'
+import styles from '@/assets/css/components/common/sidebar.module.less'
 import { COLOR_ERROR } from '@/constants/common.constants'
 import { getRedirectUrl } from '@/util/route'
 import { getAvatar, getLoginStatus, getNickname, removeToken } from '@/util/auth'
@@ -55,9 +56,9 @@ const Footer = () => {
     }, [loginStatus])
 
     return (
-        <div className={'footer'}>
+        <div className={styles.footer}>
             <span
-                className={'icon-user'}
+                className={styles.iconUser}
                 onClick={handleClickAvatar}
                 title={getLoginStatus() ? '个人中心' : '登录'}
             >
@@ -67,21 +68,25 @@ const Footer = () => {
                     <Icon viewBox={'-20 0 1024 1024'} component={IconOxygenUser} />
                 )}
             </span>
-            <span hidden={getLoginStatus()} className={'text'}>
+            <span hidden={getLoginStatus()} className={styles.text}>
                 未
                 <NavLink to={getRedirectUrl('/login', `${lastMatch.pathname}${location.search}`)}>
                     登录
                 </NavLink>
             </span>
-            <span hidden={!getLoginStatus()} className={'text'} title={nickname}>
+            <span hidden={!getLoginStatus()} className={styles.text} title={nickname}>
                 {nickname}
             </span>
             <div
                 hidden={!getLoginStatus()}
-                className={`submenu-exit${!getLoginStatus() ? ' hide' : ''}`}
+                className={`${styles.submenuExit}${!getLoginStatus() ? ` ${styles.hide}` : ''}`}
             >
-                <div className={'content'}>
+                <div className={styles.content}>
-                    <span hidden={!getLoginStatus()} className={'icon-exit'} onClick={handleLogout}>
+                    <span
+                        hidden={!getLoginStatus()}
+                        className={styles.iconExit}
+                        onClick={handleLogout}
+                    >
                         <Icon
                             component={isExiting ? IconOxygenLoading : IconOxygenExit}
                             spin={isExiting}

src/renderer/src/components/common/Sidebar/Item.tsx

@@ -1,5 +1,6 @@
 import { ReactNode, MouseEvent } from 'react'
 import Icon from '@ant-design/icons'
+import styles from '@/assets/css/components/common/sidebar.module.less'
 import Submenu from '@/components/common/Sidebar/Submenu'
 
 type ItemProps = {
@@ -33,30 +34,26 @@ const Item = (props: ItemProps) => {
     }
 
     return (
-        <li className={'item'}>
+        <li className={styles.item}>
-            <div className={'menu-bt'} onMouseEnter={showSubmenu}>
+            <div className={styles.menuBt} onMouseEnter={showSubmenu}>
                 <NavLink
                     end={props.end}
                     to={props.path}
                     className={({ isActive, isPending }) =>
-                        isPending ? 'pending' : isActive ? 'active' : ''
+                        isPending ? 'pending' : isActive ? `${styles.active}` : ''
                     }
                 >
                     {props.icon && (
-                        <div className={'icon-box'}>
+                        <div className={styles.iconBox}>
                             {typeof props.icon === 'string' ? (
-                                <img
+                                <img src={`data:image/svg+xml;base64,${props.icon}`} alt={'icon'} />
-                                    className={'icon'}
-                                    src={`data:image/svg+xml;base64,${props.icon}`}
-                                    alt={'icon'}
-                                />
                             ) : (
-                                <Icon className={'icon'} component={props.icon} />
+                                <Icon component={props.icon} />
                             )}
                         </div>
                     )}
-                    <span className={'text'}>{props.text}</span>
+                    <span className={styles.text}>{props.text}</span>
-                    <div className={'extend'}>{props.extend}</div>
+                    <div className={styles.extend}>{props.extend}</div>
                 </NavLink>
             </div>
             {props.children && (

src/renderer/src/components/common/Sidebar/Scroll.tsx

@@ -1,9 +1,10 @@
 import { PropsWithChildren } from 'react'
+import styles from '@/assets/css/components/common/sidebar.module.less'
 import HideScrollbar from '@/components/common/HideScrollbar'
 
 const Scroll = (props: PropsWithChildren) => {
     return (
-        <div className={'scroll'}>
+        <div className={styles.scroll}>
             <HideScrollbar
                 isShowVerticalScrollbar={true}
                 scrollbarWidth={2}

src/renderer/src/components/common/Sidebar/Separate.tsx

@@ -1,10 +1,11 @@
 import { DetailedHTMLProps, HTMLAttributes } from 'react'
+import styles from '@/assets/css/components/common/sidebar.module.less'
 
 const Separate = ({
     className,
     ...props
 }: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => {
-    return <div className={`separate${className ? ` ${className}` : ''}`} {...props} />
+    return <div className={`${styles.separate}${className ? ` ${className}` : ''}`} {...props} />
 }
 
 export default Separate

src/renderer/src/components/common/Sidebar/Submenu.tsx

@@ -1,4 +1,5 @@
 import { PropsWithChildren } from 'react'
+import styles from '@/assets/css/components/common/sidebar.module.less'
 
 interface SidebarSubmenuProps extends PropsWithChildren {
     submenuTop: number
@@ -8,13 +9,13 @@ interface SidebarSubmenuProps extends PropsWithChildren {
 const Submenu = (props: SidebarSubmenuProps) => {
     return (
         <ul
-            className={'submenu'}
+            className={styles.submenu}
             style={{
                 top: props.submenuTop,
                 left: props.submenuLeft
             }}
         >
-            <div className={'content'}>{props.children}</div>
+            <div className={styles.content}>{props.children}</div>
         </ul>
     )
 }

src/renderer/src/components/common/Sidebar/index.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren, ReactNode } from 'react'
 import Icon from '@ant-design/icons'
-import '@/assets/css/components/common/sidebar.less'
+import styles from '@/assets/css/components/common/sidebar.module.less'
 import { getLocalStorage, setLocalStorage } from '@/util/browser'
 import Item from '@/components/common/Sidebar/Item'
 import ItemList from '@/components/common/Sidebar/ItemList'
@@ -28,18 +28,18 @@ const Sidebar = (props: SidebarProps) => {
     return (
         <>
             <div
-                className={`sidebar${isHideSidebar ? ' hide' : ''}`}
+                className={`${styles.sidebar}${isHideSidebar ? ` ${styles.hide}` : ''}`}
                 style={{ width: props.width ?? 'clamp(180px, 20vw, 240px)' }}
             >
-                <div className={'title'}>
+                <div className={styles.title}>
-                    <span className={'icon-box'} onClick={switchSidebar}>
+                    <span className={styles.iconBox} onClick={switchSidebar}>
                         <Icon component={IconOxygenExpand} />
                     </span>
-                    <span className={'text'}>{props.title}</span>
+                    <span className={styles.text}>{props.title}</span>
                 </div>
                 <Separate style={{ marginTop: 0 }} />
-                <div className={'content'}>{props.children}</div>
+                <div className={styles.content}>{props.children}</div>
-                <div className={'bottom-fixed'} style={{ flex: 'none' }}>
+                <div className={styles.bottomFixed} style={{ flex: 'none' }}>
                     {props.bottomFixed}
                 </div>
                 <Separate style={{ marginTop: 0, marginBottom: 0 }} />

src/renderer/src/components/common/UrlCard.tsx

@@ -1,7 +1,7 @@
 import { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react'
 import Icon from '@ant-design/icons'
 import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
-import '@/assets/css/components/common/url-card.less'
+import styles from '@/assets/css/components/common/url-card.module.less'
 import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
 
@@ -39,16 +39,16 @@ const UrlCard = ({
 
     return (
         <Card
-            data-component={'component-url-card'}
+            className={styles.root}
             style={{ overflow: 'visible', ...style }}
             {...props}
             ref={cardRef}
             onClick={handleCardOnClick}
         >
-            <FlexBox className={'url-card'}>
+            <FlexBox className={styles.urlCard}>
-                <Icon component={icon} className={'icon'} />
+                <Icon component={icon} className={styles.icon} />
-                <div className={'text'}>{children}</div>
+                <div className={styles.text}>{children}</div>
-                <div className={'description'}>{description}</div>
+                <div>{description}</div>
             </FlexBox>
         </Card>
     )

src/renderer/src/components/dnd/DragHandle.tsx

@@ -1,6 +1,6 @@
 import { HandleContextInst } from '@/components/dnd/HandleContext'
 import Icon from '@ant-design/icons'
-import '@/assets/css/components/dnd/drag-handle.less'
+import styles from '@/assets/css/components/dnd/drag-handle.module.less'
 
 interface DragHandleProps {
     padding?: string | number
@@ -11,10 +11,9 @@ const DragHandle = ({ padding }: DragHandleProps) => {
 
     return (
         <button
-            data-component={'component-drag-handle'}
+            className={styles.root}
             style={{ padding }}
             ref={ref}
-            className={'drag-handle'}
             {...attributes}
             {...listeners}
         >

src/renderer/src/components/dnd/DropMask.tsx

@@ -1,10 +1,10 @@
-import '@/assets/css/components/dnd/drop-mask.less'
 import Icon from '@ant-design/icons'
+import styles from '@/assets/css/components/dnd/drop-mask.module.less'
 
 const DropMask = () => {
     return (
-        <div data-component={'component-drop-mask'}>
+        <div className={styles.root}>
-            <div className={'drop-mask-border'}>
+            <div className={styles.dropMaskBorder}>
                 <Icon component={IconOxygenReceive} />
             </div>
         </div>

src/renderer/src/components/system/SettingCard.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren, ReactNode } from 'react'
 import Icon from '@ant-design/icons'
-import '@/assets/css/components/system/setting-card.less'
+import styles from '@/assets/css/components/system/setting-card.module.less'
 import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
 import Permission from '@/components/common/Permission'
@@ -17,18 +17,22 @@ interface SettingsCardProps extends PropsWithChildren {
 }
 export const SettingsCard = (props: SettingsCardProps) => {
     return (
-        <Card data-component={'component-setting-card'}>
+        <Card className={styles.root}>
-            <FlexBox className={'settings-card'}>
+            <FlexBox className={styles.settingsCard}>
-                <FlexBox direction={'horizontal'} className={'head'}>
+                <FlexBox direction={'horizontal'} className={styles.head}>
-                    <Icon component={props.icon} className={'icon'} />
+                    <Icon component={props.icon} className={styles.icon} />
-                    <div className={'title'}>{props.title}</div>
+                    <div className={styles.title}>{props.title}</div>
                     {!props.loading && (
                         <Permission operationCode={props.modifyOperationCode}>
                             {props.expand}
                             <AntdButton onClick={props.onReset} title={'重置'}>
                                 <Icon component={IconOxygenBack} />
                             </AntdButton>
-                            <AntdButton className={'bt-save'} onClick={props.onSave} title={'保存'}>
+                            <AntdButton
+                                className={styles.btSave}
+                                onClick={props.onSave}
+                                title={'保存'}
+                            >
                                 <Icon component={IconOxygenSave} />
                             </AntdButton>
                         </Permission>

src/renderer/src/components/system/StatisticsCard.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren, ReactNode } from 'react'
 import Icon from '@ant-design/icons'
-import '@/assets/css/components/system/statistics-card.less'
+import styles from '@/assets/css/components/system/statistics-card.module.less'
 import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
 import LoadingMask from '@/components/common/LoadingMask'
@@ -14,11 +14,11 @@ interface StatisticsCardProps extends PropsWithChildren {
 
 export const StatisticsCard = (props: StatisticsCardProps) => {
     return (
-        <Card data-component={'component-statistics-card'} style={{ overflow: 'visible' }}>
+        <Card className={styles.root} style={{ overflow: 'visible' }}>
-            <FlexBox className={'statistics-card'}>
+            <FlexBox className={styles.statisticsCard}>
-                <FlexBox direction={'horizontal'} className={'head'}>
+                <FlexBox direction={'horizontal'} className={styles.head}>
-                    <Icon component={props.icon} className={'icon'} />
+                    <Icon component={props.icon} className={styles.icon} />
-                    <div className={'title'}>{props.title}</div>
+                    <div className={styles.title}>{props.title}</div>
                     {props.expand}
                 </FlexBox>
                 <LoadingMask

src/renderer/src/components/tools/LoadMoreCard.tsx

@@ -1,6 +1,6 @@
 import VanillaTilt from 'vanilla-tilt'
 import Icon from '@ant-design/icons'
-import '@/assets/css/components/tools/load-more-card.less'
+import styles from '@/assets/css/components/tools/load-more-card.module.less'
 import FlexBox from '@/components/common/FlexBox'
 import Card from '@/components/common/Card'
 
@@ -24,16 +24,16 @@ const LoadMoreCard = ({ onClick }: LoadMoreCardProps) => {
 
     return (
         <Card
-            data-component={'component-load-more-card'}
+            className={styles.root}
             style={{ overflow: 'visible' }}
             ref={cardRef}
             onClick={onClick}
         >
-            <FlexBox className={'load-more-card'}>
+            <FlexBox className={styles.loadMoreCard}>
-                <div className={'icon'}>
+                <div className={styles.icon}>
                     <Icon component={IconOxygenMore} />{' '}
                 </div>
-                <div className={'text'}>加载更多</div>
+                <div className={styles.text}>加载更多</div>
             </FlexBox>
         </Card>
     )

src/renderer/src/components/tools/LocalCard.tsx

@@ -1,7 +1,7 @@
 import { DetailedHTMLProps, HTMLAttributes, MouseEvent } from 'react'
 import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
 import Icon from '@ant-design/icons'
-import '@/assets/css/components/tools/local-card.less'
+import styles from '@/assets/css/components/tools/local-card.module.less'
 import { COLOR_BACKGROUND, COLOR_MAIN } from '@/constants/common.constants'
 import { checkDesktop, omitText } from '@/util/common'
 import { getAndroidUrl, navigateToStore, navigateToView } from '@/util/navigation'
@@ -63,9 +63,9 @@ const StoreCard = ({
                 icon: <Icon style={{ color: COLOR_MAIN }} component={IconOxygenInfo} />,
                 title: 'Android 端',
                 content: (
-                    <FlexBox className={'android-qrcode'}>
+                    <FlexBox className={styles.androidQrcode}>
                         <AntdQRCode value={getAndroidUrl(author.username, toolId)} size={300} />
-                        <AntdTag className={'tag'}>请使用手机端扫描上方二维码</AntdTag>
+                        <AntdTag>请使用手机端扫描上方二维码</AntdTag>
                     </FlexBox>
                 ),
                 okText: '确定',
@@ -91,9 +91,9 @@ const StoreCard = ({
             icon: <Icon style={{ color: COLOR_MAIN }} component={IconOxygenInfo} />,
             title: 'Android 端',
             content: (
-                <FlexBox className={'android-qrcode'}>
+                <FlexBox className={styles.androidQrcode}>
                     <AntdQRCode value={getAndroidUrl(author.username, toolId)} size={300} />
-                    <AntdTag className={'tag'}>请使用手机端扫描上方二维码</AntdTag>
+                    <AntdTag>请使用手机端扫描上方二维码</AntdTag>
                 </FlexBox>
             ),
             okText: '确定',
@@ -123,20 +123,20 @@ const StoreCard = ({
                 }}
             >
                 <Card
-                    data-component={'component-local-card'}
+                    className={styles.root}
                     style={{ overflow: 'visible', ...style }}
                     ref={cardRef}
                     {...props}
                     onClick={handleCardOnClick}
                 >
-                    <FlexBox className={'local-card'}>
+                    <FlexBox className={styles.localCard}>
-                        <div className={'header'}>
+                        <div className={styles.header}>
-                            <div className={'version'}>
+                            <div className={styles.version}>
                                 <AntdTag>
                                     {platform.slice(0, 1)}-{ver}
                                 </AntdTag>
                             </div>
-                            <div className={'operation'}>
+                            <div className={styles.operation}>
                                 {platform !== 'ANDROID' && supportPlatform.includes('ANDROID') && (
                                     <AntdTooltip title={'Android 端'}>
                                         <Icon
@@ -156,22 +156,22 @@ const StoreCard = ({
                                 <DragHandle />
                             </div>
                         </div>
-                        <div className={'icon'}>
+                        <div className={styles.icon}>
                             <img src={`data:image/svg+xml;base64,${icon}`} alt={'Icon'} />
                         </div>
-                        <div className={'info'}>
+                        <div className={styles.info}>
-                            <div className={'tool-name'}>{toolName}</div>
+                            <div className={styles.toolName}>{toolName}</div>
-                            <div className={'tool-id'}>{`ID: ${toolId}`}</div>
+                            <div>{`ID: ${toolId}`}</div>
                             {toolDesc && (
                                 <div
-                                    className={'tool-desc'}
+                                    className={styles.toolDesc}
                                     title={toolDesc}
                                 >{`简介：${omitText(toolDesc, 18)}`}</div>
                             )}
                         </div>
                         {showAuthor && (
-                            <div className={'author'} onClick={handleOnClickAuthor}>
+                            <div className={styles.author} onClick={handleOnClickAuthor}>
-                                <div className={'avatar'}>
+                                <div className={styles.avatar}>
                                     <AntdAvatar
                                         src={
                                             <AntdImage
@@ -183,7 +183,7 @@ const StoreCard = ({
                                         style={{ background: COLOR_BACKGROUND }}
                                     />
                                 </div>
-                                <div className={'author-name'}>{author.userInfo.nickname}</div>
+                                <div className={styles.authorName}>{author.userInfo.nickname}</div>
                             </div>
                         )}
                     </FlexBox>

src/renderer/src/components/tools/RepositoryCard.tsx

@@ -1,6 +1,6 @@
 import { DetailedHTMLProps, HTMLAttributes } from 'react'
 import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
-import '@/assets/css/components/tools/repository-card.less'
+import styles from '@/assets/css/components/tools/repository-card.module.less'
 import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
 import Draggable from '@/components/dnd/Draggable'
@@ -58,31 +58,31 @@ const RepositoryCard = ({
             data={{ icon, toolName, toolId, authorUsername: '!', ver, platform }}
         >
             <Card
-                data-component={'component-repository-card'}
+                className={styles.root}
                 style={{ overflow: 'visible', ...style }}
                 ref={cardRef}
                 {...props}
             >
-                <FlexBox className={'repository-card'}>
+                <FlexBox className={styles.repositoryCard}>
-                    <div className={'header'}>
+                    <div className={styles.header}>
                         {children}
                         <DragHandle />
                     </div>
-                    <div className={'icon'}>
+                    <div className={styles.icon}>
                         <img src={`data:image/svg+xml;base64,${icon}`} alt={'Icon'} />
                     </div>
-                    <div className={'info'}>
+                    <div className={styles.info}>
-                        <div className={'tool-name'}>{toolName}</div>
+                        <div className={styles.toolName}>{toolName}</div>
-                        <div className={'tool-id'}>{`ID: ${toolId}`}</div>
+                        <div>{`ID: ${toolId}`}</div>
                     </div>
-                    <div className={'operation'}>
+                    <div className={styles.operation}>
                         {onOpen && (
                             <AntdButton onClick={onOpen} size={'small'} type={'primary'}>
                                 打开
                             </AntdButton>
                         )}
                         {onEdit && onPublish && (
-                            <div className={'edit'}>
+                            <div className={styles.edit}>
                                 <AntdButton.Group size={'small'}>
                                     <AntdButton onClick={onEdit}>编辑</AntdButton>
                                     <AntdButton onClick={onPublish}>发布</AntdButton>

src/renderer/src/components/tools/StoreCard.tsx

@@ -2,7 +2,7 @@ import { DetailedHTMLProps, HTMLAttributes, MouseEvent } from 'react'
 import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
 import protocolCheck from 'custom-protocol-check'
 import Icon from '@ant-design/icons'
-import '@/assets/css/components/tools/store-card.less'
+import styles from '@/assets/css/components/tools/store-card.module.less'
 import {
     COLOR_BACKGROUND,
     COLOR_MAIN,
@@ -95,9 +95,9 @@ const StoreCard = ({
                 icon: <Icon style={{ color: COLOR_MAIN }} component={IconOxygenInfo} />,
                 title: 'Android 端',
                 content: (
-                    <FlexBox className={'android-qrcode'}>
+                    <FlexBox className={styles.androidQrcode}>
                         <AntdQRCode value={getAndroidUrl(author.username, toolId)} size={300} />
-                        <AntdTag className={'tag'}>请使用手机端扫描上方二维码</AntdTag>
+                        <AntdTag>请使用手机端扫描上方二维码</AntdTag>
                     </FlexBox>
                 ),
                 okText: '确定',
@@ -216,9 +216,9 @@ const StoreCard = ({
             icon: <Icon style={{ color: COLOR_MAIN }} component={IconOxygenInfo} />,
             title: 'Android 端',
             content: (
-                <FlexBox className={'android-qrcode'}>
+                <FlexBox className={styles.androidQrcode}>
                     <AntdQRCode value={getAndroidUrl(author.username, toolId)} size={300} />
-                    <AntdTag className={'tag'}>请使用手机端扫描上方二维码</AntdTag>
+                    <AntdTag>请使用手机端扫描上方二维码</AntdTag>
                 </FlexBox>
             ),
             okText: '确定',
@@ -296,20 +296,20 @@ const StoreCard = ({
                 }}
             >
                 <Card
-                    data-component={'component-store-card'}
+                    className={styles.root}
                     style={{ overflow: 'visible', ...style }}
                     ref={cardRef}
                     {...props}
                     onClick={handleCardOnClick}
                 >
-                    <FlexBox className={'store-card'}>
+                    <FlexBox className={styles.storeCard}>
-                        <div className={'header'}>
+                        <div className={styles.header}>
-                            <div className={'version'}>
+                            <div className={styles.version}>
                                 <AntdTag>
                                     {platform.slice(0, 1)}-{ver}
                                 </AntdTag>
                             </div>
-                            <div className={'operation'}>
+                            <div className={styles.operation}>
                                 {(!isInstalled || isAvailableUpdate) && (
                                     <AntdTooltip title={isAvailableUpdate ? '更新' : '安装'}>
                                         <Icon
@@ -365,22 +365,22 @@ const StoreCard = ({
                                 <DragHandle />
                             </div>
                         </div>
-                        <div className={'icon'}>
+                        <div className={styles.icon}>
                             <img src={`data:image/svg+xml;base64,${icon}`} alt={'Icon'} />
                         </div>
-                        <div className={'info'}>
+                        <div className={styles.info}>
-                            <div className={'tool-name'}>{toolName}</div>
+                            <div className={styles.toolName}>{toolName}</div>
-                            <div className={'tool-id'}>{`ID: ${toolId}`}</div>
+                            <div>{`ID: ${toolId}`}</div>
                             {toolDesc && (
                                 <div
-                                    className={'tool-desc'}
+                                    className={styles.toolDesc}
                                     title={toolDesc}
                                 >{`简介：${omitText(toolDesc, 18)}`}</div>
                             )}
                         </div>
                         {showAuthor && (
-                            <div className={'author'} onClick={handleOnClickAuthor}>
+                            <div className={styles.author} onClick={handleOnClickAuthor}>
-                                <div className={'avatar'}>
+                                <div className={styles.avatar}>
                                     <AntdAvatar
                                         src={
                                             <AntdImage
@@ -392,7 +392,7 @@ const StoreCard = ({
                                         style={{ background: COLOR_BACKGROUND }}
                                     />
                                 </div>
-                                <div className={'author-name'}>{author.userInfo.nickname}</div>
+                                <div className={styles.authorName}>{author.userInfo.nickname}</div>
                             </div>
                         )}
                     </FlexBox>

src/renderer/src/pages/Sign/Forget.tsx

@@ -1,5 +1,6 @@
 import Icon from '@ant-design/icons'
 import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile'
+import styles from '@/assets/css/pages/sign/forget.module.less'
 import {
     H_CAPTCHA_SITE_KEY,
     PERMISSION_FORGET_SUCCESS,
@@ -135,14 +136,14 @@ const Forget = () => {
     }
 
     return (
-        <div className={'forget'}>
+        <div className={styles.root}>
             <FitCenter>
                 <FlexBox>
-                    <div className={'title'}>
+                    <div className={styles.title}>
-                        <div className={'primary'}>找回密码</div>
+                        <div className={styles.primary}>找回密码</div>
-                        <div className={'secondary'}>Retrieve password</div>
+                        <div className={styles.secondary}>Retrieve password</div>
                     </div>
-                    <div className={'form'}>
+                    <div className={styles.form}>
                         {!searchParams.get('code') ? (
                             !isSent ? (
                                 <>
@@ -188,7 +189,7 @@ const Forget = () => {
                                     </AntdForm>
                                 </>
                             ) : (
-                                <div className={'retry'}>
+                                <div className={styles.retry}>
                                     我们向您发送了一封包含找回密码链接的邮件，如未收到，可能被归为垃圾邮件，请仔细检查。
                                     <a onClick={handleOnRetry}>重新发送</a>
                                 </div>
@@ -268,10 +269,10 @@ const Forget = () => {
                                 </AntdForm>
                             </>
                         ) : (
-                            <div className={'success'}>恭喜你，密码已更新，请重新登录。</div>
+                            <div className={styles.success}>恭喜你，密码已更新，请重新登录。</div>
                         )}
 
-                        <div className={'footer'}>
+                        <div className={styles.footer}>
                             找到了？
                             <a
                                 onClick={() =>

src/renderer/src/pages/Sign/SignIn.tsx

@@ -1,5 +1,6 @@
 import Icon from '@ant-design/icons'
 import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile'
+import styles from '@/assets/css/pages/sign/sign-in.module.less'
 import {
     H_CAPTCHA_SITE_KEY,
     PERMISSION_LOGIN_SUCCESS,
@@ -211,14 +212,14 @@ const SignIn = () => {
     }
 
     return (
-        <div className={'sign-in'}>
+        <div className={styles.root}>
             <FitCenter>
                 <FlexBox>
-                    <div className={'title'}>
+                    <div className={styles.title}>
-                        <div className={'primary'}>欢迎回来</div>
+                        <div className={styles.primary}>欢迎回来</div>
-                        <div className={'secondary'}>Welcome back</div>
+                        <div className={styles.secondary}>Welcome back</div>
                     </div>
-                    <AntdForm autoComplete={'on'} onFinish={handleOnFinish} className={'form'}>
+                    <AntdForm autoComplete={'on'} onFinish={handleOnFinish} className={styles.form}>
                         <AntdForm.Item
                             name={'account'}
                             rules={[
@@ -259,7 +260,7 @@ const SignIn = () => {
                                 data-refresh={refreshTime}
                             />
                         </AntdForm.Item>
-                        <FlexBox direction={'horizontal'} className={'addition'}>
+                        <FlexBox direction={'horizontal'} className={styles.addition}>
                             <a
                                 onClick={() => {
                                     navigateToRoot(navigate)
@@ -286,7 +287,7 @@ const SignIn = () => {
                                 登&ensp;&ensp;&ensp;&ensp;录
                             </AntdButton>
                         </AntdForm.Item>
-                        <div className={'footer'}>
+                        <div className={styles.footer}>
                             还没有账号？
                             <a
                                 onClick={() =>

src/renderer/src/pages/Sign/SignUp.tsx

@@ -1,5 +1,6 @@
 import Icon from '@ant-design/icons'
 import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile'
+import styles from '@/assets/css/pages/sign/sign-up.module.less'
 import {
     DATABASE_DUPLICATE_KEY,
     H_CAPTCHA_SITE_KEY,
@@ -124,14 +125,14 @@ const SignUp = () => {
     }
 
     return (
-        <div className={'sign-up'}>
+        <div className={styles.root}>
             <FitCenter>
                 <FlexBox>
-                    <div className={'title'}>
+                    <div className={styles.title}>
-                        <div className={'primary'}>创建账号</div>
+                        <div className={styles.primary}>创建账号</div>
-                        <div className={'secondary'}>Create account</div>
+                        <div className={styles.secondary}>Create account</div>
                     </div>
-                    <AntdForm autoComplete={'on'} onFinish={handleOnFinish} className={'form'}>
+                    <AntdForm autoComplete={'on'} onFinish={handleOnFinish} className={styles.form}>
                         {!isFinish ? (
                             <>
                                 <AntdForm.Item
@@ -234,13 +235,13 @@ const SignUp = () => {
                                 </AntdForm.Item>
                             </>
                         ) : (
-                            <div className={'retry'}>
+                            <div className={styles.retry}>
                                 我们发送了一封包含验证账号链接的邮件到您的邮箱里，如未收到，可能被归为垃圾邮件，请仔细检查。
                                 <a onClick={handleOnResend}>重新发送</a>
                             </div>
                         )}
 
-                        <div className={'footer'} hidden={isFinish}>
+                        <div className={styles.footer} hidden={isFinish}>
                             已有账号？
                             <a
                                 onClick={() =>

src/renderer/src/pages/Sign/Verify.tsx

@@ -1,3 +1,4 @@
+import styles from '@/assets/css/pages/sign/verify.module.less'
 import {
     COLOR_BACKGROUND,
     PERMISSION_ACCOUNT_NEED_INIT,
@@ -145,21 +146,18 @@ const Verify = () => {
 
     return (
         <>
-            <div className={'verify'}>
+            <div className={styles.root}>
                 <FitCenter>
                     <FlexBox>
-                        <div className={'title'}>
+                        <div className={styles.title}>
-                            <div className={'primary'}>验证账号</div>
+                            <div className={styles.primary}>验证账号</div>
-                            <div className={'secondary'}>Verify account</div>
+                            <div className={styles.secondary}>Verify account</div>
                         </div>
-                        <AntdForm className={'form'} onFinish={handleOnFinish}>
+                        <AntdForm className={styles.form} onFinish={handleOnFinish}>
-                            <div className={'no-verify-need'} hidden={needVerify}>
+                            <div hidden={needVerify}>
                                 账号已验证通过，无需验证，点击&nbsp;<a href={'/'}>回到首页</a>
                             </div>
-                            <div
+                            <div hidden={!needVerify || !hasCode || !isValid}>
-                                className={'verify-process'}
-                                hidden={!needVerify || !hasCode || !isValid}
-                            >
                                 <div
                                     style={{
                                         display: 'flex',
@@ -214,11 +212,11 @@ const Verify = () => {
                                     </AntdButton>
                                 </AntdForm.Item>
                             </div>
-                            <div className={'no-code'} hidden={hasCode}>
+                            <div hidden={hasCode}>
                                 在继续使用之前，我们需要确定您的电子邮箱地址的有效性，请点击&nbsp;
                                 <a onClick={handleOnResend}>发送验证邮件</a>
                             </div>
-                            <div className={'not-valid'} hidden={!hasCode || isValid}>
+                            <div hidden={!hasCode || isValid}>
                                 此链接有误或已失效，请点击&nbsp;
                                 <a onClick={handleOnResend}>重新发送验证邮件</a>
                             </div>

src/renderer/src/pages/Sign/index.tsx

@@ -1,4 +1,4 @@
-import '@/assets/css/pages/sign.less'
+import styles from '@/assets/css/pages/sign/index.module.less'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import FitCenter from '@/components/common/FitCenter'
 import FlexBox from '@/components/common/FlexBox'
@@ -42,23 +42,25 @@ const Sign = () => {
 
     return (
         <>
-            <FitFullscreen data-component={'sign'}>
+            <FitFullscreen className={styles.root}>
                 <FitCenter>
                     <FlexBox
                         direction={'horizontal'}
-                        className={`sign-box${isSwitch ? ' switch' : ''}`}
+                        className={`${styles.signBox}${isSwitch ? ` ${styles.switch}` : ''}`}
                     >
-                        <div className={`left${!isSwitch ? ' hidden' : ''}`}>{leftComponent()}</div>
+                        <div className={`${styles.left}${!isSwitch ? ` ${styles.hidden}` : ''}`}>
-                        <div className={`right${isSwitch ? ' hidden' : ''}`}>
+                            {leftComponent()}
+                        </div>
+                        <div className={`${styles.right}${isSwitch ? ` ${styles.hidden}` : ''}`}>
                             {rightComponent()}
                         </div>
-                        <FlexBox className={'cover'}>
+                        <FlexBox className={styles.cover}>
-                            <div className={'ball-box'}>
+                            <div className={styles.ballBox}>
-                                <div className={'ball'} />
+                                <div className={styles.ball} />
                             </div>
-                            <div className={'ball-box'}>
+                            <div className={styles.ballBox}>
-                                <div className={'mask'}>
+                                <div className={styles.mask}>
-                                    <div className={'ball'} />
+                                    <div className={styles.ball} />
                                 </div>
                             </div>
                         </FlexBox>

src/renderer/src/pages/System/Group.tsx

@@ -636,7 +636,7 @@ const Group = () => {
 
     return (
         <>
-            <FitFullscreen data-component={'system-group'}>
+            <FitFullscreen>
                 <HideScrollbar
                     style={{ padding: 20 }}
                     isShowVerticalScrollbar

src/renderer/src/pages/System/Settings/index.tsx

@@ -1,4 +1,4 @@
-import '@/assets/css/pages/system/settings.less'
+import styles from '@/assets/css/pages/system/settings.module.less'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import HideScrollbar from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
@@ -11,10 +11,10 @@ import TwoFactor from '@/pages/System/Settings/TwoFactor'
 const Settings = () => {
     return (
         <>
-            <FitFullscreen data-component={'system-settings'}>
+            <FitFullscreen className={styles.root}>
                 <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
-                    <FlexBox direction={'horizontal'} className={'root-content'}>
+                    <FlexBox direction={'horizontal'} className={styles.rootContent}>
-                        <FlexBox className={'root-col'}>
+                        <FlexBox className={styles.rootCol}>
                             <Permission operationCode={['system:settings:query:base']}>
                                 <Base />
                             </Permission>
@@ -22,7 +22,7 @@ const Settings = () => {
                                 <SensitiveWord />
                             </Permission>
                         </FlexBox>
-                        <FlexBox className={'root-col'}>
+                        <FlexBox className={styles.rootCol}>
                             <Permission operationCode={['system:settings:query:mail']}>
                                 <Mail />
                             </Permission>

src/renderer/src/pages/System/Statistics/index.tsx

@@ -1,4 +1,4 @@
-import '@/assets/css/pages/system/statistics.less'
+import styles from '@/assets/css/pages/system/statistics.module.less'
 import FlexBox from '@/components/common/FlexBox'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import HideScrollbar from '@/components/common/HideScrollbar'
@@ -13,9 +13,9 @@ import StorageInfo from '@/pages/System/Statistics/StorageInfo'
 const Statistics = () => {
     return (
         <>
-            <FitFullscreen data-component={'system-statistics'}>
+            <FitFullscreen className={styles.root}>
                 <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
-                    <FlexBox direction={'horizontal'} className={'root-content'}>
+                    <FlexBox direction={'horizontal'} className={styles.rootContent}>
                         <Permission operationCode={['system:statistics:query:usage']}>
                             <OnlineInfo />
                             <ActiveInfo />

src/renderer/src/pages/System/Tools/Base.tsx

@@ -1,5 +1,5 @@
 import Icon from '@ant-design/icons'
-import '@/assets/css/pages/system/tools/base.less'
+import styles from '@/assets/css/pages/system/tools/base.module.less'
 import {
     COLOR_PRODUCTION,
     DATABASE_DELETE_SUCCESS,
@@ -125,7 +125,7 @@ const Base = () => {
         {
             title: '名称',
             render: (_, record) => (
-                <span className={hasEdited[record.id] ? 'has-edited' : undefined}>
+                <span className={hasEdited[record.id] ? styles.hasEdited : undefined}>
                     {record.name}
                 </span>
             )
@@ -1077,9 +1077,9 @@ const Base = () => {
 
     return (
         <>
-            <FitFullscreen data-component={'system-tools-base'}>
+            <FitFullscreen className={styles.root}>
                 <HideScrollbar>
-                    <FlexBox direction={'horizontal'} className={'root-content'}>
+                    <FlexBox direction={'horizontal'} className={styles.rootContent}>
                         <Card>
                             <AntdTable
                                 dataSource={baseData}
@@ -1110,7 +1110,10 @@ const Base = () => {
                                     }
                                     extraLibs={editorExtraLibs}
                                 />
-                                <div className={'close-editor-btn'} onClick={handleOnCloseBtnClick}>
+                                <div
+                                    className={styles.closeEditorBtn}
+                                    onClick={handleOnCloseBtnClick}
+                                >
                                     <Icon component={IconOxygenClose} />
                                 </div>
                             </Card>

src/renderer/src/pages/System/Tools/Category.tsx

@@ -285,7 +285,7 @@ const Category = () => {
 
     return (
         <>
-            <FitFullscreen data-component={'system-tools-category'}>
+            <FitFullscreen>
                 <HideScrollbar
                     style={{ padding: 20 }}
                     isShowVerticalScrollbar

src/renderer/src/pages/System/Tools/Code.tsx

@@ -1,6 +1,6 @@
 import Draggable from 'react-draggable'
 import Icon from '@ant-design/icons'
-import '@/assets/css/pages/system/tools/code.less'
+import styles from '@/assets/css/pages/system/tools/code.module.less'
 import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
 import { checkDesktop } from '@/util/common'
 import { navigateToExecute, navigateToRepository } from '@/util/navigation'
@@ -81,8 +81,8 @@ const Code = () => {
 
     return (
         <>
-            <FitFullscreen data-component={'system-tools-code'}>
+            <FitFullscreen className={styles.root}>
-                <Card>
+                <Card className={styles.rootBox}>
                     <Playground.CodeEditor
                         readonly
                         files={files}
@@ -93,7 +93,7 @@ const Code = () => {
                 </Card>
 
                 <Draggable bounds={'#root'}>
-                    <div className={'draggable-content'}>
+                    <div className={styles.draggableContent}>
                         <AntdFloatButton
                             type={'primary'}
                             icon={<Icon component={IconOxygenExecute} />}