From 876a045c4eb9bf7f1d94dd28783a80c9bf4f6013 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyuyukunkunkun@gmail.com>
Date: Sun, 19 Nov 2023 17:13:59 +0800
Subject: [PATCH] feat: sort pool topic

---
 src/language/en.ts                    |  3 ++
 src/language/zh.ts                    |  3 ++
 src/views/pool/Pool.vue               | 13 +++++-
 src/views/pool/components/Bar.vue     | 64 +++++++++++++++++++++++----
 src/views/pool/components/sortItem.ts | 27 +++++++++++
 5 files changed, 100 insertions(+), 10 deletions(-)
 create mode 100644 src/views/pool/components/sortItem.ts

diff --git a/src/language/en.ts b/src/language/en.ts
index 7a746d31..dc6e304e 100644
--- a/src/language/en.ts
+++ b/src/language/en.ts
@@ -371,6 +371,9 @@ export default {
   pool: {
     load: 'Click to Load More Topics',
     complete: `Already there's nothing left...`,
+    view: 'Sort by Views',
+    like: 'Sort by Likes',
+    time: 'Sort by Time',
   },
   donate: {
     donate: 'Donate Us',
diff --git a/src/language/zh.ts b/src/language/zh.ts
index a17e1b2e..3350d631 100644
--- a/src/language/zh.ts
+++ b/src/language/zh.ts
@@ -370,6 +370,9 @@ export default {
   pool: {
     load: '点击继续加载话题',
     complete: '已经。。。一滴也不剩了',
+    view: '按浏览数排序',
+    like: '按点赞数排序',
+    time: '按照时间排序',
   },
   donate: {
     donate: '赞助我们',
diff --git a/src/views/pool/Pool.vue b/src/views/pool/Pool.vue
index e4718c8d..28b6d5be 100644
--- a/src/views/pool/Pool.vue
+++ b/src/views/pool/Pool.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
 import Topic from './components/Topic.vue'
 import Bar from './components/Bar.vue'
@@ -12,7 +12,7 @@ import type { PoolTopic } from '@/api'
 
 const topics = ref<PoolTopic[]>([])
 
-const { page } = storeToRefs(useTempPoolStore())
+const { page, sortField, sortOrder } = storeToRefs(useTempPoolStore())
 const { showKUNGalgamePageWidth } = storeToRefs(useKUNGalgameSettingsStore())
 const isLoadingComplete = ref(false)
 
@@ -24,6 +24,15 @@ const getTopics = async () => {
   return (await useTempPoolStore().getTopics()).data
 }
 
+watch(
+  () => [sortField.value, sortOrder.value],
+  async () => {
+    isLoadingComplete.value = false
+    useTempPoolStore().resetPageStatus()
+    topics.value = await getTopics()
+  }
+)
+
 const handleLoadTopics = async () => {
   if (isLoadingComplete.value) {
     return
diff --git a/src/views/pool/components/Bar.vue b/src/views/pool/components/Bar.vue
index e346453d..593321e9 100644
--- a/src/views/pool/components/Bar.vue
+++ b/src/views/pool/components/Bar.vue
@@ -1,17 +1,35 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
+
+import { useTempPoolStore } from '@/store/temp/pool'
+import { storeToRefs } from 'pinia'
+
+import { sortItem } from './sortItem'
+
+const { sortField, sortOrder } = storeToRefs(useTempPoolStore())
 </script>
 
 <template>
   <div class="bar">
     <div class="sort">
       <div class="func">
-        <div><Icon icon="ic:outline-remove-red-eye" /> 按照浏览数排序</div>
+        <div
+          class="item"
+          v-for="item in sortItem"
+          :key="item.index"
+          @click="sortField = item.field"
+        >
+          <Icon :icon="item.icon" />
+          <span>{{ $tm(`pool.${item.name}`) }}</span>
+        </div>
 
-        <div><Icon icon="line-md:thumbs-up-twotone" /> 按照点赞数排序</div>
-
-        <div>
-          <Icon class="hourglass" icon="eos-icons:hourglass" /> 按照时间排序
+        <div class="order">
+          <span @click="sortOrder = 'asc'">
+            <Icon icon="tdesign:order-ascending" />
+          </span>
+          <span @click="sortOrder = 'desc'">
+            <Icon icon="tdesign:order-descending" />
+          </span>
         </div>
       </div>
 
@@ -45,14 +63,44 @@ import { Icon } from '@iconify/vue'
   cursor: pointer;
   display: none;
   background-color: var(--kungalgame-trans-white-2);
-  border: 1px solid var(--kungalgame-blue-1);
+  border: 1px solid var(--kungalgame-blue-4);
   top: 0;
+}
 
-  & > div {
+.item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 8px;
+
+  span {
+    margin-left: 8px;
+  }
+
+  &:hover {
+    background-color: var(--kungalgame-trans-blue-1);
+  }
+}
+
+.order {
+  display: flex;
+
+  &:hover {
+    background-color: var(--kungalgame-trans-white-2);
+  }
+
+  span {
     padding: 8px;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    color: var(--kungalgame-blue-4);
 
     &:hover {
-      background-color: var(--kungalgame-trans-blue-1);
+      background-color: var(--kungalgame-blue-4);
+      color: var(--kungalgame-white);
     }
   }
 }
diff --git a/src/views/pool/components/sortItem.ts b/src/views/pool/components/sortItem.ts
new file mode 100644
index 00000000..88e1a48a
--- /dev/null
+++ b/src/views/pool/components/sortItem.ts
@@ -0,0 +1,27 @@
+interface Sort {
+  index: number
+  icon: string
+  name: string
+  field: string
+}
+
+export const sortItem: Sort[] = [
+  {
+    index: 1,
+    icon: 'ic:outline-remove-red-eye',
+    name: 'view',
+    field: 'views',
+  },
+  {
+    index: 2,
+    icon: 'line-md:thumbs-up-twotone',
+    name: 'like',
+    field: 'likes_count',
+  },
+  {
+    index: 3,
+    icon: 'eos-icons:hourglass',
+    name: 'time',
+    field: 'time',
+  },
+]