mod: pool style

src/api/index.ts

@@ -16,6 +16,7 @@ export * from './non-moe/types/nonMoe'
 export * from './ranking/types/ranking'
 export * from './topic/types'
 export * from './update-log/types/updateLog'
+export * from './pool/types/pool'
 
 // Expose all APIs
 export * from './balance'
@@ -27,3 +28,4 @@ export * from './non-moe'
 export * from './ranking'
 export * from './topic'
 export * from './update-log'
+export * from './pool'

src/api/pool/index.ts

@@ -0,0 +1,19 @@
+import { fetchGet } from '@/utils/request'
+import objectToQueryParams from '@/utils/objectToQueryParams'
+import type * as Pool from './types/pool'
+
+const poolURLs = {
+  topic: `/pool/topic`,
+}
+
+export async function getPoolTopicApi(
+  requestData: Pool.PoolTopicsRequestData
+): Promise<Pool.PoolTopicResponseData> {
+  const queryParams = objectToQueryParams(requestData)
+
+  const response = await fetchGet<Pool.PoolTopicResponseData>(
+    `${poolURLs.topic}?${queryParams}`
+  )
+
+  return response
+}

src/api/pool/types/pool.ts

@@ -0,0 +1,17 @@
+interface PoolTopic {
+  tid: number
+  title: string
+  views: number
+  likesCount: number
+  time: number
+  content: string
+}
+
+export interface PoolTopicsRequestData {
+  page: number
+  limit: number
+  sortField: string
+  sortOrder: string
+}
+
+export type PoolTopicResponseData = KUNGalgameResponseData<PoolTopic[]>

src/store/temp/pool.ts

@@ -0,0 +1,29 @@
+import { defineStore } from 'pinia'
+
+import { getPoolTopicApi } from '@/api'
+import type { PoolTopicsRequestData, PoolTopicResponseData } from '@/api'
+
+import type { PoolStoreTemp } from '@/store/types/pool'
+
+export const useTempPoolStore = defineStore({
+  id: 'tempPool',
+  persist: false,
+  state: (): PoolStoreTemp => ({
+    page: 1,
+    limit: 0,
+    sortField: 'time',
+    sortOrder: 'desc',
+  }),
+  actions: {
+    async getTopics(): Promise<PoolTopicResponseData> {
+      const requestData: PoolTopicsRequestData = {
+        page: this.page,
+        limit: this.limit,
+        sortField: this.sortField,
+        sortOrder: this.sortOrder,
+      }
+
+      return await getPoolTopicApi(requestData)
+    },
+  },
+})

src/store/types/pool.d.ts

@@ -0,0 +1,6 @@
+export interface PoolStoreTemp {
+  page: number
+  limit: number
+  sortField: string
+  sortOrder: string
+}

src/views/pool/Pool.vue

@@ -63,4 +63,15 @@ const poolPageWidth = computed(() => {
   grid-auto-rows: minmax(100px, 320px);
   gap: 10px;
 }
+
+@media (max-width: 700px) {
+  .pool-container {
+    width: 100%;
+  }
+
+  .topic-container {
+    grid-template-columns: repeat(2, auto);
+    grid-auto-rows: minmax(100px, 300px);
+  }
+}
 </style>

src/views/pool/components/Bar.vue

@@ -5,8 +5,6 @@ import { Icon } from '@iconify/vue'
 <template>
   <div class="bar">
     <div class="sort">
-      <div>排序</div>
-
       <div class="func">
         <div><Icon icon="ic:outline-remove-red-eye" /> 按照浏览数排序</div>
 
@@ -16,12 +14,16 @@ import { Icon } from '@iconify/vue'
           <Icon class="hourglass" icon="eos-icons:hourglass" /> 按照时间排序
         </div>
       </div>
-      <div><Icon icon="bi:sort-down" /></div>
+
+      <div class="icon">
+        <Icon icon="bi:sort-down" />
+      </div>
     </div>
 
     <div class="top">
-      <div>Top</div>
-      <div><Icon icon="line-md:arrow-close-up"></Icon></div>
+      <div class="icon">
+        <Icon icon="line-md:arrow-close-up" />
+      </div>
     </div>
   </div>
 </template>
@@ -39,7 +41,7 @@ import { Icon } from '@iconify/vue'
 .func {
   position: absolute;
   white-space: nowrap;
-  right: 51px;
+  right: 50px;
   cursor: pointer;
   display: none;
   background-color: var(--kungalgame-trans-white-2);
@@ -50,7 +52,7 @@ import { Icon } from '@iconify/vue'
     padding: 8px;
 
     &:hover {
-      background-color: var(--kungalgame-trans-pink-1);
+      background-color: var(--kungalgame-trans-blue-1);
     }
   }
 }
@@ -63,14 +65,20 @@ import { Icon } from '@iconify/vue'
 .top {
   display: flex;
   flex-direction: column;
+  justify-content: center;
   align-items: center;
   height: 50px;
-  padding: 0 9px;
+  width: 50px;
   box-shadow: var(--shadow);
   cursor: pointer;
   background-color: var(--kungalgame-trans-white-2);
   border: 1px solid var(--kungalgame-blue-1);
   color: var(--kungalgame-font-color-3);
+
+  .icon {
+    font-size: 22px;
+    color: var(--kungalgame-blue-4);
+  }
 }
 
 .top {