Merge pull request #12554 from dataease/pr@dev-v2@refactor_border-img

refactor(图表): 通用背景选择边框显示优化

core/core-frontend/src/components/visualization/component-background/BackgroundOverallCommon.vue

@@ -141,6 +141,12 @@
               placeholder="选择边框..."
               @change="onBackgroundChange"
             >
+              <template v-if="state.commonBackground.innerImage" #prefix>
+                <border-option-prefix
+                  inner-image-color="state.commonBackground.innerImageColor"
+                  :url="state.commonBackground.innerImage"
+                ></border-option-prefix>
+              </template>
               <el-option
                 v-for="(item, index) in state.BackgroundShowMap['default']"
                 :key="index"
@@ -223,6 +229,8 @@ import elementResizeDetectorMaker from 'element-resize-detector'
 import { ElMessage } from 'element-plus-secondary'
 import BoardItem from '@/components/visualization/component-background/BoardItem.vue'
 import ImgViewDialog from '@/custom-component/ImgViewDialog.vue'
+import PictureOptionPrefix from '@/custom-component/picture-group/PictureOptionPrefix.vue'
+import BorderOptionPrefix from '@/components/visualization/component-background/BorderOptionPrefix.vue'
 const snapshotStore = snapshotStoreWithOut()
 const { t } = useI18n()
 const emits = defineEmits(['onBackgroundChange'])

core/core-frontend/src/components/visualization/component-background/BorderOptionPrefix.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="img-option-prefix">
+    <Icon
+      ><component
+        :style="{ color: innerImageColor, width: '20px', height: '20px' }"
+        class="svg-icon svg-background"
+        :is="iconBoardMap[mainIconClass(url)]"
+      ></component
+    ></Icon>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { iconBoardMap } from '@/components/icon-group/board-list'
+import { toRefs } from 'vue'
+import { Icon } from '@/components/icon-custom'
+
+const props = withDefaults(
+  defineProps<{
+    url: any
+    innerImageColor: string
+  }>(),
+  {}
+)
+
+const { innerImageColor } = toRefs(props)
+
+const mainIconClass = url => {
+  return url.replace('board/', '').replace('.svg', '')
+}
+</script>
+
+<style scoped lang="less">
+.img-option-prefix {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+}
+</style>