fix: 样式优化

core/core-frontend/src/views/chart/components/editor/drag-item/DimensionItem.vue

@@ -7,7 +7,8 @@ import icon_down_outlined1 from '@/assets/svg/icon_down_outlined-1.svg'
 import icon_right_outlined from '@/assets/svg/icon_right_outlined.svg'
 import icon_done_outlined from '@/assets/svg/icon_done_outlined.svg'
 import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
-import icon_sort_priority from '@/assets/svg/icon_sort_priority.svg'
+import icon_visible_outlined from '@/assets/svg/icon_visible_outlined.svg'
+import icon_invisible_outlined from '@/assets/svg/icon_invisible_outlined.svg'
 import { useI18n } from '@/hooks/web/useI18n'
 import { computed, onMounted, ref, toRefs, watch } from 'vue'
 import { getItemType } from '@/views/chart/components/editor/drag-item/utils'
@@ -282,7 +283,9 @@ onMounted(() => {
           </span>
         </el-tooltip>
         <el-icon style="margin-left: 8px">
-          <Icon><Hide v-show="showHideIcon" class="svg-icon inner-class" /></Icon>
+          <Icon
+            ><icon_invisible_outlined v-show="showHideIcon" class="svg-icon inner-class"
+          /></Icon>
         </el-icon>
         <el-tooltip :effect="toolTip" placement="top">
           <template #content>
@@ -392,10 +395,10 @@ onMounted(() => {
           </el-dropdown-item>
           <el-dropdown-item
             v-if="showSort()"
-            :icon="icon_sort_priority"
             :command="beforeClickItem('sortPriority')"
             class="menu-item-padding"
           >
+            <el-icon />
             <span>{{ t('chart.sort_priority') }}</span>
           </el-dropdown-item>
           <el-dropdown-item
@@ -642,8 +645,10 @@ onMounted(() => {
             :command="beforeClickItem('toggleHide')"
           >
             <el-icon>
-              <icon v-if="item.hide === true" name="view"><View class="svg-icon" /></icon>
+              <icon
-              <icon v-else name="hide"><Hide class="svg-icon" /></icon>
+                ><icon_visible_outlined v-if="item.hide === true" class="svg-icon" />
+                <icon_invisible_outlined v-else class="svg-icon"
+              /></icon>
             </el-icon>
             <span>{{ item.hide === true ? t('chart.show') : t('chart.hide') }}</span>
           </el-dropdown-item>

core/core-frontend/src/views/chart/components/editor/drag-item/DrillItem.vue

@@ -288,10 +288,10 @@ onMounted(() => {
           </el-dropdown-item>
           <el-dropdown-item
             v-if="index !== 0"
-            :icon="icon_sort_priority"
             :command="beforeClickItem('sortPriority')"
             class="menu-item-padding"
           >
+            <el-icon />
             <span>{{ t('chart.sort_priority') }}</span>
           </el-dropdown-item>
           <el-dropdown-item class="menu-item-padding" :command="beforeClickItem('rename')">

core/core-frontend/src/views/chart/components/editor/drag-item/QuotaItem.vue

@@ -4,18 +4,17 @@ import icon_sortZToA_outlined from '@/assets/svg/icon_sort-z-to-a_outlined.svg'
 import icon_sort_outlined from '@/assets/svg/icon_sort_outlined.svg'
 import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
 import icon_down_outlined1 from '@/assets/svg/icon_down_outlined-1.svg'
-import icon_dashboard_outlined from '@/assets/svg/icon_dashboard_outlined.svg'
 import icon_right_outlined from '@/assets/svg/icon_right_outlined.svg'
 import icon_done_outlined from '@/assets/svg/icon_done_outlined.svg'
 import icon_functions_outlined from '@/assets/svg/icon_functions_outlined.svg'
-import icon_describe_outlined from '@/assets/svg/icon_describe_outlined.svg'
+import icon_visible_outlined from '@/assets/svg/icon_visible_outlined.svg'
-import icon_sort_priority from '@/assets/svg/icon_sort_priority.svg'
+import icon_invisible_outlined from '@/assets/svg/icon_invisible_outlined.svg'
 import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
+import iconFilter from '@/assets/svg/icon-filter.svg'
 import { useI18n } from '@/hooks/web/useI18n'
 import { computed, onMounted, reactive, ref, toRefs, watch } from 'vue'
 import { formatterItem } from '@/views/chart/components/js/formatter'
 import { getItemType, resetValueFormatter } from '@/views/chart/components/editor/drag-item/utils'
-import { Filter } from '@element-plus/icons-vue'
 import { quotaViews } from '@/views/chart/components/js/util'
 import { SUPPORT_Y_M } from '@/views/chart/components/editor/util/chart'
 import { fieldType } from '@/utils/attr'
@@ -393,7 +392,7 @@ onMounted(() => {
         </span>
         <el-icon style="margin-left: 8px">
           <Icon>
-            <Hide
+            <icon_invisible_outlined
               v-show="showHideIcon"
               :class="`field-icon-${fieldType[[2, 3].includes(item.deType) ? 2 : 0]}`"
               class="svg-icon inner-class"
@@ -748,9 +747,9 @@ onMounted(() => {
           <el-dropdown-item
             v-if="showSort"
             class="menu-item-padding"
-            :icon="icon_sort_priority"
             :command="beforeClickItem('sortPriority')"
           >
+            <el-icon />
             <span>{{ t('chart.sort_priority') }}</span>
           </el-dropdown-item>
 
@@ -759,7 +758,7 @@ onMounted(() => {
             v-if="
               props.type !== 'extLabel' && props.type !== 'extTooltip' && props.type !== 'extBubble'
             "
-            :icon="Filter"
+            :icon="iconFilter"
             :command="beforeClickItem('filter')"
             :divided="chart.type.includes('chart-mix')"
           >
@@ -788,8 +787,10 @@ onMounted(() => {
             :command="beforeClickItem('toggleHide')"
           >
             <el-icon>
-              <icon v-if="item.hide === true" name="view"><View class="svg-icon" /></icon>
+              <icon
-              <icon v-else name="hide"><Hide class="svg-icon" /></icon>
+                ><icon_visible_outlined v-if="item.hide === true" class="svg-icon" />
+                <icon_invisible_outlined v-else class="svg-icon"
+              /></icon>
             </el-icon>
             <span>{{ item.hide === true ? t('chart.show') : t('chart.hide') }}</span>
           </el-dropdown-item>

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

@@ -1398,6 +1398,7 @@ const mousedownDrag = () => {
             margin-bottom: 8px;
             background-color: white;
             color: #1f2329;
+            font-size: 14px;
 
             .ed-icon {
               font-size: 16px;
@@ -1480,8 +1481,22 @@ const mousedownDrag = () => {
     .system-text_bg {
       color: #1f2329;
       &:hover {
+        background: #1f23291a;
+      }
+
+      &:active {
+        background: #1f232933;
+      }
+
+      &:focus {
+        background: #3370ff1a;
         color: #3370ff;
       }
+
+      &:focus:hover {
+        color: #3370ff;
+        background: #3370ff33;
+      }
     }
   }
 }

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

@@ -1195,25 +1195,25 @@ const emits = defineEmits([
     direction="rtl"
   >
     <template #header v-if="currentNode">
-      <div class="info-content">
+      <div style="width: 100%">
         <div class="info">
-          <span class="label">{{ t('data_set.table_name_de') }}</span>
+          <span :title="currentNode.tableName" class="label ellipsis">{{
-          <span :title="currentNode.tableName" class="name ellipsis">{{
             currentNode.tableName
           }}</span>
         </div>
-        <div class="info">
+        <div class="info" style="margin-top: 4px">
-          <span class="label">{{ t('data_set.table_remarks') }}</span>
+          <span
-          <span :title="currentNode.noteName" style="max-width: 240px" class="name ellipsis">{{
+            :title="getDsName(currentNode.datasourceId)"
-            currentNode.noteName || '-'
+            style="max-width: 550px"
-          }}</span>
+            class="name ellipsis"
+            >{{ t('auth.datasource') }}:{{ getDsName(currentNode.datasourceId) }}</span
+          >
+        </div>
+        <div class="info" style="margin-top: 4px">
+          <span :title="currentNode.noteName" style="max-width: 500px" class="name ellipsis"
+            >{{ t('data_set.table_remarks') }}:{{ currentNode.noteName || '-' }}</span
+          >
         </div>
-        <span
-          :title="getDsName(currentNode.datasourceId)"
-          style="max-width: 550px"
-          class="ds ellipsis"
-          >{{ t('auth.datasource') }}:{{ getDsName(currentNode.datasourceId) }}</span
-        >
       </div>
     </template>
     <union-field-list
@@ -1253,22 +1253,16 @@ const emits = defineEmits([
 
 .union-item-drawer {
   .ed-drawer__header {
-    height: 82px;
+    height: auto;
     font-family: var(--de-custom_font, 'PingFang');
 
     .ed-drawer__close-btn {
-      top: 26px;
+      top: 40.5px;
-    }
-
-    .info-content {
-      display: flex;
-      flex-wrap: wrap;
     }
 
     .info {
+      width: 100%;
       display: flex;
-      flex-direction: column;
-      width: 50%;
       .label {
         font-weight: 500;
         font-size: 16px;
@@ -1278,12 +1272,8 @@ const emits = defineEmits([
       .name {
         font-weight: 400;
         font-size: 14px;
-      }
-      .ds {
-        font-weight: 400;
-        font-size: 14px;
-        max-width: 500px;
         color: #646a73;
+        line-height: 22px;
       }
     }
   }