Merge branch 'ft' into 'main_dev'

perf(src/components): 优化部分功能体验

See merge request yunteng/thingskit-view!98

 <template>
   <n-dropdown trigger="hover" @select="handleSelect" :show-arrow="true" :options="options">
     <div class="user-info-box">
-      <person-icon v-if="!avatarLogo"></person-icon>
       <n-avatar
-        v-else
         round
         object-fit="cover"
         size="medium"

-import { CameraConfig } from './Camera/index'
-import { SingleCameraConfig } from './SingleCamera/index'
-import { OverrideILoadConfigurationframeConfig } from './OverrideILoadConfigurationframe/index'
-
-export default [SingleCameraConfig, CameraConfig, OverrideILoadConfigurationframeConfig]
+/**
+ * 此项目扩展侧边栏功能，保留待用
+ */
\ No newline at end of file

-export enum ChatCategoryEnum {
-  MORE = 'Mores'
-}
+// export enum ChatCategoryEnum {
+//   MORE = 'Mores'
+// }
 
-export enum ChatCategoryEnumName {
-  MORE = '更多'
-}
+// export enum ChatCategoryEnumName {
+//   MORE = '更多'
+// }
 
-export enum PackagesCategoryEnum {
-  WORD_CLOUD = 'WordCloud'
-}
+// export enum PackagesCategoryEnum {
+//   WORD_CLOUD = 'WordCloud'
+// }

-import Mores from './Mores'
+// import Mores from './Mores'
 
-export const ComposesList = [...Mores]
+// export const ComposesList = [...Mores]

@@ -13,5 +13,5 @@ export const Decorates07Config: ConfigType = {
     categoryName: ChatCategoryEnumName.DECORATE,
     package: PackagesCategoryEnum.DECORATES,
     chartFrame: ChartFrameEnum.COMMON,
-    image: 'title3.png',
+    image: 'decorates11.png',
 }

@@ -13,5 +13,5 @@ export const Decorates08Config: ConfigType = {
     categoryName: ChatCategoryEnumName.DECORATE,
     package: PackagesCategoryEnum.DECORATES,
     chartFrame: ChartFrameEnum.COMMON,
-    image: 'title3.png',
+    image: 'decorates08.png',
 }

@@ -13,5 +13,5 @@ export const Decorates09Config: ConfigType = {
     categoryName: ChatCategoryEnumName.DECORATE,
     package: PackagesCategoryEnum.DECORATES,
     chartFrame: ChartFrameEnum.COMMON,
-    image: 'title3.png',
+    image: 'decorates09.png',
 }

@@ -13,5 +13,5 @@ export const Decorates10Config: ConfigType = {
     categoryName: ChatCategoryEnumName.DECORATE,
     package: PackagesCategoryEnum.DECORATES,
     chartFrame: ChartFrameEnum.COMMON,
-    image: 'title3.png',
+    image: 'decorates10.png',
 }

@@ -130,7 +130,7 @@ const props = defineProps({
 })
 const uploadFileListRef = ref()
 
