perf(widgetPanel): optimize the switching of the secondary menu

1. 对二级组件间的切换进行缓存,减少服务端的请求压力

2. 二级菜单组件配置化,便于快速实现功能的增减

src/assets/data/widgetClassifyList.ts

@@ -2,44 +2,51 @@
  * @Author: ShawnPhang
  * @Date: 2021-07-17 11:20:22
  * @Description:
- * @LastEditors: ShawnPhang <site: book.palxp.com>
+ * @LastEditors: rayadaschn 115447518+rayadaschn@users.noreply.github.com
- * @LastEditTime: 2023-07-12 21:52:29
+ * @LastEditTime: 2023-09-01 14:15:14
  */
 export default [
   {
     name: '模板',
     icon: 'icon-moban',
     show: false,
+    component: 'temp-list-wrap',
   },
   {
     name: '素材',
     icon: 'icon-sucai',
     show: false,
+    component: 'graph-list-wrap',
   },
   {
     name: '文字',
     icon: 'icon-wenzi',
     show: false,
     style: { fontWeight: 600 },
+    component: 'text-list-wrap',
   },
   {
     name: '照片',
     icon: 'icon-gallery',
     show: false,
+    component: 'photo-list-wrap',
   },
   {
     name: '背景',
     icon: 'icon-beijing',
     show: false,
+    component: 'bg-img-list-wrap',
   },
   {
     name: '工具',
     icon: 'icon-zujian01',
     show: false,
+    component: 'tools-list-wrap',
   },
   {
     name: '我的',
     icon: 'icon-shangchuan',
     show: false,
+    component: 'user-wrap',
   },
 ]

src/components/modules/panel/widgetPanel.vue

@@ -10,13 +10,9 @@
       <a href="https://github.com/palxiao/poster-design" target="_blank" class="github"><img src="https://fe-doc.palxp.com/images/github.svg" alt="Github" title="Github" /> 源码</a>
     </div>
     <div v-show="active" class="widget-wrap">
-      <temp-list-wrap :style="getStyle(0)" />
+      <keep-alive>
-      <graph-list-wrap v-show="+activeWidgetClassify === 1" :active="+activeWidgetClassify === 1" />
+        <component :is="widgetClassifyList[activeWidgetClassify].component" />
-      <text-list-wrap v-show="+activeWidgetClassify === 2" :active="+activeWidgetClassify === 2" />
+      </keep-alive>
-      <photo-list-wrap v-show="+activeWidgetClassify === 3" :active="+activeWidgetClassify === 3" />
-      <bg-img-list-wrap v-show="+activeWidgetClassify === 4" :active="+activeWidgetClassify === 4" />
-      <tools-list-wrap v-show="+activeWidgetClassify === 5" :active="+activeWidgetClassify === 5" />
-      <user-wrap v-show="+activeWidgetClassify === 6" :active="+activeWidgetClassify === 6" />
     </div>
     <!-- <div v-show="active" class="side-wrap"><div class="pack__up" @click="active = false">&lt;</div></div> -->
     <div v-show="active" class="side-wrap">

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

@@ -2,8 +2,8 @@
  * @Author: ShawnPhang
  * @Date: 2021-08-27 15:16:07
  * @Description: 背景图
- * @LastEditors: ShawnPhang <site: book.palxp.com>
+ * @LastEditors: rayadaschn 115447518+rayadaschn@users.noreply.github.com
- * @LastEditTime: 2023-07-10 22:55:41
+ * @LastEditTime: 2023-09-01 14:18:54
 -->
 <template>
   <div class="wrap">
