From 1a6f57f27c29866e9ede0df382e75282700b75e0 Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Wed, 18 Sep 2024 11:01:42 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=88=A0=E9=99=A4=E6=97=A0=E6=95=88svg?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/CommonStyleSet.vue                 | 17 ++++----
 .../src/layout/components/HeaderMenuItem.vue  |  9 ++---
 .../src/layout/components/MenuItem.vue        | 40 +++++++++++++++++--
 .../views/chart/components/editor/index.vue   |  6 +--
 .../data/datasource/form/EditorDetail.vue     |  6 +--
 5 files changed, 54 insertions(+), 24 deletions(-)

diff --git a/core/core-frontend/src/custom-component/common/CommonStyleSet.vue b/core/core-frontend/src/custom-component/common/CommonStyleSet.vue
index 84f5055494..88c37325f5 100644
--- a/core/core-frontend/src/custom-component/common/CommonStyleSet.vue
+++ b/core/core-frontend/src/custom-component/common/CommonStyleSet.vue
@@ -54,7 +54,7 @@
                 :title="t('chart.text_color')"
                 v-model="styleForm[styleColorKey.value]"
                 class="color-picker-style"
-                :prefix-icon="expandIcon(styleColorKey.icon)"
+                :prefix-icon="styleColorKey.icon"
                 :triggerWidth="styleColorKey.width"
                 is-custom
                 :predefine="state.predefineColors"
@@ -284,6 +284,10 @@
 </template>
 
 <script lang="tsx" setup>
+import dvStyleBackgroundColor from '@/assets/svg/dv-style-backgroundColor.svg'
+import dvStyleColor from '@/assets/svg/dv-style-color.svg'
+import dvStyleHeadFontActiveColor from '@/assets/svg/dv-style-headFontActiveColor.svg'
+import dvStyleHeadFontColor from '@/assets/svg/dv-style-headFontColor.svg'
 import dvStyleScrollSpeed from '@/assets/svg/dv-style-scroll-speed.svg'
 import dvStyleOpacity from '@/assets/svg/dv-style-opacity.svg'
 import dvStyleFontSize from '@/assets/svg/dv-style-fontSize.svg'
@@ -317,9 +321,6 @@ const props = withDefaults(
     themes: 'dark'
   }
 )
