From 1e038ff4f08ce920b774b72fb2e2492cc8be372c Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Mon, 30 Sep 2024 17:06:14 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E5=9B=BE=E8=A1=A8):=20=E9=80=9A?=
 =?UTF-8?q?=E7=94=A8=E8=83=8C=E6=99=AF=E9=80=89=E6=8B=A9=E8=BE=B9=E6=A1=86?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../BackgroundOverallCommon.vue               |  8 ++++
 .../BorderOptionPrefix.vue                    | 41 +++++++++++++++++++
 2 files changed, 49 insertions(+)
 create mode 100644 core/core-frontend/src/components/visualization/component-background/BorderOptionPrefix.vue

diff --git a/core/core-frontend/src/components/visualization/component-background/BackgroundOverallCommon.vue b/core/core-frontend/src/components/visualization/component-background/BackgroundOverallCommon.vue
index a45295e95f..db133a1fbf 100644
--- a/core/core-frontend/src/components/visualization/component-background/BackgroundOverallCommon.vue
+++ b/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'])
diff --git a/core/core-frontend/src/components/visualization/component-background/BorderOptionPrefix.vue b/core/core-frontend/src/components/visualization/component-background/BorderOptionPrefix.vue
new file mode 100644
index 0000000000..8b9e03aecb
--- /dev/null
+++ b/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>