From aba72176c7547a29d2a4f8c08c3f6b81b1b0e3c7 Mon Sep 17 00:00:00 2001
From: Alice Peng <1399789151@qq.com>
Date: Tue, 9 Jul 2024 11:31:46 +0800
Subject: [PATCH 01/19] =?UTF-8?q?fix(component):=20=E7=B4=A0=E6=9D=90?=
 =?UTF-8?q?=E7=80=91=E5=B8=83=E6=B5=81=E5=B8=83=E5=B1=80=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/importTmpl.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/importTmpl.vue b/src/components/importTmpl.vue
index 7e5d8156..ca3a6642 100644
--- a/src/components/importTmpl.vue
+++ b/src/components/importTmpl.vue
@@ -148,10 +148,8 @@ const getTemplInfo = async () => {
 }
 
 .list-box {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-between;
+  column-count: 2;
+  column-gap: 10px;
 }
 
 .tmpl-img-box {

From 2773d0c451885d3273165a039f3b7ea4760c74de Mon Sep 17 00:00:00 2001
From: Alice Peng <1399789151@qq.com>
Date: Tue, 9 Jul 2024 12:01:36 +0800
Subject: [PATCH 02/19] =?UTF-8?q?fix(component):=20=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E7=A9=BA=E7=80=91=E5=B8=83=E6=B5=81=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/masonry.vue | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 src/components/common/masonry.vue

diff --git a/src/components/common/masonry.vue b/src/components/common/masonry.vue
new file mode 100644
index 00000000..10a29473
--- /dev/null
+++ b/src/components/common/masonry.vue
@@ -0,0 +1,13 @@
+<!--
+ * @Author: AliceLanniste
+ * @Date: 2024-07-09
+
+ * @Description: 瀑布流
+-->
+
+<template>
+  <div></div>
+</template>
+
+<script name="masonry" setup></script>
+<style scoped lang="less"></style>

From c41a7541b5ca46db63a7b40bed84720361d6eab3 Mon Sep 17 00:00:00 2001
From: Alice Peng <1399789151@qq.com>
Date: Wed, 10 Jul 2024 11:15:04 +0800
Subject: [PATCH 03/19] =?UTF-8?q?feat(component):=20=E7=80=91=E5=B8=83?=
 =?UTF-8?q?=E6=B5=81=E5=A2=9E=E5=8A=A0=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/masonry.vue | 29 +++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/components/common/masonry.vue b/src/components/common/masonry.vue
index 10a29473..62ba92a5 100644
--- a/src/components/common/masonry.vue
+++ b/src/components/common/masonry.vue
@@ -6,8 +6,33 @@
 -->
 
 <template>
-  <div></div>
+  <div class="masonry-container">
+    <div class="masonry-list">
+      <div class="masonry-item"></div>
+    </div>
+  </div>
 </template>
 
 <script name="masonry" setup></script>
-<style scoped lang="less"></style>
+<style scoped lang="less">
+.masonry {
+  &-container {
+    width: 100%;
+    height: 100%;
+    overflow-y: scroll;
+    overflow-x: hidden;
+  }
+
+  &-list {
+    position: relative;
+    width: 100%;
+  }
+
+  &-item {
+    position: absolute;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+  }
+}
+</style>

From 1015050d6b2cec96f18a87d3dc170b8f217a7af3 Mon Sep 17 00:00:00 2001
From: Alice Peng <1399789151@qq.com>
Date: Wed, 10 Jul 2024 13:36:25 +0800
Subject: [PATCH 04/19] =?UTF-8?q?feat(component):=20=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E8=BF=94=E5=9B=9E=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/pageList.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/hooks/pageList.js b/src/hooks/pageList.js
index 94ae8286..abdbecda 100644
--- a/src/hooks/pageList.js
+++ b/src/hooks/pageList.js
@@ -146,12 +146,17 @@ export default function usePageList({
         fields
       );
       const res = await pageApi(listUrl, params);
+
       const list = res.data.data.map((item) => {
+        const height = item.attributes.img.data.attributes.formats.small.height;
+        const width = item.attributes.img.data.attributes.formats.small.width;
         return {
           id: item.id,
           name: item.attributes.name,
           desc: item.attributes.desc,
           json: item.attributes?.json,
+          height: height,
+          width: width,
           src: getMaterialInfoUrl(item.attributes.img),
           previewSrc: getMaterialPreviewUrl(item.attributes.img),
         };
@@ -164,6 +169,11 @@ export default function usePageList({
       console.log(error);
     }
     pageLoading.value = false;
+    if (pageData.value.length) {
+      return pageData.value;
+    } else {
+      return [];
+    }
   };
 
   const startGetList = () => {
@@ -203,6 +213,8 @@ export default function usePageList({
     isDownBottm,
     startGetList,
     nextPage,
+    getTypeList,
+    getPageData,
     scrollHeight,
     showScroll,
     getInfo,

From 2cfea0d6697f3c5ef2c344596b9a1e775701b154 Mon Sep 17 00:00:00 2001
From: Alice Peng <1399789151@qq.com>
Date: Wed, 10 Jul 2024 13:36:59 +0800
Subject: [PATCH 05/19] =?UTF-8?q?feat(component):=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E7=80=91=E5=B8=83=E6=B5=81=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/masonry.vue | 252 ++++++++++++++++++++++++++++--
 1 file changed, 239 insertions(+), 13 deletions(-)

diff --git a/src/components/common/masonry.vue b/src/components/common/masonry.vue
index 62ba92a5..aec5ba02 100644
--- a/src/components/common/masonry.vue
+++ b/src/components/common/masonry.vue
@@ -1,19 +1,247 @@
-<!--
- * @Author: AliceLanniste
- * @Date: 2024-07-09
-
- * @Description: 瀑布流
--->
-
 <template>
-  <div class="masonry-container">
-    <div class="masonry-list">
-      <div class="masonry-item"></div>
+  <div class="masonry-container" ref="containerRef" @scroll="handleScroll">
+    <div class="masonry-list" :style="listStyle">
+      <div class="masonry-item" v-for="{ item, style } in renderList" :key="item.id" :style="style">
+        <slot name="item" :item="item"></slot>
+      </div>
     </div>
   </div>
 </template>
 
-<script name="masonry" setup></script>
+<script setup lang="ts">
+import { CSSProperties, computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
+
+import debounce from 'lodash-es/debounce';
+import { throttle } from 'lodash-es';
+
+export interface IVirtualWaterFallProps {
+  gap: number;
+  column: number;
+  pageSize: number;
+  enterSize?: number;
+  request: (page: number, pageSize: number) => Promise<ICardItem[]>;
+}
+
+export interface ICardItem {
+  id: number | string;
+  width: number;
+  height: number;
+  [key: string]: any;
+}
+
+export interface IColumnQueue {
+  list: IRenderItem[];
+  height: number;
+}
+
+// 渲染视图项
+export interface IRenderItem {
+  item: ICardItem;
+  y: number;
+  h: number;
+  style: CSSProperties;
+}
+
+export interface IItemRect {
+  width: number;
+  height: number;
+}
+
+export interface IBookColumnQueue {
+  list: IBookRenderItem[];
+  height: number;
+}
+
+export interface IBookRenderItem {
+  item: ICardItem;
+  y: number;
+  h: number;
+  imageHeight: number;
+  style: CSSProperties;
+}
+
+export interface IBookItemRect {
+  width: number;
+  height: number;
+  imageHeight: number;
+}
+
+const props = defineProps<IVirtualWaterFallProps>();
+
+defineSlots<{
+  item(props: { item: ICardItem }): any;
+}>();
+
+const containerRef = ref<HTMLDivElement | null>(null);
+
+const resizeObserver = new ResizeObserver(() => {
+  handleResize();
+});
+
+const dataState = reactive({
+  loading: false,
+  isFinish: false,
+  currentPage: 1,
+  list: [] as ICardItem[],
+});
+
+const scrollState = reactive({
+  viewWidth: 0,
+  viewHeight: 0,
+  start: 0,
+});
+
+const queueState = reactive({
+  queue: new Array(props.column).fill(0).map<IColumnQueue>(() => ({ list: [], height: 0 })),
+  len: 0,
+});
+
+const itemSizeInfo = computed(() =>
+  dataState.list.reduce<Map<ICardItem['id'], IItemRect>>((pre, current) => {
+    const itemWidth = Math.floor(
+      (scrollState.viewWidth - (props.column - 1) * props.gap) / props.column
+    );
+    pre.set(current.id, {
+      width: itemWidth,
+      height: Math.floor((itemWidth * current.height) / current.width),
+    });
+    return pre;
+  }, new Map())
+);
+
+const end = computed(() => scrollState.viewHeight + scrollState.start);
+
+const cardList = computed(() =>
+  queueState.queue.reduce<IRenderItem[]>((pre, { list }) => pre.concat(list), [])
+);
+
+const renderList = computed(() =>
+  cardList.value.filter((i) => i.h + i.y > scrollState.start && i.y < end.value)
+);
+
+const computedHeight = computed(() => {
+  let minIndex = 0,
+    minHeight = Infinity,
+    maxHeight = -Infinity;
+  queueState.queue.forEach(({ height }, index) => {
+    if (height < minHeight) {
+      minHeight = height;
+      minIndex = index;
+    }
+    if (height > maxHeight) {
+      maxHeight = height;
+    }
+  });
+  return {
+    minIndex,
+    minHeight,
+    maxHeight,
+  };
+});
+
+const listStyle = computed(
+  () => ({ height: `${computedHeight.value.maxHeight}px` } as CSSProperties)
+);
+
+watch(
+  () => props.column,
+  () => {
+    handleResize();
+  }
+);
+
+const addInQueue = (size = props.pageSize) => {
+  for (let i = 0; i < size; i++) {
+    const minIndex = computedHeight.value.minIndex;
+    const currentColumn = queueState.queue[minIndex];
+    const before = currentColumn.list[currentColumn.list.length - 1] || null;
+    const dataItem = dataState.list[queueState.len];
+    const item = generatorItem(dataItem, before, minIndex);
+    currentColumn.list.push(item);
+    currentColumn.height += item.h;
+    queueState.len++;
+  }
+};
+
+const generatorItem = (item: ICardItem, before: IRenderItem | null, index: number): IRenderItem => {
+  const rect = itemSizeInfo.value.get(item.id);
+  const width = rect!.width;
+  const height = rect!.height;
+  let y = 0;
+  if (before) y = before.y + before.h + props.gap;
+
+  return {
+    item,
+    y,
+    h: height,
+    style: {
+      width: `${width}px`,
+      height: `${height}px`,
+      transform: `translate3d(${index === 0 ? 0 : (width + props.gap) * index}px, ${y}px, 0)`,
+    },
+  };
+};
+
+const loadDataList = async () => {
+  if (dataState.isFinish) return;
+  dataState.loading = true;
+  const list = await props.request(dataState.currentPage++, props.pageSize);
+
+  if (!list.length) {
+    dataState.isFinish = true;
+    return;
+  }
+  dataState.list.push(...list);
+  dataState.loading = false;
+  return list.length;
+};
+
+const handleScroll = throttle(() => {
+  const { scrollTop, clientHeight } = containerRef.value!;
+  scrollState.start = scrollTop;
+  if (scrollTop + clientHeight > computedHeight.value.minHeight) {
+    !dataState.loading &&
+      loadDataList().then((len) => {
+        len && addInQueue(len);
+      });
+  }
+});
+
+const handleResize = debounce(() => {
+  initScrollState();
+  reComputedQueue();
+}, 300);
+
+const reComputedQueue = () => {
+  queueState.queue = new Array(props.column)
+    .fill(0)
+    .map<IColumnQueue>(() => ({ list: [], height: 0 }));
+  queueState.len = 0;
+  addInQueue(dataState.list.length);
+};
+
+const initScrollState = () => {
+  scrollState.viewWidth = containerRef.value!.clientWidth;
+  scrollState.viewHeight = containerRef.value!.clientHeight;
+  scrollState.start = containerRef.value!.scrollTop;
+};
+
+const init = async () => {
+  initScrollState();
+  resizeObserver.observe(containerRef.value!);
+  const len = await loadDataList();
+  len && addInQueue(len);
+};
+
+onMounted(() => {
+  init();
+});
+
+onUnmounted(() => {
+  resizeObserver.unobserve(containerRef.value!);
+});
+</script>
+
 <style scoped lang="less">
 .masonry {
   &-container {
@@ -22,12 +250,10 @@
     overflow-y: scroll;
     overflow-x: hidden;
   }
-
   &-list {
     position: relative;
     width: 100%;
   }
-
   &-item {
     position: absolute;
     top: 0;

From 1f73bf322d4ef6627a5f2af60abbac5ca3a93f3f Mon Sep 17 00:00:00 2001
From: Alice Peng <1399789151@qq.com>
Date: Wed, 10 Jul 2024 13:37:47 +0800
Subject: [PATCH 06/19] =?UTF-8?q?feat(component):=20=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E7=B4=A0=E6=9D=90=E5=88=97=E8=A1=A8=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/importTmpl.vue | 37 ++++++++++++++---------------------
 1 file changed, 15 insertions(+), 22 deletions(-)

diff --git a/src/components/importTmpl.vue b/src/components/importTmpl.vue
index 7e5d8156..24fe3f71 100644
--- a/src/components/importTmpl.vue
+++ b/src/components/importTmpl.vue
@@ -26,32 +26,22 @@
     </div>
     <!-- 列表 -->
     <div style="height: calc(100vh - 108px)" id="myTemplBox">
-      <Scroll
-        key="mysscroll"
-        v-if="showScroll"
-        :on-reach-bottom="nextPage"
-        :height="scrollHeight"
-        :distance-to-edge="[-1, -1]"
-      >
-        <!-- 列表 -->
-        <div class="list-box">
-          <Tooltip :content="info.name" v-for="info in pageData" :key="info.src" placement="top">
+      <masonry :request="getPageData" :gap="9" :page-size="10" :column="column">
+        <template #item="{ item }">
+          <Tooltip :content="item.name" :key="item.src" placement="top">
             <div class="tmpl-img-box">
               <Image
                 lazy
-                :src="info.previewSrc"
+                :src="item.previewSrc"
                 fit="contain"
                 height="100%"
-                :alt="info.name"
-                @click="beforeClearTip(info)"
+                :alt="item.name"
+                @click="beforeClearTip(item)"
               />
             </div>
           </Tooltip>
-        </div>
-        <Spin size="large" fix :show="pageLoading"></Spin>
-
-        <Divider plain v-if="isDownBottm">已经到底了</Divider>
-      </Scroll>
+        </template>
+      </masonry>
     </div>
   </div>
 </template>
@@ -60,16 +50,18 @@
 import useSelect from '@/hooks/select';
 import usePageList from '@/hooks/pageList';
 import { Spin, Modal } from 'view-ui-plus';
-
+import masonry from './common/masonry.vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter, useRoute } from 'vue-router';
 const router = useRouter();
 const route = useRoute();
 const { t } = useI18n();
 const { canvasEditor } = useSelect();
-
+const column = ref(2);
 const {
   startPage,
+  getTypeList,
+  getPageData,
   typeValue,
   typeText,
   typeList,
@@ -104,8 +96,9 @@ const beforeClearTip = (info) => {
 };
 
 onMounted(() => {
-  startPage();
-  getTemplInfo();
+  // startPage();
+  getTypeList();
+  // getTemplInfo();
 });
 
 // 获取模板数据

From 3843653608191e1213c080d27a143bb869e8d9ff Mon Sep 17 00:00:00 2001
From: Alice Peng <1399789151@qq.com>
Date: Wed, 10 Jul 2024 21:05:13 +0800
Subject: [PATCH 07/19] =?UTF-8?q?feat(component):=20getPageData=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/pageList.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/hooks/pageList.js b/src/hooks/pageList.js
index abdbecda..f8c4211c 100644
--- a/src/hooks/pageList.js
+++ b/src/hooks/pageList.js
@@ -133,11 +133,11 @@ export default function usePageList({
     pageLoading.value = false;
   };
 
-  const getPageData = async () => {
+  const getPageData = async (page, pageSize) => {
     pageLoading.value = true;
     try {
       const params = getPageParams(
-        page.value,
+        page,
         typeValue.value,
         searchKeyWord.value,
         searchTypeKey,

From 54fd033d4a1a25a91e74a20495b86626b75a32e2 Mon Sep 17 00:00:00 2001
From: Alice Peng <1399789151@qq.com>
Date: Wed, 10 Jul 2024 21:06:08 +0800
Subject: [PATCH 08/19] =?UTF-8?q?feat(component):=20=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E7=80=91=E5=B8=83=E6=B5=81=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/masonry.vue | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/common/masonry.vue b/src/components/common/masonry.vue
index aec5ba02..db4026ca 100644
--- a/src/components/common/masonry.vue
+++ b/src/components/common/masonry.vue
@@ -19,7 +19,7 @@ export interface IVirtualWaterFallProps {
   column: number;
   pageSize: number;
   enterSize?: number;
-  request: (page: number, pageSize: number) => Promise<ICardItem[]>;
+  request: ICardItem[] | ((page: number, pageSize: number) => Promise<ICardItem[]>);
 }
 
 export interface ICardItem {
@@ -177,7 +177,7 @@ const generatorItem = (item: ICardItem, before: IRenderItem | null, index: numbe
     style: {
       width: `${width}px`,
       height: `${height}px`,
-      transform: `translate3d(${index === 0 ? 0 : (width + props.gap) * index}px, ${y}px, 0)`,
+      transform: `translate(${index === 0 ? 0 : (width + props.gap) * index}px, ${y}px)`,
     },
   };
 };
@@ -185,13 +185,17 @@ const generatorItem = (item: ICardItem, before: IRenderItem | null, index: numbe
 const loadDataList = async () => {
   if (dataState.isFinish) return;
   dataState.loading = true;
-  const list = await props.request(dataState.currentPage++, props.pageSize);
-
+  let list = [];
+  if (!Array.isArray(props.request)) {
+    list = await props.request(dataState.currentPage++, props.pageSize);
+  } else {
+    list = props.request;
+  }
   if (!list.length) {
     dataState.isFinish = true;
     return;
   }
-  dataState.list.push(...list);
+  dataState.list = list;
   dataState.loading = false;
   return list.length;
 };
@@ -199,6 +203,7 @@ const loadDataList = async () => {
 const handleScroll = throttle(() => {
   const { scrollTop, clientHeight } = containerRef.value!;
   scrollState.start = scrollTop;
+  console.log('handleScroll', dataState.list);
   if (scrollTop + clientHeight > computedHeight.value.minHeight) {
     !dataState.loading &&
       loadDataList().then((len) => {

From 3cfad666623053227beaf90308700db005e7383e Mon Sep 17 00:00:00 2001
From: Alice Peng <1399789151@qq.com>
Date: Wed, 10 Jul 2024 21:51:34 +0800
Subject: [PATCH 09/19] =?UTF-8?q?feat(component):=20=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E6=B8=B2=E6=9F=93=E5=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/masonry.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/common/masonry.vue b/src/components/common/masonry.vue
index db4026ca..6467b06d 100644
--- a/src/components/common/masonry.vue
+++ b/src/components/common/masonry.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="masonry-container" ref="containerRef" @scroll="handleScroll">
     <div class="masonry-list" :style="listStyle">
-      <div class="masonry-item" v-for="{ item, style } in renderList" :key="item.id" :style="style">
+      <div class="masonry-item" v-for="{ item, style } in cardList" :key="item.id" :style="style">
         <slot name="item" :item="item"></slot>
       </div>
     </div>

From 15c87ebb5e4e788d61ba0b83d813c4cbb9fcce46 Mon Sep 17 00:00:00 2001
From: Alice Peng <1399789151@qq.com>
Date: Wed, 10 Jul 2024 21:51:58 +0800
Subject: [PATCH 10/19] =?UTF-8?q?feat(component):=20=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=E5=86=97=E4=BD=99=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/masonry.vue | 23 -----------------------
 1 file changed, 23 deletions(-)

diff --git a/src/components/common/masonry.vue b/src/components/common/masonry.vue
index 6467b06d..1466b2bf 100644
--- a/src/components/common/masonry.vue
+++ b/src/components/common/masonry.vue
@@ -47,25 +47,6 @@ export interface IItemRect {
   height: number;
 }
 
-export interface IBookColumnQueue {
-  list: IBookRenderItem[];
-  height: number;
-}
-
-export interface IBookRenderItem {
-  item: ICardItem;
-  y: number;
-  h: number;
-  imageHeight: number;
-  style: CSSProperties;
-}
-
-export interface IBookItemRect {
-  width: number;
-  height: number;
-  imageHeight: number;
-}
-
 const props = defineProps<IVirtualWaterFallProps>();
 
 defineSlots<{
@@ -115,10 +96,6 @@ const cardList = computed(() =>
   queueState.queue.reduce<IRenderItem[]>((pre, { list }) => pre.concat(list), [])
 );
 
-const renderList = computed(() =>
-  cardList.value.filter((i) => i.h + i.y > scrollState.start && i.y < end.value)
-);
-
 const computedHeight = computed(() => {
   let minIndex = 0,
     minHeight = Infinity,

From c029c52b74a4a5b92daaea058e6412ec5df6ab03 Mon Sep 17 00:00:00 2001
From: Alice Peng <1399789151@qq.com>
Date: Fri, 12 Jul 2024 08:59:12 +0800
Subject: [PATCH 11/19] =?UTF-8?q?feat(component):=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/masonry.vue | 268 +++++++++++-------------------
 src/components/importTmpl.vue     |   2 +-
 src/hooks/pageList.js             |  23 ++-
 3 files changed, 112 insertions(+), 181 deletions(-)

diff --git a/src/components/common/masonry.vue b/src/components/common/masonry.vue
index 1466b2bf..4520e191 100644
--- a/src/components/common/masonry.vue
+++ b/src/components/common/masonry.vue
@@ -1,227 +1,151 @@
 <template>
   <div class="masonry-container" ref="containerRef" @scroll="handleScroll">
-    <div class="masonry-list" :style="listStyle">
-      <div class="masonry-item" v-for="{ item, style } in cardList" :key="item.id" :style="style">
-        <slot name="item" :item="item"></slot>
+    <div class="masonry-list">
+      <div
+        class="masonry-item"
+        v-for="(item, index) in dataState.cardList"
+        :key="item.id"
+        :style="{
+          width: `${dataState.cardPos[index].width}px`,
+          height: `${dataState.cardPos[index].height}px`,
+          transform: `translate(${dataState.cardPos[index].x}px, ${dataState.cardPos[index].y}px)`,
+        }"
+      >
+        <slot name="item" :item="item" :index="index"></slot>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { CSSProperties, computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
-
-import debounce from 'lodash-es/debounce';
 import { throttle } from 'lodash-es';
-
 export interface IVirtualWaterFallProps {
-  gap: number;
-  column: number;
-  pageSize: number;
-  enterSize?: number;
-  request: ICardItem[] | ((page: number, pageSize: number) => Promise<ICardItem[]>);
+  gap: number; // 卡片间隔
+  column: number; // 瀑布流列数
+  bottom: number;
+  pageSize: number; // 单次请求数据数量
+  request?: (page: number, pageSize: number) => Promise<ICardItem[]>; // 数据请求方法
 }
 
 export interface ICardItem {
   id: number | string;
+  url: string;
   width: number;
   height: number;
   [key: string]: any;
 }
 
-export interface IColumnQueue {
-  list: IRenderItem[];
-  height: number;
-}
-
-// 渲染视图项
-export interface IRenderItem {
-  item: ICardItem;
-  y: number;
-  h: number;
-  style: CSSProperties;
-}
-
-export interface IItemRect {
+export interface ICardPos {
   width: number;
   height: number;
+  x: number;
+  y: number;
 }
 
 const props = defineProps<IVirtualWaterFallProps>();
 
 defineSlots<{
-  item(props: { item: ICardItem }): any;
+  item(props: { item: ICardItem; index: number }): any;
 }>();
+const dataState = reactive({
+  isFinish: false,
+  page: 1,
+  cardWidth: 0,
+  cardList: [] as ICardItem[],
+  cardPos: [] as ICardPos[],
+  loading: false,
+  columnHeight: new Array(props.column).fill(0) as number[],
+});
 
 const containerRef = ref<HTMLDivElement | null>(null);
 
-const resizeObserver = new ResizeObserver(() => {
-  handleResize();
-});
+const getCardList = async (page: number, pageSize: number) => {
+  if (dataState.isFinish) return;
+  dataState.loading = true;
+  const list = await props.request(page, pageSize);
+  dataState.page++;
+  if (!list.length) {
+    dataState.isFinish = true;
+    return;
+  }
+  dataState.loading = false;
+  console.log('getCardList', list);
+  dataState.cardList = [...dataState.cardList, ...list];
+  computedCardPos(list); // key：根据请求的数据计算卡片位置
+};
 
-const dataState = reactive({
-  loading: false,
-  isFinish: false,
-  currentPage: 1,
-  list: [] as ICardItem[],
-});
+const computedWidth = async () => {
+  const containerWidth = containerRef.value.clientWidth;
+  dataState.cardWidth = (containerWidth - props.gap * (props.column - 1)) / props.column;
+  await getCardList(dataState.page, props.pageSize);
+};
 
-const scrollState = reactive({
-  viewWidth: 0,
-  viewHeight: 0,
-  start: 0,
-});
+const init = async () => {
+  if (containerRef.value) {
+    await computedWidth();
+  }
+};
 
-const queueState = reactive({
-  queue: new Array(props.column).fill(0).map<IColumnQueue>(() => ({ list: [], height: 0 })),
-  len: 0,
-});
+const minColumn = computed(() => {
+  let minIndex = -1,
+    minHeight = Infinity;
 
-const itemSizeInfo = computed(() =>
-  dataState.list.reduce<Map<ICardItem['id'], IItemRect>>((pre, current) => {
-    const itemWidth = Math.floor(
-      (scrollState.viewWidth - (props.column - 1) * props.gap) / props.column
-    );
-    pre.set(current.id, {
-      width: itemWidth,
-      height: Math.floor((itemWidth * current.height) / current.width),
-    });
-    return pre;
-  }, new Map())
-);
-
-const end = computed(() => scrollState.viewHeight + scrollState.start);
-
-const cardList = computed(() =>
-  queueState.queue.reduce<IRenderItem[]>((pre, { list }) => pre.concat(list), [])
-);
-
-const computedHeight = computed(() => {
-  let minIndex = 0,
-    minHeight = Infinity,
-    maxHeight = -Infinity;
-  queueState.queue.forEach(({ height }, index) => {
-    if (height < minHeight) {
-      minHeight = height;
+  dataState.columnHeight.forEach((item, index) => {
+    if (item < minHeight) {
+      minHeight = item;
       minIndex = index;
     }
-    if (height > maxHeight) {
-      maxHeight = height;
-    }
   });
+
   return {
     minIndex,
     minHeight,
-    maxHeight,
   };
 });
 
-const listStyle = computed(
-  () => ({ height: `${computedHeight.value.maxHeight}px` } as CSSProperties)
-);
-
-watch(
-  () => props.column,
-  () => {
-    handleResize();
-  }
-);
-
-const addInQueue = (size = props.pageSize) => {
-  for (let i = 0; i < size; i++) {
-    const minIndex = computedHeight.value.minIndex;
-    const currentColumn = queueState.queue[minIndex];
-    const before = currentColumn.list[currentColumn.list.length - 1] || null;
-    const dataItem = dataState.list[queueState.len];
-    const item = generatorItem(dataItem, before, minIndex);
-    currentColumn.list.push(item);
-    currentColumn.height += item.h;
-    queueState.len++;
-  }
-};
-
-const generatorItem = (item: ICardItem, before: IRenderItem | null, index: number): IRenderItem => {
-  const rect = itemSizeInfo.value.get(item.id);
-  const width = rect!.width;
-  const height = rect!.height;
-  let y = 0;
-  if (before) y = before.y + before.h + props.gap;
-
-  return {
-    item,
-    y,
-    h: height,
-    style: {
-      width: `${width}px`,
-      height: `${height}px`,
-      transform: `translate(${index === 0 ? 0 : (width + props.gap) * index}px, ${y}px)`,
-    },
-  };
-};
+const computedCardPos = (list: ICardItem[]) => {
+  list.forEach((item, index) => {
+    const cardHeight = Math.floor((item.height * dataState.cardWidth) / item.width);
+    if (index < props.column && dataState.cardList.length <= props.pageSize) {
+      dataState.cardPos.push({
+        width: dataState.cardWidth,
+        height: cardHeight,
+        x: index ? index * (dataState.cardWidth + props.gap) : 0,
+        y: 0,
+      });
 
-const loadDataList = async () => {
-  if (dataState.isFinish) return;
-  dataState.loading = true;
-  let list = [];
-  if (!Array.isArray(props.request)) {
-    list = await props.request(dataState.currentPage++, props.pageSize);
-  } else {
-    list = props.request;
-  }
-  if (!list.length) {
-    dataState.isFinish = true;
-    return;
-  }
-  dataState.list = list;
-  dataState.loading = false;
-  return list.length;
+      dataState.columnHeight[index] = cardHeight + props.gap;
+      console.log('item', index, item, cardHeight);
+    } else {
+      const { minIndex, minHeight } = minColumn.value;
+      if (index == 11) {
+        console.log('11 column item', index, item, cardHeight, dataState);
+      }
+      dataState.cardPos.push({
+        width: dataState.cardWidth,
+        height: cardHeight,
+        x: minIndex ? minIndex * (dataState.cardWidth + props.gap) : 0,
+        y: minHeight,
+      });
+      dataState.columnHeight[minIndex] += cardHeight + props.gap;
+      if (index == 11) {
+        console.log('not column item', index, item, cardHeight, dataState.cardPos[11]);
+      }
+    }
+  });
 };
 
 const handleScroll = throttle(() => {
-  const { scrollTop, clientHeight } = containerRef.value!;
-  scrollState.start = scrollTop;
-  console.log('handleScroll', dataState.list);
-  if (scrollTop + clientHeight > computedHeight.value.minHeight) {
-    !dataState.loading &&
-      loadDataList().then((len) => {
-        len && addInQueue(len);
-      });
+  const { scrollTop, clientHeight, scrollHeight } = containerRef.value!;
+  const bottom = scrollHeight - clientHeight - scrollTop;
+  if (bottom <= props.bottom) {
+    !dataState.loading && getCardList(dataState.page, props.pageSize);
   }
-});
-
-const handleResize = debounce(() => {
-  initScrollState();
-  reComputedQueue();
-}, 300);
-
-const reComputedQueue = () => {
-  queueState.queue = new Array(props.column)
-    .fill(0)
-    .map<IColumnQueue>(() => ({ list: [], height: 0 }));
-  queueState.len = 0;
-  addInQueue(dataState.list.length);
-};
-
-const initScrollState = () => {
-  scrollState.viewWidth = containerRef.value!.clientWidth;
-  scrollState.viewHeight = containerRef.value!.clientHeight;
-  scrollState.start = containerRef.value!.scrollTop;
-};
-
-const init = async () => {
-  initScrollState();
-  resizeObserver.observe(containerRef.value!);
-  const len = await loadDataList();
-  len && addInQueue(len);
-};
+}, 50);
 
 onMounted(() => {
   init();
 });
-
-onUnmounted(() => {
-  resizeObserver.unobserve(containerRef.value!);
-});
 </script>
 
 <style scoped lang="less">
diff --git a/src/components/importTmpl.vue b/src/components/importTmpl.vue
index 24fe3f71..39e35e9d 100644
--- a/src/components/importTmpl.vue
+++ b/src/components/importTmpl.vue
@@ -26,7 +26,7 @@
     </div>
     <!-- 列表 -->
     <div style="height: calc(100vh - 108px)" id="myTemplBox">
-      <masonry :request="getPageData" :gap="9" :page-size="10" :column="column">
+      <masonry :request="getPageData" :gap="9" :page-size="10" :column="column" :bottom="20">
         <template #item="{ item }">
           <Tooltip :content="item.name" :key="item.src" placement="top">
             <div class="tmpl-img-box">
diff --git a/src/hooks/pageList.js b/src/hooks/pageList.js
index f8c4211c..b8974712 100644
--- a/src/hooks/pageList.js
+++ b/src/hooks/pageList.js
@@ -148,8 +148,10 @@ export default function usePageList({
       const res = await pageApi(listUrl, params);
 
       const list = res.data.data.map((item) => {
-        const height = item.attributes.img.data.attributes.formats.small.height;
-        const width = item.attributes.img.data.attributes.formats.small.width;
+        let small = item.attributes.img.data.attributes.formats.small;
+        let thumbnail = item.attributes.img.data.attributes.formats.thumbnail;
+        const height = small ? small.height : thumbnail.height;
+        const width = small ? small.width : thumbnail.width;
         return {
           id: item.id,
           name: item.attributes.name,
@@ -164,16 +166,21 @@ export default function usePageList({
       Object.keys(res.data.meta.pagination).forEach((key) => {
         pagination[key] = res.data.meta.pagination[key];
       });
-      pageData.value = [...pageData.value, ...list];
+      // pageData.value = [...pageData.value, ...list];
+      if (list.length) {
+        return list;
+      } else {
+        return [];
+      }
     } catch (error) {
       console.log(error);
     }
     pageLoading.value = false;
-    if (pageData.value.length) {
-      return pageData.value;
-    } else {
-      return [];
-    }
+    // if (list.length) {
+    //   return pageData.value;
+    // } else {
+    //   return [];
+    // }
   };
 
   const startGetList = () => {

From e691625a4dcbb3f057b0a40dc226a7ab130349af Mon Sep 17 00:00:00 2001
From: Alice Peng <1399789151@qq.com>
Date: Fri, 12 Jul 2024 08:59:41 +0800
Subject: [PATCH 12/19] =?UTF-8?q?feat(component):=20=E7=A7=BB=E9=99=A4?=
 =?UTF-8?q?=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/masonry.vue | 21 +++++++--------------
 src/hooks/pageList.js             |  6 ------
 2 files changed, 7 insertions(+), 20 deletions(-)

diff --git a/src/components/common/masonry.vue b/src/components/common/masonry.vue
index 4520e191..b2b0c734 100644
--- a/src/components/common/masonry.vue
+++ b/src/components/common/masonry.vue
@@ -19,15 +19,15 @@
 
 <script setup lang="ts">
 import { throttle } from 'lodash-es';
-export interface IVirtualWaterFallProps {
-  gap: number; // 卡片间隔
-  column: number; // 瀑布流列数
+interface IVirtualWaterFallProps {
+  gap: number;
+  column: number;
   bottom: number;
   pageSize: number; // 单次请求数据数量
-  request?: (page: number, pageSize: number) => Promise<ICardItem[]>; // 数据请求方法
+  request?: (page: number, pageSize: number) => Promise<ICardItem[]>;
 }
 
-export interface ICardItem {
+interface ICardItem {
   id: number | string;
   url: string;
   width: number;
@@ -35,7 +35,7 @@ export interface ICardItem {
   [key: string]: any;
 }
 
-export interface ICardPos {
+interface ICardPos {
   width: number;
   height: number;
   x: number;
@@ -71,7 +71,7 @@ const getCardList = async (page: number, pageSize: number) => {
   dataState.loading = false;
   console.log('getCardList', list);
   dataState.cardList = [...dataState.cardList, ...list];
-  computedCardPos(list); // key：根据请求的数据计算卡片位置
+  computedCardPos(list);
 };
 
 const computedWidth = async () => {
@@ -115,12 +115,8 @@ const computedCardPos = (list: ICardItem[]) => {
       });
 
       dataState.columnHeight[index] = cardHeight + props.gap;
-      console.log('item', index, item, cardHeight);
     } else {
       const { minIndex, minHeight } = minColumn.value;
-      if (index == 11) {
-        console.log('11 column item', index, item, cardHeight, dataState);
-      }
       dataState.cardPos.push({
         width: dataState.cardWidth,
         height: cardHeight,
@@ -128,9 +124,6 @@ const computedCardPos = (list: ICardItem[]) => {
         y: minHeight,
       });
       dataState.columnHeight[minIndex] += cardHeight + props.gap;
-      if (index == 11) {
-        console.log('not column item', index, item, cardHeight, dataState.cardPos[11]);
-      }
     }
   });
 };
diff --git a/src/hooks/pageList.js b/src/hooks/pageList.js
index b8974712..a0bca174 100644
--- a/src/hooks/pageList.js
+++ b/src/hooks/pageList.js
@@ -166,7 +166,6 @@ export default function usePageList({
       Object.keys(res.data.meta.pagination).forEach((key) => {
         pagination[key] = res.data.meta.pagination[key];
       });
-      // pageData.value = [...pageData.value, ...list];
       if (list.length) {
         return list;
       } else {
@@ -176,11 +175,6 @@ export default function usePageList({
       console.log(error);
     }
     pageLoading.value = false;
-    // if (list.length) {
-    //   return pageData.value;
-    // } else {
-    //   return [];
-    // }
   };
 
   const startGetList = () => {

From dbbe6aa85eef6e35388e17dd636557e0e967e2f8 Mon Sep 17 00:00:00 2001
From: Alice Peng <1399789151@qq.com>
Date: Fri, 12 Jul 2024 09:06:09 +0800
Subject: [PATCH 13/19] =?UTF-8?q?feat(component):=20=E5=8A=A0=E5=85=A5load?=
 =?UTF-8?q?ing=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/masonry.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/common/masonry.vue b/src/components/common/masonry.vue
index b2b0c734..1e8a4ac6 100644
--- a/src/components/common/masonry.vue
+++ b/src/components/common/masonry.vue
@@ -14,6 +14,7 @@
         <slot name="item" :item="item" :index="index"></slot>
       </div>
     </div>
+    <Spin size="large" fix :show="dataState.loading"></Spin>
   </div>
 </template>
 
@@ -64,13 +65,13 @@ const getCardList = async (page: number, pageSize: number) => {
   dataState.loading = true;
   const list = await props.request(page, pageSize);
   dataState.page++;
+  dataState.loading = false;
   if (!list.length) {
     dataState.isFinish = true;
     return;
   }
-  dataState.loading = false;
-  console.log('getCardList', list);
   dataState.cardList = [...dataState.cardList, ...list];
+
   computedCardPos(list);
 };
 

From 277ba8237269a69dddff5a904a19858d6be3b651 Mon Sep 17 00:00:00 2001
From: Alice Peng <1399789151@qq.com>
Date: Fri, 12 Jul 2024 10:41:05 +0800
Subject: [PATCH 14/19] =?UTF-8?q?feat(component):=20=E5=8A=A0=E5=85=A5Mess?=
 =?UTF-8?q?age=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/masonry.vue | 33 ++++++++++++++++++++++++++++---
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/components/common/masonry.vue b/src/components/common/masonry.vue
index 1e8a4ac6..eb11138b 100644
--- a/src/components/common/masonry.vue
+++ b/src/components/common/masonry.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script setup lang="ts">
-import { throttle } from 'lodash-es';
+import { Message } from 'view-ui-plus';
 interface IVirtualWaterFallProps {
   gap: number;
   column: number;
@@ -61,13 +61,20 @@ const dataState = reactive({
 const containerRef = ref<HTMLDivElement | null>(null);
 
 const getCardList = async (page: number, pageSize: number) => {
-  if (dataState.isFinish) return;
+  if (dataState.isFinish) {
+    return;
+  }
   dataState.loading = true;
   const list = await props.request(page, pageSize);
   dataState.page++;
   dataState.loading = false;
   if (!list.length) {
     dataState.isFinish = true;
+    console.log('dataState', dataState.isFinish);
+    Message.info({
+      content: '已经到底了',
+      duration: 0,
+    });
     return;
   }
   dataState.cardList = [...dataState.cardList, ...list];
@@ -129,7 +136,7 @@ const computedCardPos = (list: ICardItem[]) => {
   });
 };
 
-const handleScroll = throttle(() => {
+const handleScroll = rafThrottle(() => {
   const { scrollTop, clientHeight, scrollHeight } = containerRef.value!;
   const bottom = scrollHeight - clientHeight - scrollTop;
   if (bottom <= props.bottom) {
@@ -137,6 +144,18 @@ const handleScroll = throttle(() => {
   }
 }, 50);
 
+function rafThrottle(fn) {
+  let lock = false;
+  return function (this: any, ...args: any[]) {
+    if (lock) return;
+    lock = true;
+    window.requestAnimationFrame(() => {
+      fn.apply(this, args);
+      lock = false;
+    });
+  };
+}
+
 onMounted(() => {
   init();
 });
@@ -161,4 +180,12 @@ onMounted(() => {
     box-sizing: border-box;
   }
 }
+
+:deep(.ivu-message) {
+  margin-top: 50%;
+  .ivu-message-notice {
+    text-align: left;
+    padding-left: 20%;
+  }
+}
 </style>

From 9f67b8eea050c33113b08064b90093a784469d82 Mon Sep 17 00:00:00 2001
From: Alice Peng <1399789151@qq.com>
Date: Fri, 12 Jul 2024 11:01:27 +0800
Subject: [PATCH 15/19] =?UTF-8?q?feat(component):=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E7=80=91=E5=B8=83=E6=B5=81=E7=BB=84=E4=BB=B6props?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/masonry.vue | 11 ++++++++++-
 src/components/importTmpl.vue     |  9 ++++++++-
 src/hooks/pageList.js             |  2 +-
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/common/masonry.vue b/src/components/common/masonry.vue
index eb11138b..e74f7241 100644
--- a/src/components/common/masonry.vue
+++ b/src/components/common/masonry.vue
@@ -25,6 +25,7 @@ interface IVirtualWaterFallProps {
   column: number;
   bottom: number;
   pageSize: number; // 单次请求数据数量
+  pageData: ICardItem[];
   request?: (page: number, pageSize: number) => Promise<ICardItem[]>;
 }
 
@@ -60,6 +61,14 @@ const dataState = reactive({
 
 const containerRef = ref<HTMLDivElement | null>(null);
 
+const initLoadData = async () => {
+  if (props.pageData.length) {
+    dataState.cardList = props.pageData;
+    dataState.page++;
+  } else {
+    await computedWidth();
+  }
+};
 const getCardList = async (page: number, pageSize: number) => {
   if (dataState.isFinish) {
     return;
@@ -90,7 +99,7 @@ const computedWidth = async () => {
 
 const init = async () => {
   if (containerRef.value) {
-    await computedWidth();
+    await initLoadData();
   }
 };
 
diff --git a/src/components/importTmpl.vue b/src/components/importTmpl.vue
index 39e35e9d..30692d88 100644
--- a/src/components/importTmpl.vue
+++ b/src/components/importTmpl.vue
@@ -26,7 +26,14 @@
     </div>
     <!-- 列表 -->
     <div style="height: calc(100vh - 108px)" id="myTemplBox">
-      <masonry :request="getPageData" :gap="9" :page-size="10" :column="column" :bottom="20">
+      <masonry
+        :pageData="pageData"
+        :request="getPageData"
+        :gap="9"
+        :page-size="10"
+        :column="column"
+        :bottom="20"
+      >
         <template #item="{ item }">
           <Tooltip :content="item.name" :key="item.src" placement="top">
             <div class="tmpl-img-box">
diff --git a/src/hooks/pageList.js b/src/hooks/pageList.js
index a0bca174..4577bd72 100644
--- a/src/hooks/pageList.js
+++ b/src/hooks/pageList.js
@@ -180,7 +180,7 @@ export default function usePageList({
   const startGetList = () => {
     pageData.value = [];
     page.value = 1;
-    getPageData();
+    getPageData(1, 10);
   };
 
   const nextPage = () => {

From 33e26f419a2bc00f1cbc15606914d064ee5aa42b Mon Sep 17 00:00:00 2001
From: Alice Peng <1399789151@qq.com>
Date: Fri, 12 Jul 2024 15:25:38 +0800
Subject: [PATCH 16/19] =?UTF-8?q?feat(component):=20=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=E5=85=B3=E9=94=AE=E8=AF=8D=E7=80=91=E5=B8=83=E6=B5=81=E6=9F=A5?=
 =?UTF-8?q?=E8=AF=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/masonry.vue | 29 +++++++++++++++++------------
 src/components/importTmpl.vue     | 20 ++++++++------------
 src/hooks/pageList.js             |  3 +--
 3 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/src/components/common/masonry.vue b/src/components/common/masonry.vue
index e74f7241..52fb4080 100644
--- a/src/components/common/masonry.vue
+++ b/src/components/common/masonry.vue
@@ -24,8 +24,7 @@ interface IVirtualWaterFallProps {
   gap: number;
   column: number;
   bottom: number;
-  pageSize: number; // 单次请求数据数量
-  pageData: ICardItem[];
+  pageSize: number;
   request?: (page: number, pageSize: number) => Promise<ICardItem[]>;
 }
 
@@ -61,14 +60,6 @@ const dataState = reactive({
 
 const containerRef = ref<HTMLDivElement | null>(null);
 
-const initLoadData = async () => {
-  if (props.pageData.length) {
-    dataState.cardList = props.pageData;
-    dataState.page++;
-  } else {
-    await computedWidth();
-  }
-};
 const getCardList = async (page: number, pageSize: number) => {
   if (dataState.isFinish) {
     return;
@@ -82,7 +73,7 @@ const getCardList = async (page: number, pageSize: number) => {
     console.log('dataState', dataState.isFinish);
     Message.info({
       content: '已经到底了',
-      duration: 0,
+      duration: 3,
     });
     return;
   }
@@ -97,9 +88,18 @@ const computedWidth = async () => {
   await getCardList(dataState.page, props.pageSize);
 };
 
+const getkeyWordSearch = async () => {
+  dataState.cardList = [];
+  dataState.page = 1;
+  dataState.cardPos = [];
+  if (dataState.isFinish) {
+    dataState.isFinish = false;
+  }
+  await getCardList(dataState.page, props.pageSize);
+};
 const init = async () => {
   if (containerRef.value) {
-    await initLoadData();
+    await computedWidth();
   }
 };
 
@@ -168,6 +168,10 @@ function rafThrottle(fn) {
 onMounted(() => {
   init();
 });
+
+defineExpose({
+  getkeyWordSearch,
+});
 </script>
 
 <style scoped lang="less">
@@ -177,6 +181,7 @@ onMounted(() => {
     height: 100%;
     overflow-y: scroll;
     overflow-x: hidden;
+    padding-top: 45px;
   }
   &-list {
     position: relative;
diff --git a/src/components/importTmpl.vue b/src/components/importTmpl.vue
index 30692d88..e20b82f3 100644
--- a/src/components/importTmpl.vue
+++ b/src/components/importTmpl.vue
@@ -10,7 +10,7 @@
   <div>
     <!-- 搜索组件 -->
     <div class="search-box">
-      <Select class="select" v-model="typeValue" @on-change="startGetList" :disabled="pageLoading">
+      <Select class="select" v-model="typeValue" @on-change="keywordSearch" :disabled="pageLoading">
         <Option v-for="item in typeList" :value="item.value" :key="item.value">
           {{ item.label }}
         </Option>
@@ -21,18 +21,18 @@
         v-model="searchKeyWord"
         search
         :disabled="pageLoading"
-        @on-search="startGetList"
+        @on-search="keywordSearch"
       />
     </div>
     <!-- 列表 -->
     <div style="height: calc(100vh - 108px)" id="myTemplBox">
       <masonry
-        :pageData="pageData"
         :request="getPageData"
         :gap="9"
         :page-size="10"
         :column="column"
         :bottom="20"
+        ref="masonryRef"
       >
         <template #item="{ item }">
           <Tooltip :content="item.name" :key="item.src" placement="top">
@@ -66,20 +66,13 @@ const { t } = useI18n();
 const { canvasEditor } = useSelect();
 const column = ref(2);
 const {
-  startPage,
   getTypeList,
   getPageData,
   typeValue,
   typeText,
   typeList,
   pageLoading,
-  pageData,
   searchKeyWord,
-  isDownBottm,
-  startGetList,
-  nextPage,
-  showScroll,
-  scrollHeight,
   getInfo,
 } = usePageList({
   typeUrl: 'templ-types',
@@ -90,7 +83,11 @@ const {
   scrollElement: '#myTemplBox',
   fields: ['name'],
 });
+const masonryRef = ref(null);
 
+const keywordSearch = () => {
+  masonryRef.value.getkeyWordSearch();
+};
 // 替换提示
 const beforeClearTip = (info) => {
   Modal.confirm({
@@ -103,9 +100,8 @@ const beforeClearTip = (info) => {
 };
 
 onMounted(() => {
-  // startPage();
   getTypeList();
-  // getTemplInfo();
+  getTemplInfo();
 });
 
 // 获取模板数据
diff --git a/src/hooks/pageList.js b/src/hooks/pageList.js
index 4577bd72..da7357ad 100644
--- a/src/hooks/pageList.js
+++ b/src/hooks/pageList.js
@@ -146,7 +146,7 @@ export default function usePageList({
         fields
       );
       const res = await pageApi(listUrl, params);
-
+      pageLoading.value = false;
       const list = res.data.data.map((item) => {
         let small = item.attributes.img.data.attributes.formats.small;
         let thumbnail = item.attributes.img.data.attributes.formats.thumbnail;
@@ -174,7 +174,6 @@ export default function usePageList({
     } catch (error) {
       console.log(error);
     }
-    pageLoading.value = false;
   };
 
   const startGetList = () => {

From 3d47b929af5925a4d934503f18a5ce77d364a8bf Mon Sep 17 00:00:00 2001
From: Alice Peng <1399789151@qq.com>
Date: Fri, 12 Jul 2024 15:57:32 +0800
Subject: [PATCH 17/19] =?UTF-8?q?feat(component):=20=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=E5=86=97=E4=BD=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/masonry.vue | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/common/masonry.vue b/src/components/common/masonry.vue
index 52fb4080..76f13e72 100644
--- a/src/components/common/masonry.vue
+++ b/src/components/common/masonry.vue
@@ -19,7 +19,6 @@
 </template>
 
 <script setup lang="ts">
-import { Message } from 'view-ui-plus';
 interface IVirtualWaterFallProps {
   gap: number;
   column: number;
@@ -70,11 +69,6 @@ const getCardList = async (page: number, pageSize: number) => {
   dataState.loading = false;
   if (!list.length) {
     dataState.isFinish = true;
-    console.log('dataState', dataState.isFinish);
-    Message.info({
-      content: '已经到底了',
-      duration: 3,
-    });
     return;
   }
   dataState.cardList = [...dataState.cardList, ...list];
@@ -202,4 +196,13 @@ defineExpose({
     padding-left: 20%;
   }
 }
+
+:deep(.ivu-divider) {
+  position: absolute;
+  top: 95%;
+
+  .ivu-divider-horizontal.ivu-divider-with-text-center:before {
+    width: 30%;
+  }
+}
 </style>

From ab532b399cbc0aba6a6dc699bdd70c4c256141da Mon Sep 17 00:00:00 2001
From: Alice Peng <1399789151@qq.com>
Date: Tue, 23 Jul 2024 15:54:38 +0800
Subject: [PATCH 18/19] =?UTF-8?q?feat(component):=20=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E7=80=91=E5=B8=83=E6=B5=81=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/masonry.vue | 1 -
 src/components/importTmpl.vue     | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/common/masonry.vue b/src/components/common/masonry.vue
index 76f13e72..2999697b 100644
--- a/src/components/common/masonry.vue
+++ b/src/components/common/masonry.vue
@@ -175,7 +175,6 @@ defineExpose({
     height: 100%;
     overflow-y: scroll;
     overflow-x: hidden;
-    padding-top: 45px;
   }
   &-list {
     position: relative;
diff --git a/src/components/importTmpl.vue b/src/components/importTmpl.vue
index e20b82f3..ada872ba 100644
--- a/src/components/importTmpl.vue
+++ b/src/components/importTmpl.vue
@@ -35,7 +35,7 @@
         ref="masonryRef"
       >
         <template #item="{ item }">
-          <Tooltip :content="item.name" :key="item.src" placement="top">
+          <Tooltip transfer :content="item.name" :key="item.src" placement="top">
             <div class="tmpl-img-box">
               <Image
                 lazy

From 238441c861312dd899a8454736b60ae9ef9f2d88 Mon Sep 17 00:00:00 2001
From: Alice Peng <1399789151@qq.com>
Date: Tue, 30 Jul 2024 20:56:55 +0800
Subject: [PATCH 19/19] =?UTF-8?q?refactor(component):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E7=80=91=E5=B8=83=E6=B5=81=E8=A7=A6=E5=BA=95=E6=9D=A1=E4=BB=B6?=
 =?UTF-8?q?=E5=88=A4=E6=96=AD=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/masonry.vue | 9 +++++----
 src/components/importTmpl.vue     | 9 +--------
 2 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/components/common/masonry.vue b/src/components/common/masonry.vue
index 2999697b..9f179126 100644
--- a/src/components/common/masonry.vue
+++ b/src/components/common/masonry.vue
@@ -1,3 +1,4 @@
+import { values } from 'lodash-es';
 <template>
   <div class="masonry-container" ref="containerRef" @scroll="handleScroll">
     <div class="masonry-list">
@@ -22,7 +23,6 @@
 interface IVirtualWaterFallProps {
   gap: number;
   column: number;
-  bottom: number;
   pageSize: number;
   request?: (page: number, pageSize: number) => Promise<ICardItem[]>;
 }
@@ -140,9 +140,10 @@ const computedCardPos = (list: ICardItem[]) => {
 };
 
 const handleScroll = rafThrottle(() => {
-  const { scrollTop, clientHeight, scrollHeight } = containerRef.value!;
-  const bottom = scrollHeight - clientHeight - scrollTop;
-  if (bottom <= props.bottom) {
+  const { scrollTop, clientHeight } = containerRef.value!;
+  const { minHeight } = minColumn.value;
+
+  if (scrollTop + clientHeight >= minHeight) {
     !dataState.loading && getCardList(dataState.page, props.pageSize);
   }
 }, 50);
diff --git a/src/components/importTmpl.vue b/src/components/importTmpl.vue
index ada872ba..81e93241 100644
--- a/src/components/importTmpl.vue
+++ b/src/components/importTmpl.vue
@@ -26,14 +26,7 @@
     </div>
     <!-- 列表 -->
     <div style="height: calc(100vh - 108px)" id="myTemplBox">
-      <masonry
-        :request="getPageData"
-        :gap="9"
-        :page-size="10"
-        :column="column"
-        :bottom="20"
-        ref="masonryRef"
-      >
+      <masonry :request="getPageData" :gap="9" :page-size="10" :column="column" ref="masonryRef">
         <template #item="{ item }">
           <Tooltip transfer :content="item.name" :key="item.src" placement="top">
             <div class="tmpl-img-box">