From 2b4e4979bb7059f416d5822a48a8605d0ce5f38b Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Mon, 19 Aug 2024 16:30:51 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=95=B0=E6=8D=AE=E9=9B=86):=20icon?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assets/svg/icon_adjustment_outlined.svg   |   7 ++
 .../src/components/icon-custom/src/Icon.vue   |   2 +
 .../data/dataset/form/CalcFieldEdit.vue       | 107 ++++++++++++------
 3 files changed, 81 insertions(+), 35 deletions(-)
 create mode 100644 core/core-frontend/src/assets/svg/icon_adjustment_outlined.svg

diff --git a/core/core-frontend/src/assets/svg/icon_adjustment_outlined.svg b/core/core-frontend/src/assets/svg/icon_adjustment_outlined.svg
new file mode 100644
index 0000000000..d07b213eb1
--- /dev/null
+++ b/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>
diff --git a/core/core-frontend/src/components/icon-custom/src/Icon.vue b/core/core-frontend/src/components/icon-custom/src/Icon.vue
index 5344b80761..c476fd042e 100644
--- a/core/core-frontend/src/components/icon-custom/src/Icon.vue
+++ b/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,
diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/CalcFieldEdit.vue b/core/core-frontend/src/views/visualized/data/dataset/form/CalcFieldEdit.vue
index 669fee0a9d..fe4e5b44e9 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/CalcFieldEdit.vue
+++ b/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;