From f560a7dd46a50bb6e86ea04e3c6ed8586ef21d65 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyuyukunkunkun@gmail.com>
Date: Wed, 4 Oct 2023 01:59:10 +0800
Subject: [PATCH] feat: home iconMap

---
 src/utils/formatTime.ts                       |  1 +
 .../article/components/header/SortTopic.vue   | 41 +++++++++++++++++--
 .../article/components/header/navSortItem.ts  |  4 +-
 .../Home/content/aside/components/Topic.vue   |  2 +-
 .../topic/aside/components/asideNavItem.ts    |  7 +++-
 src/views/topic/components/Content.vue        |  1 +
 src/views/topic/components/MasterFooter.vue   |  2 +
 7 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/src/utils/formatTime.ts b/src/utils/formatTime.ts
index b1054135..9e00515c 100644
--- a/src/utils/formatTime.ts
+++ b/src/utils/formatTime.ts
@@ -42,6 +42,7 @@ function replaceTimeUnits(input: string, language: string) {
     (languageOptions as Record<string, any>)[language] || languageOptions.en
 
   const replacements: Record<string, string> = {
+    an: '1', // 将 "an" 替换为 "1"
     a: '1', // 将 "a" 替换为 "1"
     second: languageOption.second,
     seconds: languageOption.seconds,
diff --git a/src/views/Home/content/article/components/header/SortTopic.vue b/src/views/Home/content/article/components/header/SortTopic.vue
index 3bbbdcb1..3a8bfe8a 100644
--- a/src/views/Home/content/article/components/header/SortTopic.vue
+++ b/src/views/Home/content/article/components/header/SortTopic.vue
@@ -6,6 +6,10 @@ import { storeToRefs } from 'pinia'
 
 // 导入排序列表的字段
 import { navSortItem } from './navSortItem'
+import { ref } from 'vue'
+
+// 升序和降序的样式
+const ascClass = ref('')
 
 const { sortField, sortOrder } = storeToRefs(useKUNGalgameHomeStore())
 
@@ -17,18 +21,37 @@ const handleSortByField = (field: string) => {
 const orderAscending = () => {
   useKUNGalgameHomeStore().resetPageStatus()
   sortOrder.value = 'asc'
+  // 更改样式
+  ascClass.value = 'active'
 }
 
 const orderDescending = () => {
   useKUNGalgameHomeStore().resetPageStatus()
   sortOrder.value = 'desc'
+  ascClass.value = ''
+}
+
+const iconMap: Record<string, string> = {
+  updated: 'bi:sort-down',
+  time: 'eos-icons:hourglass',
+  popularity: 'bi:fire',
+  views: 'ic:outline-remove-red-eye',
+  likes: 'line-md:thumbs-up-twotone',
+  replies: 'ri:reply-line',
+  comments: 'fa-regular:comment-dots',
+}
+
+const isSortField = () => {
+  return Object.keys(iconMap).includes(sortField.value)
 }
 </script>
 
 <template>
-  <div class="container">
+  <div class="container" :class="ascClass">
     <span>{{ $tm('mainPage.header.filter') }}</span>
-    <Icon class="filter" icon="bi:sort-down" />
+    <span class="filter">
+      <Icon v-if="isSortField()" :icon="iconMap[sortField]" />
+    </span>
     <!-- 排序的二级菜单 -->
     <div class="sort-container">
       <div class="sort-submenu">
@@ -68,7 +91,7 @@ const orderDescending = () => {
 }
 /* 筛选 */
 .container {
-  background-color: var(--kungalgame-trans-red-3);
+  background-color: var(--kungalgame-trans-blue-3);
   flex-grow: 1;
   border-radius: 5px 0 0 0;
   position: relative;
@@ -85,8 +108,12 @@ const orderDescending = () => {
   position: absolute;
 }
 .filter {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   font-size: 18px;
   margin-left: 7px;
+  color: var(--kungalgame-blue-4);
 }
 .sort-submenu {
   display: none;
@@ -141,4 +168,12 @@ const orderDescending = () => {
     }
   }
 }
+
+/* 点击升序后的样式 */
+.active {
+  background-color: var(--kungalgame-trans-red-3);
+  .filter {
+    color: var(--kungalgame-red-4);
+  }
+}
 </style>
diff --git a/src/views/Home/content/article/components/header/navSortItem.ts b/src/views/Home/content/article/components/header/navSortItem.ts
index 9a121d53..c00a225e 100644
--- a/src/views/Home/content/article/components/header/navSortItem.ts
+++ b/src/views/Home/content/article/components/header/navSortItem.ts
@@ -8,13 +8,13 @@ interface Sort {
 export const navSortItem: Sort[] = [
   {
     index: 1,
-    icon: 'line-md:rotate-270',
+    icon: 'bi:sort-down',
     name: 'updated',
     sortField: 'updated',
   },
   {
     index: 2,
-    icon: 'svg-spinners:clock',
+    icon: 'eos-icons:hourglass',
     name: 'time',
     sortField: 'time',
   },
diff --git a/src/views/Home/content/aside/components/Topic.vue b/src/views/Home/content/aside/components/Topic.vue
index 79be4b5b..554d4d5b 100644
--- a/src/views/Home/content/aside/components/Topic.vue
+++ b/src/views/Home/content/aside/components/Topic.vue
@@ -58,7 +58,7 @@ onMounted(async () => {
         <div class="topic">
           <div class="title">{{ kun.title }}</div>
           <div class="new">
-            <Icon icon="svg-spinners:clock" />
+            <Icon icon="eos-icons:hourglass" />
             <span>{{
               formatTimeDifference(
                 kun.time,
diff --git a/src/views/topic/aside/components/asideNavItem.ts b/src/views/topic/aside/components/asideNavItem.ts
index c1b1a08b..a40c0d50 100644
--- a/src/views/topic/aside/components/asideNavItem.ts
+++ b/src/views/topic/aside/components/asideNavItem.ts
@@ -14,7 +14,12 @@ export const asideNavItem: navItem[] = [
     icon: 'line-md:arrows-vertical',
     name: 'floorSort',
   },
-  { index: 2, sortField: 'time', icon: 'svg-spinners:clock', name: 'timeSort' },
+  {
+    index: 2,
+    sortField: 'time',
+    icon: 'eos-icons:hourglass',
+    name: 'timeSort',
+  },
   {
     index: 3,
     sortField: 'likes',
diff --git a/src/views/topic/components/Content.vue b/src/views/topic/components/Content.vue
index 3b073ebd..769cd7d0 100644
--- a/src/views/topic/components/Content.vue
+++ b/src/views/topic/components/Content.vue
@@ -104,6 +104,7 @@ defineProps<{
 @media (max-width: 700px) {
   .kungalgame-topic-content {
     width: 100%;
+    margin-top: 0;
   }
 }
 </style>
diff --git a/src/views/topic/components/MasterFooter.vue b/src/views/topic/components/MasterFooter.vue
index 5142f4da..63640c17 100644
--- a/src/views/topic/components/MasterFooter.vue
+++ b/src/views/topic/components/MasterFooter.vue
@@ -148,6 +148,8 @@ const handleClickUpvote = async () => {
       props.master.uid
     )
 
+    console.log(res.code)
+
     if (res.code === 200) {
       // 更新推数
       actions.upvotes.length++