rebuild: home header

src/language/en.ts

@@ -49,10 +49,11 @@ export default {
   mainPage: {
     header: {
       filter: 'Filter',
-      search: 'Search Topics',
+      category: 'Category',
+      galgame: 'Visual Novel',
+      technique: 'Technique',
+      others: 'Others',
       all: 'All Topics',
-      history: 'Search History',
-      clear: 'Clear all history',
       updated: 'Default',
       time: 'Time',
       popularity: 'Popularity',

src/language/zh.ts

@@ -49,10 +49,11 @@ export default {
   mainPage: {
     header: {
       filter: '筛选',
-      search: '搜索话题',
+      category: '分类',
+      galgame: 'Galgame',
+      technique: '技术交流',
+      others: '其它',
       all: '全部话题',
-      history: '搜索历史',
-      clear: '清除所有历史',
       updated: '恢复默认排序',
       time: '按照时间排序',
       popularity: '按热度值排序',

src/store/temp/home.ts

@@ -18,7 +18,7 @@ export const useTempHomeStore = defineStore({
      * @returns {HomeTopicResponseData} topicData
      */
     keywords: '',
-    category: '',
+    category: 'galgame',
     page: 1,
     limit: 17,
     sortField: 'updated',

src/views/Home/content/article/components/header/ArticleHeader.vue

@@ -1,20 +1,51 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
-import KUNGalgameSearchBox from '@/components/KUNGalgameSearchBox.vue'
 import SortTopic from './SortTopic.vue'
 
-const category = ['Galgame']
+import { useTempHomeStore } from '@/store/temp/home'
+import { storeToRefs } from 'pinia'
+
+import { categoryItem } from './navItem'
+
+const { category } = storeToRefs(useTempHomeStore())
+
+const handleSortByCategory = (name: string) => {
+  useTempHomeStore().resetPageStatus()
+  category.value = name
+}
+
+const iconMap: Record<string, string> = {
+  galgame: 'icon-park-outline:game',
+  technique: 'mingcute:tool-line',
+  others: 'basil:other-1-outline',
+}
 </script>
 
 <template>
-  <!-- Top interactive area of the article section -->
   <div class="nav-article">
-    <!-- Sorting area container -->
+    <div class="category">
+      <span>{{ $tm('mainPage.header.category') }}</span>
+      <span><Icon :icon="iconMap[category]" /></span>
+
+      <div class="category-container">
+        <div class="category-submenu">
+          <div
+            class="item"
+            v-for="(kun, _) in categoryItem"
+            :key="kun.index"
+            @click="handleSortByCategory(kun.name)"
+          >
+            <span><Icon class="icon-item" :icon="kun.icon" /></span>
+            <span>
+              {{ $tm(`mainPage.header.${kun.name}`) }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <SortTopic />
 
-    <!-- Search box, only Galgame on the homepage -->
-    <KUNGalgameSearchBox :category="category" style="border: none" />
-    <!-- Enter all topics in the interactive area -->
     <RouterLink to="/pool" class="more">
       <span>{{ $tm('mainPage.header.all') }}</span>
       <Icon class="all-topic" icon="line-md:chevron-triple-right" />
@@ -28,11 +59,82 @@ const category = ['Galgame']
   height: 40px;
   display: flex;
   flex-shrink: 0;
-  border-bottom: 1px solid var(--kungalgame-trans-blue-4);
   color: var(--kungalgame-font-color-3);
   z-index: 1;
 }
 
+.category {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 1px;
+  flex-grow: 1;
+  position: relative;
+  background-color: var(--kungalgame-trans-white-5);
+  border-radius: 5px;
+  cursor: pointer;
+
+  & > span:nth-child(2) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 18px;
+    margin-left: 7px;
+    color: var(--kungalgame-blue-4);
+  }
+}
+
+.category-container {
+  width: 100%;
+  top: 40px;
+  position: absolute;
+}
+
+.category-submenu {
+  display: none;
+  flex-direction: column;
+  background-color: var(--kungalgame-trans-white-2);
+  box-shadow: var(--shadow);
+  border-radius: 5px;
+
+  .item {
+    padding: 10px 0;
+    font-size: 14px;
+    color: var(--kungalgame-font-color-3);
+    text-decoration: none;
+    display: flex;
+    justify-content: space-around;
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--kungalgame-trans-blue-1);
+      backdrop-filter: blur(5px);
+    }
+
+    &:active {
+      background-color: var(--kungalgame-trans-blue-2);
+    }
+
+    .icon-item {
+      color: var(--kungalgame-blue-4);
+      padding-right: 3px;
+      font-size: 20px;
+    }
+
+    &:first-child {
+      border-radius: 5px 5px 0 0;
+    }
+
+    &:last-child {
+      border-radius: 0 0 5px 5px;
+    }
+  }
+}
+
+.category:hover .category-submenu {
+  display: flex;
+}
+
 .more {
   height: 100%;
   width: 1px;
@@ -44,8 +146,8 @@ const category = ['Galgame']
   flex-grow: 1;
   border-radius: 0 5px 0 0;
   cursor: pointer;
-  border-left: 1px solid var(--kungalgame-trans-blue-4);
   color: var(--kungalgame-font-color-3);
+  margin-left: 10px;
 
   &:hover {
     background-color: var(--kungalgame-trans-blue-2);

src/views/Home/content/article/components/header/SortTopic.vue

@@ -5,7 +5,7 @@ import { ref } from 'vue'
 import { useTempHomeStore } from '@/store/temp/home'
 import { storeToRefs } from 'pinia'
 
-import { navSortItem } from './navSortItem'
+import { sortItem } from './navItem'
 
 const ascClass = ref('')
 
@@ -47,12 +47,11 @@ const iconMap: Record<string, string> = {
       <Icon :icon="iconMap[sortField]" />
     </span>
 
-    <!-- Secondary menu for sorting -->
     <div class="sort-container">
       <div class="sort-submenu">
         <div
           class="sort-item"
-          v-for="kun in navSortItem"
+          v-for="kun in sortItem"
           :key="kun.index"
           @click="handleSortByField(kun.sortField)"
         >
@@ -86,10 +85,9 @@ const iconMap: Record<string, string> = {
 .container {
   background-color: var(--kungalgame-trans-blue-3);
   flex-grow: 1;
-  border-radius: 5px 0 0 0;
   position: relative;
-  border-right: 1px solid var(--kungalgame-trans-blue-4);
   cursor: pointer;
+  margin-left: 10px;
 
   &:hover {
     background-color: var(--kungalgame-trans-white-5);
@@ -114,7 +112,9 @@ const iconMap: Record<string, string> = {
 .sort-submenu {
   display: none;
   flex-direction: column;
-  box-shadow: 1px 2px 1px 1px var(--kungalgame-trans-blue-4);
+  background-color: var(--kungalgame-trans-white-2);
+  box-shadow: var(--shadow);
+  border-radius: 0 0 5px 5px;
 }
 
 .container:hover .sort-submenu {
@@ -123,7 +123,6 @@ const iconMap: Record<string, string> = {
 
 .sort-item {
   padding: 10px 0;
-  background-color: var(--kungalgame-trans-white-2);
   font-size: 14px;
   color: var(--kungalgame-font-color-3);
   text-decoration: none;
@@ -148,10 +147,10 @@ const iconMap: Record<string, string> = {
 
 .sort-order {
   width: 100%;
-  padding: 10px 0;
   display: flex;
   cursor: default;
   background-color: var(--kungalgame-trans-white-2);
+  border-radius: 0 0 5px 5px;
 
   span {
     color: var(--kungalgame-blue-4);
@@ -160,6 +159,8 @@ const iconMap: Record<string, string> = {
     justify-content: center;
     align-items: center;
     font-size: 17px;
+    padding: 10px 0;
+    cursor: pointer;
 
     &:hover {
       transition: all 0.2s;
@@ -171,6 +172,7 @@ const iconMap: Record<string, string> = {
     }
   }
 }
+
 .active {
   background-color: var(--kungalgame-trans-red-3);
 
@@ -182,14 +184,8 @@ const iconMap: Record<string, string> = {
 @media (max-width: 700px) {
   .sort-item {
     display: flex;
-    justify-content: center;
+    justify-content: space-around;
     align-items: center;
-
-    span {
-      &:nth-child(1) {
-        display: none;
-      }
-    }
   }
 }
 </style>

src/views/Home/content/article/components/header/navItem.ts

@@ -1,3 +1,27 @@
+interface Category {
+  index: number
+  icon: string
+  name: string
+}
+
+export const categoryItem: Category[] = [
+  {
+    index: 1,
+    icon: 'icon-park-outline:game',
+    name: 'galgame',
+  },
+  {
+    index: 2,
+    icon: 'mingcute:tool-line',
+    name: 'technique',
+  },
+  {
+    index: 3,
+    icon: 'basil:other-1-outline',
+    name: 'others',
+  },
+]
+
 interface Sort {
   index: number
   icon: string
@@ -5,7 +29,7 @@ interface Sort {
   sortField: string
 }
 
-export const navSortItem: Sort[] = [
+export const sortItem: Sort[] = [
   {
     index: 1,
     icon: 'line-md:arrows-vertical',