@@ -29,7 +29,6 @@ import api from '@/api'
 import { mapActions, useStore } from 'vuex'
 
 export default defineComponent({
-  props: ['active'],
   // components: { ElDivider },
   setup(props) {
     const store = useStore()
@@ -37,20 +36,11 @@ export default defineComponent({
       loading: false,
       loadDone: false,
       bgList: [],
-      showList: false,
+      showList: true,
       colors: ['#000000ff', '#999999ff', '#CCCCCCff', '#FFFFFFff', '#E65353ff', '#FFD835ff', '#70BC59ff', '#607AF4ff', '#976BEEff'],
     })
     const pageOptions = { page: 0, pageSize: 20 }
 
-    watch(
-      () => props.active,
-      () => {
-        if (props.active) {
-          state.showList = true
-        }
-      },
-    )
-
     const loadData = () => {
       if (state.loading) {
         return
@@ -70,9 +60,12 @@ export default defineComponent({
         pageOptions.page = 1
       }
 
-      api.material.getImagesList({ cate: 16, page: pageOptions.page }).then(({ list }: any) => {
+      await api.material.getImagesList({ cate: 16, page: pageOptions.page }).then(({ list }: any) => {
-        state.bgList.push(...list)
+        if (list.length > 0) {
-        list.length < 0 && (state.loadDone = true)
+          state.bgList.push(...list)
+        } else {
+          state.loadDone = true
+        }
       })
 
       setTimeout(() => {

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

@@ -2,8 +2,8 @@
  * @Author: ShawnPhang
  * @Date: 2021-08-27 15:16:07
  * @Description: 素材列表，主要用于文字组合列表
- * @LastEditors: ShawnPhang <site: book.palxp.com>
+ * @LastEditors: rayadaschn 115447518+rayadaschn@users.noreply.github.com
- * @LastEditTime: 2023-07-11 11:21:05
+ * @LastEditTime: 2023-09-01 14:14:27
 -->
 <template>
   <div class="wrap">
@@ -60,7 +60,6 @@ let tempDetail: any = null
 
 export default defineComponent({
   // components: { ElDivider },
-  props: ['active'],
   setup(props) {
     const state = reactive({
       loading: false,
@@ -73,29 +72,21 @@ export default defineComponent({
     })
     const pageOptions = { type: 1, page: 0, pageSize: 20 }
 
-    watch(
+    onMounted(async () => {
-      () => props.active,
+      if (state.types.length <= 0) {
-      async (active) => {
+        const types = await api.material.getKinds({ type: 3 })
-        if (active) {
+        types.shift()
-          if (!props.active || state.types.length > 0) {
+        state.types = types
-            return
+        for (const iterator of types) {
-          }
+          const { list } = await api.home.getCompList({
-          const types = await api.material.getKinds({ type: 3 })
+            cate: iterator.id,
-          types.shift()
+            type: 1,
-          state.types = types
+            pageSize: 3,
-          for (const iterator of types) {
+          })
-            const { list } = await api.home.getCompList({
+          state.showList.push(list)
-              cate: iterator.id,
-              type: 1,
-              pageSize: 3,
-            })
-            state.showList.push(list)
-          }
         }
-      },
+      }
-    )
+    })
-    // onMounted(async () => {
-    // })
     const mouseup = (e: any) => {
       e.preventDefault()
       setTimeout(() => {

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

@@ -2,8 +2,8 @@
  * @Author: ShawnPhang
  * @Date: 2021-08-27 15:16:07
  * @Description: 素材列表
- * @LastEditors: ShawnPhang <site: book.palxp.com>
+ * @LastEditors: rayadaschn 115447518+rayadaschn@users.noreply.github.com
- * @LastEditTime: 2023-07-17 15:19:22
+ * @LastEditTime: 2023-09-01 14:18:30
 -->
 <template>
   <div class="wrap">
@@ -73,28 +73,20 @@ export default defineComponent({
     })
     const pageOptions = { page: 0, pageSize: 20 }
 
-    watch(
+    onMounted(async () => {
-      () => props.active,
+      if (state.types.length <= 0) {
-      async (active) => {
+        const types = await api.material.getKinds({ type: 2 })
-        if (active) {
+        types.shift()
-          if (!props.active || state.types.length > 0) {
+        state.types = types
-            return
+        for (const iterator of types) {
-          }
+          const { list } = await api.material.getList({
-          const types = await api.material.getKinds({ type: 2 })
+            cate: iterator.id,
-          types.shift()
+            pageSize: 3,
-          state.types = types
+          })
-          for (const iterator of types) {
+          state.showList.push(list)
-            const { list } = await api.material.getList({
-              cate: iterator.id,
-              pageSize: 3,
-            })
-            state.showList.push(list)
-          }
         }
-      },
+      }
-    )
+    })
-    // onMounted(async () => {
-    // })
     // const dragHelper = new DragHelper()
     // let isDrag = false
     // let startPoint = { x: 99999, y: 99999 }

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

@@ -2,13 +2,13 @@
  * @Author: ShawnPhang
  * @Date: 2022-02-11 18:48:23
  * @Description:  
- * @LastEditors: ShawnPhang <site: book.palxp.com>
+ * @LastEditors: rayadaschn 115447518+rayadaschn@users.noreply.github.com
- * @LastEditTime: 2023-07-10 16:27:41
+ * @LastEditTime: 2023-09-01 14:18:14
 -->
 <template>
   <div class="wrap">
     <search-header type="none" @change="searchChange" />
-    <photo-list v-if="showList" :isDone="loadDone" :listData="recommendImgList" @load="getDataList" @drag="dragStart" @select="selectImg" />
+    <photo-list :isDone="loadDone" :listData="recommendImgList" @load="getDataList" @drag="dragStart" @select="selectImg" />
   </div>
 </template>
 
@@ -31,23 +31,15 @@ export default {
       recommendImgList: [],
       // loading: false,
       loadDone: false,
-      showList: false,
       page: 0,
     }
   },
   computed: {
     ...mapGetters(['dPage']),
   },
-  watch: {
+
-    active(val) {
-      if (this.active) {
-        this.showList = true
-        this.getDataList()
-      }
-    },
-  },
   mounted() {
-    // this.getDataList()
+    this.getDataList()
   },
   methods: {
     ...mapActions(['addWidget']),

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

@@ -17,7 +17,7 @@
       </div>
     </ul>
     <div class="other-text-wrap">
-      <comp-list-wrap :active="active" />
+      <comp-list-wrap />
     </div>
   </div>
 </template>
@@ -32,7 +32,6 @@ import { getCurrentInstance, ComponentInternalInstance } from 'vue'
 
 export default {
   name: NAME,
-  props: ['active'],
   setup() {
     const store: any = useStore()
     const { proxy } = getCurrentInstance() as ComponentInternalInstance

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

@@ -2,8 +2,8 @@
  * @Author: ShawnPhang
  * @Date: 2022-02-11 18:48:23
  * @Description: 组件列表
- * @LastEditors: ShawnPhang <site: book.palxp.com>
+ * @LastEditors: rayadaschn 115447518+rayadaschn@users.noreply.github.com
- * @LastEditTime: 2023-07-12 22:31:55
+ * @LastEditTime: 2023-09-01 14:17:46
 -->
 <template>
   <div class="wrap">
@@ -31,23 +31,15 @@ import imageCutout from '@/components/business/image-cutout'
 export default {
   name: NAME,
   components: { imageCutout },
-  props: ['active'],
   data() {
     return {
       loadDone: false,
-      showList: false,
     }
   },
   computed: {
     ...mapGetters(['dPage']),
   },
-  watch: {
+
-    active(val) {
-      if (this.active) {
-        this.showList = true
-      }
-    },
-  },
   mounted() {
     // this.getDataList()
     setTimeout(() => {

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

@@ -2,8 +2,8 @@
  * @Author: ShawnPhang
  * @Date: 2022-02-13 22:18:35
  * @Description: 我的
- * @LastEditors: ShawnPhang <site: book.palxp.com>
+ * @LastEditors: rayadaschn 115447518+rayadaschn@users.noreply.github.com
- * @LastEditTime: 2023-07-14 01:03:40
+ * @LastEditTime: 2023-09-01 14:17:23
 -->
 <template>
   <div class="wrap">
@@ -16,7 +16,7 @@
         <el-button class="upload-btn" plain>上传图片 <i class="iconfont icon-upload" /></el-button>
       </uploader>
       <el-button class="upload-btn upload-psd" plain type="primary" @click="openPSD">上传 PSD 模板</el-button>
-      <photo-list v-if="showList" ref="imgListRef" :edit="editOptions" :isDone="isDone" :listData="imgList" @load="load" @drag="dragStart" @select="selectImg" />
+      <photo-list ref="imgListRef" :edit="editOptions" :isDone="isDone" :listData="imgList" @load="load" @drag="dragStart" @select="selectImg" />
     </div>
     <div v-show="tabActiveName === 'design'" class="wrap">
       <ul ref="listRef" v-infinite-scroll="loadDesign" class="infinite-list" :infinite-scroll-distance="150" style="overflow: auto">
@@ -29,7 +29,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs, watch, nextTick, ref } from 'vue'
+import { defineComponent, reactive, toRefs, watch, nextTick, ref, onMounted } from 'vue'
 import { ElTabPane, ElTabs } from 'element-plus'
 import { useRouter } from 'vue-router'
 import { useStore } from 'vuex'
@@ -50,7 +50,6 @@ export default defineComponent({
       percent: { num: 0 }, // 当前上传进度
       imgList: [],
       designList: [],
-      showList: false,
       isDone: false,
       editOptions: [],
       listRef: null,
@@ -113,18 +112,12 @@ export default defineComponent({
       isLess && loadFn()
     }
 
-    watch(
+    onMounted(() => {
-      () => props.active,
+      load(true)
-      () => {
+      nextTick(() => {
-        if (props.active) {
+        state.tabActiveName = 'pics'
-          state.showList = true
+      })
-          load(true)
+    })
-          nextTick(() => {
-            state.tabActiveName = 'pics'
-          })
-        }
-      },
-    )
 
     const selectImg = async (index: number) => {
       const item: any = state.imgList[index]