修改优化文件

src/components/PSD/Index.vue

@@ -33,29 +33,47 @@
         </div>
         
         <div v-else>
-            <div class="text-small text-grey">已成功解析PSD文件，请核对下方图片是否正确：</div>
+            <div class="text-small text-grey" ref="tiggerRef">已成功解析PSD文件，请核对下方图片是否正确：</div>
             <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" 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" style="user-select: text !important;">字体名称：{{ x }}</div>
+            <div class="row items-center q-mt-md" v-for="(x,i) in fonts" :key="x.fontFamily">
+                <div class="text-small col" style="user-select: text !important;">字体名称：{{ x.fontFamily }}</div>
+                <el-popover :width="150" trigger="click">
+                    <template #reference>
+                        <el-button v-if="uploadFinishFont?.indexOf(x.fontFamily)==-1 && uploadingIndex!=i" class="q-mr-md" link>{{ !x.uploadType?'选择方式':(x.uploadType==1?'上传本地文件':'选择已有字体') }}</el-button>
+                    </template>
+                    <el-menu mode="vertical">
+                        <el-menu-item index="1" @click="x.uploadType=1,x.selectedFont='',tiggerRef.click()">上传本地文件</el-menu-item>
+                        <el-menu-item index="2" @click="x.uploadType=2,x.selectedFont='',tiggerRef.click()">选择已有字体</el-menu-item>
+                    </el-menu>
+                </el-popover>
+                <el-select v-model="x.selectedFont" placeholder="请选择字体" size="mini" style="width: 150px;" filterable v-if="x.uploadType==2">
+                    <el-option
+                        v-for="item in formatFonts"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                        :style="{'font-family':item.reduce!=''?item.reduce:item.label}"
+                    />
+                </el-select>
                 <el-upload
                     v-loading="uploadingIndex==i"
-                    :on-change="(uploadFile:any, uploadFiles:any)=> uploadFontHandler(uploadFile, uploadFiles,x)"
+                    :on-change="(uploadFile:any, uploadFiles:any)=> uploadFontHandler(uploadFile, uploadFiles,x.fontFamily)"
                     action=""
                     :limit="1"
-                    v-if='uploadFinishFont?.indexOf(x)==-1'
+                    v-if='uploadFinishFont?.indexOf(x.fontFamily)==-1 && x.uploadType==1'
                     :auto-upload="false"
-                    accept=".ttf, .woff, .woff2"
+                    accept=".ttf, .woff, otf"
                     :show-file-list="false"
                 >
                     <template #trigger>
-                        <el-button link>选择字体</el-button>
+                        <el-button style="color:#0b40fe" link>选择字体</el-button>
                     </template>
                 </el-upload>
-                <el-tag v-else type="success" effect="light"> 已上传 </el-tag>
-                <el-button  v-if='uploadFinishFont?.indexOf(x)==-1' type="danger" class="q-ml-md" @click="removeFontHandler(x)" :icon="Delete" link></el-button>
+                <el-tag v-if="uploadFinishFont?.indexOf(x.fontFamily)!=-1" type="success" effect="light"> 已上传 </el-tag>
+                <el-button  v-if='uploadFinishFont?.indexOf(x.fontFamily)==-1' type="danger" class="q-ml-md" @click="removeFontHandler(x.fontFamily)" :icon="Delete" link></el-button>
             </div>
             <div class="q-mt-lg row items-center">
                 <div class="col">
@@ -86,6 +104,7 @@ import { injectKeyDataSource,injectKeyTemplate } from '@/types/injectKey'
 import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
 import { reduceFont } from '@/utils/fonts/convertFont'
 import FileService from '@/services/FileService'
+import { storeToRefs } from 'pinia'
 
 const props = defineProps({
     visible:{
@@ -105,12 +124,13 @@ const isResolving = ref(false)
 const sliderLoading = ref(false)
 const thumbnails = ref<Array<any>>([])
 const sliders = ref<Array<any>>([])
-const fonts = ref<any[]>()
+const fonts = ref<{fontFamily:string,uploadType:number,selectedFont?:string}[]>()
 const uploadingIndex = ref(-1)
 const uploadFinishFont = ref<string[]>([])
-
+const { formatFonts } = storeToRefs(useFontStore())
 const queryObj = ref({} as any)
 const searchData = ref({} as any)
+const tiggerRef = ref()
 queryObj.value = inject(injectKeyDataSource).queryObj
 searchData.value = inject(injectKeyTemplate)
 
@@ -141,7 +161,7 @@ const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
                 }
                 fonts.value = getFonts(psd)
                 if(fonts.value){
-                    fonts.value = fonts.value.filter(x=>useFontStore().getFonts.findIndex(y=>y.fontFamily==x)==-1)
+                    fonts.value = fonts.value.filter(x=>useFontStore().getFonts.findIndex(y=>y.fontFamily==x.fontFamily)==-1)
                 }
                 //currentPSD.value = psd
                 isResolving.value=false
@@ -153,20 +173,43 @@ const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
         isResolving.value=false
     }
 }
