fix: 修改图片组件不能动态更新的问题

src/api/mock/index.ts

@@ -41,7 +41,7 @@ const mockObject: MockMethod[] = [
   {
     url: imageUrl,
     method: RequestHttpEnum.GET,
-    response: () => test.fetchImage,
+    response: () => test.fetchImage(Math.round(Math.random()*10)),
   },
 ]
 

src/api/mock/test.mock.ts

@@ -80,10 +80,10 @@ export default {
     msg: '请求成功',
     data: '@paragraph(1, 10)',
   },
-  fetchImage: {
+  fetchImage: (num: number) => ({
     code: 0,
     status: 200,
     msg: '请求成功',
-    data: `https://robohash.org/${Math.round(Math.random()*10)}`,
+    data: `https://robohash.org/${num}`,
-  },
+  }),
 }

src/packages/components/Informations/Mores/Image/config.vue

@@ -1,5 +1,5 @@
 <template>
-  <collapse-item name="图片" :expanded="true">
+  <collapse-item name="属性" :expanded="true">
     <setting-item-box name="路径" :alone="true">
       <setting-item>
         <n-input v-model:value="optionData.dataset" size="small"></n-input>

src/packages/components/Informations/Mores/Image/index.vue

@@ -1,42 +1,57 @@
 <template>
-  <div class="go-packages-image">
   <div :style="getStyle(borderRadius)">
     <n-image
       :object-fit="fit"
       preview-disabled
-        :src="dataset"
+      :src="option.dataset"
       :fallback-src="requireErrorImg()"
       :width="w"
       :height="h"
     ></n-image>
   </div>
-  </div>
 </template>
 
 <script setup lang="ts">
-import { PropType, computed, toRefs } from 'vue'
+import { PropType, shallowReactive, watch, toRefs } from 'vue'
-import { CreateComponentType } from '@/packages/index.d'
 import { requireErrorImg } from '@/utils'
+import { useChartDataFetch } from '@/hooks'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 
 const props = defineProps({
   chartConfig: {
     type: Object as PropType<CreateComponentType>,
-    required: true,
+    required: true
-  },
+  }
 })
 
 const { w, h } = toRefs(props.chartConfig.attr)
 const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)
 
+const option = shallowReactive({
+  dataset: ''
+})
+
 const getStyle = (radius: number) => {
   return {
     borderRadius: `${radius}px`,
-    overflow: 'hidden',
+    overflow: 'hidden'
   }
 }
-</script>
 
-<style lang="scss" scoped>
+// 编辑更新
-.go-packages-image {
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: any) => {
+    option.dataset = newData
+  },
+  {
+    immediate: true
   }
-</style>
+)
+
+// 预览更新
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  option.dataset = newData
+})
+</script>