Merge pull request #1004 from MoYingJi/pr/nhs

feat(Search): 增加了是否显示热搜的开关

Author: imsyy

src/components/Search/SearchDefault.vue

@@ -3,10 +3,7 @@
     <n-card v-if="isShow" class="search-default" content-style="padding: 0">
       <n-scrollbar class="scrollbar">
         <!-- 搜索历史 -->
-        <div
-          v-if="settingStore.showSearchHistory && dataStore.searchHistory.length > 0"
-          class="history"
-        >
+        <div v-if="isShowSearchHistory" class="history">
           <div class="title">
             <SvgIcon name="History" />
             <n-text class="name">搜索历史 </n-text>
@@ -25,7 +22,7 @@
           </n-flex>
         </div>
         <!-- 热搜榜 -->
-        <div v-if="searchHotData.length > 0" class="hot-list">
+        <div v-if="isShowHotSearch" class="hot-list">
           <div class="title">
             <SvgIcon name="Fire" />
             <n-text class="name">热搜榜 </n-text>
@@ -86,18 +83,30 @@ const settingStore = useSettingStore();
 
 const searchHotData = ref<SearchHotItem[]>([]);
 
-// 是否展示
+// 是否展示 SearchDefault
 const isShow = computed(() => {
   return (
     !statusStore.searchInputValue &&
     statusStore.searchFocus &&
-    (searchHotData.value.length > 0 || dataStore.searchHistory.length > 0)
+    (isShowHotSearch.value || isShowSearchHistory.value)
+  );
+});
+
+// 是否展示搜索历史
+const isShowSearchHistory = computed(() => {
+  return settingStore.showSearchHistory && dataStore.searchHistory.length > 0;
+});
+
+// 是否展示热搜榜
+const isShowHotSearch = computed(() => {
+  return (
+    settingStore.useOnlineService && settingStore.showHotSearch && searchHotData.value.length > 0
   );
 });
 
 // 获取热搜数据
 const getSearchHotData = async () => {
-  if (!settingStore.useOnlineService) return;
+  if (!settingStore.useOnlineService || !settingStore.showHotSearch) return;
   const result = await getCacheData(searchHot, {
     key: "searchHotData",
     time: 10,

src/components/Setting/config/general.ts

@@ -308,17 +308,30 @@ export const useGeneralSettings = (): SettingConfig => {
           {
             key: "showSearchHistory",
             label: "显示搜索历史",
+            description: "是否在搜索框的默认显示内容中显示当前搜索历史",
             type: "switch",
             value: computed({
               get: () => settingStore.showSearchHistory,
               set: (v) => (settingStore.showSearchHistory = v),
             }),
           },
+          {
+            key: "showHotSearch",
+            label: "显示热搜榜",
+            type: "switch",
+            show: computed(() => settingStore.useOnlineService),
+            description: "是否在搜索框的默认显示内容中显示热搜榜单",
+            value: computed({
+              get: () => settingStore.showHotSearch,
+              set: (v) => (settingStore.showHotSearch = v),
+            }),
+          },
           {
             key: "enableSearchKeyword",
             label: "搜索关键词建议",
             type: "switch",
-            description: "是否启用搜索关键词建议",
+            show: computed(() => settingStore.useOnlineService),
+            description: "将搜索框闲置时的默认显示内容替换为搜索关键词建议",
             value: computed({
               get: () => settingStore.enableSearchKeyword,
               set: (v) => (settingStore.enableSearchKeyword = v),

src/stores/setting.ts

@@ -214,8 +214,6 @@ export interface SettingState {
   lyricsBlendMode: "screen" | "plus-lighter";
   /** 播放试听 */
   playSongDemo: boolean;
-  /** 显示搜索历史 */
-  showSearchHistory: boolean;
   /** 是否使用 AMLL 歌词 */
   useAMLyrics: boolean;
   /** 是否使用 AMLL 歌词弹簧效果 */
@@ -410,6 +408,10 @@ export interface SettingState {
   };
   /** 启用搜索关键词获取 */
   enableSearchKeyword: boolean;
+  /** 显示搜索历史 */
+  showSearchHistory: boolean;
+  /** 显示热搜榜 */
+  showHotSearch: boolean;
   /** 搜索框行为 */
   searchInputBehavior: "normal" | "clear" | "sync";
   /** 显示主页问好 */
@@ -500,7 +502,6 @@ export const useSettingStore = defineStore("setting", {
     englishLyricFont: "follow",
     koreanLyricFont: "follow",
     hideVipTag: false,
-    showSearchHistory: true,
     menuShowCover: true,
     menuExpandedKeys: [],
     routeAnimation: "slide",
@@ -703,6 +704,8 @@ export const useSettingStore = defineStore("setting", {
       musicTagEditor: true,
     },
     enableSearchKeyword: true,
+    showSearchHistory: true,
+    showHotSearch: true,
     searchInputBehavior: "normal",
     showHomeGreeting: true,
     homePageSections: [