refactor: pool page

components/pool/Container.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import type { PoolTopic } from '~/types/api/pool'
+import { pageData } from './pageData'
+
+const isLoadingComplete = ref(false)
+const topics = ref<PoolTopic[]>([])
+const savedPosition = ref(0)
+
+const getTopics = async () => {
+  const result = await $fetch(`/api/pool/topic`, {
+    method: 'GET',
+    query: pageData,
+    watch: false,
+    ...kungalgameResponseHandler
+  })
+  return result
+}
+
+if (!topics.value.length) {
+  topics.value = await getTopics()
+}
+
+const isFetching = ref(false)
+const scrollHandler = async () => {
+  if (isScrollAtBottom() && !isLoadingComplete.value && !isFetching.value) {
+    isFetching.value = true
+    pageData.page++
+    const newData = await getTopics()
+
+    if (newData.length < pageData.limit) {
+      isLoadingComplete.value = true
+    }
+
+    topics.value = topics.value.concat(newData)
+    isFetching.value = false
+  }
+}
+
+const isScrollAtBottom = () => {
+  const scrollHeight = document.documentElement.scrollHeight
+  const scrollTop = window.scrollY || document.documentElement.scrollTop
+  const clientHeight = document.documentElement.clientHeight
+  savedPosition.value = scrollTop
+
+  const errorMargin = 500
+  return Math.abs(scrollHeight - scrollTop - clientHeight) < errorMargin
+}
+
+watch(
+  () => [pageData.sortField, pageData.sortOrder, pageData.category],
+  async () => {
+    pageData.page = 1
+    isLoadingComplete.value = false
+    topics.value = []
+    pageData.page = 1
+    savedPosition.value = 0
+    topics.value = await getTopics()
+  }
+)
+
+const handleLoadTopics = async () => {
+  if (isLoadingComplete.value) {
+    return
+  }
+  pageData.page++
+  const lazyLoadTopics = await getTopics()
+
+  if (lazyLoadTopics.length < 24) {
+    isLoadingComplete.value = true
+  }
+  topics.value = topics.value.concat(lazyLoadTopics)
+}
+
+onMounted(() => {
+  window.scrollTo({
+    top: savedPosition.value
+  })
+  window.addEventListener('scroll', scrollHandler)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', scrollHandler)
+})
+</script>
+
+<template>
+  <div class="pool" ref="pool">
+    <PoolTool />
+
+    <PoolLayout :topics="topics" />
+
+    <div class="load">
+      <span class="loader" v-if="!isLoadingComplete" @click="handleLoadTopics">
+        {{ $t('pool.load') }}
+      </span>
+
+      <span class="complete" v-else-if="isLoadingComplete">
+        {{ $t('pool.complete') }}
+      </span>
+    </div>
+
+    <KunFooter />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.pool {
+  display: flex;
+  flex-direction: column;
+  overflow-y: scroll;
+  max-width: 64rem;
+  margin: 0 auto;
+  padding: 0 10px;
+}
+
+.load {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 20px;
+  margin: 24px 0;
+
+  .loader {
+    cursor: pointer;
+    color: var(--kungalgame-font-color-1);
+
+    &:hover {
+      color: var(--kungalgame-blue-5);
+    }
+  }
+
+  .complete {
+    color: var(--kungalgame-trans-blue-2);
+    user-select: none;
+    cursor: default;
+  }
+}
+
+.kun-footer {
+  margin-bottom: 17px;
+}
+
+@media (max-width: 700px) {
+  .pool {
+    padding: 0 5px;
+  }
+}
+</style>

components/pool/Layout.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { PoolTopic } from '~/types/api/pool'
 
-const props = defineProps<{
+defineProps<{
   topics: PoolTopic[]
 }>()
 

components/pool/Tool.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { pageData } from './pageData'
+
+const { layout } = storeToRefs(usePersistPoolStore())
+</script>
+
+<template>
+  <div class="tool">
+    <div class="sort">
+      <KunSelect
+        :styles="{ width: '100px' }"
+        :options="['created', 'views']"
+        :default-value="pageData.sortField"
+        i18n="pool"
+        @set="(value) => (pageData.sortField = value as 'views' | 'created')"
+        position="bottom"
+      >
+        <span>{{ $t(`pool.${pageData.sortField}`) }}</span>
+      </KunSelect>
+
+      <KunSelect
+        :styles="{ width: '150px' }"
+        :options="['all', 'galgame', 'technique', 'others']"
+        :default-value="pageData.category"
+        i18n="pool"
+        @set="
+          (value) =>
+            (pageData.category = value as
+              | 'all'
+              | 'galgame'
+              | 'technique'
+              | 'others')
+        "
+        position="bottom"
+      >
+        <span>{{ $t(`pool.${pageData.category}`) }}</span>
+      </KunSelect>
+    </div>
+
+    <div class="func">
+      <span :class="layout === 'grid' ? 'active' : ''" @click="layout = 'grid'">
+        <Icon class="icon" name="lucide:layout-grid" />
+      </span>
+      <span :class="layout === 'list' ? 'active' : ''" @click="layout = 'list'">
+        <Icon class="icon" name="lucide:list" />
+      </span>
+      <span
+        :class="pageData.sortOrder === 'asc' ? 'active' : ''"
+        @click="pageData.sortOrder = 'asc'"
+      >
+        <Icon class="icon" name="lucide:arrow-up" />
+      </span>
+      <span
+        :class="pageData.sortOrder === 'desc' ? 'active' : ''"
+        @click="pageData.sortOrder = 'desc'"
+      >
+        <Icon class="icon" name="lucide:arrow-down" />
+      </span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.tool {
+  padding: 10px;
+  color: var(--kungalgame-font-color-3);
+  box-shadow: var(--shadow);
+  background-color: var(--kungalgame-trans-white-5);
+  border-radius: 10px;
+  margin-bottom: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  z-index: 17;
+
+  .sort {
+    display: flex;
+  }
+
+  .icon {
+    font-size: 20px;
+  }
+
+  .func {
+    display: flex;
+    white-space: nowrap;
+
+    & > span {
+      display: flex;
+      cursor: pointer;
+      padding: 3px 10px;
+      margin-right: 5px;
+      border-radius: 10px;
+    }
+
+    .active {
+      box-shadow: var(--shadow);
+      color: var(--kungalgame-blue-5);
+    }
+  }
+}
+
+@media (max-width: 700px) {
+  .tool {
+    .sort {
+      margin-bottom: 8px;
+    }
+
+    .icon {
+      font-size: 16px;
+    }
+  }
+}
+</style>

components/pool/pageData.ts

@@ -0,0 +1,15 @@
+export interface PageData {
+  page: number
+  limit: number
+  sortField: 'created' | 'views'
+  sortOrder: 'asc' | 'desc'
+  category: 'all' | 'galgame' | 'technique' | 'others'
+}
+
+export const pageData = reactive<PageData>({
+  page: 1,
+  limit: 24,
+  sortField: 'created',
+  sortOrder: 'desc',
+  category: 'all'
+})

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kun-galgame-nuxt3",
-  "version": "2.19.4",
+  "version": "2.19.5",
   "packageManager": "[email protected]",
   "private": true,
   "scripts": {