Merge pull request #11639 from dataease/pr@dev-v2_st

fix(数据集): icon调整

core/core-frontend/src/assets/svg/icon_adjustment_outlined.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 3.5C3.72386 3.5 3.5 3.72386 3.5 4V20C3.5 20.2762 3.72385 20.5 4 20.5H20C20.2762 20.5 20.5 20.2762 20.5 20V4C20.5 3.72385 20.2762 3.5 20 3.5H4ZM1.5 4C1.5 2.61929 2.61929 1.5 4 1.5H20C21.3807 1.5 22.5 2.6193 22.5 4V20C22.5 21.3807 21.3807 22.5 20 22.5H4C2.6193 22.5 1.5 21.3807 1.5 20V4Z" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.4142 6L6 19.4142L4.58578 18L18 4.58578L19.4142 6Z" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 7H11V9H5V7Z" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 15.5H18.5V17.5H12.5V15.5Z" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 5V11H7V5H9Z" />
+</svg>

core/core-frontend/src/components/icon-custom/src/Icon.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 
 import _401 from '@/assets/svg/401.svg'
+import icon_adjustment_outlined from '@/assets/svg/icon_adjustment_outlined.svg'
 import icon_file_font_colorful from '@/assets/svg/icon_file-font_colorful.svg'
 import relation_arrow_icon from '@/assets/svg/relation_arrow_icon.svg'
 import icon_data_visualization from '@/assets/svg/icon_data-visualization.svg'
@@ -680,6 +681,7 @@ import icon_file_doc_colorful from '@/assets/svg/icon_file-doc_colorful.svg'
 import icon_font from '@/assets/svg/icon_font.svg'
 const iconMap = {
   '401': _401,
+  icon_adjustment_outlined,
   icon_file_font_colorful,
   relation_arrow_icon,
   icon_data_visualization,

core/core-frontend/src/views/visualized/data/dataset/form/CalcFieldEdit.vue

@@ -446,22 +446,22 @@ initFunction()
             </div>
             <div v-else class="class-na">{{ t('dataset.na') }}</div>
           </div>
+          <div class="quota-btn_de">
+            <span>{{ t('chart.quota') }}</span>
+            <el-tooltip
+              effect="dark"
+              :content="disableCaParams ? '仅支持添加一个计算参数。' : '添加计算参数'"
+              placement="top"
+            >
+              <el-icon class="hover-icon_quota" @click="addParmasToQuota">
+                <Icon
+                  :class="[`field-icon-${fieldType[0]}`, disableCaParams && 'not-allow']"
+                  name="icon_adjustment_outlined"
+                ></Icon>
+              </el-icon>
+            </el-tooltip>
+          </div>
           <div class="field-height">
-            <div style="display: flex; align-items: center; justify-content: space-between">
-              <span>{{ t('chart.quota') }}</span>
-              <el-tooltip
-                effect="dark"
-                :content="disableCaParams ? '仅支持添加一个计算参数。' : '添加计算参数'"
-                placement="top"
-              >
-                <el-icon class="hover-icon_quota" @click="addParmasToQuota">
-                  <Icon
-                    :class="[`field-icon-${fieldType[0]}`, disableCaParams && 'not-allow']"
-                    name="calculate"
-                  ></Icon>
-                </el-icon>
-              </el-tooltip>
-            </div>
             <div v-if="state.quotaData.length" class="field-list">
               <span
                 v-for="item in state.quotaData"
@@ -471,7 +471,7 @@ initFunction()
                 @click="insertFieldToCodeMirror('[' + item.name + ']')"
               >
                 <el-icon v-if="!item.groupType">
-                  <Icon name="calculate"></Icon>
+                  <Icon name="icon_adjustment_outlined"></Icon>
                 </el-icon>
                 <el-icon v-else>
                   <Icon
@@ -670,6 +670,62 @@ initFunction()
     border-radius: 4px;
   }
 }
+.hover-icon_quota {
+  cursor: pointer;
+  border-radius: 4px;
+  font-size: 16px;
+  position: relative;
+
+  &[aria-expanded='true'] {
+    &::after {
+      content: '';
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      background: rgba(31, 35, 41, 0.1);
+      border-radius: 4px;
+      transform: translate(-50%, -50%);
+      top: 50%;
+      left: 50%;
+    }
+  }
+
+  &:hover {
+    &::after {
+      content: '';
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      background: rgba(31, 35, 41, 0.1);
+      border-radius: 4px;
+      transform: translate(-50%, -50%);
+      top: 50%;
+      left: 50%;
+    }
+  }
+
+  &:active {
+    &::after {
+      content: '';
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      background: rgba(31, 35, 41, 0.2);
+      border-radius: 4px;
+      transform: translate(-50%, -50%);
+      top: 50%;
+      left: 50%;
+    }
+  }
+}
+
+.quota-btn_de {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: -12px;
+  color: #1f2329;
+}
 .field-height {
   height: calc(50% - 41px);
   margin-top: 12px;
@@ -678,25 +734,6 @@ initFunction()
     color: #1f2329;
   }
 
-  .hover-icon_quota {
-    cursor: pointer;
-    height: 20px !important;
-    width: 20px !important;
-    border-radius: 4px;
-
-    &[aria-expanded='true'] {
-      background: rgba(31, 35, 41, 0.1);
-    }
-
-    &:hover {
-      background: rgba(31, 35, 41, 0.1);
-    }
-
-    &:active {
-      background: rgba(31, 35, 41, 0.2);
-    }
-  }
-
   .not-allow {
     cursor: not-allowed;
     color: #bbbfc4 !important;