Merge pull request #86 from JeremyYu-cn/feat-upgrade-vue3

Feat: convert CompListWrap component to composition API

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) {
+    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) => {
   const repo = 'shawnphang/files'
   const d = new Date()
   const content = typeof file === 'string' ? file : await getBase64(file)

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')
 
 // 保存作品

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

@@ -15,50 +15,70 @@
       </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({
+// 拖拽效果相关
+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: [],
@@ -66,11 +86,11 @@ export default defineComponent({
   currentCategory: null,
   types: [],
   showList: [],
-    })
+})
-    const store = useStore()
+const store = useStore()
-    const pageOptions = { type: 1, page: 0, pageSize: 20 }
+const pageOptions = { type: 1, page: 0, pageSize: 20 }
 
-    onMounted(async () => {
+onMounted(async () => {
   if (state.types.length <= 0) {
     const types = await api.material.getKinds({ type: 3 })
     state.types = types
@@ -83,23 +103,24 @@ export default defineComponent({
       state.showList.push(list)
     }
   }
-    })
+})
-    const mouseup = (e: any) => {
+const mouseup = (e: MouseEvent) => {
   e.preventDefault()
   // setTimeout(() => {
   isDrag = false
   tempDetail = null
   startPoint = { x: 99999, y: 99999 }
   // }, 10)
-    }
+}
-    const mousemove = (e: any) => {
+
+const mousemove = (e: MouseEvent) => {
   e.preventDefault()
   if (e.x - startPoint.x > 2 || e.y - startPoint.y > 2) {
     isDrag = true
   }
-    }
+}
 
-    const load = async (init: boolean = false) => {
+const load = async (init: boolean = false) => {
   if (init) {
     state.list = []
     pageOptions.page = 0
@@ -114,7 +135,8 @@ export default defineComponent({
   pageOptions.page += 1
 
   const res = await api.home.getCompList({
-        ...Object.assign(pageOptions, { cate: state.currentCategory?.id }),
+    ...pageOptions,
+    cate: state.currentCategory?.id,
   })
   if (init) {
     state.list = res?.list
@@ -125,29 +147,36 @@ export default defineComponent({
   setTimeout(() => {
     state.loading = false
   }, 100)
-    }
+}
 
-    function action({ name, value }: any, item: any, index: number) {
+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 }: any, index: number) {
+
+function delComp({ id }: TGetCompListResult, index: number) {
   api.home.removeComp({ id })
   state.list.splice(index, 1)
-    }
+}
 
-    const selectTypes = (item: any) => {
+const selectTypes = (item: TGetCompListResult) => {
   state.currentCategory = item
   load(true)
-    }
+}
-    const back = () => {
-      state.currentCategory = null
-    }
 
-    const dragStart = async (e: any, { id, width, height, cover }: any) => {
+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
@@ -160,9 +189,9 @@ export default defineComponent({
   } else {
     store.commit('selectItem', { data: JSON.parse(tempDetail.data), type: 'text' })
   }
-    }
+}
 
-    const selectItem = async (item: any) => {
+const selectItem = async (item: TGetCompListResult) => {
   if (isDrag) {
     return
   }
@@ -170,11 +199,11 @@ export default defineComponent({
   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 }
+  let parent: Record<string, any> = { x: 0, y: 0 }
   const { width: pW, height: pH } = store.getters.dPage
 
   Array.isArray(group) &&
-        group.forEach((element: any) => {
+    group.forEach((element) => {
       element.type === 'w-group' && (parent = element)
     })
   if (parent.isContainer) {
@@ -189,9 +218,9 @@ export default defineComponent({
     group.top = pH / 2 - group.fontSize / 2
     store.dispatch('addWidget', group)
   }
-    }
+}
 
-    function getCompDetail(params: any) {
+    function getCompDetail(params: TGetTempDetail): Promise<TTempDetail> {
       // 有缓存则直接返回组件数据，否则请求获取数据
       return new Promise((resolve) => {
         if (compsCache[params.id]) {
@@ -203,8 +232,7 @@ export default defineComponent({
       })
     }
 
-    return {
+defineExpose({
-      ...toRefs(state),
   load,
   action,
   back,
@@ -213,8 +241,6 @@ export default defineComponent({
   mousemove,
   dragStart,
   selectItem,
-    }
-  },
 })
 </script>