From 6e6c0a77c8595fe26677b44b1d736bd1e2be412e Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyu_kun@sina.com>
Date: Fri, 25 Aug 2023 17:49:49 +0800
Subject: [PATCH] ref: main page nav active

---
 src/api/home/types/home.ts                    |  2 +-
 src/components/KUNGalgameSearchBox.vue        | 16 -------
 src/store/modules/home.ts                     |  8 +++-
 .../Home/content/aside/MainPageAside.vue      | 44 +++++++++----------
 4 files changed, 28 insertions(+), 42 deletions(-)

diff --git a/src/api/home/types/home.ts b/src/api/home/types/home.ts
index 6441fdee..065fce14 100644
--- a/src/api/home/types/home.ts
+++ b/src/api/home/types/home.ts
@@ -22,7 +22,7 @@ export interface HomeTopicRequestData {
   page: number
   limit: number
   sortField: string
-  sortOrder: 'asc' | 'desc'
+  sortOrder: string
 }
 
 export interface HomeTopic {
diff --git a/src/components/KUNGalgameSearchBox.vue b/src/components/KUNGalgameSearchBox.vue
index d8ed347d..75508176 100644
--- a/src/components/KUNGalgameSearchBox.vue
+++ b/src/components/KUNGalgameSearchBox.vue
@@ -57,22 +57,6 @@ const debouncedSearch = debounce((inputValue: string) => {
             />
           </span>
         </div>
-        <div>
-          <span
-            >啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星<Icon
-              class="delete"
-              icon="line-md:close-circle"
-            />
-          </span>
-        </div>
-        <div>
-          <span
-            >啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星<Icon
-              class="delete"
-              icon="line-md:close-circle"
-            />
-          </span>
-        </div>
       </div>
     </div>
   </div>
diff --git a/src/store/modules/home.ts b/src/store/modules/home.ts
index cd667bad..b9e92944 100644
--- a/src/store/modules/home.ts
+++ b/src/store/modules/home.ts
@@ -11,7 +11,8 @@ import {
 export const useKUNGalgameHomeStore = defineStore({
   id: 'home',
   persist: true,
-  state: (): HomeTopicRequestData => ({
+  state: () => ({
+    // 搜索框的 store
     /**
      * @param {String} keywords - 搜索关键词，不填默认全部
      * @param {Array} category - 话题的分类，目前有三种，Galgame, Technique, Others
@@ -27,12 +28,15 @@ export const useKUNGalgameHomeStore = defineStore({
     limit: 17,
     sortField: 'updated',
     sortOrder: 'desc',
+
+    // 其它的 store
+    isActiveMainPageAside: true,
   }),
   getters: {},
   actions: {
     // 获取首页话题
     getHomeTopic(): Promise<HomeTopicResponseData> {
-      const requestData = {
+      const requestData: HomeTopicRequestData = {
         keywords: this.keywords,
         category: this.category,
         page: this.page,
diff --git a/src/views/Home/content/aside/MainPageAside.vue b/src/views/Home/content/aside/MainPageAside.vue
index fe38ee6b..764363a2 100644
--- a/src/views/Home/content/aside/MainPageAside.vue
+++ b/src/views/Home/content/aside/MainPageAside.vue
@@ -7,28 +7,20 @@ import AsideActive from './components/AsideActive.vue'
 
 import Aside from './components/Aside.vue'
 
-// 用户点击折叠左侧区域
-const asideBarStatus = (): boolean => {
-  if (localStorage.getItem('KUNGalgame-main-page-aside') === 'true') {
-    return true
-  } else {
-    return false
-  }
-}
+// 导入用户 store
+import { useKUNGalgameHomeStore } from '@/store/modules/home'
+import { storeToRefs } from 'pinia'
+
+const { isActiveMainPageAside } = storeToRefs(useKUNGalgameHomeStore())
 
-const isActive = ref<boolean>(asideBarStatus())
 const asideWidth = ref('240px')
 const handleFold = () => {
-  isActive.value = !isActive.value
+  isActiveMainPageAside.value = !isActiveMainPageAside.value
 }
 watch(
-  isActive,
+  isActiveMainPageAside,
   () => {
-    localStorage.setItem(
-      'KUNGalgame-main-page-aside',
-      isActive.value.toString()
-    )
-    asideWidth.value = isActive.value ? '240px' : '40px'
+    asideWidth.value = isActiveMainPageAside.value ? '240px' : '40px'
   },
   { immediate: true }
 )
@@ -40,20 +32,26 @@ watch(
     <!-- 侧边栏交互 -->
     <div class="nav-aside" @click="handleFold">
       <!-- fa 箭头图标字体 -->
-      <Icon icon="line-md:arrow-left" style="font-size: 17px" v-if="isActive" />
+      <Icon
+        icon="line-md:arrow-left"
+        style="font-size: 17px"
+        v-if="isActiveMainPageAside"
+      />
       <Icon
         icon="line-md:arrow-right"
         style="font-size: 17px"
-        v-if="!isActive"
+        v-if="!isActiveMainPageAside"
       />
-      <span v-if="isActive">{{ $tm('mainPage.asideActive.fold') }}</span>
+      <span v-if="isActiveMainPageAside">{{
+        $tm('mainPage.asideActive.fold')
+      }}</span>
     </div>
-    <div class="item-active" v-if="isActive">
-      <AsideActive :isActive="isActive" />
+    <div class="item-active" v-if="isActiveMainPageAside">
+      <AsideActive :isActive="isActiveMainPageAside" />
     </div>
 
-    <div class="item" v-if="!isActive">
-      <Aside :isActive="!isActive" v-if="!isActive" />
+    <div class="item" v-if="!isActiveMainPageAside">
+      <Aside :isActive="!isActiveMainPageAside" v-if="!isActiveMainPageAside" />
     </div>
   </div>
 </template>