-const expandIcon = (name: string) => {
-  return h(Icon, { className: '', name })
-}
 const { themes, element } = toRefs(props)
 const emits = defineEmits(['onStyleAttrChange'])
 const styleMounted = ref({
@@ -376,20 +377,20 @@ const state = reactive({
 })
 
 const styleColorKeyArray = [
-  { value: 'color', label: '颜色', width: 90, icon: 'dv-style-color' },
+  { value: 'color', label: '颜色', width: 90, icon: dvStyleColor },
   {
     value: 'headFontColor',
     label: '头部字体颜色',
     width: 90,
-    icon: 'dv-style-headFontColor'
+    icon: dvStyleHeadFontColor
   },
   {
     value: 'headFontActiveColor',
     label: '激活字体颜色',
     width: 90,
-    icon: 'dv-style-headFontActiveColor'
+    icon: dvStyleHeadFontActiveColor
   },
-  { value: 'backgroundColor', label: '背景色', width: 90, icon: 'dv-style-backgroundColor' }
+  { value: 'backgroundColor', label: '背景色', width: 90, icon: dvStyleBackgroundColor }
 ]
 
 const letterSpacingList = computed(() => {
diff --git a/core/core-frontend/src/layout/components/HeaderMenuItem.vue b/core/core-frontend/src/layout/components/HeaderMenuItem.vue
index 1c534e62d1..508c9a1630 100644
--- a/core/core-frontend/src/layout/components/HeaderMenuItem.vue
+++ b/core/core-frontend/src/layout/components/HeaderMenuItem.vue
@@ -1,16 +1,13 @@
 <script lang="ts">
 import { h } from 'vue'
+import icon_expandDown_filled from '@/assets/svg/icon_expand-down_filled.svg'
 import { ElMenuItem, ElSubMenu } from 'element-plus-secondary'
-import Icon from '@/components/icon-custom/src/Icon.vue'
 
 const title = props => {
   const { title } = props.menu?.meta || {}
   return [h('span', null, { default: () => title })]
 }
 
-const expandIcon = (name: string) => {
-  return h(Icon, { className: '', name })
-}
 const HeaderMenuItem = props => {
   const { children = [], hidden, path } = props.menu
   if (hidden) {
@@ -24,8 +21,8 @@ const HeaderMenuItem = props => {
         index: path,
         'popper-class': 'popper-class-menu',
         showTimeout: 1,
-        expandCloseIcon: expandIcon('icon_expand-down_filled'),
-        expandOpenIcon: expandIcon('icon_expand-down_filled')
+        expandCloseIcon: icon_expandDown_filled,
+        expandOpenIcon: icon_expandDown_filled
       },
       {
         title: () => title(props),
diff --git a/core/core-frontend/src/layout/components/MenuItem.vue b/core/core-frontend/src/layout/components/MenuItem.vue
index 1dbc35a205..6e6a03937f 100644
--- a/core/core-frontend/src/layout/components/MenuItem.vue
+++ b/core/core-frontend/src/layout/components/MenuItem.vue
@@ -1,12 +1,46 @@
 <script lang="ts">
 import { h } from 'vue'
-import { Icon } from '@/components/icon-custom'
 import { ElMenuItem, ElSubMenu, ElIcon } from 'element-plus-secondary'
+import auth from '@/assets/svg/auth.svg'
+import association from '@/assets/svg/association.svg'
+import threshold from '@/assets/svg/threshold.svg'
+import org from '@/assets/svg/org.svg'
+import peoples from '@/assets/svg/peoples.svg'
+import report from '@/assets/svg/report.svg'
+import sync from '@/assets/svg/sync.svg'
+import appearance from '@/assets/svg/appearance.svg'
+import authentication from '@/assets/svg/authentication.svg'
+import embedded from '@/assets/svg/embedded.svg'
+import platform from '@/assets/svg/platform.svg'
+import plugin from '@/assets/svg/plugin.svg'
+import sysParameter from '@/assets/svg/sys-parameter.svg'
+import variable from '@/assets/svg/variable.svg'
+import watermark from '@/assets/svg/watermark.svg'
+import icon_font from '@/assets/svg/icon_font.svg'
+
+const iconMap = {
+  appearance: appearance,
+  authentication: authentication,
+  embedded: embedded,
+  platform: platform,
+  plugin: plugin,
+  'sys-parameter': sysParameter,
+  variable: variable,
+  watermark: watermark,
+  icon_font: icon_font,
+  auth: auth,
+  association: association,
+  threshold: threshold,
+  org: org,
+  peoples: peoples,
+  report: report,
+  sync: sync
+}
 
 const titleWithIcon = props => {
   const { title, icon } = props.menu?.meta || {}
   return [
-    h(ElIcon, null, { default: () => h(Icon, { className: 'logo', name: icon }) }),
+    h(ElIcon, null, { default: () => h(iconMap[icon], { className: 'svg-icon logo' }) }),
     h('span', null, { default: () => title })
   ]
 }
@@ -32,7 +66,7 @@ const MenuItem = props => {
     { index: path },
     {
       title: h('span', null, { default: () => title }),
-      default: h(ElIcon, null, { default: () => h(Icon, { className: 'logo', name: icon }) })
+      default: h(ElIcon, null, { default: () => h(iconMap[icon], { className: 'svg-icon logo' }) })
     }
   )
 }
diff --git a/core/core-frontend/src/views/chart/components/editor/index.vue b/core/core-frontend/src/views/chart/components/editor/index.vue
index 6f4906d195..295cc04abd 100644
--- a/core/core-frontend/src/views/chart/components/editor/index.vue
+++ b/core/core-frontend/src/views/chart/components/editor/index.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import icon_down_outlined1 from '@/assets/svg/icon_down_outlined-1.svg'
 import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
 import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
 import iconFilter from '@/assets/svg/icon-filter.svg'
@@ -446,9 +447,6 @@ const quotaItemRemove = item => {
   }
   useEmitt().emitter.emit('removeAxis', { axisType, axis, editType: 'remove' })
 }
-const arrowIcon = () => {
-  return h(Icon, { name: 'icon_down_outlined-1' })
-}
 
 const isFilterActive = computed(() => {
   return !!view.value.customFilter?.items?.length
@@ -1804,7 +1802,7 @@ const deleteChartFieldItem = id => {
                             v-model="state.useless"
                             popper-class="chart-type-hide-options"
                             class="chart-type-select"
-                            :suffix-icon="arrowIcon()"
+                            :suffix-icon="icon_down_outlined1"
                             :effect="themes"
                             size="small"
                           >
diff --git a/core/core-frontend/src/views/visualized/data/datasource/form/EditorDetail.vue b/core/core-frontend/src/views/visualized/data/datasource/form/EditorDetail.vue
index 9c410596b4..99c0470e52 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/form/EditorDetail.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/form/EditorDetail.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import icon_calendar_outlined from '@/assets/svg/icon_calendar_outlined.svg'
 import icon_rename_outlined from '@/assets/svg/icon_rename_outlined.svg'
 import icon_down_outlined from '@/assets/svg/icon_down_outlined.svg'
 import icon_down_outlined1 from '@/assets/svg/icon_down_outlined-1.svg'
@@ -69,7 +70,6 @@ const loading = ref(false)
 const dsForm = ref<FormInstance>()
 
 const cronEdit = ref(true)
-const calendar = h(Icon, { name: 'icon_calendar_outlined' })
 
 const defaultRule = {
   name: [
@@ -1351,7 +1351,7 @@ defineExpose({
             <el-date-picker
               v-model="form.syncSetting.startTime"
               class="de-date-picker"
-              :prefix-icon="calendar"
+              :prefix-icon="icon_calendar_outlined"
               type="datetime"
               :placeholder="t('datasource.start_time')"
             />
@@ -1365,7 +1365,7 @@ defineExpose({
               <el-date-picker
                 v-model="form.syncSetting.endTime"
                 class="de-date-picker"
-                :prefix-icon="calendar"
+                :prefix-icon="icon_calendar_outlined"
                 type="datetime"
                 :placeholder="t('datasource.end_time')"
               />