From 7011c8440204fd7ed7f1e779f7e91695ae34d47c Mon Sep 17 00:00:00 2001
From: greenhat616 <i@a632079.me>
Date: Fri, 1 Sep 2023 09:43:04 +0800
Subject: [PATCH] feat: use masonry css instead of js version

---
 components/FetchStatusWarpper.vue  | 33 +++++++++++++++
 package.json                       |  1 -
 pages/dashboard/do_review.vue      | 59 ++++++++++++--------------
 pages/dashboard/records/review.vue | 67 +++++++++++++-----------------
 plugins/vueMasonry.client.ts       |  5 ---
 pnpm-lock.yaml                     | 62 ---------------------------
 6 files changed, 90 insertions(+), 137 deletions(-)
 create mode 100644 components/FetchStatusWarpper.vue
 delete mode 100644 plugins/vueMasonry.client.ts

diff --git a/components/FetchStatusWarpper.vue b/components/FetchStatusWarpper.vue
new file mode 100644
index 0000000..c3534fe
--- /dev/null
+++ b/components/FetchStatusWarpper.vue
@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  pending: boolean
+  error: unknown | null
+  notEmpty: boolean
+}>()
+</script>
+
+<template>
+  <div class="status-wrapper">
+    <div v-if="props.pending" class="status">
+      <a-spin />
+    </div>
+    <div v-else-if="props.error" class="status">
+      <a-result status="500" title="500" sub-title="请求错误"> </a-result>
+    </div>
+    <template v-else>
+      <slot v-if="notEmpty" />
+      <div v-else class="status">
+        <slot name="empty" />
+      </div>
+    </template>
+  </div>
+</template>
+<style lang="scss" scoped>
+.status-wrapper {
+  @apply flex-1 w-full;
+}
+
+.status {
+  @apply w-full h-70 flex items-center justify-center;
+}
+</style>
diff --git a/package.json b/package.json
index 0f33f40..0c63068 100644
--- a/package.json
+++ b/package.json
@@ -81,7 +81,6 @@
     "vant": "^4.6.6",
     "vite": "^4.4.9",
     "vue-echarts": "^6.6.1",
-    "vue-masonry": "^0.16.0",
     "vue-next-masonry": "^1.1.3",
     "xss": "^1.0.14"
   },
diff --git a/pages/dashboard/do_review.vue b/pages/dashboard/do_review.vue
index 136759b..62f8323 100644
--- a/pages/dashboard/do_review.vue
+++ b/pages/dashboard/do_review.vue
@@ -8,12 +8,12 @@ useHead({
   title: '句子审核'
 })
 // TODO: 临时修复 Masonry 路由切换后绘制错误的问题
-const redrawVueMasonry = inject<(id: string) => void>('redrawVueMasonry')
-const redrawMasonary = () => redrawVueMasonry && redrawVueMasonry('32')
-onMounted(() => {
-  if (!redrawVueMasonry) return
-  setTimeout(redrawMasonary, 600)
-})
+// const redrawVueMasonry = inject<(id: string) => void>('redrawVueMasonry')
+// const redrawMasonary = () => redrawVueMasonry && redrawVueMasonry('32')
+// onMounted(() => {
+//   if (!redrawVueMasonry) return
+//   setTimeout(redrawMasonary, 600)
+// })
 
 const route = useRoute()
 
