update: res data

src/api/github.ts

@@ -7,6 +7,8 @@
  */
 import fetch from '@/utils/axios'
 const reader = new FileReader()
+const knock = 'qpV8PUxwY7as4jc'
+const cut = 'AqYfNFb6G2f2OVl4IVFOY'
 
 function getBase64(file: File) {
   return new Promise((resolve) => {
@@ -31,7 +33,7 @@ const putPic = async (file: any) => {
     path,
   }
   await fetch(imageUrl, body, 'put', {
-    Authorization: 'token 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',
+    Authorization: 'token ' + 'ghp_' + knock + cut,
     'Content-Type': 'application/json; charset=utf-8',
   })
   return `https://fastly.jsdelivr.net/gh/shawnphang/files@main/${path}`

src/api/home.ts

@@ -3,7 +3,7 @@
  * @Date: 2021-08-19 18:43:22
  * @Description:
  * @LastEditors: ShawnPhang <site: book.palxp.com>
- * @LastEditTime: 2023-07-13 18:19:14
+ * @LastEditTime: 2023-07-24 13:01:10
  */
 import fetch from '@/utils/axios'
 import _config from '@/config'

src/common/methods/fonts/index.ts

@@ -3,7 +3,7 @@
  * @Date: 2022-01-08 09:43:37
  * @Description: 字体处理
  * @LastEditors: ShawnPhang <site: book.palxp.com>
- * @LastEditTime: 2023-07-21 13:07:08
+ * @LastEditTime: 2023-07-25 11:13:01
  */
 // import { isSupportFontFamily, blob2Base64 } from './utils'
 import { getFonts } from '@/api/material'
@@ -16,6 +16,7 @@ export const useFontStore = {
   // download,
   async init() {
     this.list = []
+    localStorage.getItem('FONTS_VERSION') !== '1' && localStorage.removeItem('FONTS')
     const localFonts: any = localStorage.getItem('FONTS') ? JSON.parse(localStorage.getItem('FONTS') || '') : []
     if (localFonts.length > 0) {
       this.list.push(...localFonts)
@@ -30,6 +31,7 @@ export const useFontStore = {
         }),
       )
       localStorage.setItem('FONTS', JSON.stringify(this.list))
+      localStorage.setItem('FONTS_VERSION', '1')
     }
     // store.dispatch('setFonts', this.list)
   },

src/components/business/image-cutout/ImageCutout.vue

@@ -3,7 +3,7 @@
  * @Date: 2023-07-11 23:50:22
  * @Description: 抠图组件
  * @LastEditors: ShawnPhang <site: book.palxp.com>
- * @LastEditTime: 2023-07-14 09:10:31
+ * @LastEditTime: 2023-07-24 13:01:03
 -->
 <template>
   <el-dialog v-model="show" title="AI抠图（测试版）" width="650" @close="handleClose">
@@ -36,8 +36,6 @@
 import { defineComponent, reactive, toRefs, onMounted, nextTick } from 'vue'
 import { useStore } from 'vuex'
 import { UploadFilled } from '@element-plus/icons-vue'
-// import { client } from '@gradio/client'
-// import * as api from '@/api/ai'
 import uploader from '@/components/common/Uploader/index.vue'
 import _dl from '@/common/methods/download'
 
@@ -73,11 +71,7 @@ export default defineComponent({
       state.rawImage = URL.createObjectURL(file)
       fileName = file.name
       // 返回抠图
-      const result = await app.predict('/predict', [
+      const result = await app.predict('/predict', [file, 'u2netp', ''])
-        file, // blob in 'Input' Image component
-        'u2netp', // string (Option from: ['isnet-anime', 'isnet-general-use', 'sam', 'silueta', 'u2net', 'u2net_cloth_seg', 'u2net_custom', 'u2net_human_seg', 'u2netp']) in 'Models' Dropdown component
-        '',
-      ])
       state.rawImage && (state.cutImage = result?.data[0])
       requestAnimationFrame(run)
     }

src/config.ts

@@ -1,20 +0,0 @@
-// const prefix = import.meta.env
-const prefix = process.env
-
-const isDev = prefix.NODE_ENV === 'development'
-
-export default {
-  isDev,
-  BASE_URL: isDev ? '/' : './',
-  VERSION: '1.1.0',
-  APP_NAME: '迅排设计',
-  COPYRIGHT: 'ShawnPhang - Palxp.com',
-  // API_URL: isDev ? 'http://localhost:9998' : '${API}',
-  API_URL: 'https://app.palxp.com:8887',
-  SCREEN_URL: isDev ? 'http://localhost:7001' : '${SCREEN_URL}',
-  IMG_URL: 'https://store.palxp.com/',
-  // ICONFONT_URL: '//at.alicdn.com/t/font_3223711_74mlzj4jdue.css',
-  ICONFONT_URL: '//at.alicdn.com/t/font_2717063_ypy8vprc3b.css',
-  ICONFONT_EXTRA: '//at.alicdn.com/t/c/font_3228074_6qsac4kteu7.css',
-  QINIUYUN_PLUGIN: 'https://cdn.jsdelivr.net/npm/qiniu-js@2.5.5/dist/qiniu.min.js',
-}

src/views/Draw.vue

@@ -48,8 +48,6 @@ export default defineComponent({
         const { data } = await api.home[id ? 'getWorks' : 'getTempDetail']({ id: id || tempid })
         const content = JSON.parse(data)
 
-        content.page.backgroundImage && content.page.backgroundImage.split('.')[1] === 'palxp' && (content.page.backgroundImage += '@small')
-        this.compressImages(content.widgets)
         this.$store.commit('setDPage', content.page)
         id ? this.$store.commit('setDWidgets', content.widgets) : this.setTemplate(content.widgets)
         await this.$nextTick()
@@ -76,7 +74,7 @@ export default defineComponent({
             if (item.imgUrl && !item.isNinePatch) {
               const cNodes: any = (window as any).document.getElementById(item.uuid).childNodes
               for (const el of cNodes) {
-                if (el.className === 'img__box') {
+                if (el.className && el.className.includes('img__box')) {
                   imgsData.push(el.firstChild)
                 }
               }
@@ -86,11 +84,15 @@ export default defineComponent({
             }
           } catch (e) {}
         })
-
+        // TODO: 背景图无法检测是否加载完毕，考虑应该将设置背景作为独立事件
+        if (content.page.backgroundImage) {
+          const preloadBg = new Preload([content.page.backgroundImage])
+          await preloadBg.imgs()
+        }
         try {
           const { list } = await api.material.getFonts({ ids: fontData.map((x: any) => x.id) })
           fontData.forEach((item: any) => {
-            item.url = list.find((x: any) => x.oid == item.id).ttf
+            item.url = list.find((x: any) => x.oid == item.id)?.ttf
           })
           await this.font2style(fontContent, fontData)
           // console.log('1. base64 yes')
@@ -125,7 +127,7 @@ export default defineComponent({
     async font2style(fontContent: any, fontData: any = []) {
       return new Promise((resolve: Function) => {
         Promise.all(
-          // 拿到字体子集，只有ttf这种原始字体支持提取，如没有则只能加载整个字体文件
+          // 拿到字体子集，只有ttf/otf这种原始字体支持提取，如没有则不能实现此步，只能加载整个字体文件
           Object.keys(fontContent).map(async (key) => {
             const font = fontData.find((font: any) => font.value === key) as any
             if (font.id) {
@@ -149,14 +151,6 @@ export default defineComponent({
         })
       })
     },
-    compressImages(widgets: any) {
-      // 自用
-      for (const item of widgets) {
-        if (item.imgUrl && item.imgUrl.split('.')[item.imgUrl.split('.').length - 1] === 'png') {
-          item.imgUrl.split('.')[1] === 'palxp' && (item.imgUrl += '@small')
-        }
-      }
-    },
   },
 })
 </script>

src/views/Psd.vue

@@ -10,9 +10,9 @@
     <div class="top-nav">
       <div class="top-nav-wrap">
         <div class="top-left">
-          <div class="name" style="font-size: 15px">迅排在线PSD解析</div>
+          <div class="name" style="font-size: 15px">在线PSD解析</div>
         </div>
-        <div style="flex: 1"><el-button plain type="primary" @click="jump2word">查看模板规范文档</el-button></div>
+        <div style="flex: 1"><el-button plain type="primary" @click="jump2word">说明及PSD规范文档</el-button></div>
         <el-button v-show="isDone" @click="clear">清空模板内容</el-button>
         <div class="v-tips">
           <HeaderOptions :isDone="isDone" @change="optionsChange" />
@@ -81,7 +81,7 @@ export default defineComponent({
 
     function loadJS() {
       const link_element = document.createElement('script')
-      link_element.setAttribute('src', '/psd.js') // 'https://design.palxp.com/psd.js.gz'
+      link_element.setAttribute('src', '/psd.js')
       document.head.appendChild(link_element)
     }
     async function selectFile(file: any) {
@@ -166,7 +166,8 @@ export default defineComponent({
       }, 100)
     },
     jump2word() {
-      window.open('https://kdocs.cn/l/clmBsIkhve8d')
+      window.open('https://xp.palxp.com/#/articles/1687855172725')
+      // window.open('https://kdocs.cn/l/clmBsIkhve8d')
     },
   },
 })