From 7b63af238eb68de6f36f6b91e79d391864acdf38 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyuyukunkunkun@gmail.com>
Date: Sun, 19 Nov 2023 16:02:43 +0800
Subject: [PATCH] feat: pool get topics

---
 src/api/pool/types/pool.ts          |   2 +-
 src/store/temp/pool.ts              |   2 +-
 src/utils/formatTime.ts             |   4 +-
 src/utils/formatTimeI18n.ts         |  10 +++
 src/views/pool/Pool.vue             |  30 +++++---
 src/views/pool/components/Topic.vue |  44 ++++++++---
 src/views/pool/components/topic.ts  | 111 ----------------------------
 src/views/topic/components/Time.vue |  27 ++-----
 8 files changed, 72 insertions(+), 158 deletions(-)
 create mode 100644 src/utils/formatTimeI18n.ts
 delete mode 100644 src/views/pool/components/topic.ts

diff --git a/src/api/pool/types/pool.ts b/src/api/pool/types/pool.ts
index 17b73770..0d6db85b 100644
--- a/src/api/pool/types/pool.ts
+++ b/src/api/pool/types/pool.ts
@@ -1,4 +1,4 @@
-interface PoolTopic {
+export interface PoolTopic {
   tid: number
   title: string
   views: number
diff --git a/src/store/temp/pool.ts b/src/store/temp/pool.ts
index 8af92cf7..54a94d6b 100644
--- a/src/store/temp/pool.ts
+++ b/src/store/temp/pool.ts
@@ -10,7 +10,7 @@ export const useTempPoolStore = defineStore({
   persist: false,
   state: (): PoolStoreTemp => ({
     page: 1,
-    limit: 0,
+    limit: 10,
     sortField: 'time',
     sortOrder: 'desc',
   }),
diff --git a/src/utils/formatTime.ts b/src/utils/formatTime.ts
index ddd0a4fe..7727fbe1 100644
--- a/src/utils/formatTime.ts
+++ b/src/utils/formatTime.ts
@@ -37,7 +37,7 @@ const languageOptions = {
   },
 }
 
-function replaceTimeUnits(input: string, language: string) {
+const replaceTimeUnits = (input: string, language: string) => {
   const languageOption =
     (languageOptions as Record<string, any>)[language] || languageOptions.en
 
@@ -66,7 +66,7 @@ function replaceTimeUnits(input: string, language: string) {
 }
 
 // Format time difference
-export function formatTimeDifference(pastTime: number, language: string) {
+export const formatTimeDifference = (pastTime: number, language: string) => {
   const now = dayjs()
   const diffInSeconds = now.diff(pastTime, 'second')
   const hint = language === 'en' ? ' ago' : '前'
diff --git a/src/utils/formatTimeI18n.ts b/src/utils/formatTimeI18n.ts
new file mode 100644
index 00000000..b9eaf129
--- /dev/null
+++ b/src/utils/formatTimeI18n.ts
@@ -0,0 +1,10 @@
+import dayjs from 'dayjs'
+import 'dayjs/locale/en'
+
+dayjs.locale('en')
+
+export const formatTimeI18n = (time: number) => {
+  const formattedENDate = dayjs(time).format('MMMM D, YYYY - h:mm:ss A')
+  const formattedCNDate = dayjs(time).format('YYYY年MM月DD日-HH:mm:ss 发布')
+  return { formattedENDate, formattedCNDate }
+}
diff --git a/src/views/pool/Pool.vue b/src/views/pool/Pool.vue
index a4026997..56a5a684 100644
--- a/src/views/pool/Pool.vue
+++ b/src/views/pool/Pool.vue
@@ -1,19 +1,30 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
 import Topic from './components/Topic.vue'
 import Bar from './components/Bar.vue'
 
-import { topic } from './components/topic'
-
+import { useTempPoolStore } from '@/store/temp/pool'
 import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
 import { storeToRefs } from 'pinia'
 
-const settingsStore = useKUNGalgameSettingsStore()
-const { showKUNGalgamePageWidth } = storeToRefs(settingsStore)
+import type { PoolTopic } from '@/api'
+
+const topics = ref<PoolTopic[]>([])
+
+const { showKUNGalgamePageWidth } = storeToRefs(useKUNGalgameSettingsStore())
+
 const poolPageWidth = computed(() => {
   return showKUNGalgamePageWidth.value.Pool + '%'
 })
+
+const getTopics = async () => {
+  return (await useTempPoolStore().getTopics()).data
+}
+
+onMounted(async () => {
+  topics.value = await getTopics()
+})
 </script>
 
 <template>
@@ -21,11 +32,10 @@ const poolPageWidth = computed(() => {
     <div class="pool-container">
       <div class="topic-container">
         <Topic
-          v-for="kun in topic"
+          v-for="(kun, index) in topics"
+          :key="index"
           class="item"
-          :key="kun.index"
-          :data="kun"
-          :class="`item-${kun.index}`"
+          :topic="kun"
         />
       </div>
 
@@ -70,7 +80,7 @@ const poolPageWidth = computed(() => {
   }
 
   .topic-container {
-    grid-template-columns: repeat(2, auto);
+    grid-template-columns: repeat(2, minmax(100px, 222px));
     grid-auto-rows: minmax(100px, 300px);
   }
 }
diff --git a/src/views/pool/components/Topic.vue b/src/views/pool/components/Topic.vue
index 021456af..28e6ba95 100644
--- a/src/views/pool/components/Topic.vue
+++ b/src/views/pool/components/Topic.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
+import { onMounted, watch, ref, computed } from 'vue'
 import { Icon } from '@iconify/vue'
-import { ref } from 'vue'
 
 import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
 import { storeToRefs } from 'pinia'
 
-const { showKUNGalgameMode } = storeToRefs(useKUNGalgameSettingsStore())
+import { randomNum } from '@/utils/random'
+import { formatTimeI18n } from '@/utils/formatTimeI18n'
 
 const light = `rgba(${randomNum(200, 255)}, ${randomNum(200, 255)}, ${randomNum(
   200,
@@ -17,7 +18,30 @@ const dark = `rgba(${randomNum(0, 55)}, ${randomNum(0, 55)}, ${randomNum(
   55
 )}, ${randomNum(30, 70) / 100})`
 
+import type { PoolTopic } from '@/api'
+
+const props = defineProps<{
+  topic: PoolTopic
+}>()
+
 const color = ref(light)
+const { showKUNGalgameMode, showKUNGalgameLanguage } = storeToRefs(
+  useKUNGalgameSettingsStore()
+)
+const topic = computed(() => props.topic)
+const { formattedENDate, formattedCNDate } = formatTimeI18n(topic.value.time)
+
+const loliTime = computed(() => {
+  if (showKUNGalgameLanguage.value === 'en') {
+    return formattedENDate
+  }
+
+  if (showKUNGalgameLanguage.value === 'zh') {
+    return formattedCNDate
+  }
+
+  return ''
+})
 
 // 初始化色彩
 onMounted(() => {
@@ -35,35 +59,31 @@ onMounted(() => {
     }
   })
 })
-
-const props = defineProps(['data', 'itemStyle'])
-import { randomNum } from '@/utils/random'
-import { onMounted, watch } from 'vue'
 </script>
 
 <template>
   <div class="topic">
     <div class="title">
-      {{ props.data.title }}
+      {{ topic.title }}
     </div>
 
-    <div class="content">{{ props.data.content }}</div>
+    <div class="content">{{ topic.content }}</div>
 
     <div class="status">
       <span>
         <Icon icon="ic:outline-remove-red-eye" />
-        {{ props.data.view }}
+        {{ topic.views }}
       </span>
 
       <span>
         <Icon icon="line-md:thumbs-up-twotone" />
-        {{ props.data.like }}
+        {{ topic.likesCount }}
       </span>
     </div>
 
     <div class="time">
       <Icon class="hourglass" icon="eos-icons:hourglass" />
-      <div>{{ props.data.time }} 发布</div>
+      <div>{{ loliTime }}</div>
     </div>
   </div>
 </template>
@@ -126,10 +146,10 @@ import { onMounted, watch } from 'vue'
   font-size: small;
   letter-spacing: 1px;
   overflow: hidden;
-  white-space: nowrap;
   padding: 7px 0;
 
   .hourglass {
+    flex-shrink: 0;
     margin: 0 5px;
     color: var(--kungalgame-purple-4);
   }
diff --git a/src/views/pool/components/topic.ts b/src/views/pool/components/topic.ts
deleted file mode 100644
index 0431fc17..00000000
--- a/src/views/pool/components/topic.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-interface Topic {
-  index: number
-  title: string
-  content: string
-  view: number
-  like: number
-  time: string
-}
-
-export const topic: Topic[] = [
-  {
-    index: 1,
-    title: '啊这可海星',
-    content: '啊这可海星',
-    view: 1007,
-    like: 1007,
-    time: '12/06/2023',
-  },
-  {
-    index: 2,
-    title:
-      '啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星',
-    content:
-      '啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星',
-    view: 1007,
-    like: 1007,
-    time: '12/06/2023',
-  },
-  {
-    index: 3,
-    title: '啊这可海星',
-    content:
-      '啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星',
-    view: 1007,
-    like: 1007,
-    time: '12/06/2023',
-  },
-  {
-    index: 4,
-    title: '啊这可海星',
-    content: '啊这可海星',
-    view: 1007,
-    like: 1007,
-    time: '12/06/2023',
-  },
-  {
-    index: 5,
-    title: '啊这可海星',
-    content: '啊这可海星',
-    view: 1007,
-    like: 1007,
-    time: '12/06/2023',
-  },
-  {
-    index: 6,
-    title: '啊这可海星',
-    content:
-      '啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星',
-    view: 1007,
-    like: 1007,
-    time: '12/06/2023',
-  },
-  {
-    index: 7,
-    title: '啊这可海星',
-    content: '啊这可海星',
-    view: 1007,
-    like: 1007,
-    time: '12/06/2023',
-  },
-  {
-    index: 8,
-    title: '啊这可海星',
-    content: '啊这可海星',
-    view: 1007,
-    like: 1007,
-    time: '12/06/2023',
-  },
-  {
-    index: 9,
-    title: '啊这可海星',
-    content: '啊这可海星',
-    view: 1007,
-    like: 1007,
-    time: '12/06/2023',
-  },
-  {
-    index: 10,
-    title: '啊这可海星',
-    content: '啊这可海星',
-    view: 1007,
-    like: 1007,
-    time: '12/06/2023',
-  },
-  {
-    index: 11,
-    title: '啊这可海星',
-    content: '啊这可海星',
-    view: 1007,
-    like: 1007,
-    time: '12/06/2023',
-  },
-  {
-    index: 12,
-    title: '啊这可海星',
-    content: '啊这可海星',
-    view: 1007,
-    like: 1007,
-    time: '12/06/2023',
-  },
-]
diff --git a/src/views/topic/components/Time.vue b/src/views/topic/components/Time.vue
index 4aa03b7e..ac6281d1 100644
--- a/src/views/topic/components/Time.vue
+++ b/src/views/topic/components/Time.vue
@@ -1,26 +1,18 @@
-<!-- 发帖的时间 -->
 <script setup lang="ts">
 import { computed } from 'vue'
 import { Icon } from '@iconify/vue'
-import dayjs from 'dayjs'
-import 'dayjs/locale/en' // 导入英文语言包
 
-// 使用设置界面的 store，目的是获取网站整体的语言
 import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
 import { storeToRefs } from 'pinia'
 
+import { formatTimeI18n } from '@/utils/formatTimeI18n'
+
 const props = defineProps<{
-  time?: number
+  time: number
 }>()
 
-// 使用设置面板的 store
-const settingsStore = useKUNGalgameSettingsStore()
-const { showKUNGalgameLanguage } = storeToRefs(settingsStore)
-
-// 设置使用英文语言
-dayjs.locale('en')
-const formattedCNDate = dayjs(props.time).format('YYYY年MM月DD日-HH:mm:ss 发布')
-const formattedENDate = dayjs(props.time).format('MMMM D, YYYY - h:mm:ss A')
+const { showKUNGalgameLanguage } = storeToRefs(useKUNGalgameSettingsStore())
+const { formattedENDate, formattedCNDate } = formatTimeI18n(props.time)
 
 const loliTime = computed(() => {
   if (showKUNGalgameLanguage.value === 'en') {
@@ -36,40 +28,33 @@ const loliTime = computed(() => {
 </script>
 
 <template>
-  <!-- 发帖时间 -->
   <div class="time">
-    <!-- 沙漏图标字体 -->
     <Icon class="hourglass" icon="eos-icons:hourglass" />
     <div>{{ loliTime }}</div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-/* 发帖时间 */
 .time {
   display: flex;
   align-items: center;
   flex-shrink: 0;
   font-size: small;
-  /* 文字间距 */
   letter-spacing: 1px;
-  /* 窗口缩小不换行 */
   overflow: hidden;
   white-space: nowrap;
   color: var(--kungalgame-font-color-3);
-  /* 发帖时间的样式 */
   div {
     padding-right: 20px;
   }
 }
-/* 沙漏的样式 */
+
 .hourglass {
   font-size: 23px;
   margin: 0 10px;
   color: var(--kungalgame-red-4);
 }
 
-/* 适配手机端 */
 @media (max-width: 700px) {
   .time {
     justify-content: center;