feat: convert GraphListWrap component to composition API

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

@@ -7,7 +7,7 @@
 -->
 <template>
   <div class="wrap">
-    <search-header v-model="searchKeyword" type="none" @change="searchChange" />
+    <search-header v-model="state.searchKeyword" type="none" @change="searchChange" />
     <div style="height: 0.5rem" />
     <!-- <div class="types">
       <div v-for="(t, ti) in types" :key="ti + 't'" :style="{ backgroundColor: colors[ti] }" :class="['types__item', { 'types--select': currentType === t.id }]" @click="selectType(t)"></div>
@@ -15,48 +15,50 @@
     <!-- <div class="tags">
       <el-check-tag v-for="(t2, t2i) in sub" :key="t2i + 't2'" :checked="t2.id === currentCheck" class="tags__item" @click="tagsChange(t2.id)">{{ t2.name }}</el-check-tag>
     </div> -->
-    <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.thumb" fit="contain" lazy loading="lazy" />
           </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)">
           <el-image class="list__img" :src="item.thumb" fit="contain" lazy loading="lazy" />
         </div>
       </el-space>
-      <div v-show="loading" class="loading"><i class="el-icon-loading" /> 拼命加载中</div>
+      <div v-show="state.loading" class="loading"><i class="el-icon-loading" /> 拼命加载中</div>
-      <div v-show="loadDone" :style="list.length <= 0 ? 'padding-top: 4rem' : ''" class="loading">全部加载完毕</div>
+      <div v-show="state.loadDone" :style="state.list.length <= 0 ? 'padding-top: 4rem' : ''" 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 wImage from '../../widgets/wImage/wImage.vue'
 import wImageSetting from '../../widgets/wImage/wImageSetting'
 // import wSvg from '../../widgets/wSvg/wSvg.vue'
 import { wSvgSetting } from '../../widgets/wSvg/wSvgSetting'
-import { mapActions, mapGetters } from 'vuex'
+import { useStore } from 'vuex'
 import setImageData from '@/common/methods/DesignFeatures/setImage'
 import DragHelper from '@/common/hooks/dragHelper'
+import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+
+type TProps = {
+  active?: boolean
+}
 
 let isDrag = false
 let startPoint = { x: 99999, y: 99999 }
 const dragHelper = new DragHelper()
 
-export default defineComponent({
+const prpos = defineProps<TProps>()
-  components: {},
-  props: ['active'],
-  setup(props) {
 const colors = ['#f8704b', '#5b89ff', '#2cc4cc', '#a8ba73', '#f8704b']
 const state: any = reactive({
   loading: false,
@@ -72,6 +74,10 @@ export default defineComponent({
   searchKeyword: '',
 })
 const pageOptions = { page: 0, pageSize: 20 }
+const store = useStore()
+const {
+  dPage
+} = useSetupMapGetters(['dPage'])
 
 onMounted(async () => {
   if (state.types.length <= 0) {
@@ -141,32 +147,30 @@ export default defineComponent({
   state.currentCategory = null
 }
 
-    return {
+defineExpose({
-      ...toRefs(state),
   load,
   searchChange,
   selectTypes,
   back,
   mouseup,
   mousemove,
-    }
+})
-  },
+
-  computed: {
+// ...mapGetters(['dPage'])
-    ...mapGetters(['dPage']),
+
-  },
+// ...mapActions(['addWidget'])
-  methods: {
+
-    ...mapActions(['addWidget']),
+async function selectItem(item: any) {
-    async selectItem(item: any) {
   if (isDrag) {
     return
   }
-      this.$store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  store.commit('setShowMoveable', false) // 清理掉上一次的选择
   let setting = item.type === 'svg' ? JSON.parse(JSON.stringify(wSvgSetting)) : JSON.parse(JSON.stringify(wImageSetting))
   const img: any = await setImageData(item)
 
   setting.width = img.width
   setting.height = img.height // parseInt(100 / item.value.ratio, 10)
-      const { width: pW, height: pH } = this.dPage
+  const { width: pW, height: pH } = dPage.value
   setting.left = pW / 2 - img.width / 2
   setting.top = pH / 2 - img.height / 2
   setting.imgUrl = item.url
@@ -182,17 +186,16 @@ export default defineComponent({
   if (item.type === 'mask') {
     setting.mask = item.url
   }
-      this.addWidget(setting)
+  store.dispatch("addWidget", setting)
-    },
+  // addWidget(setting)
-    async dragStart(e: any, item: any) {
+}
+async function dragStart(e: any, item: any) {
   startPoint = { x: e.x, y: e.y }
   const { width, height, thumb, url } = item
   const img = await setImageData({ width, height, url: thumb || url })
   dragHelper.start(e, img.canvasWidth)
-      this.$store.commit('selectItem', { data: { value: item }, type: item.type })
+  store.commit('selectItem', { data: { value: item }, type: item.type })
-    },
+}
-  },
-})
 </script>
 
 <style lang="less" scoped>