From 54e3ab562b3cf2d2185776937ef4c203879b91cd Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyuyukunkunkun@gmail.com>
Date: Thu, 16 Nov 2023 21:07:42 +0800
Subject: [PATCH] mod: pool style

---
 src/components/KUNGalgameSearchBox.vue        | 33 ++--------
 .../article/components/ArticleContent.vue     | 20 ------
 src/views/pool/Pool.vue                       | 16 ++---
 src/views/pool/components/Bar.vue             | 42 ++++--------
 src/views/pool/components/Tags.vue            | 25 ++++---
 src/views/pool/components/Topic.vue           | 66 ++++++++-----------
 6 files changed, 62 insertions(+), 140 deletions(-)

diff --git a/src/components/KUNGalgameSearchBox.vue b/src/components/KUNGalgameSearchBox.vue
index 6ce2a43c..1af0ff39 100644
--- a/src/components/KUNGalgameSearchBox.vue
+++ b/src/components/KUNGalgameSearchBox.vue
@@ -94,13 +94,9 @@ const handleDeleteHistory = (historyIndex: number) => {
 </script>
 
 <template>
-  <!-- Interactive area search box -->
   <div class="container">
-    <!-- Search box form -->
     <form class="search-form">
-      <!-- Search box content -->
       <div class="content">
-        <!-- Input field -->
         <input
           v-model="inputValue"
           type="search"
@@ -113,21 +109,20 @@ const handleDeleteHistory = (historyIndex: number) => {
           @keydown.enter="handleClickEnter"
         />
       </div>
-      <!-- Search box icon -->
+
       <div class="search-btn" @click="handleClickSearch">
         <Icon icon="line-md:search" />
       </div>
     </form>
-    <!-- Search history container -->
+
     <div v-if="isShowSearchHistory" class="history">
-      <!-- Search history title -->
       <div class="title">
         <span>{{ $tm('mainPage.header.history') }}</span>
         <span @click="clearSearchHistory">
           {{ $tm('mainPage.header.clear') }}
         </span>
       </div>
-      <!-- Search history -->
+
       <div class="history-container">
         <div
           class="single-history"
@@ -146,49 +141,40 @@ const handleDeleteHistory = (historyIndex: number) => {
 </template>
 
 <style lang="scss" scoped>
-/* Search topics */
 .container {
   height: 39px;
   width: 1px;
   justify-content: center;
   align-items: center;
-  /* Prevent line breaks when the page is resized */
   white-space: nowrap;
   background-color: var(--kungalgame-trans-blue-2);
   border: 1px solid var(--kungalgame-blue-4);
   flex-grow: 2;
-  /* Position relative to the secondary menu */
   position: relative;
   display: flex;
   color: var(--kungalgame-font-color-3);
 }
 
-/* Search box form */
 .search-form {
   display: flex;
   height: 39px;
-  /* Grows with the page */
   width: 1px;
   flex-grow: 1;
-  /* Centered */
   justify-content: center;
   align-items: center;
 }
 
-/* Search content area */
 .content {
   width: 100%;
 }
 
-/* Input field */
 .input {
   padding: 0 15px;
   height: 39px;
   width: 100%;
-  /* Font size for input during search */
   font-size: 16px;
   border: none;
-  background-color: var(--kungalgame-trans-white-5);
+  background-color: var(--kungalgame-trans-white-9);
   color: var(--kungalgame-font-color-3);
   transition: all 0.2s;
 
@@ -197,14 +183,11 @@ const handleDeleteHistory = (historyIndex: number) => {
   }
 }
 
-/* Search button */
 .search-btn {
-  /* Square shape, does not shrink */
   height: 39px;
   width: 39px;
   flex-shrink: 0;
   border-left: 1px solid var(--kungalgame-trans-blue-4);
-  /* Center the search icon */
   display: flex;
   justify-content: center;
   align-items: center;
@@ -221,12 +204,9 @@ const handleDeleteHistory = (historyIndex: number) => {
   }
 }
 
-/* Search history container */
 .history {
   width: 100%;
-  /* Absolute positioning relative to the search area in the nav */
   position: absolute;
-  /* Tight positioning under the topic search area */
   top: 39px;
   left: 0;
   flex-direction: column;
@@ -237,11 +217,9 @@ const handleDeleteHistory = (historyIndex: number) => {
   box-shadow: var(--shadow);
 }
 
-/* Text for the search history title */
 .title {
   display: flex;
   margin: 10px;
-  /* Distribute two hint texts left and right */
   justify-content: space-between;
 
   span {
@@ -257,13 +235,10 @@ const handleDeleteHistory = (historyIndex: number) => {
   }
 }
 
-/* Container for storing search history tags */
 .history-container {
   display: flex;
   flex-direction: column;
-  /* Font for individual search records */
   font-size: 13px;
-  /* Blank space on the left and right sides of the search record */
   margin: 10px;
 }
 
diff --git a/src/views/Home/content/article/components/ArticleContent.vue b/src/views/Home/content/article/components/ArticleContent.vue
index 0a6a84e1..3b98765c 100644
--- a/src/views/Home/content/article/components/ArticleContent.vue
+++ b/src/views/Home/content/article/components/ArticleContent.vue
@@ -13,78 +13,58 @@ const { page, keywords, sortField, sortOrder, isLoading } = storeToRefs(
   useTempHomeStore()
 )
 
-// Define reactive topic data in the component
 const topics = ref<HomeTopic[]>([])
-// Page container for calculating whether it has reached the bottom
 const content = ref<HTMLElement>()
 
-// Function to get page topics
 const getTopics = async (): Promise<HomeTopic[]> => {
   return (await useTempHomeStore().getHomeTopic()).data
 }
 
-// Call fetchTopics to get topic data (watch is great!)
 watch([keywords, sortField, sortOrder], async () => {
   topics.value = await getTopics()
 })
 
-// Scroll event handler
 const scrollHandler = async () => {
-  // Handling logic when scrolling to the bottom
   if (isScrollAtBottom() && isLoading.value) {
-    // Automatically increment the page number
     page.value++
 
-    // Get the topics for the next page
     const lazyLoadTopics = await getTopics()
 
-    // Check if data has already been loaded, if so, no need to load more
     if (!lazyLoadTopics.length) {
       isLoading.value = false
     }
 
-    // Append the newly loaded reply data to the existing reply data
     topics.value = [...topics.value, ...lazyLoadTopics]
   }
 }
 
-// Check if it has scrolled to the bottom
 const isScrollAtBottom = () => {
   if (content.value) {
     const scrollHeight = content.value.scrollHeight
     const scrollTop = content.value.scrollTop
     const clientHeight = content.value.clientHeight
 
-    // Compare with a margin of error, as JavaScript floating-point numbers are not precise
-    // Why 1007? Because I got KUN san on October 7th, ahahaha
     const errorMargin = 1.007
     return Math.abs(scrollHeight - scrollTop - clientHeight) < errorMargin
   }
 }
 
 onBeforeMount(async () => {
-  // Reset page number, loading status, etc. before mounting
   useTempHomeStore().resetPageStatus()
 })
 
-// Add a scroll event listener after the component is mounted
 onMounted(async () => {
-  // Get a reference to the scrolling element
   const element = content.value
 
-  // If the element is found, start the listener to track scroll behavior
   if (element) {
     element.addEventListener('scroll', scrollHandler)
   }
 
-  // Load topics for the first time
   topics.value = await getTopics()
 })
 
-// Remove the scroll event listener before the component is unmounted
 onBeforeUnmount(() => {
   const element = content.value
-  // If the page element is found, remove the listener
   if (element) {
     element.removeEventListener('scroll', scrollHandler)
   }
diff --git a/src/views/pool/Pool.vue b/src/views/pool/Pool.vue
index a2218e0e..e1c0bc9d 100644
--- a/src/views/pool/Pool.vue
+++ b/src/views/pool/Pool.vue
@@ -20,15 +20,13 @@ const poolPageWidth = computed(() => {
 
 <template>
   <div class="pool">
-    <!-- 话题池容器 -->
     <div class="pool-container">
-      <KUNGalgameSearchBox style="width: 100%; height: 40px" />
+      <KUNGalgameSearchBox
+        style="width: 100%; height: 40px; border-radius: 5px"
+      />
       <Tags />
 
       <div class="topic-container">
-        <!-- TODO: -->
-        <h1 style="margin: auto">This page is under development.</h1>
-
         <Topic
           v-for="kun in topic"
           class="item"
@@ -52,21 +50,17 @@ const poolPageWidth = computed(() => {
   flex-direction: column;
   overflow-y: scroll;
 }
-/* 话题池容器 */
+
 .pool-container {
-  /* 占页面的宽度比例 */
   transition: all 0.2s;
   width: v-bind(poolPageWidth);
-  /* 居中 */
   margin: 0 auto;
   display: flex;
-  /* 不收缩 */
   flex-shrink: 0;
-  /* 竖直方向弹性盒 */
   flex-direction: column;
-  /* 毛玻璃背景 */
   backdrop-filter: blur(5px);
   background-color: var(--kungalgame-trans-white-5);
+  border-radius: 5px;
   padding: 5px;
 }
 
diff --git a/src/views/pool/components/Bar.vue b/src/views/pool/components/Bar.vue
index 8ae30fcd..152ff71a 100644
--- a/src/views/pool/components/Bar.vue
+++ b/src/views/pool/components/Bar.vue
@@ -3,18 +3,15 @@ import { Icon } from '@iconify/vue'
 </script>
 
 <template>
-  <!-- 右侧部分 -->
   <div class="bar">
-    <!-- 对话题进行排序 -->
     <div class="sort">
       <div>排序</div>
-      <!-- 左侧部分 -->
+
       <div class="func">
-        <!-- 按照浏览数排序 -->
         <div><Icon icon="ic:outline-remove-red-eye" /> 按照浏览数排序</div>
-        <!-- 按照点赞数排序 -->
+
         <div><Icon icon="line-md:thumbs-up-twotone" /> 按照点赞数排序</div>
-        <!-- 按照时间排序 -->
+
         <div>
           <Icon class="hourglass" icon="eos-icons:hourglass" /> 按照时间排序
         </div>
@@ -48,27 +45,20 @@ import { Icon } from '@iconify/vue'
   background-color: var(--kungalgame-trans-white-2);
   border: 1px solid var(--kungalgame-blue-1);
   top: 0;
+
+  & > div {
+    padding: 8px;
+
+    &:hover {
+      background-color: var(--kungalgame-trans-pink-1);
+    }
+  }
 }
-.func > div {
-  padding: 8px;
-}
-.func > div:hover {
-  background-color: var(--kungalgame-trans-pink-1);
-}
-/* 排序 hover 出现 */
+
 .sort:hover .func {
   display: block;
 }
-/* 图标字体的颜色 */
-.func i {
-  margin-right: 10px;
-  color: var(--kungalgame-red-4);
-}
-/* 最后一个排序的样式 */
-.func div:last-child i {
-  margin-right: 14px;
-}
-/* 排序 */
+
 .sort,
 .top {
   display: flex;
@@ -82,12 +72,8 @@ import { Icon } from '@iconify/vue'
   border: 1px solid var(--kungalgame-blue-1);
   color: var(--kungalgame-font-color-3);
 }
+
 .top {
   margin-top: 11px;
 }
-.sort i,
-.top i {
-  margin-top: 5px;
-  color: var(--kungalgame-red-4);
-}
 </style>
diff --git a/src/views/pool/components/Tags.vue b/src/views/pool/components/Tags.vue
index f24d81a2..5cbc78df 100644
--- a/src/views/pool/components/Tags.vue
+++ b/src/views/pool/components/Tags.vue
@@ -3,9 +3,7 @@ import { tags } from '@/types/pool/tags'
 </script>
 
 <template>
-  <!-- 话题池顶部交互栏 -->
   <div class="pool-nav-bar">
-    <!-- 热门话题标签，根据所有话题的总标签数推断 -->
     <span class="nav-tags" v-for="kun in tags" :key="kun.index">{{
       kun.name
     }}</span>
@@ -13,26 +11,27 @@ import { tags } from '@/types/pool/tags'
 </template>
 
 <style lang="scss" scoped>
-/* 话题池顶部交互栏 */
 .pool-nav-bar {
   overflow: hidden;
   display: flex;
   flex-wrap: wrap;
   margin: 10px 0;
 }
-/* 热门话题标签 */
+
 .nav-tags {
-  /* 单个标签不换行 */
+  border: 1px solid var(--kungalgame-blue-4);
+  border-radius: 14px;
+  margin: 3px;
+  display: block;
   white-space: nowrap;
-  /* 距离其它话题的距离 */
   font-size: 14px;
-  margin: 2px;
-  padding: 2px;
-  background-color: var(--kungalgame-trans-blue-1);
+  padding: 3px 17px;
+  background-color: var(--kungalgame-trans-blue-0);
   cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: var(--kungalgame-font-color-3);
+
+  &:hover {
+    color: var(--kungalgame-white);
+    background-color: var(--kungalgame-blue-4);
+  }
 }
 </style>
diff --git a/src/views/pool/components/Topic.vue b/src/views/pool/components/Topic.vue
index 72b2c133..021456af 100644
--- a/src/views/pool/components/Topic.vue
+++ b/src/views/pool/components/Topic.vue
@@ -4,9 +4,8 @@ import { ref } from 'vue'
 
 import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
 import { storeToRefs } from 'pinia'
-// 使用设置面板的 store
-const settingsStore = useKUNGalgameSettingsStore()
-const { showKUNGalgameMode } = storeToRefs(settingsStore)
+
+const { showKUNGalgameMode } = storeToRefs(useKUNGalgameSettingsStore())
 
 const light = `rgba(${randomNum(200, 255)}, ${randomNum(200, 255)}, ${randomNum(
   200,
@@ -43,28 +42,25 @@ import { onMounted, watch } from 'vue'
 </script>
 
 <template>
-  <!-- 单个话题容器 -->
   <div class="topic">
-    <!-- 话题的标题 -->
     <div class="title">
       {{ props.data.title }}
     </div>
-    <!-- 话题的内容区 -->
+
     <div class="content">{{ props.data.content }}</div>
-    <!-- 话题的状态 -->
+
     <div class="status">
-      <!-- 浏览数 -->
       <span>
         <Icon icon="ic:outline-remove-red-eye" />
         {{ props.data.view }}
       </span>
-      <!-- 点赞数 -->
+
       <span>
         <Icon icon="line-md:thumbs-up-twotone" />
         {{ props.data.like }}
       </span>
     </div>
-    <!-- 发帖时间 -->
+
     <div class="time">
       <Icon class="hourglass" icon="eos-icons:hourglass" />
       <div>{{ props.data.time }} 发布</div>
@@ -73,33 +69,28 @@ import { onMounted, watch } from 'vue'
 </template>
 
 <style lang="scss" scoped>
-/* 话题池单个话题 */
 .topic {
-  /* 单个话题距下方的距离 */
-  margin-bottom: 7px;
-  /* 竖直方向弹性布局 */
   display: flex;
   flex-direction: column;
-  /* Scss random color */
   background-color: v-bind(color);
   border: 1px solid var(--kungalgame-blue-1);
+  border-radius: 5px;
   color: var(--kungalgame-font-color-3);
   cursor: pointer;
   box-shadow: var(--shadow);
   max-width: 300px;
+
+  &:hover {
+    background-color: var(--kungalgame-trans-white-2);
+  }
 }
-.topic:hover {
-  background-color: var(--kungalgame-trans-white-2);
-}
-/* 话题的标题 */
+
 .title {
-  /* 标题显示两行、超出部分隐藏 */
-  overflow: hidden; /* 超出部分隐藏 */
-  text-overflow: ellipsis; /* 显示省略号 */
-  display: -webkit-box; /* 将文本框转化为弹性伸缩盒子 */
-  -webkit-box-orient: vertical; /* 设置为纵向排列 */
-  -webkit-line-clamp: 2; /* 显示两行文本 */
-  /* 居中 */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
   margin: 0 auto;
   margin-top: 7px;
   padding: 0 7px;
@@ -107,43 +98,40 @@ import { onMounted, watch } from 'vue'
   color: var(--kungalgame-font-color-2);
   flex-shrink: 0;
 }
-/* 话题的内容区 */
+
 .content {
   overflow: hidden;
   font-size: 14px;
   padding: 0 10px;
   margin: 7px 0;
 }
-/* 话题的状态 */
+
 .status {
   display: flex;
   flex-shrink: 0;
   justify-content: space-around;
-  margin-bottom: 10px;
-  /* 窗口缩小不换行 */
   overflow: hidden;
   flex-wrap: wrap;
+
   span {
     display: flex;
     align-items: center;
   }
 }
-.status i {
-  color: var(--kungalgame-red-4);
-}
+
 .time {
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: small;
-  /* 文字间距 */
   letter-spacing: 1px;
-  /* 窗口缩小不换行 */
   overflow: hidden;
   white-space: nowrap;
-}
-.time i {
-  margin: 0 5px;
-  color: var(--kungalgame-purple-4);
+  padding: 7px 0;
+
+  .hourglass {
+    margin: 0 5px;
+    color: var(--kungalgame-purple-4);
+  }
 }
 </style>