Merge pull request #18 from rayadaschn/refactor-09-01

perf(widgetPanel): optimize the switching of the secondary menu
2025-07-15 16:02:19 +08:00 · 2023-09-01 16:01:38 +08:00 · 2023-09-01 16:01:38 +08:00 · 3615a040f0
commit 3615a040f0
parent 17593918c9 e5e5e492e3
9 changed files with 71 additions and 116 deletions
--- a/src/assets/data/widgetClassifyList.ts
+++ b/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>
- * @LastEditTime: 2023-07-12 21:52:29
+ * @LastEditors: rayadaschn 115447518+rayadaschn@users.noreply.github.com
+ * @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',
  },
 ]
--- a/src/components/modules/panel/widgetPanel.vue
+++ b/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)" />
-      <graph-list-wrap v-show="+activeWidgetClassify === 1" :active="+activeWidgetClassify === 1" />
-      <text-list-wrap v-show="+activeWidgetClassify === 2" :active="+activeWidgetClassify === 2" />
-      <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" />
+      <keep-alive>
+        <component :is="widgetClassifyList[activeWidgetClassify].component" />
+      </keep-alive>
    </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">
--- a/src/components/modules/panel/wrap/BgImgListWrap.vue
+++ b/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>
- * @LastEditTime: 2023-07-10 22:55:41
+ * @LastEditors: rayadaschn 115447518+rayadaschn@users.noreply.github.com
+ * @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) => {
-        state.bgList.push(...list)
-        list.length < 0 && (state.loadDone = true)
+      await api.material.getImagesList({ cate: 16, page: pageOptions.page }).then(({ list }: any) => {
+        if (list.length > 0) {
+          state.bgList.push(...list)
+        } else {
+          state.loadDone = true
+        }
      })

      setTimeout(() => {
--- a/src/components/modules/panel/wrap/CompListWrap.vue
+++ b/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>
- * @LastEditTime: 2023-07-11 11:21:05
+ * @LastEditors: rayadaschn 115447518+rayadaschn@users.noreply.github.com
+ * @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(
-      () => props.active,
-      async (active) => {
-        if (active) {
-          if (!props.active || state.types.length > 0) {
-            return
-          }
-          const types = await api.material.getKinds({ type: 3 })
-          types.shift()
-          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)
-          }
+    onMounted(async () => {
+      if (state.types.length <= 0) {
+        const types = await api.material.getKinds({ type: 3 })
+        types.shift()
+        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)
        }
-      },
-    )
-    // onMounted(async () => {
-    // })
+      }
+    })
    const mouseup = (e: any) => {
      e.preventDefault()
      setTimeout(() => {
--- a/src/components/modules/panel/wrap/GraphListWrap.vue
+++ b/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>
- * @LastEditTime: 2023-07-17 15:19:22
+ * @LastEditors: rayadaschn 115447518+rayadaschn@users.noreply.github.com
+ * @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(
-      () => props.active,
-      async (active) => {
-        if (active) {
-          if (!props.active || state.types.length > 0) {
-            return
-          }
-          const types = await api.material.getKinds({ type: 2 })
-          types.shift()
-          state.types = types
-          for (const iterator of types) {
-            const { list } = await api.material.getList({
-              cate: iterator.id,
-              pageSize: 3,
-            })
-            state.showList.push(list)
-          }
+    onMounted(async () => {
+      if (state.types.length <= 0) {
+        const types = await api.material.getKinds({ type: 2 })
+        types.shift()
+        state.types = types
+        for (const iterator of types) {
+          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 }
--- a/src/components/modules/panel/wrap/PhotoListWrap.vue
+++ b/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>
- * @LastEditTime: 2023-07-10 16:27:41
+ * @LastEditors: rayadaschn 115447518+rayadaschn@users.noreply.github.com
+ * @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']),
--- a/src/components/modules/panel/wrap/TextListWrap.vue
+++ b/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
--- a/src/components/modules/panel/wrap/ToolsListWrap.vue
+++ b/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>
- * @LastEditTime: 2023-07-12 22:31:55
+ * @LastEditors: rayadaschn 115447518+rayadaschn@users.noreply.github.com
+ * @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(() => {
--- a/src/components/modules/panel/wrap/UserWrap.vue
+++ b/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>
- * @LastEditTime: 2023-07-14 01:03:40
+ * @LastEditors: rayadaschn 115447518+rayadaschn@users.noreply.github.com
+ * @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(
-      () => props.active,
-      () => {
-        if (props.active) {
-          state.showList = true
-          load(true)
-          nextTick(() => {
-            state.tabActiveName = 'pics'
-          })
-        }
-      },
-    )
+    onMounted(() => {
+      load(true)
+      nextTick(() => {
+        state.tabActiveName = 'pics'
+      })
+    })

    const selectImg = async (index: number) => {
      const item: any = state.imgList[index]