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%;
 

src/views/chart/ContentConfigurations/components/ChartAnimation/index.vue

@@ -73,8 +73,8 @@ const addAnimation = (item: { label: string; value: string }) => {
     width: 100%;
   }
   .animation-item {
-    height: 50px;
-    line-height: 50px;
+    height: 40px;
+    line-height: 40px;
     text-align: center;
     cursor: pointer;
     border-radius: 5px;

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue

@@ -20,16 +20,10 @@
               <help-outline-icon></help-outline-icon>
             </n-icon>
           </template>
-          <ul>
+          <ul class="go-pl-0">
             开发环境使用 mock 数据，请输入
-            <li>
-              <n-text type="info"> 【图表】{{ chartDataUrl }} </n-text>
-            </li>
-            <li>
-              <n-text type="info"> 【表格】{{ rankListUrl }} </n-text>
-            </li>
-            <li>
-              <n-text type="info"> 【0~1数字】{{ numberUrl }} </n-text>
+            <li v-for="item in apiList" :key="item.value">
+              <n-text type="info"> {{item.value}} </n-text>
             </li>
           </ul>
         </n-tooltip>
@@ -83,6 +77,18 @@ const { requestOriginUrl } = toRefs(chartEditStore.getRequestGlobalConfig)
 const loading = ref(false)
 const showMatching = ref(false)
 
+const apiList = [
+  {
+    value: `【图表】${ chartDataUrl }`
+  },
+  {
+    value: `【表格】${ rankListUrl }`
+  },
+  {
+    value: `【0~1数字】${ numberUrl }`
+  }
+]
+
 // 选项
 const selectOptions: SelectHttpType[] = [
   {

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMatchingAndShow/index.vue

@@ -46,14 +46,24 @@
               </n-button>
             </n-space>
           </n-upload>
-          <n-button class="sourceBtn-item" @click="download">
-            <template #icon>
-              <n-icon>
-                <document-download-icon />
-              </n-icon>
-            </template>
-            下载
-          </n-button>
+          <div>
+            <n-button class="sourceBtn-item" @click="download">
+              <template #icon>
+                <n-icon>
+                  <document-download-icon />
+                </n-icon>
+              </template>
+              下载
+            </n-button>
+           <n-tooltip trigger="hover">
+              <template #trigger>
+                <n-icon class="go-ml-1" size="21" :depth="3">
+                  <help-outline-icon></help-outline-icon>
+                </n-icon>
+              </template>
+              <n-text depth="3">点击【下载】查看完整数据</n-text>
+            </n-tooltip>
+          </div>
         </n-space>
         <n-card>
           <n-code :code="getSource" language="json"></n-code>
@@ -83,7 +93,9 @@ const props = defineProps({
 // 表格标题
 const tableTitle = ['字段', '映射', '状态']
 
+const { HelpOutlineIcon } = icon.ionicons5
 const { DocumentAddIcon, DocumentDownloadIcon } = icon.carbon
+
 const source = ref()
 const dimensions = ref()
 const dimensionsAndSource = ref()