@@ -198,7 +198,7 @@ const refreshPollItem = async (index: number, pollID: number) => {
   else
     message.error(`刷新投票 ${pollID} 失败，投票数据为空。请刷新页面后重试。`)
 
-  nextTick(redrawMasonary)
+  // nextTick(redrawMasonary)
 }
 const onOperationDone = (event: 'submit' | 'cancel', index: number) => {
   // console.log(event, index)
@@ -259,40 +259,35 @@ const onOperationDone = (event: 'submit' | 'cancel', index: number) => {
 
     <div class="content">
       <!-- TODO: 抽象成组件 -->
-      <ClientOnly>
-        <div
-          v-if="!pending && !error && cardData.length"
-          v-masonry="32"
-          class="grid"
-          transition-duration="0.3s"
-          item-selector=".grid-item"
-        >
-          <template v-for="(card, cardIndex) in cardData" :key="card.poll.id">
-            <div v-masonry-tile class="grid-item">
+      <FetchStatusWarpper
+        :pending="pending"
+        :error="error"
+        :not-empty="cardData.length > 0"
+      >
+        <ClientOnly>
+          <masonry :cols="{ default: 2, 640: 1 }" :gutter="'1rem'">
+            <div
+              v-for="(card, cardIndex) in cardData"
+              :key="card.poll.id"
+              class="grid-item"
+            >
               <DoReviewCard
                 :poll="card.poll"
                 :sentence="card.sentence"
                 :marks="card.marks"
                 :polled-record="card.polledRecord"
                 :index="cardIndex"
-                @do-masonry-repaint="nextTick(redrawMasonary)"
                 @do-web-search="doWebSearch"
                 @do-local-search="doLocalSearch"
                 @opeartion-done="onOperationDone"
               />
             </div>
-          </template>
-        </div>
-        <div v-else-if="cardData.length === 0" class="flex-1">
-          <a-empty class="mt-10" />
-        </div>
-        <a-result
-          v-else-if="error"
-          status="500"
-          title="500"
-          sub-title="服务器错误，请稍后重试。"
-        ></a-result>
-      </ClientOnly>
+          </masonry>
+        </ClientOnly>
+        <template #empty>
+          <a-empty />
+        </template>
+      </FetchStatusWarpper>
     </div>
     <!-- 分页器 -->
     <div v-show="cardData.length !== 0" class="pagination">
@@ -311,11 +306,11 @@ const onOperationDone = (event: 'submit' | 'cancel', index: number) => {
 
 <style lang="scss" scoped>
 .grid-item {
-  @apply w-full md:w-1/2 px-2 py-2;
+  @apply py-2;
 }
 
 .do-review {
-  @apply h-full w-full flex flex-col;
+  @apply w-full flex flex-col;
 
   .ant-page-header {
     @apply mx-0 px-0;
diff --git a/pages/dashboard/records/review.vue b/pages/dashboard/records/review.vue
index f56b673..393fc20 100644
--- a/pages/dashboard/records/review.vue
+++ b/pages/dashboard/records/review.vue
@@ -59,24 +59,17 @@ watch([page, pageSize], () => {
       :poll-id="showPollDetailModalPollId"
     />
     <div class="main">
-      <div v-if="userPollLogsPending" class="status">
-        <a-spin />
-      </div>
-      <div v-if="userPollLogsError" class="status">
-        <p>加载失败</p>
-      </div>
-      <div
-        v-if="!userPollLogsPending && !userPollLogsError"
-        class="records-container"
+      <FetchStatusWarpper
+        :pending="userPollLogsPending"
+        :error="userPollLogsError"
+        :not-empty="!!userPollLogsData && userPollLogsData.data.total > 0"
       >
-        <ClientOnly>
-          <masonry
-            class="records"
-            :cols="{ default: 2, 640: 1 }"
-            :gutter="'1rem'"
-          >
-            <template
-              v-if="userPollLogsData && userPollLogsData.data.total > 0"
+        <div v-if="userPollLogsData" class="records-container">
+          <ClientOnly>
+            <masonry
+              class="records"
+              :cols="{ default: 2, 640: 1 }"
+              :gutter="{ default: '1rem', 640: 0 }"
             >
               <div
                 v-for="userPollLog in userPollLogsData.data.collection"
@@ -88,27 +81,27 @@ watch([page, pageSize], () => {
                   @show-poll-detail="showPollDetail"
                 />
               </div>
-            </template>
-            <div v-else class="status">
-              <a-empty />
-            </div>
-          </masonry>
-        </ClientOnly>
-        <!-- 分页器 -->
-        <div
-          v-show="userPollLogsData && userPollLogsData.data.total > 0"
-          class="pagination"
-        >
-          <a-pagination
-            :current="page"
-            :page-size="pageSize"
-            show-quick-jumper
-            show-size-changer
-            :page-size-options="pageSizeOptions"
-            :total="userPollLogsData?.data?.total || 0"
-            @change="onPagniationChange"
-          />
+            </masonry>
+          </ClientOnly>
         </div>
+        <template #empty>
+          <a-empty />
+        </template>
+      </FetchStatusWarpper>
+      <!-- 分页器 -->
+      <div
+        v-show="userPollLogsData && userPollLogsData.data.total > 0"
+        class="pagination"
+      >
+        <a-pagination
+          :current="page"
+          :page-size="pageSize"
+          show-quick-jumper
+          show-size-changer
+          :page-size-options="pageSizeOptions"
+          :total="userPollLogsData?.data?.total || 0"
+          @change="onPagniationChange"
+        />
       </div>
     </div>
   </div>
diff --git a/plugins/vueMasonry.client.ts b/plugins/vueMasonry.client.ts
deleted file mode 100644
index 10a1466..0000000
--- a/plugins/vueMasonry.client.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { VueMasonryPlugin } from 'vue-masonry'
-
-export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.vueApp.use(VueMasonryPlugin)
-})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 377ebcd..cef1a22 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -217,9 +217,6 @@ devDependencies:
   vue-echarts:
     specifier: ^6.6.1
     version: 6.6.1(echarts@5.4.3)(vue@3.3.4)
-  vue-masonry:
-    specifier: ^0.16.0
-    version: 0.16.0(vue@3.3.4)
   vue-next-masonry:
     specifier: ^1.1.3
     version: 1.1.3(vue@3.3.4)
@@ -5810,10 +5807,6 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
-  /desandro-matches-selector@2.0.2:
-    resolution: {integrity: sha512-+1q0nXhdzg1IpIJdMKalUwvvskeKnYyEe3shPRwedNcWtnhEKT3ZxvFjzywHDeGcKViIxTCAoOYQWP1qD7VNyg==}
-    dev: true
-
   /destr@2.0.1:
     resolution: {integrity: sha512-M1Ob1zPSIvlARiJUkKqvAZ3VAqQY6Jcuth/pBKQ2b1dX/Qx0OnJ8Vux6J2H5PTMQeRzWrrbTu70VxBfv/OPDJA==}
     dev: true
@@ -6562,10 +6555,6 @@ packages:
     engines: {node: '>= 0.6'}
     dev: true
 
-  /ev-emitter@1.1.1:
-    resolution: {integrity: sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q==}
-    dev: true
-
   /eventemitter3@5.0.1:
     resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==}
     dev: true
@@ -6756,12 +6745,6 @@ packages:
       path-exists: 4.0.0
     dev: true
 
-  /fizzy-ui-utils@2.0.7:
-    resolution: {integrity: sha512-CZXDVXQ1If3/r8s0T+v+qVeMshhfcuq0rqIFgJnrtd+Bu8GmDmqMjntjUePypVtjHXKJ6V4sw9zeyox34n9aCg==}
-    dependencies:
-      desandro-matches-selector: 2.0.2
-    dev: true
-
   /flat-cache@3.0.4:
     resolution: {integrity: sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -6951,10 +6934,6 @@ packages:
     resolution: {integrity: sha512-c14cAITf0E+uqdxGALvyYHwOL7UsnWcv3oDtgDAZksiVSGN87xlWVUWGZcmWQU3cICdaOxT+6LdQzUfK2ei1SA==}
     dev: true
 
-  /get-size@2.0.3:
-    resolution: {integrity: sha512-lXNzT/h/dTjTxRbm9BXb+SGxxzkm97h/PCIKtlN/CBCxxmkkIVV21udumMS93MuVTDX583gqc94v3RjuHmI+2Q==}
-    dev: true
-
   /get-stream@2.3.1:
     resolution: {integrity: sha512-AUGhbbemXxrZJRD5cDvKtQxLuYaIbNtDTK8YqupCI393Q2KSTreEsLUN3ZxAWFGiKTzL6nKuzfcIvieflUX9qA==}
     engines: {node: '>=0.10.0'}
@@ -7423,12 +7402,6 @@ packages:
     engines: {node: '>=10.18.0'}
     dev: true
 
-  /imagesloaded@4.1.4:
-    resolution: {integrity: sha512-ltiBVcYpc/TYTF5nolkMNsnREHW+ICvfQ3Yla2Sgr71YFwQ86bDwV9hgpFhFtrGPuwEx5+LqOHIrdXBdoWwwsA==}
-    dependencies:
-      ev-emitter: 1.1.1
-    dev: true
-
   /immutable@4.3.1:
     resolution: {integrity: sha512-lj9cnmB/kVS0QHsJnYKD1uo3o39nrbKxszjnqS9Fr6NB7bZzW45U6WSGBPKXDL/CvDKqDNPA4r3DoDQ8GTxo2A==}
     dev: true
@@ -8362,13 +8335,6 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /masonry-layout@4.2.2:
-    resolution: {integrity: sha512-iGtAlrpHNyxaR19CvKC3npnEcAwszXoyJiI8ARV2ePi7fmYhIud25MHK8Zx4P0LCC4d3TNO9+rFa1KoK1OEOaA==}
-    dependencies:
-      get-size: 2.0.3
-      outlayer: 2.1.1
-    dev: true
-
   /mathml-tag-names@2.1.3:
     resolution: {integrity: sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==}
     dev: true
@@ -8612,10 +8578,6 @@ packages:
       yallist: 4.0.0
     dev: true
 
-  /mitt@3.0.1:
-    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
-    dev: true
-
   /mkdirp@1.0.4:
     resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
     engines: {node: '>=10'}
@@ -9263,14 +9225,6 @@ packages:
       type-check: 0.4.0
     dev: true
 
-  /outlayer@2.1.1:
-    resolution: {integrity: sha512-+GplXsCQ3VrbGujAeHEzP9SXsBmJxzn/YdDSQZL0xqBmAWBmortu2Y9Gwdp9J0bgDQ8/YNIPMoBM13nTwZfAhw==}
-    dependencies:
-      ev-emitter: 1.1.1
-      fizzy-ui-utils: 2.0.7
-      get-size: 2.0.3
-    dev: true
-
   /p-limit@2.3.0:
     resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
     engines: {node: '>=6'}
@@ -12212,22 +12166,6 @@ packages:
       - supports-color
     dev: true
 
-  /vue-masonry@0.16.0(vue@3.3.4):
-    resolution: {integrity: sha512-0Wi/BH4iYYRrAAFY/wokczz0lWWPg1vmOvFW4aC2nKybKf6kVqUvFfR9/+izDfzG657/vY+Om0gqOB5YPxPxuQ==}
-    peerDependencies:
-      '@vue/composition-api': ^1.0.0-rc.1
-      vue: ^2.0.0 || >=3.0.0
-    peerDependenciesMeta:
-      '@vue/composition-api':
-        optional: true
-    dependencies:
-      imagesloaded: 4.1.4
-      masonry-layout: 4.2.2
-      mitt: 3.0.1
-      vue: 3.3.4
-      vue-demi: 0.13.11(vue@3.3.4)
-    dev: true
-
   /vue-next-masonry@1.1.3(vue@3.3.4):
     resolution: {integrity: sha512-iY7Hy7Yyno4NE2ZWpbkINHhBdySZ/GfkubleR73CfIbv0uA4jTTl9nCcwErnGMTBIIlGYDl8gZr0OG/vFCy7JQ==}
     peerDependencies: