Merge pull request #88 from palxiao/feature-vue3

vue3 & TS modified

src/api/github.ts

@@ -11,19 +11,20 @@ const cutToken = 'ghp_qpV8PUxwY7as4jc'
 const reader = new FileReader()
 function getBase64(file: File) {
   return new Promise((resolve) => {
-    reader.onload = function (event: any) {
+    reader.onload = function (event) {
-      const fileContent = event.target.result
+      const fileContent = event.target && event.target.result
-      resolve(fileContent.split(',')[1])
+      resolve((fileContent as string).split(',')[1])
     }
     reader.readAsDataURL(file)
   })
 }
 
-const putPic = async (file: any) => {
+const putPic = async (file: File | string) => {
   const repo = 'shawnphang/files'
   const d = new Date()
   const content = typeof file === 'string' ? file : await getBase64(file)
-  const path = `${d.getFullYear()}/${d.getMonth()}/${d.getTime()}${file.name?.split('.').pop() || '.png'}`
+  const extra = typeof file === 'string' ? '.png' : file.name?.split('.').pop()
+  const path = `${d.getFullYear()}/${d.getMonth()}/${d.getTime()}${extra}`
   const imageUrl = 'https://api.github.com/repos/' + repo + '/contents/' + path
   const body = { branch: 'main', message: 'upload', content, path }
   const res = await fetch(imageUrl, body, 'put', {

src/api/home.ts

@@ -41,12 +41,34 @@ type IGetTempListResult = TPageRequestResult<IGetTempListData[]>
 // 获取模板列表
 export const getTempList = (params: IGetTempListParam) => fetch<IGetTempListResult>('design/list', params, 'get')
 
-type TGetTempDetail = {
+export type TGetTempDetail = {
   id: number
   type?: number
 }
 
-export const getTempDetail = (params: TGetTempDetail) => fetch<{data: string}>('design/temp', params, 'get')
+export type TTempDetail = {
+  /** 分类 */
+  category: number
+  /** 封面 */
+  cover: string
+  /** 创建时间 */
+  created_time: string
+  /** Template内容 */
+  data: string
+  /** 高度 */
+  height: number
+  id: number
+  /** 来源 */
+  original: string
+  resource: string
+  state: string
+  tag: string | null
+  title: string
+  updated_time: string
+  width: number
+}
+
+export const getTempDetail = (params: TGetTempDetail) => fetch<TTempDetail>('design/temp', params, 'get')
 
 type TGetCategoriesParams = {
   type?: number
@@ -66,19 +88,61 @@ export const getCategories = (params: TGetCategoriesParams) => fetch<TgetCategor
 export const saveTemp = (params: Type.Object = {}) => fetch('design/edit', params, 'post')
 // export const delTemp = (params: Type.Object = {}) => fetch('/api/template/temp_del', params)
 
+type TGetCompListParam = {
+  search?: string
+  page?: number
+  type?: number
+  pageSize: number
+  cate?: number | string
+}
+
+/** 获取组件返回类型 */
+export type TGetCompListResult = {
+  cover: string
+  height: number
+  id: number
+  state: number
+  title: string
+  width: number
+  name?: string
+}
+
+type getCompListReturn = TPageRequestResult<TGetCompListResult[]>
+
 // 组件相关接口
-export const getCompList = (params: Type.Object = {}) => fetch('design/list', params, 'get')
+export const getCompList = (params: TGetCompListParam) => fetch<getCompListReturn>('design/list', params, 'get')
-export const removeComp = (params: Type.Object = {}) => fetch('design/del', params, 'post')
+
+type TRemoveComp = {
+  id: string | number
+}
+
+export const removeComp = (params: TRemoveComp) => fetch<void>('design/del', params, 'post')
 // export const getCompDetail = (params: Type.Object = {}) => fetch('/api/template/temp_info', params, 'get')
 
+type TSaveWorksParams = {
+  title: string
+  temp_id?: string
+  width: number
+  height: number
+  data: string
+  cover?: string
+  id?: string | number
+}
+
+export type TSaveWorksResult = {
+  id: number | string,
+  stat?: number,
+  msg: string
+}
+
 // 保存作品
-export const saveWorks = (params: Type.Object = {}) => fetch('design/save', params, 'post')
+export const saveWorks = (params: TSaveWorksParams) => fetch<TSaveWorksResult>('design/save', params, 'post')
 
 // 保存个人模板
 export const saveMyTemp = (params: Type.Object = {}) => fetch('design/user/temp', params, 'post')
 
 // 获取作品
-export const getWorks = (params: Type.Object = {}) => fetch('design/poster', params, 'get')
+export const getWorks = (params: TGetTempDetail) => fetch<TTempDetail>('design/poster', params, 'get')
 
 type TGetMyDesignParams = {
   page: number

src/api/material.ts

@@ -38,8 +38,6 @@ export type TGetListData = {
 
 export type TGetListResult = TPageRequestResult<TGetListData[]>
 
-
-
 // 获取素材列表：
 export const getList = (params: TGetListParam) => fetch<TGetListResult>('design/material', params)
 
@@ -60,7 +58,18 @@ export type TGetFontItemData = {
 
 // 获取字体
 export const getFonts = (params: TGetFontParam = {}) => fetch<TPageRequestResult<TGetFontItemData[]>>('design/fonts', params)
-export const getFontSub = (params: Type.Object = {}, extra: any = {}) => fetch('design/font_sub', params, 'get', {}, extra)
+
+type TGetFontSubParam = {
+  font_id: string | number
+  id: string | number
+  content: string
+}
+
+type TGetFontSubExtra = {
+  responseType?: string
+}
+
+export const getFontSub = (params: TGetFontSubParam, extra: TGetFontSubExtra = {}) => fetch<Blob | string>('design/font_sub', params, 'get', {}, extra)
 
 type TGetImageListParams = {
   page?: number
@@ -74,16 +83,49 @@ export type TGetImageListResult = {
   url: string
   user_id: number
   id: string
-  thumb: string
+  thumb?: string
-} & IGetTempListData
+} & Partial<IGetTempListData>
 
 // 图库列表
 export const getImagesList = (params: TGetImageListParams) => fetch<TPageRequestResult<TGetImageListResult[]>>('design/imgs', params, 'get')
 
+type TMyPhotoParams = {
+  
+  page: number
+  pageSize?: number
+}
+
+/** 获取我的资源管理返回 */
+export type TMyPhotoResult = {
+  created_time: string
+  height: number
+  id: number
+  url: string
+  user_id: number
+  width: number
+} & IGetTempListData
+
 // 我的上传列表
-export const getMyPhoto = (params: TGetImageListParams) => fetch<TPageRequestResult<TGetImageListResult[]>>('design/user/image', params)
+export const getMyPhoto = (params: TMyPhotoParams) => fetch<TPageRequestResult<TMyPhotoResult[]>>('design/user/image', params)
-export const deleteMyPhoto = (params: Type.Object = {}) => fetch('design/user/image/del', params, 'post')
+
-export const deleteMyWorks = (params: Type.Object = {}) => fetch('design/poster/del', params, 'post')
+type TDeleteMyPhotoParams = {
+  id: string | number
+  key: string
+}
+
+export const deleteMyPhoto = (params: TDeleteMyPhotoParams) => fetch<void>('design/user/image/del', params, 'post')
+
+type TDeleteMyWorksParams = {
+  id: string | number
+}
+
+export const deleteMyWorks = (params: TDeleteMyWorksParams) => fetch<void>('design/poster/del', params, 'post')
+
+type TAddMyPhotoParam = {
+  width: number
+  height: number
+  url: string
+}
 
 // 添加图片
-export const addMyPhoto = (params: Type.Object = {}) => fetch('design/user/add_image', params)
+export const addMyPhoto = (params: TAddMyPhotoParam) => fetch<void>('design/user/add_image', params)

src/components/modules/panel/wrap/CompListWrap.vue

@@ -15,183 +15,212 @@
       </el-input>
     </div>
     <el-divider content-position="left">推荐组件</el-divider> -->
-    <classHeader v-show="!currentCategory" :types="types" @select="selectTypes">
+    <classHeader v-show="!state.currentCategory" :types="state.types" @select="selectTypes">
       <template v-slot="{ index }">
         <div class="list-wrap">
-          <div v-for="(item, i) in showList[index]" :key="i + 'sl'" draggable="false" @mousedown="dragStart($event, item)" @mousemove="mousemove" @mouseup="mouseup" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)">
+          <div
+            v-for="(item, i) in state.showList[index]" :key="i + 'sl'"
+            draggable="false" 
+            @mousedown="dragStart($event, item)" @mousemove="mousemove"
+            @mouseup="mouseup" @click.stop="selectItem(item)"
+            @dragstart="dragStart($event, item)"
+          >
             <el-image class="list__img-thumb" :src="item.cover" fit="contain" lazy loading="lazy"></el-image>
           </div>
         </div>
       </template>
     </classHeader>
 
-    <ul v-if="currentCategory" v-infinite-scroll="load" class="infinite-list" :infinite-scroll-distance="150" style="overflow: auto">
+    <ul v-if="state.currentCategory" v-infinite-scroll="load" class="infinite-list" :infinite-scroll-distance="150" style="overflow: auto">
-      <classHeader :is-back="true" @back="back">{{ currentCategory.name }}</classHeader>
+      <classHeader :is-back="true" @back="back">{{ state.currentCategory.name }}</classHeader>
       <el-space fill wrap :fillRatio="30" direction="horizontal" class="list">
-        <div v-for="(item, i) in list" :key="i + 'i'" class="list__item" draggable="false" @mousedown="dragStart($event, item)" @mousemove="mousemove" @mouseup="mouseup" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)">
+        <div
+          v-for="(item, i) in state.list" :key="i + 'i'"
+          class="list__item" draggable="false"
+          @mousedown="dragStart($event, item)" @mousemove="mousemove"
+          @mouseup="mouseup" @click.stop="selectItem(item)"
+          @dragstart="dragStart($event, item)"
+        >
           <!-- <edit-model :isComp="true" @action="action($event, item, i)"> -->
           <el-image class="list__img" :src="item.cover" fit="contain" lazy loading="lazy" />
           <!-- </edit-model> -->
         </div>
       </el-space>
-      <div v-show="loading" class="loading"><i class="el-icon-loading"></i> 拼命加载中</div>
+      <div v-show="state.loading" class="loading"><i class="el-icon-loading"></i> 拼命加载中</div>
-      <div v-show="loadDone" class="loading">全部加载完毕</div>
+      <div v-show="state.loadDone" class="loading">全部加载完毕</div>
     </ul>
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, reactive, toRefs, onMounted, watch } from 'vue'
+import { reactive, onMounted } from 'vue'
 import api from '@/api'
 import { useStore } from 'vuex'
 import getComponentsData from '@/common/methods/DesignFeatures/setComponents'
 import DragHelper from '@/common/hooks/dragHelper'
 import setItem2Data from '@/common/methods/DesignFeatures/setImage'
+import { TGetCompListResult, TGetTempDetail, TTempDetail } from '@/api/home'
 
-export default defineComponent({
+type TState = {
-  components: {},
+  loading: boolean
-  setup(props) {
+  loadDone: boolean
-    // 拖拽效果相关
+  list: TGetCompListResult[]
-    const dragHelper = new DragHelper()
+  searchValue: string
-    let isDrag = false
+  currentCategory: TGetCompListResult | null
-    let startPoint = { x: 99999, y: 99999 }
+  types: []
-    let tempDetail: any = null
+  showList: TGetCompListResult[][]
-    // 缓存组件用以减少接口请求的次数
+}
-    const compsCache: any = {}
-    const state = reactive({
-      loading: false,
-      loadDone: false,
-      list: [],
-      searchValue: '',
-      currentCategory: null,
-      types: [],
-      showList: [],
-    })
-    const store = useStore()
-    const pageOptions = { type: 1, page: 0, pageSize: 20 }
 
-    onMounted(async () => {
+// 拖拽效果相关
-      if (state.types.length <= 0) {
+const dragHelper = new DragHelper()
-        const types = await api.material.getKinds({ type: 3 })
+let isDrag = false
-        state.types = types
+let startPoint = { x: 99999, y: 99999 }
-        for (const iterator of types) {
+let tempDetail: TTempDetail | null = null
-          const { list } = await api.home.getCompList({
+// 缓存组件用以减少接口请求的次数
-            cate: iterator.id,
+const compsCache: any = {}
-            type: 1,
+const state = reactive<TState>({
-            pageSize: 3,
+  loading: false,
-          })
+  loadDone: false,
-          state.showList.push(list)
+  list: [],
-        }
+  searchValue: '',
-      }
+  currentCategory: null,
-    })
+  types: [],
-    const mouseup = (e: any) => {
+  showList: [],
-      e.preventDefault()
+})
-      // setTimeout(() => {
+const store = useStore()
-      isDrag = false
+const pageOptions = { type: 1, page: 0, pageSize: 20 }
-      tempDetail = null
-      startPoint = { x: 99999, y: 99999 }
-      // }, 10)
-    }
-    const mousemove = (e: any) => {
-      e.preventDefault()
-      if (e.x - startPoint.x > 2 || e.y - startPoint.y > 2) {
-        isDrag = true
-      }
-    }
 
-    const load = async (init: boolean = false) => {
+onMounted(async () => {
-      if (init) {
+  if (state.types.length <= 0) {
-        state.list = []
+    const types = await api.material.getKinds({ type: 3 })
-        pageOptions.page = 0
+    state.types = types
-        state.loadDone = false
+    for (const iterator of types) {
-      }
+      const { list } = await api.home.getCompList({
-
+        cate: iterator.id,
-      if (state.loadDone || state.loading) {
+        type: 1,
-        return
+        pageSize: 3,
-      }
-
-      state.loading = true
-      pageOptions.page += 1
-
-      const res = await api.home.getCompList({
-        ...Object.assign(pageOptions, { cate: state.currentCategory?.id }),
       })
-      if (init) {
+      state.showList.push(list)
-        state.list = res?.list
-      } else {
-        res?.list.length <= 0 && (state.loadDone = true)
-        state.list = state.list.concat(res?.list)
-      }
-      setTimeout(() => {
-        state.loading = false
-      }, 100)
     }
+  }
+})
+const mouseup = (e: MouseEvent) => {
+  e.preventDefault()
+  // setTimeout(() => {
+  isDrag = false
+  tempDetail = null
+  startPoint = { x: 99999, y: 99999 }
+  // }, 10)
+}
 
-    function action({ name, value }: any, item: any, index: number) {
+const mousemove = (e: MouseEvent) => {
-      switch (name) {
+  e.preventDefault()
-        case 'del':
+  if (e.x - startPoint.x > 2 || e.y - startPoint.y > 2) {
-          delComp(item, index)
+    isDrag = true
-          break
+  }
-      }
+}
-    }
-    function delComp({ id }: any, index: number) {
-      api.home.removeComp({ id })
-      state.list.splice(index, 1)
-    }
 
-    const selectTypes = (item: any) => {
+const load = async (init: boolean = false) => {
-      state.currentCategory = item
+  if (init) {
-      load(true)
+    state.list = []
-    }
+    pageOptions.page = 0
-    const back = () => {
+    state.loadDone = false
-      state.currentCategory = null
+  }
-    }
 
-    const dragStart = async (e: any, { id, width, height, cover }: any) => {
+  if (state.loadDone || state.loading) {
-      startPoint = { x: e.x, y: e.y }
+    return
-      // tempDetail = await api.home.getTempDetail({ id, type: 1 })
+  }
-      // let finalWidth = tempDetail.width
-      // 计算出拖拽到画布数值
-      const img = await setItem2Data({ width, height, url: cover })
-      dragHelper.start(e, img.canvasWidth)
-      tempDetail = await getCompDetail({ id, type: 1 })
-      if (Array.isArray(JSON.parse(tempDetail.data))) {
-        store.commit('selectItem', { data: JSON.parse(tempDetail.data), type: 'group' })
-      } else {
-        store.commit('selectItem', { data: JSON.parse(tempDetail.data), type: 'text' })
-      }
-    }
 
-    const selectItem = async (item: any) => {
+  state.loading = true
-      if (isDrag) {
+  pageOptions.page += 1
-        return
-      }
-      store.commit('setShowMoveable', false) // 清理掉上一次的选择
-      tempDetail = tempDetail || (await getCompDetail({ id: item.id, type: 1 }))
-      // let group = JSON.parse(tempDetail.data)
-      const group: any = await getComponentsData(tempDetail.data)
-      let parent: any = { x: 0, y: 0 }
-      const { width: pW, height: pH } = store.getters.dPage
 
-      Array.isArray(group) &&
+  const res = await api.home.getCompList({
-        group.forEach((element: any) => {
+    ...pageOptions,
-          element.type === 'w-group' && (parent = element)
+    cate: state.currentCategory?.id,
-        })
+  })
-      if (parent.isContainer) {
+  if (init) {
-        group.forEach((element: any) => {
+    state.list = res?.list
-          element.left += (pW - parent.width) / 2
+  } else {
-          element.top += (pH - parent.height) / 2
+    res?.list.length <= 0 && (state.loadDone = true)
-        })
+    state.list = state.list.concat(res?.list)
-        store.dispatch('addGroup', group)
+  }
-      } else {
+  setTimeout(() => {
-        group.text && (group.text = decodeURIComponent(group.text))
+    state.loading = false
-        group.left = pW / 2 - group.fontSize * (group.text.length / 2)
+  }, 100)
-        group.top = pH / 2 - group.fontSize / 2
+}
-        store.dispatch('addWidget', group)
-      }
-    }
 
-    function getCompDetail(params: any) {
+type TActionParam = {
+  name: string
+  value: string
+}
+
+function action({ name, value }: TActionParam, item: TGetCompListResult, index: number) {
+  switch (name) {
+    case 'del':
+      delComp(item, index)
+      break
+  }
+}
+
+function delComp({ id }: TGetCompListResult, index: number) {
+  api.home.removeComp({ id })
+  state.list.splice(index, 1)
+}
+
+const selectTypes = (item: TGetCompListResult) => {
+  state.currentCategory = item
+  load(true)
+}
+
+const back = () => {
+  state.currentCategory = null
+}
+
+const dragStart = async (e: MouseEvent, { id, width, height, cover }: TGetCompListResult) => {
+  startPoint = { x: e.x, y: e.y }
+  // tempDetail = await api.home.getTempDetail({ id, type: 1 })
+  // let finalWidth = tempDetail.width
+  // 计算出拖拽到画布数值
+  const img = await setItem2Data({ width, height, url: cover })
+  dragHelper.start(e, img.canvasWidth)
+  tempDetail = await getCompDetail({ id, type: 1 })
+  if (Array.isArray(JSON.parse(tempDetail.data))) {
+    store.commit('selectItem', { data: JSON.parse(tempDetail.data), type: 'group' })
+  } else {
+    store.commit('selectItem', { data: JSON.parse(tempDetail.data), type: 'text' })
+  }
+}
+
+const selectItem = async (item: TGetCompListResult) => {
+  if (isDrag) {
+    return
+  }
+  store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  tempDetail = tempDetail || (await getCompDetail({ id: item.id, type: 1 }))
+  // let group = JSON.parse(tempDetail.data)
+  const group: any = await getComponentsData(tempDetail.data)
+  let parent: Record<string, any> = { x: 0, y: 0 }
+  const { width: pW, height: pH } = store.getters.dPage
+
+  Array.isArray(group) &&
+    group.forEach((element) => {
+      element.type === 'w-group' && (parent = element)
+    })
+  if (parent.isContainer) {
+    group.forEach((element: any) => {
+      element.left += (pW - parent.width) / 2
+      element.top += (pH - parent.height) / 2
+    })
+    store.dispatch('addGroup', group)
+  } else {
+    group.text && (group.text = decodeURIComponent(group.text))
+    group.left = pW / 2 - group.fontSize * (group.text.length / 2)
+    group.top = pH / 2 - group.fontSize / 2
+    store.dispatch('addWidget', group)
+  }
+}
+
+    function getCompDetail(params: TGetTempDetail): Promise<TTempDetail> {
       // 有缓存则直接返回组件数据，否则请求获取数据
       return new Promise((resolve) => {
         if (compsCache[params.id]) {
@@ -203,18 +232,15 @@ export default defineComponent({
       })
     }
 
-    return {
+defineExpose({
-      ...toRefs(state),
+  load,
-      load,
+  action,
-      action,
+  back,
-      back,
+  selectTypes,
-      selectTypes,
+  mouseup,
-      mouseup,
+  mousemove,
-      mousemove,
+  dragStart,
-      dragStart,
+  selectItem,
-      selectItem,
-    }
-  },
 })
 </script>
 

src/components/modules/panel/wrap/UserWrap.vue

@@ -45,7 +45,7 @@ import api from '@/api'
 import wImage from '../../widgets/wImage/wImage.vue'
 import setImageData, { TItem2DataParam } from '@/common/methods/DesignFeatures/setImage'
 import useConfirm from '@/common/methods/confirm'
-import { TGetImageListResult } from '@/api/material'
+import { TGetImageListResult, TMyPhotoResult } from '@/api/material'
 import photoList from './components/photoList.vue'
 import imgWaterFall from './components/imgWaterFall.vue'
 import { TUploadDoneData } from '@/components/common/Uploader/index.vue'

src/components/modules/settings/EffectSelect/TextWrap.vue

@@ -27,10 +27,10 @@
             :key="efi + 'effect'"
             :style="{
               color: ef.filling && ef.filling.enable && ef.filling.type === 0 ? ef.filling.color : 'transparent',
-              webkitTextStroke: ef.stroke && ef.stroke.enable ? `${ef.stroke.width / coefficient}px ${ef.stroke.color}` : '',
+              WebkitTextStroke: ef.stroke && ef.stroke.enable ? `${ef.stroke.width / coefficient}px ${ef.stroke.color}` : '',
               textShadow: ef.shadow && ef.shadow.enable ? `${ef.shadow.offsetX / coefficient}px ${ef.shadow.offsetY / coefficient}px ${ef.shadow.blur / coefficient}px ${ef.shadow.color}` : undefined,
               backgroundImage: ef.filling && ef.filling.enable ? (ef.filling.type === 0 ? undefined : getGradientOrImg(ef)) : undefined,
-              webkitBackgroundClip: ef.filling && ef.filling.enable ? (ef.filling.type === 0 ? undefined : 'text') : undefined,
+              WebkitBackgroundClip: ef.filling && ef.filling.enable ? (ef.filling.type === 0 ? undefined : 'text') : undefined,
             }"
             class="demo"
           >
@@ -117,7 +117,9 @@ import numberInput from '../numberInput.vue'
 import draggable from 'vuedraggable'
 import api from '@/api'
 import getGradientOrImg from '../../widgets/wText/getGradientOrImg'
-let froze_font_effect_list: Record<string, any>[] = []
+import { TGetCompListResult } from '@/api/home'
+
+let froze_font_effect_list: TGetCompListResult[] = []
 
 type TProps = {
   modelValue?: Record<string, any>
@@ -132,7 +134,7 @@ type TEmits = {
 type TState = {
   strength: number
   visiable: boolean
-  list: Record<string,any>[]
+  list: TGetCompListResult[]
   layers: Record<string, any>[]
   draging: boolean
   unfold: boolean

src/utils/widgets/loadFontRule.ts

@@ -28,7 +28,7 @@ export const font2style = async (fontContent: any, fontData: any = []) => {
           }
           try {
             const result = await api.material.getFontSub(params, extra)
-            fontContent[key] = font.oid ? result : await blob2Base64(result)
+            fontContent[key] = font.oid ? result : await blob2Base64(result as Blob)
           } catch (e) {
             console.log('字体获取失败', e)
           }

src/views/components/HeaderOptions.vue

@@ -82,7 +82,7 @@ async function save(hasCover: boolean = false) {
   const { id, tempid } = route.query
   const cover = hasCover ? await draw() : undefined
   const widgets = dWidgets.value // reviseData()
-  const { id: newId, stat, msg } = await api.home.saveWorks({ cover, id, title: state.title || '未命名设计', data: JSON.stringify({ page: dPage.value, widgets }), temp_id: tempid, width: dPage.value.width, height: dPage.value.height })
+  const { id: newId, stat, msg } = await api.home.saveWorks({ cover, id: (id as string), title: state.title || '未命名设计', data: JSON.stringify({ page: dPage.value, widgets }), temp_id: (tempid as string), width: dPage.value.width, height: dPage.value.height })
   stat !== 0 ? useNotification('保存成功', '可在"我的作品"中查看') : useNotification('保存失败', msg, { type: 'error' })
   !id && router.push({ path: '/home', query: { id: newId }, replace: true })
   store.commit('setShowMoveable', true)
@@ -199,7 +199,7 @@ async function load(id: number, tempId: number, type: number, cb: () => void) {
 }
 
 function draw() {
-  return new Promise((resolve) => {
+  return new Promise<string>((resolve) => {
     if (!canvasImage.value) resolve('')
     else {
       canvasImage.value.createCover(({ key }: {key: string}) => {

src/views/components/UploadTemplate.vue

@@ -66,7 +66,7 @@ useFontStore.init() // 初始化加载字体
 
 // 生成封面
 const draw = () => {
-  return new Promise((resolve) => {
+  return new Promise<string>((resolve) => {
     if (!canvasImage.value) {
       resolve('')
     } else {