From f7b8e0b6693467ae4df4bea4169dc62508b528e3 Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Wed, 13 Mar 2024 23:05:19 +0000
Subject: [PATCH 1/5] feat: add api function ts type

---
 src/api/home.ts                               | 46 +++++++++++++-
 src/api/material.ts                           | 60 ++++++++++++++++---
 .../modules/panel/wrap/UserWrap.vue           |  2 +-
 .../settings/EffectSelect/TextWrap.vue        | 10 ++--
 src/utils/widgets/loadFontRule.ts             |  2 +-
 5 files changed, 103 insertions(+), 17 deletions(-)

diff --git a/src/api/home.ts b/src/api/home.ts
index 091bfab..1532edf 100644
--- a/src/api/home.ts
+++ b/src/api/home.ts
@@ -46,7 +46,29 @@ type TGetTempDetail = {
   type?: number
 }
 
-export const getTempDetail = (params: TGetTempDetail) => fetch<{data: string}>('design/temp', params, 'get')
+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,8 +88,28 @@ 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
+}
+
+/** 获取组件返回类型 */
+export type TGetCompListResult = {
+  cover: string
+  height: number
+  id: number
+  state: number
+  title: string
+  width: number
+}
+
+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')
 // export const getCompDetail = (params: Type.Object = {}) => fetch('/api/template/temp_info', params, 'get')
 
diff --git a/src/api/material.ts b/src/api/material.ts
index 14e720b..8765569 100644
--- 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)
diff --git a/src/components/modules/panel/wrap/UserWrap.vue b/src/components/modules/panel/wrap/UserWrap.vue
index 147dcc2..196d815 100644
--- 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'
diff --git a/src/components/modules/settings/EffectSelect/TextWrap.vue b/src/components/modules/settings/EffectSelect/TextWrap.vue
index 89ee73f..fbbb136 100644
--- 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
diff --git a/src/utils/widgets/loadFontRule.ts b/src/utils/widgets/loadFontRule.ts
index a35d0bb..9771f1d 100644
--- 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)
           }

From e977df58e87cf0af607f20b70469681f68e6750e Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Wed, 13 Mar 2024 23:20:14 +0000
Subject: [PATCH 2/5] feat: add github api type

---
 src/api/github.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/api/github.ts b/src/api/github.ts
index 4e19e71..92160e6 100644
--- a/src/api/github.ts
+++ b/src/api/github.ts
@@ -11,15 +11,15 @@ 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) => {
   const repo = 'shawnphang/files'
   const d = new Date()
   const content = typeof file === 'string' ? file : await getBase64(file)

From 6ee1ab78edfd9be34d2d0d281ddc356f7ddaae18 Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Wed, 13 Mar 2024 23:52:47 +0000
Subject: [PATCH 3/5] feat: convert CompListWrap component to composition API

---
 src/api/home.ts                               |  14 +-
 .../modules/panel/wrap/CompListWrap.vue       | 276 ++++++++++--------
 2 files changed, 158 insertions(+), 132 deletions(-)

diff --git a/src/api/home.ts b/src/api/home.ts
index 1532edf..8dd3639 100644
--- a/src/api/home.ts
+++ b/src/api/home.ts
@@ -41,12 +41,12 @@ type IGetTempListResult = TPageRequestResult<IGetTempListData[]>
 // 获取模板列表
 export const getTempList = (params: IGetTempListParam) => fetch<IGetTempListResult>('design/list', params, 'get')
 
-type TGetTempDetail = {
+export type TGetTempDetail = {
   id: number
   type?: number
 }
 
-type TTempDetail = {
+export type TTempDetail = {
   /** 分类 */
   category: number
   /** 封面 */
@@ -93,7 +93,7 @@ type TGetCompListParam = {
   page?: number
   type?: number
   pageSize: number
-  cate: number
+  cate?: number | string
 }
 
 /** 获取组件返回类型 */
@@ -104,13 +104,19 @@ export type TGetCompListResult = {
   state: number
   title: string
   width: number
+  name?: string
 }
 
 type getCompListReturn = TPageRequestResult<TGetCompListResult[]>
 
 // 组件相关接口
 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')
 
 // 保存作品
diff --git a/src/components/modules/panel/wrap/CompListWrap.vue b/src/components/modules/panel/wrap/CompListWrap.vue
index b20c423..67048bb 100644
--- a/src/components/modules/panel/wrap/CompListWrap.vue
+++ b/src/components/modules/panel/wrap/CompListWrap.vue
@@ -15,152 +15,175 @@
       </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: any) => {
+  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
+  }
+
+  state.loading = true
+  pageOptions.page += 1
+
+  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)
+}
+
+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: any) => {
       if (isDrag) {
@@ -191,7 +214,7 @@ export default defineComponent({
       }
     }
 
-    function getCompDetail(params: any) {
+    function getCompDetail(params: TGetTempDetail): Promise<TTempDetail> {
       // 有缓存则直接返回组件数据，否则请求获取数据
       return new Promise((resolve) => {
         if (compsCache[params.id]) {
@@ -203,18 +226,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>
 

From 7538b6b2ac03fdd363f97af01dafa923ca315b1b Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Wed, 13 Mar 2024 23:56:43 +0000
Subject: [PATCH 4/5] feat: convert CompListWrap component to composition API

---
 .../modules/panel/wrap/CompListWrap.vue       | 64 ++++++++++---------
 1 file changed, 35 insertions(+), 29 deletions(-)

diff --git a/src/components/modules/panel/wrap/CompListWrap.vue b/src/components/modules/panel/wrap/CompListWrap.vue
index 67048bb..270e0be 100644
--- a/src/components/modules/panel/wrap/CompListWrap.vue
+++ b/src/components/modules/panel/wrap/CompListWrap.vue
@@ -34,7 +34,13 @@
     <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 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)">
+        <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> -->
@@ -98,7 +104,7 @@ onMounted(async () => {
     }
   }
 })
-const mouseup = (e: any) => {
+const mouseup = (e: MouseEvent) => {
   e.preventDefault()
   // setTimeout(() => {
   isDrag = false
@@ -185,34 +191,34 @@ const dragStart = async (e: MouseEvent, { id, width, height, cover }: TGetCompLi
   }
 }
 
-    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
+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: 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)
-      }
-    }
+  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> {
       // 有缓存则直接返回组件数据，否则请求获取数据

From 2a412800914d201c51cde3ba466cc75ff4be3224 Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Thu, 14 Mar 2024 14:21:32 +0000
Subject: [PATCH 5/5] feat: add api types

---
 src/api/github.ts                       |  5 +++--
 src/api/home.ts                         | 20 ++++++++++++++++++--
 src/views/components/HeaderOptions.vue  |  4 ++--
 src/views/components/UploadTemplate.vue |  2 +-
 4 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/api/github.ts b/src/api/github.ts
index 92160e6..5bcedd3 100644
--- a/src/api/github.ts
+++ b/src/api/github.ts
@@ -19,11 +19,12 @@ function getBase64(file: File) {
   })
 }
 
-const putPic = async (file: File) => {
+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', {
diff --git a/src/api/home.ts b/src/api/home.ts
index 8dd3639..dcdf957 100644
--- a/src/api/home.ts
+++ b/src/api/home.ts
@@ -119,14 +119,30 @@ type TRemoveComp = {
 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
diff --git a/src/views/components/HeaderOptions.vue b/src/views/components/HeaderOptions.vue
index 8c4076e..7f7d5ea 100644
--- 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}) => {
diff --git a/src/views/components/UploadTemplate.vue b/src/views/components/UploadTemplate.vue
index 3fb2562..202c61d 100644
--- 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 {