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,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>