feat: 新增 sass 循环样式类，新增接口下载提示

src/styles/common/style.scss

@@ -80,54 +80,41 @@
   word-break: break-all;
 }
 
-// todo 使用 scss 循环写一套完整的
-// margin
-.go-mt-0 {
-  margin-top: 0 !important;
-}
+// class:m-1 => margin：1em
+// class:mt-1 => margin-top：1em
+// m-0|mt-0|mx-0|my-0|p-0|pt-0|...
 
-.go-mb-0 {
-  margin-bottom: 0 !important;
-}
-.go-ml-0 {
-  margin-left: 0 !important;
-}
+@each $typekey, $type in $spacing-types {
+  //.m-1
+  @each $sizekey, $size in $spacing-sizes {
+    .go-#{$typekey}-#{$sizekey} {
+      #{$type}: $size * $spacing-base-size;
+    }
+  }
 
-.go-mr-0 {
-  margin-right: 0 !important;
-}
+  //.mx-1
+  @each $sizekey, $size in $spacing-sizes {
+    .go-#{$typekey}x-#{$sizekey} {
+      #{$type}-left: $size * $spacing-base-size;
+      #{$type}-right: $size * $spacing-base-size;
+    }
 
-.go-my-0 {
-  @extend .go-mt-0;
-  @extend .go-mb-0;
-}
+    .go-#{$typekey}y-#{$sizekey} {
+      #{$type}-top: $size * $spacing-base-size;
+      #{$type}-bottom: $size * $spacing-base-size;
+    }
+  }
 
-.go-mx-0 {
-  @extend .go-ml-0;
-  @extend .go-mr-0;
-}
+  //.mt-1
+  @each $directionkey, $direction in $spacing-directions {
+    @each $sizekey, $size in $spacing-sizes {
+      .go-#{$typekey}#{$directionkey}-#{$sizekey} {
+        #{$type}-#{$direction}: $size * $spacing-base-size;
+      }
+    }
+  }
 
-.go-pt-0 {
-  padding-top: 0 !important;
-}
-
-.go-pb-0 {
-  padding-bottom: 0 !important;
-}
-.go-pl-0 {
-  padding-left: 0 !important;
-}
-
-.go-pr-0 {
-  padding-right: 0 !important;
-}
-
-.go-py-0 {
-  @extend .go-pt-0;
-  @extend .go-pb-0;
-}
-
-.go-px-0 {
-  @extend .go-pl-0;
-  @extend .go-pr-0;
+  .go-#{$typekey} {
+    #{$type}: 0 !important;
+  }
 }

src/styles/common/var.scss

@@ -10,6 +10,31 @@ $--color-text-2: #86909c;
 $--color-text-3: #c9cdd4;
 $--color-text-4: #f2f3f5;
 
+//.mt-1 => margin top
+//spacing
+$spacing-base-size: 1em;
+
+$spacing-types: (
+  m: margin,
+  p: padding,
+);
+
+$spacing-directions: (
+  t: top,
+  r: right,
+  b: bottom,
+  l: left,
+);
+
+$spacing-sizes: (
+  0: 0,
+  1: 0.25,
+  2: 0.5,
+  3: 1,
+  4: 1.5,
+  5: 2.5,
+);
+
 // 变亮值
 $--light-shalow: 2%;