feat: sort pool topic

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',

src/language/zh.ts

@@ -370,6 +370,9 @@ export default {
   pool: {
     load: '点击继续加载话题',
     complete: '已经。。。一滴也不剩了',
+    view: '按浏览数排序',
+    like: '按点赞数排序',
+    time: '按照时间排序',
   },
   donate: {
     donate: '赞助我们',

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

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,15 +63,45 @@ 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-blue-4);
+      color: var(--kungalgame-white);
+    }
   }
 }
 

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',
+  },
+]