-const selectValue = ref('headerBg08.png')
+const selectValue = ref<string| null>('headerBg08.png')
 
 const getAllBackgroundImageList = computed(() => {
   const pathList = import.meta.glob('../../../../../../assets/external/headbackground/*')
@@ -220,7 +220,7 @@ const handleChange = (value: boolean) => {
 const clearImage = () => {
   props.optionData.backgroundImage = ''
   props.optionData.bgSrc = ''
-  selectValue.value = ''
+  selectValue.value = null
 }
 </script>
 <style lang="scss" scoped>

@@ -13,5 +13,5 @@ export const Subtitle4Config: ConfigType = {
     categoryName: ChatCategoryEnumName.SUBTITLE,
     package: PackagesCategoryEnum.DECORATES,
     chartFrame: ChartFrameEnum.COMMON,
-    image: 'title3.png',
+    image: 'title4.png',
 }

@@ -13,5 +13,5 @@ export const Subtitle5Config: ConfigType = {
     categoryName: ChatCategoryEnumName.SUBTITLE,
     package: PackagesCategoryEnum.DECORATES,
     chartFrame: ChartFrameEnum.COMMON,
-    image: 'title3.png',
+    image: 'title5.png',
 }

@@ -13,5 +13,5 @@ export const Subtitle6Config: ConfigType = {
     categoryName: ChatCategoryEnumName.SUBTITLE,
     package: PackagesCategoryEnum.DECORATES,
     chartFrame: ChartFrameEnum.COMMON,
-    image: 'title3.png',
+    image: 'title6.png',
 }

@@ -13,5 +13,5 @@ export const Subtitle7Config: ConfigType = {
     categoryName: ChatCategoryEnumName.SUBTITLE,
     package: PackagesCategoryEnum.DECORATES,
     chartFrame: ChartFrameEnum.COMMON,
-    image: 'title3.png',
+    image: 'title7.png',
 }

@@ -13,5 +13,5 @@ export const Subtitle8Config: ConfigType = {
     categoryName: ChatCategoryEnumName.SUBTITLE,
     package: PackagesCategoryEnum.DECORATES,
     chartFrame: ChartFrameEnum.COMMON,
-    image: 'title3.png',
+    image: 'title8.png',
 }

@@ -4,12 +4,12 @@
       <n-select size="small" v-model:value="optionData.buttonType" :options="buttonTypeOptions" />
     </setting-item-box>
     <setting-item-box name="虚线">
-      <setting-item name="">
+      <setting-item name="是否开启">
         <n-switch v-model:value="optionData.buttonDashed" />
       </setting-item>
     </setting-item-box>
     <setting-item-box name="透明">
-      <setting-item name="">
+      <setting-item name="是否开启">
         <n-switch v-model:value="optionData.buttonGhost" />
       </setting-item>
     </setting-item-box>
@@ -17,16 +17,31 @@
       <setting-item name="">
         <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.buttonColor"></n-color-picker>
       </setting-item>
+      <setting-item>
+        <n-button size="small" @click="optionData.buttonColor=''">
+          恢复默认
+        </n-button>
+      </setting-item>
     </setting-item-box>
     <setting-item-box name="文字颜色">
       <setting-item name="">
         <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.buttonTextColor"></n-color-picker>
       </setting-item>
+      <setting-item>
+        <n-button size="small" @click="optionData.buttonTextColor='white'">
+          恢复默认
+        </n-button>
+      </setting-item>
     </setting-item-box>
     <setting-item-box name="文字大小">
       <setting-item name="">
         <n-input-number v-model:value="optionData.buttonTextSize" />
       </setting-item>
+      <setting-item>
+        <n-button size="small" @click="optionData.buttonTextSize='16'">
+          恢复默认
+        </n-button>
+      </setting-item>
     </setting-item-box>
     <setting-item-box :alone="true">
       <setting-item name="按钮文字" :alone="true">
@@ -59,7 +74,7 @@
 
 <script lang="ts" setup>
 import { PropType, ref, onMounted } from 'vue'
-import { CollapseItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
+import { CollapseItem, SettingItemBox ,SettingItem} from '@/components/Pages/ChartItemSetting'
 import { option } from './config'
 import { icon } from '@/plugins'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'

@@ -25,7 +25,7 @@ export const option = {
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = OverrideInputsDateConfig.key
-  public attr = { ...chartInitConfig, w: 260, h: 32, zIndex: -1 }
+  public attr = { ...chartInitConfig, w: 260, h: 32, zIndex: 99999 }
   public chartConfig = cloneDeep(OverrideInputsDateConfig)
   public interactActions = interactActions
   public option = cloneDeep(option)

@@ -7,7 +7,7 @@
   <collapse-item name="时间配置" :expanded="true">
     <setting-item-box name="快捷选择">
       <setting-item name="日期">
-        <n-select @change="shortCutSelect" v-model:value="optionData.shortcut" size="small" :options="intervalOption" />
+        <n-select clearable @change="shortCutSelect" v-model:value="optionData.shortcut" size="small" :options="intervalOption" />
       </setting-item>
     </setting-item-box>
     <setting-item-box name="基础">
@@ -108,6 +108,10 @@ const datePickerTypeOptions = [
     value: ComponentInteractEventEnum.DATE_RANGE
   },
   {
+    label: '日期时间范围',
+    value: ComponentInteractEventEnum.DATE_TIME_RANGE
+  },
+  {
     label: '月份',
     value: ComponentInteractEventEnum.MONTH
   },

@@ -84,6 +84,7 @@ export const interactActions: InteractActionsType[] = [
       [ComponentInteractEventEnum.DATE]: time,
       [ComponentInteractEventEnum.DATE_TIME]: time,
       [ComponentInteractEventEnum.DATE_RANGE]: timeRange,
+      [ComponentInteractEventEnum.DATE_TIME_RANGE]: timeRange,
       [ComponentInteractEventEnum.MONTH]: time,
       [ComponentInteractEventEnum.MONTH_RANGE]: timeRange,
       [ComponentInteractEventEnum.QUARTER]: time,

@@ -30,7 +30,7 @@ export const option = {
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = OverrideSelectConfig.key
-  public attr = { ...chartInitConfig, w: 260, h: 32, zIndex: -1 }
+  public attr = { ...chartInitConfig, w: 260, h: 32, zIndex: 99999 }
   public chartConfig = cloneDeep(OverrideSelectConfig)
   public interactActions = interactActions
   public option = cloneDeep(option)

-import { ChartFrameEnum, ConfigType } from '@/packages/index.d'
-import { EPackagesCategoryEnum } from '@/packages/components/external/types'
-import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Informations/index.d'
 import { useWidgetKey } from '@/packages/external/useWidgetKey'
 
-const { key, chartKey, conKey } = useWidgetKey('Camera')
+const { key, conKey, chartKey } = useWidgetKey('Camera', true)
+
 export const CameraConfig: ConfigType = {
   key,
   chartKey,
@@ -11,7 +11,7 @@ export const CameraConfig: ConfigType = {
   title: '多个摄像头',
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
-  package: EPackagesCategoryEnum.COMPOSES,
-  chartFrame: ChartFrameEnum.NAIVE_UI,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.NAIVE_UI,        
   image: 'camera.png'
 }

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { CustomEchartsConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  //数据源设置 默认设置一个
+  dataset: `
+  {
+    backgroundColor: 'transparent',
+    tooltip: {
+        trigger: 'none'
+    },
+    xAxis: {
+        data: ["百分比"],
+        axisTick: {
+            show: false
+        },
+        axisLine: {
+            show: false
+        },
+        axisLabel: {
+            show: false,
+            textStyle: {
+                color: '#e54035'
+            }
+        }
+    },
+    yAxis: {
+        splitLine: {
+            show: false
+        },
+        axisTick: {
+            show: false
+        },
+        axisLine: {
+            show: false
+        },
+        axisLabel: {
+            show: false
+        }
+    },
+    series: [{
+        name: '最上层立体圆',
+        type: 'pictorialBar',
+        symbolSize: [300, 45],
+        symbolOffset: [0, -20],
+        z: 12,
+        itemStyle: {
+            normal: {
+                color: '#363F5E'
+            }
+        },
+        data: [{
+            value: 100,
+            symbolPosition: 'end'
+        }]
+    }, {
+        name: '中间立体圆',
+        type: 'pictorialBar',
+        symbolSize: [300, 45],
+        symbolOffset: [0, -20],
+        z: 12,
+        itemStyle: {
+            normal: {
+                color: '#2B5B4D'
+            }
+        },
+        data: [{
+            value: 30,
+            symbolPosition: 'end'
+        }]
+    }, {
+        name: '最底部立体圆',
+        type: 'pictorialBar',
+        symbolSize: [300, 45],
+        symbolOffset: [0, 20],
+        z: 12,
+        itemStyle: {
+            normal: {
+                color: '#01CC04'
+            }
+        },
+        data: [101 - 40]
+    }, {
+        //底部立体柱
+        stack: '1',
+        type: 'bar',
+        itemStyle: {
+            normal: {
+                color: '#01CC04',
+                opacity: .7
+            }
+        },
+        label: {
+            show: true,
+            position: "top",
+            distance: 15,
+            color: "#FFFE00",
+            fontSize:50,
+            formatter:'{c}'+'%'
+        },
+        
+        silent: true,
+        barWidth: 300,
+        barGap: '-100%', // Make series be overlap
+        data: [30]
+    }, {
+        //上部立体柱
+        stack: '1',
+        type: 'bar',
+        itemStyle: {
+            normal: {
+                color: '#36405E',
+                opacity: .7
+            }
+        },
+        silent: true,
+        barWidth: 300,
+        barGap: '-100%', // Make series be overlap
+        data: [100 - 30]
+    }]
+}
+  `
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = CustomEchartsConfig.key
+  public attr = { ...chartInitConfig, w: 1200, h: 800, zIndex: -1 }
+  public chartConfig = cloneDeep(CustomEchartsConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <collapse-item name="数据源(option配置里的内容)" :expanded="true">
+    <monaco-editor v-model:modelValue="optionData.dataset" width="400px" height="480px" language="json" />
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option } from './config'
+import { CollapseItem } from '@/components/Pages/ChartItemSetting'
+import { MonacoEditor } from '@/components/Pages/MonacoEditor'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+
+</script>

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Informations/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('CustomEcharts', true)
+
+export const CustomEchartsConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '自定义echarts组件',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.COMMON,        
+  image: 'iframe.png'
+}

+<template>
+  <v-chart
+    ref="vChartRef"
+    :init-options="initOptions"
+    :theme="themeColor"
+    :option="option"
+    :manual-update="isPreview()"
+    :update-options="{
+      replaceMerge: replaceMergeArr
+    }"
+    autoresize
+  ></v-chart>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, PropType, watch } from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { BarChart } from 'echarts/charts'
+import config from './config'
+import { mergeTheme } from '@/packages/public/chart'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { isPreview } from '@/utils'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+const initOptions = useCanvasInitOptions(eval('(' + props.chartConfig.option.dataset + ')'), props.themeSetting)
+
+use([DatasetComponent, CanvasRenderer, BarChart, GridComponent, TooltipComponent, LegendComponent])
+
+const replaceMergeArr = ref<string[]>()
+
+const option = computed(() => {
+  return mergeTheme(eval('(' + props.chartConfig.option.dataset + ')'), props.themeSetting, [])
+})
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+
+const updateVChart = (dataset: object) => {
+  new Promise(resolve => {
+    setTimeout(() => {
+      resolve(
+        vChartRef.value?.setOption(
+          {
+            ...dataset
+          },
+          {
+            notMerge: true
+          }
+        )
+      )
+    }, 100)
+  })
+}
+
+watch(
+  () => props.chartConfig.option.dataset,
+  newValue => {
+    try {
+      //嵌套字符串使用JSON.parse会报错，这里使用eval函数
+      updateVChart(eval('(' + newValue + ')'))
+    } catch (e) {
+      console.error(
+        `文件位置：src\\packages\\components\\external\\InformationsMores\\CustomEcharts\\index.vue`,
+        '错误信息：您的json格式有误'
+      )
+    }
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+</script>

-import { ChartFrameEnum, ConfigType } from '@/packages/index.d'
-import { EPackagesCategoryEnum } from '@/packages/components/external/types'
-import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Informations/index.d'
 import { useWidgetKey } from '@/packages/external/useWidgetKey'
 
-const { key, conKey, chartKey } = useWidgetKey('OverrideILoadConfigurationframe')
+const { key, conKey, chartKey } = useWidgetKey('OverrideILoadConfigurationframe', true)
 
 export const OverrideILoadConfigurationframeConfig: ConfigType = {
   key,
@@ -12,7 +11,7 @@ export const OverrideILoadConfigurationframeConfig: ConfigType = {
   title: '加载组态',
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
-  package: EPackagesCategoryEnum.COMPOSES,
+  package: PackagesCategoryEnum.INFORMATIONS,
   chartFrame: ChartFrameEnum.COMMON,        
   image: 'configuration.png'
 }

-import { ChartFrameEnum, ConfigType } from '@/packages/index.d'
-import { EPackagesCategoryEnum } from '@/packages/components/external/types'
-import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Informations/index.d'
 import { useWidgetKey } from '@/packages/external/useWidgetKey'
 
-const { key, chartKey, conKey } = useWidgetKey('SingleCamera')
+const { key, conKey, chartKey } = useWidgetKey('SingleCamera', true)
+
 export const SingleCameraConfig: ConfigType = {
   key,
   chartKey,
@@ -11,7 +11,7 @@ export const SingleCameraConfig: ConfigType = {
   title: '单个摄像头',
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
-  package: EPackagesCategoryEnum.COMPOSES,
-  chartFrame: ChartFrameEnum.NAIVE_UI,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.NAIVE_UI,        
   image: 'camera.png'
 }

-import { EPackagesCategoryEnum, EPackagesType } from '@/packages/components/external/types'
-import { ComposesList } from '@/packages/components/external/Composes'
+// import { EPackagesCategoryEnum, EPackagesType } from '@/packages/components/external/types'
+import { EPackagesType } from '@/packages/components/external/types'
+// import { ComposesList } from '@/packages/components/external/Composes'//此项目扩展侧边栏功能，保留待用
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { PickIconConfig } from '@/packages/components/external/Decorates/Mores/PickIcon'
 import { WeatherConfig } from '@/packages/components/external/Decorates/Mores/Weather'
@@ -37,12 +38,16 @@ import { Decorates07Config } from '@/packages/components/external/Decorates/Deco
 import { Decorates08Config } from '@/packages/components/external/Decorates/Decorates/Decorates08'
 import { Decorates09Config } from '@/packages/components/external/Decorates/Decorates/Decorates09'
 import { Decorates10Config } from '@/packages/components/external/Decorates/Decorates/Decorates10'
+import { CameraConfig } from '@/packages/components/external/Informations/Mores/Camera'
+import { SingleCameraConfig } from '@/packages/components/external/Informations/Mores/SingleCamera'
+import { OverrideILoadConfigurationframeConfig } from '@/packages/components/external/Informations/Mores/OverrideILoadConfigurationframe'
+import { CustomEchartsConfig } from '@/packages/components/external/Informations/Mores/CustomEcharts'
 
 /**
  * 重写动态注入
  */
 export function useInjectLib(packagesList: EPackagesType) {
-  packagesList[EPackagesCategoryEnum.COMPOSES] = ComposesList
+  // packagesList[EPackagesCategoryEnum.COMPOSES] = ComposesList //此项目扩展侧边栏功能，保留待用
 
   //小组件
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, PickIconConfig)//新增小组件图标
@@ -76,6 +81,10 @@ export function useInjectLib(packagesList: EPackagesType) {
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideTextBarrageConfig)//重写信息下的弹幕文字
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideTextGradientConfig)//重写信息下的渐变文字
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideVideoConfig)//重写信息下的视频
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, CameraConfig)//新增信息下的多个摄像头
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, SingleCameraConfig)//新增信息下的单个摄像头
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideILoadConfigurationframeConfig)//新增信息下的加载组态
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, CustomEchartsConfig)//新增信息下的自定义ecahrts组件
   //
 
   //图表

@@ -2,9 +2,10 @@
 import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d';
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
 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';
 
+const emit = defineEmits(['bgChange'])
 const chartEditStore = useChartEditStore()
 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)
+  emit('bgChange',value)
 }
 
+const removeBg = ()=> canvasConfig.backgroundImage = null
+defineExpose({
+  removeBg
+})
 </script>
 
 

@@ -43,7 +43,7 @@
     <n-space vertical :size="12">
       <n-space>
         <!-- THINGS_KIT 新增预置背景选择 -->
-        <SelectBackgroundImage />
+        <SelectBackgroundImage ref="selectBackgroundImageRef" @bgChange="handleBgChange" />
         <n-text>背景颜色</n-text>
         <div class="picker-height">
           <n-color-picker
@@ -179,21 +179,21 @@ const globalTabList = [
     render: ChartThemeColor
   }
 ]
-
+// THINGS_KIT 优化适配方式默认选中X轴铺满，Y轴自适应滚动
 const previewTypeList = [
   {
-    key: PreviewScaleEnum.FIT,
-    title: '自适应',
-    icon: ScaleIcon,
-    desc: '自适应比例展示，页面会有留白'
-  },
-  {
     key: PreviewScaleEnum.SCROLL_Y,
     title: 'Y轴滚动',
     icon: FitToWidthIcon,
     desc: 'X轴铺满，Y轴自适应滚动'
   },
   {
+    key: PreviewScaleEnum.FIT,
+    title: '自适应',
+    icon: ScaleIcon,
+    desc: '自适应比例展示，页面会有留白'
+  },
+  {
     key: PreviewScaleEnum.SCROLL_X,
     title: 'X轴滚动',
     icon: FitToHeightIcon,
@@ -248,10 +248,15 @@ const selectColorValueHandle = (value: number) => {
   canvasConfig.selectColor = value == 0
 }
 
+// THINGS_KIT 优化清除背景，背景选择下拉框值还存在
+const selectBackgroundImageRef=ref<typeof SelectBackgroundImage|null>()
+
 // 清除背景
 const clearImage = () => {
   chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.BACKGROUND_IMAGE, undefined)
   chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.SELECT_COLOR, true)
+  // THINGS_KIT 优化清除背景，背景选择下拉框值还存在
+  selectBackgroundImageRef.value?.removeBg()
 }
 
 // 启用/关闭 颜色（强制更新）
@@ -291,6 +296,13 @@ const customRequest = (options: UploadCustomRequestOptions) => {
 const selectPreviewType = (key: PreviewScaleEnum) => {
   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>
 
 <style lang="scss" scoped>

@@ -183,9 +183,19 @@ const fnEventsOptions = (): Array<SelectOption | SelectGroupOption> => {
         iter: Array<CreateComponentType | CreateComponentGroupType>,
         val: CreateComponentType | CreateComponentGroupType
       ) => {
-        if (!val.groupList && val.request.requestDataType === RequestDataTypeEnum.AJAX && val.request.requestUrl) {
+        /**
+         * WARNING 这里升级版本有冲突
+         * 不修改这里的话，会造成联动组件绑定不了动态请求或者静态相关的组件
+         * 由于只修改一处，所以没必要进行重写，原因是原作者绑定组件(必须是带有动态请求,不支持静态组件)，此项目有时需要绑定静态组件看效果，所以不判断必须是动态请求
+         * 修改后的代码在注释之间，并标注好源代码和修改后代码，方便回溯
+         * 源代码 && val.request.requestDataType === RequestDataTypeEnum.AJAX && val.request.requestUrl
+         * 修改后的代码 无修改
+         * 修改后代码在//之间
+         */
+        if (!val.groupList ) {
           iter.push(val)
         }
+        //
         return val.groupList && val.groupList.length > 0 ? [...iter, ...fnFlattern(val.groupList)] : iter
       },
       []