Refactor(css): Change all less to module mode

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/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/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/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/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/assets/css/pages/tools/source.module.less

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

src/assets/css/pages/tools/store.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/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/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%;