perf(src/views/chart): 优化背景图片选择，应用类型自动选择应用背景

@@ -2,9 +2,10 @@
 import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d';
 import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d';
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
 import { NEllipsis, NImage, NSelect, NSpace, NText, SelectOption } from 'naive-ui';
 import { NEllipsis, NImage, NSelect, NSpace, NText, SelectOption } from 'naive-ui';
-import { computed, h, unref } from 'vue';
+import { h } from 'vue';
 import { useBackgroundSelect } from '@/utils/external/useBackgroundImageSelect';
 import { useBackgroundSelect } from '@/utils/external/useBackgroundImageSelect';
 
 
+const emit = defineEmits(['bgChange'])
 const chartEditStore = useChartEditStore()
 const chartEditStore = useChartEditStore()
 const canvasConfig = chartEditStore.getEditCanvasConfig
 const canvasConfig = chartEditStore.getEditCanvasConfig
 
 
@@ -17,10 +18,15 @@ const renderOption = (option: SelectOption) => {
   ])
   ])
 }
 }
 
 
-const handleUpdateValue = (value: string, _option: SelectOption) => {
+const handleUpdateValue = (value: string) => {
   chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.BACKGROUND_IMAGE, value)
   chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.BACKGROUND_IMAGE, value)
+  emit('bgChange',value)
 }
 }
 
 
+const removeBg = ()=> canvasConfig.backgroundImage = null
+defineExpose({
+  removeBg
+})
 </script>
 </script>
 
 
 
 

@@ -43,7 +43,7 @@
     <n-space vertical :size="12">
     <n-space vertical :size="12">
       <n-space>
       <n-space>
         <!-- THINGS_KIT 新增预置背景选择 -->
         <!-- THINGS_KIT 新增预置背景选择 -->
-        <SelectBackgroundImage />
+        <SelectBackgroundImage ref="selectBackgroundImageRef" @bgChange="handleBgChange" />
         <n-text>背景颜色</n-text>
         <n-text>背景颜色</n-text>
         <div class="picker-height">
         <div class="picker-height">
           <n-color-picker
           <n-color-picker
@@ -248,10 +248,15 @@ const selectColorValueHandle = (value: number) => {
   canvasConfig.selectColor = value == 0
   canvasConfig.selectColor = value == 0
 }
 }
 
 
+// THINGS_KIT 优化清除背景，背景选择下拉框值还存在
+const selectBackgroundImageRef=ref<typeof SelectBackgroundImage|null>()
+
 // 清除背景
 // 清除背景
 const clearImage = () => {
 const clearImage = () => {
   chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.BACKGROUND_IMAGE, undefined)
   chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.BACKGROUND_IMAGE, undefined)
   chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.SELECT_COLOR, true)
   chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.SELECT_COLOR, true)
+  // THINGS_KIT 优化清除背景，背景选择下拉框值还存在
+  selectBackgroundImageRef.value?.removeBg()
 }
 }
 
 
 // 启用/关闭 颜色（强制更新）
 // 启用/关闭 颜色（强制更新）
@@ -291,6 +296,13 @@ const customRequest = (options: UploadCustomRequestOptions) => {
 const selectPreviewType = (key: PreviewScaleEnum) => {
 const selectPreviewType = (key: PreviewScaleEnum) => {
   chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.PREVIEW_SCALE_TYPE, key)
   chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.PREVIEW_SCALE_TYPE, key)
 }
 }
+
+// THINGS_KIT 优化背景图片选择，应用类型自动选择应用背景
+const handleBgChange=(value:string)=>{
+  if(!value) return
+  selectColorValue.value = 1,selectColorValueHandle(1),chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.BACKGROUND_IMAGE, value)
+}
+
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>