插入图片 替换图片

src/services/ConfigService.ts

@@ -60,5 +60,12 @@ class ConfigService{
     static async GetTemplagePageAsync(params : any):Promise<HttpResponse>{
         return Api.Post("triptemplate_GetTripTemplatePage",params)
     }
+
+    /**
+     * 图片素材分页列表
+     */
+     static async GetPicList(params : any):Promise<HttpResponse>{
+        return Api.Post("hotel_post_GetPicList",params)
+    }
 }
 export default ConfigService;
\ No newline at end of file

src/store/screen.ts

@@ -16,6 +16,8 @@ export interface ScreenState {
   FeatureImg: any,
   SourceLoading: boolean,
   pageIndex: number,
+  imgPoolVisible: boolean,
+  imgReplaceVisible: boolean,
 }
 
 export const useScreenStore = defineStore('screen', {
@@ -34,6 +36,8 @@ export const useScreenStore = defineStore('screen', {
     FeatureImg: [], // 行程特色图
     SourceLoading: false, // 记录数据源是否更改
     pageIndex: 0,//需要生成图的行程特色
+    imgPoolVisible: false,//新增上传图片弹窗
+    imgReplaceVisible: false,//替换图片弹窗
   }),
 
   actions: {
@@ -81,6 +85,12 @@ export const useScreenStore = defineStore('screen', {
     },
     setPageIndex(pageIndex: number){
       this.pageIndex = pageIndex
+    },
+    setImgPoolVisible(imgPoolVisible: boolean) {
+      this.imgPoolVisible = imgPoolVisible
+    },
+    setImgReplaceVisible(imgReplaceVisible: boolean) {
+      this.imgReplaceVisible = imgReplaceVisible
     }
   },
 })
\ No newline at end of file

src/views/Editor/CanvasTool/index.vue

@@ -20,9 +20,10 @@
           <IconDown class="arrow" />
         </Popover>
       </div>
-      <FileInput @change="files => insertImageElement(files)">
-        <IconPicture class="handler-item" v-tooltip="'插入图片'" />
-      </FileInput>
+      <!-- <FileInput @change="files => insertImageElement(files)">
+          <IconPicture class="handler-item" v-tooltip="'插入图片'" />
+        </FileInput> imgPoolVisible-->
+      <IconPicture class="handler-item" v-tooltip="'插入图片'" @click="getImgVis()"/>
       <Popover trigger="click" v-model:value="shapePoolVisible">
         <template #content>
           <ShapePool @select="shape => drawShape(shape)" />
@@ -89,13 +90,16 @@
         @update="data => { createLatexElement(data); latexEditorVisible = false }"
       />
     </Modal>
+
+    <!-- 上传图片 -->
+    <UploadPicture v-if="imgPoolVisible"></UploadPicture>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, provide } from 'vue'
 import { storeToRefs } from 'pinia'
-import { useMainStore, useSnapshotStore } from '@/store'
+import { useMainStore, useSnapshotStore, useScreenStore } from '@/store'
 import { getImageDataURL } from '@/utils/image'
 import type { ShapePoolItem } from '@/configs/shapes'
 import type { LinePoolItem } from '@/configs/lines'
@@ -114,6 +118,7 @@ import Modal from '@/components/Modal.vue'
 import Divider from '@/components/Divider.vue'
 import Popover from '@/components/Popover.vue'
 import PopoverMenuItem from '@/components/PopoverMenuItem.vue'
+import UploadPicture from './UploadPicture.vue'
 
 const mainStore = useMainStore()
 const { creatingElement, creatingCustomShape, showSelectPanel, showSearchPanel } = storeToRefs(mainStore)
@@ -121,6 +126,8 @@ const { canUndo, canRedo } = storeToRefs(useSnapshotStore())
 
 const { redo, undo } = useHistorySnapshot()
 
+const { imgPoolVisible } = storeToRefs(useScreenStore())
+
 const {
   scaleCanvas,
   setCanvasScalePercentage,
@@ -145,6 +152,8 @@ const {
   createAudioElement,
 } = useCreateElement()
 
+provide('imgType',1)
+
 const insertImageElement = (files: FileList) => {
   const imageFile = files[0]
   if (!imageFile) return
@@ -159,6 +168,10 @@ const mediaInputVisible = ref(false)
 const latexEditorVisible = ref(false)
 const textTypeSelectVisible = ref(false)
 
+const getImgVis = () =>{
+  imgPoolVisible.value = true
+}
+
 // 绘制文字范围
 const drawText = (vertical = false) => {
   mainStore.setCreatingElement({

src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue

@@ -50,19 +50,22 @@
     <Divider />
     <ElementShadow />
     <Divider />
-    
+<!--     
     <FileInput @change="files => replaceImage(files)">
       <Button class="full-width-btn"><IconTransform class="btn-icon" /> 替换图片</Button>
-    </FileInput>
+    </FileInput> -->
+    <Button class="full-width-btn" @click="getImgVis()"><IconTransform class="btn-icon"/> 替换图片</Button>
     <Button class="full-width-btn" @click="resetImage()"><IconUndo class="btn-icon" /> 重置样式</Button>
     <Button class="full-width-btn" @click="setBackgroundImage()"><IconTheme class="btn-icon" /> 设为背景</Button>
+    <!-- 上传图片 -->
+    <UploadPicture v-if="imgReplaceVisible"></UploadPicture>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { type Ref, ref } from 'vue'
+import { type Ref, ref, provide } from 'vue'
 import { storeToRefs } from 'pinia'
-import { useMainStore, useSlidesStore } from '@/store'
+import { useMainStore, useSlidesStore, useScreenStore } from '@/store'
 import type { PPTImageElement, SlideBackground } from '@/types/slides'
 import { CLIPPATHS } from '@/configs/imageClip'
 import { getImageDataURL } from '@/utils/image'
@@ -78,6 +81,7 @@ import Divider from '@/components/Divider.vue'
 import Button from '@/components/Button.vue'
 import ButtonGroup from '@/components/ButtonGroup.vue'
 import Popover from '@/components/Popover.vue'
+import UploadPicture from '../../CanvasTool/UploadPicture.vue'
 
 const shapeClipPathOptions = CLIPPATHS
 const ratioClipOptions = [
@@ -124,6 +128,14 @@ const clipPanelVisible = ref(false)
 
 const { addHistorySnapshot } = useHistorySnapshot()
 
+const { imgReplaceVisible } = storeToRefs(useScreenStore())
+
+provide('imgType',2)
+
+const getImgVis = () =>{
+  imgReplaceVisible.value = true
+}
+
 // 打开自由裁剪
 const clipImage = () => {
   mainStore.setClipingImageElementId(handleElementId.value)