完成模板导入功能，完善字体加载，完成上传图片压缩优化

components.d.ts

@@ -28,7 +28,6 @@ declare module 'vue' {
     ElInput: typeof import('element-plus/es')['ElInput']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
-    ElPopover: typeof import('element-plus/es')['ElPopover']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElTable: typeof import('element-plus/es')['ElTable']

src/components/PSD/Index.vue

@@ -3,7 +3,7 @@
         <template #header>
             <div class="text-title">导入PSD设计文件</div>
         </template>
-        <div v-if="!thumbnails || thumbnails.length==0">
+        <div v-if="!thumbnails || thumbnails.length==0 || isResolving">
             <el-upload
                 v-loading="isResolving"
                 ref="upload"
@@ -37,7 +37,7 @@
             <div class="row" style="flex-wrap:wrap">
                 <img v-for="(x,i) in thumbnails" :key="i" style="height:auto;width:calc(25% - 10px);" class="q-mr-md rounded q-mt-md" :src="x" />
             </div>
-            <div class="text-small text-grey q-mt-lg">请完善以下字体信息补充：</div>
+            <div class="text-small text-grey q-mt-lg" v-if="fonts && fonts.length>0">请完善以下字体信息补充：</div>
             <div class="row items-center q-mt-md" v-for="(x,i) in fonts" :key="x">
                 <div class="text-small col">字体名称：{{ x }}</div>
                 <el-upload
@@ -113,7 +113,7 @@ const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
         try {
             PSD.fromURL(url).then(async (psd:any) => {
                 thumbnails.value= await toThumbnails(psd)
-                sliders.value = toSlider(psd)
+                sliders.value = await toSlider(psd)
                 fonts.value = getFonts(psd)
                 if(fonts.value){
                     fonts.value = fonts.value.filter(x=>useFontStore().getFonts.findIndex(y=>y.fontFamily==x)==-1)
@@ -134,7 +134,7 @@ const uploadFontHandler = async (uploadFile:any, uploadFiles:any, fontName:strin
         const url = await AliyunUpload.UploadAsync(uploadFile?.raw,"tripfont/"+uploadFile.name)
         if(url && url!=''){
             //添加字体
-            uploadFinishFont.value.push(fontName)
+            //uploadFinishFont.value.push(fontName)
             let data:CustomerFonts = {
                 fontFamily:fontName,
                 label:uploadFile.name.split('.')[0],
@@ -182,6 +182,7 @@ const resolveToSliderHandler = async()=>{
             type:'error'
         })
     }else{
+        await useFontStore().loadAllFonts()
         useSlidesStore().setSlides(sliders.value)
         useSlidesStore().updateSlideIndex(0)
         close()

src/store/font.ts

@@ -52,7 +52,9 @@ export const useFontStore = defineStore('fonts',{
                 text:'正在加载字体文件'
             })
             let fonts = Array.from(new Set(items))
-            console.log(fonts)
+            for (let i = 0; i < fonts.length; i++) {
+                fonts[i] = fonts[i].split(',')[0]
+            }
             fonts = fonts.filter(x=>this.loaded.indexOf(x)==-1)
             const loadFonts = this.fonts.filter(x=>fonts.indexOf(x.fontFamily)!=-1)
             if(loadFonts && loadFonts.length>0){
@@ -79,6 +81,10 @@ export const useFontStore = defineStore('fonts',{
                 const response = await FontService.SetFontAsync(data)
                 if(response.data.resultCode == ApiResult.SUCCESS){
                     this.fonts.push(item)
+                    this.formatFonts.push({
+                        label:item.label,
+                        value:item.fontFamily
+                    })
                     return true
                 }
             } catch (error) {

src/utils/prosemirror/index.ts

@@ -13,7 +13,7 @@ export const createDocument = (content: string) => {
   const htmlString = `<div>${content}</div>`
   const parser = new window.DOMParser()
   const element = parser.parseFromString(htmlString, 'text/html').body.firstElementChild
-  console.log(element)
+
   return DOMParser.fromSchema(schema).parse(element as Element)
 }
 

src/utils/psdParser/font.ts

 export const ResolveFonts = (item: any): any[] => {
-
+    const ignore = ['AdobeInvisFont','AdobeHeitiStd-Regular']
     let f = item.layer.typeTool().export()
     const { font } = f
     const { names } = font
-    
-    return names
+    let fonts = names.filter((x:any)=>ignore.indexOf(x)==-1)
+    return fonts
 }
\ No newline at end of file

src/utils/psdParser/index.ts

 import { ResolvePsdToSliderHandler, ResolveThumbHandler,ResolveSliderFonts } from "./resolve"
 
-export const toSlider = (psd:any)=>{
-    const sliders = ResolvePsdToSliderHandler(psd);
+export const toSlider = async (psd:any)=>{
+    const sliders = await ResolvePsdToSliderHandler(psd);
     return sliders
 }
 export const getFonts = (psd:any) => {

src/utils/psdParser/layer.ts

 import { PPTImageElement } from '@/types/slides';
 import { compressionThumbnail } from './compressor';
 
-export const ResolveLayer = (item: any, index: number,offsetLeft:number,offsetTop:number): PPTImageElement|null => {
+export const ResolveLayer = async (item: any, index: number,offsetLeft:number,offsetTop:number): Promise<PPTImageElement | null> => {
 
     //await compressionThumbnail(item.layer.image.toBase64(), "image/png", 0, 0.8)
     try {
-        const src = item.layer.image.toBase64()
+        const src = await compressionThumbnail(item.layer.image.toBase64(), "image/png", 0, 0.8)//item.layer.image.toBase64()
         const left = item.coords.left-offsetLeft
         const width = item.coords.right - item.coords.left
         const top = item.coords.top-offsetTop

src/utils/psdParser/resolve.ts

@@ -26,7 +26,7 @@ export const ResolveThumbHandler = async (psd:any)=>{
     return imgs
 }
 
-export const ResolvePsdToSliderHandler = (psd:any) => {
+export const ResolvePsdToSliderHandler = async (psd:any) => {
 
     const ID_PREV = "import-slide-"
     let items:Array<any> = psd.tree().children().filter((x:any)=>x.layer.visible)
@@ -42,7 +42,7 @@ export const ResolvePsdToSliderHandler = (psd:any) => {
 
             if(_children && _children.length>0){
                 const {top,left} = x.layer.artboard().export().coords
-                t.elements = GetSlidersHandler(_children,left,top).reverse()
+                t.elements = (await GetSlidersHandler(_children,left,top)).reverse()
             }
 
             sliders.push(t)
@@ -77,26 +77,27 @@ const CreateDefaultSlider = (id:string):Slide =>{
     }
 }
 
-const GetSlidersHandler = (child:any[],offsetLeft:number,offsetTop:number) : PPTElement[] =>{
+const GetSlidersHandler = async (child:any[],offsetLeft:number,offsetTop:number) : Promise<PPTElement[]> =>{
 
     let elements = [] as Array<PPTElement>
 
-    child.forEach(x=>{
+    for (let i = 0; i < child.length; i++) {
+        const x= child[i]
         Z_INDEX--
-        
+
         if(x.layer.typeTool){
             elements.push(ResolveText(x, Z_INDEX, offsetLeft, offsetTop))
         }
         else if(x.width && x.width>0 && x.layer.image){
             
-            let ele = ResolveLayer(x, Z_INDEX, offsetLeft, offsetTop)
+            let ele = await ResolveLayer(x, Z_INDEX, offsetLeft, offsetTop)
             if(ele) elements.push(ele)
         }
         if(x._children && x._children.length>0){
-            let childers = GetSlidersHandler(x._children,offsetLeft,offsetTop) ?? []
+            let childers = await GetSlidersHandler(x._children,offsetLeft,offsetTop) ?? []
             elements = elements.concat(childers)
         }
-    })
+    }
     
     return elements
 }

src/utils/upload/aliyun.ts

@@ -16,7 +16,7 @@ class AliyunUpload {
         })
     }
 
-    static UploadAsync = async (file:FormData,name:string)=>{
+    static UploadAsync = async (file:any,name:string)=>{
         try {
             const oss = this.GetOSS()
             let result = await oss.put(name,file)

src/views/Editor/EditorHeader/index.vue

@@ -65,13 +65,13 @@
       </div>
       <!-- <el-button type="danger" v-tooltip="'保存'" 
       size="small" icon="Check" circle :loading="datas.loading"
-      @click="setTemplate()" style="color: #ffff;"></el-button> -->
+      @click="setTemplate()" style="color: #ffff;"></el-button> setTemplate()-->
       <el-button type="danger" 
       v-if="(userInfo.IsEditTripTemplate==1&&model)||ConfigId>0"
       size="small" :loading="datas.loading"
-      @click="setTemplate()" style="color: #ffff;margin-left: 10px;">
+      @click="setTemplate" style="color: #ffff;margin-left: 10px;">
         <template v-if="userInfo.IsEditTripTemplate==1&&model">
-         保存模版
+         保存模板
         </template>
         <template v-if="ConfigId>0">
           保存行程
@@ -128,6 +128,9 @@ import Drawer from '@/components/Drawer.vue'
 import Input from '@/components/Input.vue'
 import Popover from '@/components/Popover.vue'
 import PopoverMenuItem from '@/components/PopoverMenuItem.vue'
+import { PPTImageElement } from '@/types/slides'
+import AliyunUpload from '@/utils/upload/aliyun'
+import { ElLoading, ElMessage } from 'element-plus'
 
 
 const mainStore = useMainStore()
@@ -222,27 +225,27 @@ const UploadPsdHandler = () => {
 const SetTripTemplateSlide = async () => {
   // console.log(JSON.parse(queryObj.value.TempData),'--------')
   try {
-    console.log(queryObj.value,'新增修改模版---')
-      let TemplateRes = await ConfigService.SetTripTemplateSlide(queryObj.value);
-      if (TemplateRes.data.resultCode == 1) {
-        if(!queryObj.value.TempId){
-          queryObj.value.TempId = TemplateRes.data.data.TempId
-          searchData.value.TempId = TemplateRes.data.data.TempId
-        }
-        ElMessage({
-          showClose: true,
-          message: '操作成功',
-          type: 'success',
-        })
-        dataLoadingStore.setDataLoading(true)
-      }else{
-        ElMessage({
-          showClose: true,
-          message: '操作失败',
-          type: 'warning',
-        })
+    
+    let TemplateRes = await ConfigService.SetTripTemplateSlide(queryObj.value);
+    if (TemplateRes.data.resultCode == 1) {
+      if(!queryObj.value.TempId){
+        queryObj.value.TempId = TemplateRes.data.data.TempId
+        searchData.value.TempId = TemplateRes.data.data.TempId
       }
-      datas.loading = false
+      ElMessage({
+        showClose: true,
+        message: '操作成功',
+        type: 'success',
+      })
+      dataLoadingStore.setDataLoading(true)
+    }else{
+      ElMessage({
+        showClose: true,
+        message: '操作失败',
+        type: 'warning',
+      })
+    }
+    datas.loading = false
   } catch (error) {
       datas.loading = false
       ElMessage({
@@ -252,6 +255,56 @@ const SetTripTemplateSlide = async () => {
       })
   }
 }
+
+const uploadImageHandler = async ()=>{
+  let count = 0
+  let index = 0
+  const instance = ElLoading.service({
+    text:'收集需要处理的图片'
+  })
+  for (let i = 0; i < slides.value.length; i++) {
+    const slide = slides.value[i];
+    if(slide.elements){
+      count += (slide.elements.filter(x => "src" in x && x.src.startsWith("data:image")) ?? []).length
+    }
+  }
+
+  if(count>0){
+    for (let i = 0; i < slides.value.length; i++) {
+      const slide = slides.value[i];
+      if(slide.elements){
+        let temp = slide.elements.filter(x => "src" in x && x.src.startsWith("data:image")) ?? []
+        for(let j = 0; j < temp.length; j++){
+          index++
+          instance.text.value = `当前图片处理进度：${index} / ${count}`
+          const item = temp[j] as PPTImageElement
+
+          let name = new Date().getTime()+".png"
+          const file = dataURLtoFile(item.src, name)
+          let url = await AliyunUpload.UploadAsync(file,`pptist/desgin/${name}`)
+          item.src = url
+          const props = { src: url }
+          slidesStore.updateElement({ id: item.id, props, slideId:slide.id })
+        }
+      }
+    }
+  }
+   
+  instance.close()
+}
+
+const dataURLtoFile = (dataurl:string, filename:string) => {
+  let arr = dataurl.split(",")
+  let mime = arr[0].match(/:(.*?);/)[1],
+  bstr = atob(arr[1]),
+  n = bstr.length,
+  u8arr = new Uint8Array(n);
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+  return new File([u8arr], filename, { type: mime });
+}
+
 // 用户新增修改数据
 const SetTripTemplateConfig = async () => {
     try {
@@ -296,6 +349,7 @@ const SetTripTemplateConfig = async () => {
 }
 // 保存
 const setTemplate = async () =>{
+  await uploadImageHandler()
   let arr = JSON.parse(JSON.stringify(slides.value))
   if(dataLoading.value){
     dataLoadingStore.setDataLoading(false)
@@ -346,6 +400,7 @@ const setTemplate = async () =>{
       }
   }
   // console.log(arr,'-------tttt')
+  
   queryObj.value.TempData = JSON.stringify(arr)
   datas.loading = true
   if(model.value&&userInfo.value.IsEditTripTemplate==1){