+
 const uploadFontHandler = async (uploadFile:any, uploadFiles:any, fontName:string) => {
-    uploadingIndex.value = fonts.value?.indexOf(fontName)??-1
+    const ns = uploadFile.name.toLowerCase().split('.')
+    const n = ns[ns.length-1]
+    const acceptFile = ['ttf','otf','woff']
+    if(acceptFile.indexOf(n)==-1){
+        ElMessage.error({
+            message:`不支持此类文件上传，目前只支持${acceptFile.join(',')}等文件上传`
+        })
+        return;
+    }
+    uploadingIndex.value = fonts.value?.findIndex(x=>x.fontFamily==fontName)??-1
     try {
-        const url = await AliyunUpload.UploadAsync(uploadFile?.raw,"tripfont/"+uploadFile.name)
+        let info:any = null
+        try {
+            info = await reduceFont(uploadFile?.raw)
+        } catch (error) {
+            ElMessage.error({message:'字体无法识别，请更换'})
+            uploadingIndex.value=-1
+            return
+        }
+
+        const flagIndex = formatFonts.value.findIndex(x=>x.label==info.name)
+        if(flagIndex>0){
+            ElMessage.error({message:`${info.name} 字体已存在，请选择使用已有字体`})
+            uploadingIndex.value=-1
+            return
+        }
+        const url = await FileService.uploadToFontServerAsync(uploadFile?.raw)
         if(url && url!=''){
             let label=uploadFile.name.split('.')[0],reduceName='',reduceUrl=''
             try {
-                let info = await reduceFont(uploadFile?.raw)
                 if(info.file){
                     label = info.name
                     reduceName = `${fontName}_reduce`
                     reduceUrl = await AliyunUpload.UploadAsync(info.file,"tripfont/"+info.file.name)
                 }
-                await FileService.notifyFontUpdateAsync(uploadFile.name)
             } catch (error) { 
                 console.log('发生异常',error)
             }
@@ -201,7 +244,7 @@ const removeFontHandler = (fontName:any)=>{
       type: 'warning'
     }).then(() => {
         if(fonts.value){
-            fonts.value?.splice(fonts.value.indexOf(fontName),1)
+            fonts.value?.splice(fonts.value.findIndex(x=>x.fontFamily==fontName),1)
         }
     })
     .catch((error) => { console.log("catch",error)})
@@ -213,12 +256,14 @@ const handleExceed: UploadProps['onExceed'] = (files) => {
     upload.value!.handleStart(file)
 }
 const resolveToSliderHandler = async()=>{
-    if(uploadFinishFont.value?.length < (fonts.value?.length??0)){
+    const replaceFontCount = fonts.value?.filter(x=>x.selectedFont&&x.selectedFont!='')?.length??0
+    if((uploadFinishFont.value?.length+replaceFontCount) < (fonts.value?.length??0)){
         ElMessage({
             message:'请完善字体信息',
             type:'error'
         })
     }else{
+        replaceFontFamily()
         await useFontStore().loadAllFonts()
         const slidesStore = useSlidesStore()
         const screenSotre = useScreenStore()
@@ -231,6 +276,21 @@ const resolveToSliderHandler = async()=>{
         close()
     }
 }
+const replaceFontFamily = () => {
+    fonts.value?.forEach(item=>{
+        sliders.value.forEach(x => {
+            x.elements.forEach((y:any)=>{
+                if(y.defaultFontName && y.defaultFontName.indexOf(item.fontFamily)!=-1){
+                    let dn = y.defaultFontName.split(',')
+                    let dni = dn.findIndex((z:string)=>z==item.fontFamily)
+                    dn[dni] = item.selectedFont
+                    y.defaultFontName=dn.join(',')
+                }
+            })
+        });
+    })
+    
+}
 const resetPsdHandler = ()=>{
     thumbnails.value=[]
 }

src/services/FileService.ts

@@ -106,6 +106,25 @@ class FileService {
   static notifyFontUpdateAsync = async (fileName:string)=>{
     await fetch('http://fileservice.oytour.com/api/file/downfont/'+fileName)
   }
+
+  static uploadToFontServerAsync = async (file:File)=>{
+      try {
+        const formData = new FormData();
+        formData.append('file', file);
+    
+        const response = await fetch('http://localhost:5164/api/file/uploadfont', {
+          method: 'POST',
+          body: formData,
+        });
+        if(response.ok){
+          let r = await response.text()
+          return r
+        }
+        return ''
+      } catch (error) {
+        return ''
+      }
+  }
 }
 
 export default FileService
\ No newline at end of file

src/utils/psdParser/index.ts

@@ -8,7 +8,17 @@ export const getDrawingBoardSize= (psd:any) => {
     return ResolvePsdDrawingBoardSize(psd)
 }
 export const getFonts = (psd:any) => {
-    return ResolveSliderFonts(psd)
+    let fonts = ResolveSliderFonts(psd)
+    let result:any[] = []
+    if(fonts && fonts.length>0){
+        fonts.forEach(x=>{
+            result.push({
+                fontFamily:x,
+                uploadType:0
+            })
+        })
+    }
+    return result
 }
 export const toThumbnails = async (psd:any)=>{
     const thumbs = await ResolveThumbHandler(psd);