Merge pull request #88 from palxiao/feature-vue3

vue3 & TS modified
2025-07-15 16:02:19 +08:00 · 2024-03-14 22:48:00 +08:00 · 2024-03-14 22:48:00 +08:00 · 0a04e70e5c
commit 0a04e70e5c
parent d213688d6b 0739965150
9 changed files with 319 additions and 184 deletions
--- a/src/api/github.ts
+++ b/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) {
-      const fileContent = event.target.result
-      resolve(fileContent.split(',')[1])
+    reader.onload = function (event) {
+      const fileContent = event.target && event.target.result
+      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', {
--- a/src/api/home.ts
+++ b/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 removeComp = (params: Type.Object = {}) => fetch('design/del', params, 'post')
+export const getCompList = (params: TGetCompListParam) => fetch<getCompListReturn>('design/list', params, 'get')
+
+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
--- a/src/api/material.ts
+++ b/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
-} & IGetTempListData
+  thumb?: string
+} & 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 deleteMyPhoto = (params: Type.Object = {}) => fetch('design/user/image/del', params, 'post')
-export const deleteMyWorks = (params: Type.Object = {}) => fetch('design/poster/del', params, 'post')
+export const getMyPhoto = (params: TMyPhotoParams) => fetch<TPageRequestResult<TMyPhotoResult[]>>('design/user/image', params)
+
+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)
--- a/src/components/modules/panel/wrap/CompListWrap.vue
+++ b/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">
-      <classHeader :is-back="true" @back="back">{{ currentCategory.name }}</classHeader>
+    <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">{{ 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="loadDone" class="loading">全部加载完毕</div>
+      <div v-show="state.loading" class="loading"><i class="el-icon-loading"></i> 拼命加载中</div>
+      <div v-show="state.loadDone" class="loading">全部加载完毕</div>
    </ul>
  </div>
 </template>

-<script lang="ts">
-import { defineComponent, reactive, toRefs, onMounted, watch } from 'vue'
+<script lang="ts" setup>
+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({
-  components: {},
-  setup(props) {
-    // 拖拽效果相关
-    const dragHelper = new DragHelper()
-    let isDrag = false
-    let startPoint = { x: 99999, y: 99999 }
-    let tempDetail: any = null
-    // 缓存组件用以减少接口请求的次数
-    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 }
+type TState = {
+  loading: boolean
+  loadDone: boolean
+  list: TGetCompListResult[]
+  searchValue: string
+  currentCategory: TGetCompListResult | null
+  types: []
+  showList: TGetCompListResult[][]
+}

-    onMounted(async () => {
-      if (state.types.length <= 0) {
-        const types = await api.material.getKinds({ type: 3 })
-        state.types = types
-        for (const iterator of types) {
-          const { list } = await api.home.getCompList({
-            cate: iterator.id,
-            type: 1,
-            pageSize: 3,
-          })
-          state.showList.push(list)
-        }
-      }
-    })
-    const mouseup = (e: any) => {
-      e.preventDefault()
-      // setTimeout(() => {
-      isDrag = false
-      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 dragHelper = new DragHelper()
+let isDrag = false
+let startPoint = { x: 99999, y: 99999 }
+let tempDetail: TTempDetail | null = null
+// 缓存组件用以减少接口请求的次数
+const compsCache: any = {}
+const state = reactive<TState>({
+  loading: false,
+  loadDone: false,
+  list: [],
+  searchValue: '',
+  currentCategory: null,
+  types: [],
+  showList: [],
+})
+const store = useStore()
+const pageOptions = { type: 1, page: 0, pageSize: 20 }

-    const load = async (init: boolean = false) => {
-      if (init) {
-        state.list = []
-        pageOptions.page = 0
-        state.loadDone = false
-      }
-
-      if (state.loadDone || state.loading) {
-        return
-      }
-
-      state.loading = true
-      pageOptions.page += 1
-
-      const res = await api.home.getCompList({
-        ...Object.assign(pageOptions, { cate: state.currentCategory?.id }),
+onMounted(async () => {
+  if (state.types.length <= 0) {
+    const types = await api.material.getKinds({ type: 3 })
+    state.types = types
+    for (const iterator of types) {
+      const { list } = await api.home.getCompList({
+        cate: iterator.id,
+        type: 1,
+        pageSize: 3,
      })
-      if (init) {
-        state.list = res?.list
-      } else {
-        res?.list.length <= 0 && (state.loadDone = true)
-        state.list = state.list.concat(res?.list)
-      }
-      setTimeout(() => {
-        state.loading = false
-      }, 100)
+      state.showList.push(list)
    }
+  }
+})
+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) {
-      switch (name) {
-        case 'del':
-          delComp(item, index)
-          break
-      }
-    }
-    function delComp({ id }: any, index: number) {
-      api.home.removeComp({ id })
-      state.list.splice(index, 1)
-    }
+const mousemove = (e: MouseEvent) => {
+  e.preventDefault()
+  if (e.x - startPoint.x > 2 || e.y - startPoint.y > 2) {
+    isDrag = true
+  }
+}

-    const selectTypes = (item: any) => {
-      state.currentCategory = item
-      load(true)
-    }
-    const back = () => {
-      state.currentCategory = null
-    }
+const load = async (init: boolean = false) => {
+  if (init) {
+    state.list = []
+    pageOptions.page = 0
+    state.loadDone = false
+  }

-    const dragStart = async (e: any, { id, width, height, cover }: any) => {
-      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' })
-      }
-    }
+  if (state.loadDone || state.loading) {
+    return
+  }

-    const selectItem = async (item: any) => {
-      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: any = { x: 0, y: 0 }
-      const { width: pW, height: pH } = store.getters.dPage
+  state.loading = true
+  pageOptions.page += 1

-      Array.isArray(group) &&
-        group.forEach((element: any) => {
-          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)
-      }
-    }
+  const res = await api.home.getCompList({
+    ...pageOptions,
+    cate: state.currentCategory?.id,
+  })
+  if (init) {
+    state.list = res?.list
+  } else {
+    res?.list.length <= 0 && (state.loadDone = true)
+    state.list = state.list.concat(res?.list)
+  }
+  setTimeout(() => {
+    state.loading = false
+  }, 100)
+}

-    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 {
-      ...toRefs(state),
-      load,
-      action,
-      back,
-      selectTypes,
-      mouseup,
-      mousemove,
-      dragStart,
-      selectItem,
-    }
-  },
+defineExpose({
+  load,
+  action,
+  back,
+  selectTypes,
+  mouseup,
+  mousemove,
+  dragStart,
+  selectItem,
 })
 </script>

--- a/src/components/modules/panel/wrap/UserWrap.vue
+++ b/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'
--- a/src/components/modules/settings/EffectSelect/TextWrap.vue
+++ b/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
--- a/src/utils/widgets/loadFontRule.ts
+++ b/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)
          }
--- a/src/views/components/HeaderOptions.vue
+++ b/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}) => {
--- a/src/views/components/UploadTemplate.vue
+++ b/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 {