refactor: 调整搜索相关页面

src/renderer/views/mobile-search-result/index.vue

@@ -36,18 +36,8 @@
 
       <!-- 搜索结果 -->
       <div v-else-if="results.length" class="result-list">
-        <!-- B站视频 -->
-        <template v-if="searchType === SEARCH_TYPE.BILIBILI">
-          <bilibili-item
-            v-for="item in results"
-            :key="item.bvid"
-            :item="item"
-            @play="handlePlayBilibili"
-          />
-        </template>
-
         <!-- 歌曲搜索 -->
-        <template v-else-if="searchType === SEARCH_TYPE.MUSIC">
+        <template v-if="searchType === SEARCH_TYPE.MUSIC">
           <song-item
             v-for="item in results"
             :key="item.id"
@@ -88,21 +78,12 @@ import { computed, inject, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
-import {
-  createSimpleBilibiliSong,
-  getBilibiliAudioUrl,
-  getBilibiliProxyUrl,
-  getBilibiliVideoDetail,
-  searchBilibili
-} from '@/api/bilibili';
 import { getSearch } from '@/api/search';
-import BilibiliItem from '@/components/common/BilibiliItem.vue';
 import SearchItem from '@/components/common/SearchItem.vue';
 import SongItem from '@/components/common/SongItem.vue';
 import { SEARCH_TYPE, SEARCH_TYPES } from '@/const/bar-const';
 import { usePlayerStore } from '@/store/modules/player';
 import { useSearchStore } from '@/store/modules/search';
-import type { IBilibiliSearchResult } from '@/types/bilibili';
 
 const { t, locale } = useI18n();
 const route = useRoute();
@@ -151,37 +132,8 @@ const performSearch = async (isLoadMore = false) => {
   }
 
   try {
-    // B站搜索
-    if (searchType.value === SEARCH_TYPE.BILIBILI) {
-      const response = await searchBilibili({
-        keyword: keyword.value,
-        page: page.value,
-        pagesize: ITEMS_PER_PAGE
-      });
-
-      const bilibiliVideos = response.data.data.result.map((item: any) => ({
-        id: item.aid,
-        bvid: item.bvid,
-        title: item.title,
-        author: item.author,
-        pic: getBilibiliProxyUrl(item.pic),
-        duration: item.duration,
-        pubdate: item.pubdate,
-        description: item.description,
-        view: item.play,
-        danmaku: item.video_review
-      }));
-
-      if (isLoadMore) {
-        results.value = [...results.value, ...bilibiliVideos];
-      } else {
-        results.value = bilibiliVideos;
-      }
-
-      hasMore.value = bilibiliVideos.length === ITEMS_PER_PAGE;
-    }
     // 歌曲搜索
-    else if (searchType.value === SEARCH_TYPE.MUSIC) {
+    if (searchType.value === SEARCH_TYPE.MUSIC) {
       const { data } = await getSearch({
         keywords: keyword.value,
         type: searchType.value,
@@ -319,29 +271,6 @@ const handlePlay = (item: any) => {
   playerStore.addToNextPlay(item);
 };
 
-// 播放B站视频
-const handlePlayBilibili = async (item: IBilibiliSearchResult) => {
-  try {
-    const videoDetail = await getBilibiliVideoDetail(item.bvid);
-    const pages = videoDetail.data.pages;
-
-    if (pages && pages.length === 1) {
-      const audioUrl = await getBilibiliAudioUrl(item.bvid, pages[0].cid);
-      const playItem = createSimpleBilibiliSong(item, audioUrl);
-      playItem.bilibiliData = {
-        bvid: item.bvid,
-        cid: pages[0].cid
-      };
-      playerStore.setPlay(playItem);
-    } else {
-      router.push(`/bilibili/${item.bvid}`);
-    }
-  } catch (error) {
-    console.error('播放B站视频失败:', error);
-    router.push(`/bilibili/${item.bvid}`);
-  }
-};
-
 // 返回
 const goBack = () => {
   router.back();

src/renderer/views/search/SearchResult.vue

@@ -0,0 +1,522 @@
+<template>
+  <div
+    class="search-result-page h-full w-full bg-white dark:bg-black transition-colors duration-500"
+  >
+    <n-scrollbar class="h-full" @scroll="handleScroll">
+      <div class="search-result-content pb-32">
+        <!-- Header Section -->
+        <section class="header-section px-4 md:px-8 pt-8 pb-6">
+          <div class="flex flex-col gap-6">
+            <div>
+              <h1
+                class="text-3xl md:text-4xl font-bold tracking-tight text-neutral-900 dark:text-white mb-1"
+              >
+                {{ currentKeyword }}
+              </h1>
+              <p class="text-neutral-500 dark:text-neutral-400">
+                {{ t('search.title.searchList') }}
+              </p>
+            </div>
+
+            <!-- Search Type Tabs -->
+            <div class="flex items-center gap-2 overflow-x-auto no-scrollbar pb-2">
+              <button
+                v-for="type in searchTypeOptions"
+                :key="type.key"
+                class="px-4 py-2 rounded-full text-sm font-medium transition-all duration-200 whitespace-nowrap"
+                :class="
+                  searchType === type.key
+                    ? 'bg-primary text-white shadow-lg shadow-primary/25'
+                    : 'bg-neutral-100 dark:bg-neutral-900 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-800'
+                "
+                @click="handleTypeChange(type.key)"
+              >
+                {{ type.label }}
+              </button>
+            </div>
+          </div>
+        </section>
+
+        <!-- Action Bar (Sticky) -->
+        <section
+          v-if="searchDetail?.songs?.length && searchType === SEARCH_TYPE.MUSIC"
+          class="action-bar sticky top-0 z-20 px-4 md:px-8 py-3 bg-white/80 dark:bg-black/80 backdrop-blur-xl border-b border-neutral-100 dark:border-neutral-800/50"
+        >
+          <div class="flex items-center justify-between gap-4">
+            <div class="flex items-center gap-3">
+              <!-- Play All Button -->
+              <button
+                class="play-all-btn flex items-center gap-2 px-6 py-2.5 rounded-full bg-primary hover:bg-primary/90 text-white font-semibold text-sm transition-all duration-200 hover:scale-105 active:scale-95 shadow-lg shadow-primary/25"
+                @click="handlePlayAll"
+              >
+                <i class="ri-play-circle-line text-lg" />
+                <span>{{ t('search.button.playAll') }}</span>
+              </button>
+
+              <!-- Batch Actions -->
+              <div
+                v-if="isElectron"
+                class="h-8 w-[1px] bg-neutral-200 dark:bg-neutral-800 mx-1 hidden md:block"
+              ></div>
+
+              <button
+                v-if="!isSelecting && isElectron"
+                class="action-btn-icon w-10 h-10 rounded-full flex items-center justify-center bg-neutral-100 dark:bg-neutral-900 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-all"
+                @click="startSelect"
+              >
+                <i class="ri-checkbox-multiple-line text-lg" />
+              </button>
+
+              <div
+                v-if="isSelecting"
+                class="flex items-center gap-2 animate-in fade-in slide-in-from-left-2"
+              >
+                <n-checkbox
+                  :checked="isAllSelected"
+                  :indeterminate="isIndeterminate"
+                  @update:checked="handleSelectAll"
+                >
+                  {{ t('common.selectAll') }}
+                </n-checkbox>
+                <button
+                  class="px-4 py-1.5 rounded-full bg-primary/10 text-primary text-xs font-bold hover:bg-primary/20 transition-all"
+                  :disabled="selectedSongs.length === 0 || isDownloading"
+                  @click="handleBatchDownload"
+                >
+                  <i class="ri-download-line mr-1" />
+                  {{ t('favorite.download', { count: selectedSongs.length }) }}
+                </button>
+                <button
+                  class="text-xs text-neutral-400 hover:text-neutral-600"
+                  @click="cancelSelect"
+                >
+                  {{ t('common.cancel') }}
+                </button>
+              </div>
+            </div>
+
+            <!-- Right Tools -->
+            <div class="flex items-center gap-3">
+              <!-- Layout Toggle -->
+              <button
+                v-if="!isMobile"
+                class="action-btn-icon w-10 h-10 rounded-full flex items-center justify-center bg-neutral-100 dark:bg-neutral-900 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-all"
+                @click="toggleLayout"
+              >
+                <i :class="isCompactLayout ? 'ri-list-check-2' : 'ri-grid-line'" class="text-lg" />
+              </button>
+            </div>
+          </div>
+        </section>
+
+        <!-- Results Section -->
+        <section class="results-section px-4 md:px-8 mt-6">
+          <n-spin :show="searchDetailLoading">
+            <div
+              v-if="searchDetailLoading && !isLoadingMore"
+              class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"
+            >
+              <div v-for="i in 12" :key="i" class="space-y-3">
+                <div
+                  class="aspect-square animate-pulse rounded-2xl bg-neutral-200 dark:bg-neutral-800"
+                />
+                <div class="h-4 w-3/4 animate-pulse rounded bg-neutral-200 dark:bg-neutral-800" />
+              </div>
+            </div>
+
+            <template v-else>
+              <!-- Music List Style (Songs) -->
+              <div v-if="searchType === SEARCH_TYPE.MUSIC" class="song-results-list">
+                <div
+                  v-for="(item, index) in searchDetail?.songs"
+                  :key="item.id"
+                  class="mb-2 animate-item"
+                  :style="{ animationDelay: calculateAnimationDelay(index % 30, 0.04) }"
+                >
+                  <song-item
+                    :index="index"
+                    :item="formatSong(item)"
+                    :compact="isCompactLayout"
+                    :selectable="isSelecting"
+                    :selected="selectedSongs.includes(item.id)"
+                    :is-next="true"
+                    @play="handlePlay"
+                    @select="(id, selected) => handleSelect(id, selected)"
+                  />
+                </div>
+              </div>
+
+              <!-- Grid Style (Albums, Playlists, MVs, Radios) -->
+              <div v-else>
+                <!-- MV Grid (Needs fewer columns) -->
+                <div
+                  v-if="searchType === SEARCH_TYPE.MV"
+                  class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4"
+                >
+                  <div
+                    v-for="(item, index) in searchDetail?.mvs"
+                    :key="item.id"
+                    class="animate-item"
+                    :style="{ animationDelay: calculateAnimationDelay(index % 30, 0.04) }"
+                  >
+                    <search-item :item="item" />
+                  </div>
+                </div>
+
+                <!-- Others (Albums, Playlists, Radios) -->
+                <div
+                  v-else
+                  class="grid grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6"
+                >
+                  <template v-for="(list, key) in searchDetail" :key="key">
+                    <template
+                      v-if="
+                        key.toString() !== 'songs' &&
+                        key.toString() !== 'djRadios' &&
+                        key.toString() !== 'mvs'
+                      "
+                    >
+                      <div
+                        v-for="(item, index) in list"
+                        :key="item.id"
+                        class="animate-item"
+                        :style="{ animationDelay: calculateAnimationDelay(index % 30, 0.04) }"
+                      >
+                        <search-item :item="item" />
+                      </div>
+                    </template>
+
+                    <!-- Handle djRadios specifically if they are in searchDetail -->
+                    <template v-if="key.toString() === 'djRadios'">
+                      <div
+                        v-for="(item, index) in searchDetail.djRadios"
+                        :key="item.id"
+                        class="animate-item"
+                        :style="{ animationDelay: calculateAnimationDelay(index % 30, 0.04) }"
+                      >
+                        <search-item :item="item" />
+                      </div>
+                    </template>
+                  </template>
+                </div>
+              </div>
+
+              <!-- Empty State -->
+              <div
+                v-if="!searchDetailLoading && isResultEmpty"
+                class="flex flex-col items-center justify-center py-20 text-neutral-400"
+              >
+                <i class="ri-search-line text-6xl mb-4 opacity-20"></i>
+                <p>{{ t('search.noResults') }}</p>
+              </div>
+
+              <!-- Loading More / Footer -->
+              <div class="mt-12 py-8 border-t border-neutral-100 dark:border-neutral-800">
+                <div v-if="isLoadingMore" class="flex flex-col items-center gap-4">
+                  <n-spin size="small" />
+                  <span class="text-xs text-neutral-400 font-medium tracking-widest uppercase">
+                    {{ t('search.loading.more') }}
+                  </span>
+                </div>
+                <div v-if="!hasMore && !isResultEmpty" class="text-center">
+                  <span
+                    class="text-xs text-neutral-400 font-medium tracking-widest uppercase opacity-50"
+                  >
+                    — {{ t('search.noMore') }} —
+                  </span>
+                </div>
+              </div>
+            </template>
+          </n-spin>
+        </section>
+      </div>
+    </n-scrollbar>
+    <play-bottom />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useDateFormat } from '@vueuse/core';
+import { computed, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import { getSearch } from '@/api/search';
+import PlayBottom from '@/components/common/PlayBottom.vue';
+import SearchItem from '@/components/common/SearchItem.vue';
+import SongItem from '@/components/common/SongItem.vue';
+import { SEARCH_TYPE, SEARCH_TYPES } from '@/const/bar-const';
+import { useDownload } from '@/hooks/useDownload';
+import { usePlayerStore } from '@/store/modules/player';
+import { useSearchStore } from '@/store/modules/search';
+import type { SongResult } from '@/types/music';
+import { calculateAnimationDelay, isElectron, isMobile } from '@/utils';
+
+defineOptions({
+  name: 'SearchResult'
+});
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const playerStore = usePlayerStore();
+const searchStore = useSearchStore();
+
+const formatSong = (item: any) => {
+  if (!item) return null;
+  return {
+    ...item,
+    picUrl: item.al?.picUrl || item.picUrl,
+    song: {
+      artists: item.ar || item.artists,
+      name: item.name,
+      id: item.id
+    }
+  };
+};
+
+const searchDetail = ref<any>();
+const searchType = computed(() => searchStore.searchType as number);
+const searchDetailLoading = ref(false);
+
+const ITEMS_PER_PAGE = 30;
+const page = ref(0);
+const hasMore = ref(true);
+const isLoadingMore = ref(false);
+const currentKeyword = computed(() => (route.query.keyword as string) || '');
+
+const searchTypeOptions = computed(() => {
+  return SEARCH_TYPES.map((type) => ({
+    label: t(type.label),
+    key: type.key
+  }));
+});
+
+const isResultEmpty = computed(() => {
+  if (!searchDetail.value) return false;
+  return Object.values(searchDetail.value).every((list: any) => !list || list.length === 0);
+});
+
+const isSelecting = ref(false);
+const selectedSongs = ref<number[]>([]);
+const { isDownloading, batchDownloadMusic } = useDownload();
+const isCompactLayout = ref(
+  isMobile.value ? false : localStorage.getItem('musicListLayout') === 'compact'
+);
+
+const startSelect = () => {
+  isSelecting.value = true;
+  selectedSongs.value = [];
+};
+
+const cancelSelect = () => {
+  isSelecting.value = false;
+  selectedSongs.value = [];
+};
+
+const handleSelect = (id: number, selected: boolean) => {
+  if (selected) {
+    if (!selectedSongs.value.includes(id)) {
+      selectedSongs.value.push(id);
+    }
+  } else {
+    selectedSongs.value = selectedSongs.value.filter((i) => i !== id);
+  }
+};
+
+const isAllSelected = computed(
+  () =>
+    searchDetail.value?.songs?.length > 0 &&
+    selectedSongs.value.length === searchDetail.value.songs.length
+);
+
+const isIndeterminate = computed(
+  () =>
+    selectedSongs.value.length > 0 &&
+    selectedSongs.value.length < (searchDetail.value?.songs?.length || 0)
+);
+
+const handleSelectAll = (checked: boolean) => {
+  selectedSongs.value = checked ? searchDetail.value.songs.map((s: any) => s.id) : [];
+};
+
+const handleBatchDownload = async () => {
+  const list = selectedSongs.value
+    .map((id) => searchDetail.value.songs.find((s: any) => s.id === id))
+    .filter((s) => s)
+    .map(formatSong) as SongResult[];
+  await batchDownloadMusic(list);
+  cancelSelect();
+};
+
+const toggleLayout = () => {
+  isCompactLayout.value = !isCompactLayout.value;
+  localStorage.setItem('musicListLayout', isCompactLayout.value ? 'compact' : 'normal');
+};
+
+const loadSearch = async (isLoadMore = false) => {
+  const keywords = currentKeyword.value;
+  if (!keywords) return;
+
+  const type = searchType.value;
+
+  if (!isLoadMore) {
+    searchDetail.value = undefined;
+    page.value = 0;
+    hasMore.value = true;
+    searchDetailLoading.value = true;
+  } else {
+    if (isLoadingMore.value || !hasMore.value) return;
+    isLoadingMore.value = true;
+  }
+
+  try {
+    const { data } = await getSearch({
+      keywords,
+      type,
+      limit: ITEMS_PER_PAGE,
+      offset: page.value * ITEMS_PER_PAGE
+    });
+
+    const songs = data.result.songs || [];
+    const albums = data.result.albums || [];
+    const mvs = (data.result.mvs || []).map((item: any) => ({
+      ...item,
+      picUrl: item.cover,
+      playCount: item.playCount,
+      desc: item.artists.map((artist: any) => artist.name).join('/'),
+      type: 'mv'
+    }));
+
+    const playlists = (data.result.playlists || []).map((item: any) => ({
+      ...item,
+      picUrl: item.coverImgUrl,
+      playCount: item.playCount,
+      desc: item.creator.nickname,
+      type: 'playlist'
+    }));
+
+    const djRadios = (data.result.djRadios || []).map((item: any) => ({
+      ...item,
+      picUrl: item.picUrl,
+      desc: item.dj.nickname,
+      type: 'djRadio'
+    }));
+
+    songs.forEach((item: any) => {
+      item.picUrl = item.al.picUrl;
+      item.artists = item.ar;
+    });
+    albums.forEach((item: any) => {
+      item.desc = `${item.artist.name} ${item.company} ${dateFormat(item.publishTime)}`;
+    });
+
+    if (isLoadMore && searchDetail.value) {
+      searchDetail.value.songs = [...(searchDetail.value.songs || []), ...songs];
+      searchDetail.value.albums = [...(searchDetail.value.albums || []), ...albums];
+      searchDetail.value.mvs = [...(searchDetail.value.mvs || []), ...mvs];
+      searchDetail.value.playlists = [...(searchDetail.value.playlists || []), ...playlists];
+      searchDetail.value.djRadios = [...(searchDetail.value.djRadios || []), ...djRadios];
+    } else {
+      searchDetail.value = { songs, albums, mvs, playlists, djRadios };
+    }
+
+    hasMore.value =
+      songs.length === ITEMS_PER_PAGE ||
+      albums.length === ITEMS_PER_PAGE ||
+      mvs.length === ITEMS_PER_PAGE ||
+      playlists.length === ITEMS_PER_PAGE ||
+      djRadios.length === ITEMS_PER_PAGE;
+
+    page.value++;
+  } catch (error) {
+    console.error(t('search.error.searchFailed'), error);
+  } finally {
+    searchDetailLoading.value = false;
+    isLoadingMore.value = false;
+  }
+};
+
+const handleTypeChange = (type: number) => {
+  searchStore.searchType = type;
+  router.replace({
+    path: '/search-result',
+    query: {
+      ...route.query,
+      type
+    }
+  });
+};
+
+const handleScroll = (e: any) => {
+  const { scrollTop, scrollHeight, clientHeight } = e.target;
+  if (scrollTop + clientHeight >= scrollHeight - 150 && !isLoadingMore.value && hasMore.value) {
+    loadSearch(true);
+  }
+};
+
+const dateFormat = (time: any) => useDateFormat(time, 'YYYY.MM.DD').value;
+
+const handlePlay = (item: any) => {
+  playerStore.addToNextPlay(item);
+};
+
+const handlePlayAll = () => {
+  if (!searchDetail.value?.songs?.length) return;
+  const songs = searchDetail.value.songs.map(formatSong);
+  playerStore.setPlayList(songs);
+  if (songs[0]) {
+    playerStore.setPlay(songs[0]);
+  }
+};
+
+onMounted(() => {
+  if (route.query.type) {
+    searchStore.searchType = Number(route.query.type);
+  }
+  if (currentKeyword.value) {
+    loadSearch();
+  }
+});
+
+watch(
+  () => [route.query.keyword, route.query.type],
+  () => {
+    if (route.name === 'searchResult') {
+      if (route.query.type) {
+        searchStore.searchType = Number(route.query.type);
+      }
+      loadSearch();
+    }
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+.search-result-page {
+  position: relative;
+}
+
+.animate-item {
+  animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+</style>

src/renderer/views/search/index.vue

@@ -1,201 +1,124 @@
 <template>
-  <div class="search-page">
-    <n-layout
-      v-if="isMobile ? !searchDetail : true"
-      class="hot-search"
-      :class="setAnimationClass('animate__fadeInDown')"
-      :native-scrollbar="false"
-    >
-      <div class="title">{{ t('search.title.hotSearch') }}</div>
-      <div class="hot-search-list">
-        <template v-for="(item, index) in hotSearchData?.data" :key="index">
-          <div
-            :class="setAnimationClass('animate__bounceInLeft')"
-            :style="setAnimationDelay(index, 10)"
-            class="hot-search-item"
-            @click.stop="loadSearch(item.searchWord, 1)"
-          >
-            <span class="hot-search-item-count" :class="{ 'hot-search-item-count-3': index < 3 }">{{
-              index + 1
-            }}</span>
-            {{ item.searchWord }}
-          </div>
-        </template>
-      </div>
-    </n-layout>
-    <!-- 搜索到的歌曲列表 -->
-    <n-layout
-      v-if="isMobile ? searchDetail : true"
-      class="search-list"
-      :class="setAnimationClass('animate__fadeInDown')"
-      :native-scrollbar="false"
-      @scroll="handleScroll"
-    >
-      <div v-if="searchDetail" class="title">
-        <i
-          class="ri-arrow-left-s-line mr-1 cursor-pointer hover:text-gray-500 hover:scale-110"
-          @click="searchDetail = null"
-        ></i>
-        {{ hotKeyword }}
-        <div v-if="searchDetail?.songs?.length" class="title-play-all">
-          <div class="play-all-btn" @click="handlePlayAll">
-            <i class="ri-play-circle-fill"></i>
-            <span>{{ t('search.button.playAll') }}</span>
+  <div
+    class="search-page-container h-full w-full bg-white dark:bg-black transition-colors duration-500"
+  >
+    <n-scrollbar class="h-full">
+      <div class="search-content w-full pb-32 pt-6 px-4 sm:px-6 lg:px-8 lg:pl-0">
+        <!-- Search Header / Hero -->
+        <div class="mb-8 flex flex-col md:flex-row md:items-end justify-between gap-6">
+          <div>
+            <h1
+              class="text-3xl md:text-4xl font-bold tracking-tight text-neutral-900 dark:text-white mb-2"
+            >
+              {{ t('search.title.hotSearch') }}
+            </h1>
+            <p class="text-neutral-500 dark:text-neutral-400">探索当下最热门的搜索趋势</p>
           </div>
         </div>
-      </div>
-      <div v-loading="searchDetailLoading" class="search-list-box">
-        <template v-if="searchDetail">
-          <!-- B站视频搜索结果 -->
-          <template v-if="searchType === SEARCH_TYPE.BILIBILI">
-            <div
-              v-for="(item, index) in searchDetail?.bilibili"
-              :key="item.bvid"
-              :class="setAnimationClass('animate__bounceInRight')"
-              :style="getSearchListAnimation(index)"
-            >
-              <bilibili-item :item="item" @play="handlePlayBilibili" />
-            </div>
-            <div v-if="isLoadingMore" class="loading-more">
-              <n-spin size="small" />
-              <span class="ml-2">{{ t('search.loading.more') }}</span>
-            </div>
-            <div v-if="!hasMore && searchDetail" class="no-more">{{ t('search.noMore') }}</div>
-          </template>
-          <!-- 原有音乐搜索结果 -->
-          <template v-else>
-            <div
-              v-for="(item, index) in searchDetail?.songs"
-              :key="item.id"
-              :class="setAnimationClass('animate__bounceInRight')"
-              :style="getSearchListAnimation(index)"
-            >
-              <song-item :item="item" @play="handlePlay" :is-next="true" />
-            </div>
-            <template v-for="(list, key) in searchDetail">
-              <template v-if="key.toString() !== 'songs'">
-                <div
-                  v-for="(item, index) in list"
-                  :key="item.id"
-                  class="mb-3"
-                  :class="setAnimationClass('animate__bounceInRight')"
-                  :style="getSearchListAnimation(index)"
+
+        <!-- Hot Search Section -->
+        <div class="space-y-12">
+          <section>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+              <div
+                v-for="(item, index) in hotSearchData?.data"
+                :key="index"
+                class="hot-search-card group flex items-center gap-4 p-4 rounded-2xl bg-neutral-50 dark:bg-neutral-900/50 hover:bg-neutral-100 dark:hover:bg-neutral-800/50 cursor-pointer transition-all duration-300 animate-item"
+                :style="{ animationDelay: calculateAnimationDelay(index, 0.03) }"
+                @click="handleSearch(item.searchWord)"
+              >
+                <span
+                  class="flex-shrink-0 w-8 text-lg font-bold italic transition-colors duration-300"
+                  :class="index < 3 ? 'text-primary' : 'text-neutral-300 dark:text-neutral-700'"
                 >
-                  <search-item :item="item" />
+                  {{ String(index + 1).padStart(2, '0') }}
+                </span>
+                <div class="flex-1 min-w-0">
+                  <p
+                    class="text-sm font-semibold text-neutral-900 dark:text-white truncate group-hover:text-primary transition-colors"
+                  >
+                    {{ item.searchWord }}
+                  </p>
+                  <p v-if="item.content" class="text-xs text-neutral-400 truncate mt-0.5">
+                    {{ item.content }}
+                  </p>
                 </div>
-              </template>
-            </template>
-            <!-- 加载状态 -->
-            <div v-if="isLoadingMore" class="loading-more">
-              <n-spin size="small" />
-              <span class="ml-2">{{ t('search.loading.more') }}</span>
+                <div v-if="item.iconUrl" class="flex-shrink-0">
+                  <img :src="item.iconUrl" class="h-4 object-contain opacity-80" />
+                </div>
+              </div>
             </div>
-            <div v-if="!hasMore && searchDetail" class="no-more">{{ t('search.noMore') }}</div>
-          </template>
-        </template>
-        <!-- 搜索历史 -->
-        <template v-else>
-          <div class="search-history">
-            <div class="search-history-header title">
-              <span>{{ t('search.title.searchHistory') }}</span>
-              <n-button text type="error" @click="clearSearchHistory">
-                <template #icon>
-                  <i class="ri-delete-bin-line"></i>
-                </template>
+          </section>
+
+          <!-- Search History -->
+          <section v-if="searchHistory.length > 0">
+            <div class="mb-6 flex items-center justify-between">
+              <h2 class="text-xl font-bold text-neutral-900 dark:text-white">
+                {{ t('search.title.searchHistory') }}
+              </h2>
+              <button
+                class="text-xs text-neutral-400 hover:text-red-500 transition-colors"
+                @click="clearSearchHistory"
+              >
                 {{ t('search.button.clear') }}
-              </n-button>
+              </button>
             </div>
-            <div class="search-history-list">
-              <n-tag
+            <div class="flex flex-wrap gap-2">
+              <div
                 v-for="(item, index) in searchHistory"
                 :key="index"
-                :class="setAnimationClass('animate__bounceIn')"
-                :style="getSearchListAnimation(index)"
-                class="search-history-item"
-                round
-                closable
-                @click="handleSearchHistory(item)"
-                @close="handleCloseSearchHistory(item)"
+                class="group relative flex items-center gap-2 px-4 py-1.5 rounded-full bg-neutral-100 dark:bg-neutral-900 text-sm text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-all cursor-pointer"
+                @click="handleSearch(item.keyword, item.type)"
               >
-                {{ item.keyword }}
-              </n-tag>
+                <span>{{ item.keyword }}</span>
+                <i
+                  class="ri-close-line text-neutral-400 hover:text-red-500 transition-colors"
+                  @click.stop="handleCloseSearchHistory(item)"
+                />
+              </div>
             </div>
-          </div>
-        </template>
+          </section>
+        </div>
       </div>
-    </n-layout>
+    </n-scrollbar>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { useDateFormat } from '@vueuse/core';
-import { computed, onMounted, ref, watch } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
+import { useRouter } from 'vue-router';
 
-import {
-  createSimpleBilibiliSong,
-  getBilibiliAudioUrl,
-  getBilibiliProxyUrl,
-  getBilibiliVideoDetail,
-  searchBilibili
-} from '@/api/bilibili';
 import { getHotSearch } from '@/api/home';
-import { getSearch } from '@/api/search';
-import BilibiliItem from '@/components/common/BilibiliItem.vue';
-import SearchItem from '@/components/common/SearchItem.vue';
-import SongItem from '@/components/common/SongItem.vue';
-import { SEARCH_TYPE } from '@/const/bar-const';
-import { usePlayerStore } from '@/store/modules/player';
 import { useSearchStore } from '@/store/modules/search';
-import type { IBilibiliSearchResult } from '@/types/bilibili';
 import type { IHotSearch } from '@/types/search';
-import { isMobile, setAnimationClass, setAnimationDelay } from '@/utils';
+import { calculateAnimationDelay } from '@/utils';
 
 defineOptions({
   name: 'Search'
 });
 
 const { t } = useI18n();
-const route = useRoute();
 const router = useRouter();
-const playerStore = usePlayerStore();
 const searchStore = useSearchStore();
 
-const searchDetail = ref<any>();
-const searchType = computed(() => searchStore.searchType as number);
-const searchDetailLoading = ref(false);
 const searchHistory = ref<Array<{ keyword: string; type: number }>>([]);
 
-// 添加分页相关的状态
-const ITEMS_PER_PAGE = 30; // 每页数量
-const page = ref(0);
-const hasMore = ref(true);
-const isLoadingMore = ref(false);
-const currentKeyword = ref('');
-
-const getSearchListAnimation = (index: number) => {
-  return setAnimationDelay(index % ITEMS_PER_PAGE, 50);
-};
-
 // 从 localStorage 加载搜索历史
 const loadSearchHistory = () => {
   const history = localStorage.getItem('searchHistory');
   searchHistory.value = history ? JSON.parse(history) : [];
 };
 
-// 保存搜索历史，改为保存关键词和类型
+// 保存搜索历史
 const saveSearchHistory = (keyword: string, type: number) => {
   if (!keyword) return;
   const history = searchHistory.value;
-  // 移除重复的关键词
   const index = history.findIndex((item) => item.keyword === keyword);
   if (index > -1) {
     history.splice(index, 1);
   }
-  // 添加到开头
   history.unshift({ keyword, type });
-  // 只保留最近的20条记录
   if (history.length > 20) {
     history.pop();
   }
@@ -209,7 +132,7 @@ const clearSearchHistory = () => {
   localStorage.removeItem('searchHistory');
 };
 
-// 删除搜索历史
+// 删除单条历史
 const handleCloseSearchHistory = (item: { keyword: string; type: number }) => {
   searchHistory.value = searchHistory.value.filter((h) => h.keyword !== item.keyword);
   localStorage.setItem('searchHistory', JSON.stringify(searchHistory.value));
@@ -222,353 +145,52 @@ const loadHotSearch = async () => {
   hotSearchData.value = data;
 };
 
+const handleSearch = (keyword: string, type?: number) => {
+  const searchType = type ?? searchStore.searchType;
+  saveSearchHistory(keyword, searchType);
+  searchStore.searchValue = keyword;
+  searchStore.searchType = searchType;
+
+  router.push({
+    path: '/search-result',
+    query: {
+      keyword,
+      type: searchType
+    }
+  });
+};
+
 onMounted(() => {
   loadHotSearch();
   loadSearchHistory();
-  // 注意：路由参数的处理已经在 watch route.query 中处理了
 });
-
-const hotKeyword = ref(route.query.keyword || t('search.title.searchList'));
-
-const loadSearch = async (keywords: any, type: any = null, isLoadMore = false) => {
-  if (!keywords) return;
-
-  // 使用传入的类型或当前类型
-  const searchTypeToUse = type !== null ? type : searchType.value;
-
-  if (!isLoadMore) {
-    hotKeyword.value = keywords;
-    searchDetail.value = undefined;
-    page.value = 0;
-    hasMore.value = true;
-    currentKeyword.value = keywords;
-
-    // 保存搜索历史
-    saveSearchHistory(keywords, searchTypeToUse);
-
-    // 始终更新搜索框内容和类型
-    searchStore.searchType = searchTypeToUse;
-    searchStore.searchValue = keywords;
-  } else if (isLoadingMore.value || !hasMore.value) {
-    return;
-  }
-
-  if (isLoadMore) {
-    isLoadingMore.value = true;
-  } else {
-    searchDetailLoading.value = true;
-  }
-
-  try {
-    // B站搜索
-    if (searchTypeToUse === SEARCH_TYPE.BILIBILI) {
-      const response = await searchBilibili({
-        keyword: currentKeyword.value,
-        page: page.value + 1,
-        pagesize: ITEMS_PER_PAGE
-      });
-      console.log('response', response);
-
-      const bilibiliVideos = response.data.data.result.map((item: any) => ({
-        id: item.aid,
-        bvid: item.bvid,
-        title: item.title,
-        author: item.author,
-        pic: getBilibiliProxyUrl(item.pic),
-        duration: item.duration,
-        pubdate: item.pubdate,
-        description: item.description,
-        view: item.play,
-        danmaku: item.video_review
-      }));
-
-      if (isLoadMore && searchDetail.value) {
-        // 合并数据
-        searchDetail.value.bilibili = [...searchDetail.value.bilibili, ...bilibiliVideos];
-      } else {
-        searchDetail.value = {
-          bilibili: bilibiliVideos
-        };
-      }
-
-      // 判断是否还有更多数据
-      hasMore.value = bilibiliVideos.length === ITEMS_PER_PAGE;
-    }
-    // 音乐搜索
-    else {
-      const { data } = await getSearch({
-        keywords: currentKeyword.value,
-        type: searchTypeToUse,
-        limit: ITEMS_PER_PAGE,
-        offset: page.value * ITEMS_PER_PAGE
-      });
-
-      const songs = data.result.songs || [];
-      const albums = data.result.albums || [];
-      const mvs = (data.result.mvs || []).map((item: any) => ({
-        ...item,
-        picUrl: item.cover,
-        playCount: item.playCount,
-        desc: item.artists.map((artist: any) => artist.name).join('/'),
-        type: 'mv'
-      }));
-
-      const playlists = (data.result.playlists || []).map((item: any) => ({
-        ...item,
-        picUrl: item.coverImgUrl,
-        playCount: item.playCount,
-        desc: item.creator.nickname,
-        type: 'playlist'
-      }));
-
-      // songs map 替换属性
-      songs.forEach((item: any) => {
-        item.picUrl = item.al.picUrl;
-        item.artists = item.ar;
-      });
-      albums.forEach((item: any) => {
-        item.desc = `${item.artist.name} ${item.company} ${dateFormat(item.publishTime)}`;
-      });
-
-      if (isLoadMore && searchDetail.value) {
-        // 合并数据
-        searchDetail.value.songs = [...searchDetail.value.songs, ...songs];
-        searchDetail.value.albums = [...searchDetail.value.albums, ...albums];
-        searchDetail.value.mvs = [...searchDetail.value.mvs, ...mvs];
-        searchDetail.value.playlists = [...searchDetail.value.playlists, ...playlists];
-      } else {
-        searchDetail.value = {
-          songs,
-          albums,
-          mvs,
-          playlists
-        };
-      }
-
-      // 判断是否还有更多数据
-      hasMore.value =
-        songs.length === ITEMS_PER_PAGE ||
-        albums.length === ITEMS_PER_PAGE ||
-        mvs.length === ITEMS_PER_PAGE ||
-        playlists.length === ITEMS_PER_PAGE;
-    }
-
-    page.value++;
-  } catch (error) {
-    console.error(t('search.error.searchFailed'), error);
-  } finally {
-    searchDetailLoading.value = false;
-    isLoadingMore.value = false;
-  }
-};
-
-watch(
-  () => searchStore.searchValue,
-  (value) => {
-    loadSearch(value);
-  }
-);
-
-watch(
-  () => searchType.value,
-  () => {
-    if (searchStore.searchValue) {
-      loadSearch(searchStore.searchValue);
-    }
-  }
-);
-// 修改 store.state 的访问
-if (searchStore.searchValue) {
-  loadSearch(searchStore.searchValue);
-}
-
-// 修改 store.state 的设置
-searchStore.searchValue = route.query.keyword as string;
-
-const dateFormat = (time: any) => useDateFormat(time, 'YYYY.MM.DD').value;
-
-// 添加滚动处理函数
-const handleScroll = (e: any) => {
-  const { scrollTop, scrollHeight, clientHeight } = e.target;
-  // 距离底部100px时加载更多
-  if (scrollTop + clientHeight >= scrollHeight - 100 && !isLoadingMore.value && hasMore.value) {
-    loadSearch(currentKeyword.value, null, true);
-  }
-};
-
-watch(
-  () => route.query,
-  (query) => {
-    if (route.path === '/search' && query.keyword) {
-      const routeKeyword = query.keyword as string;
-      const routeType = query.type ? Number(query.type) : searchType.value;
-
-      // 更新搜索类型和值
-      searchStore.searchType = routeType;
-      searchStore.searchValue = routeKeyword;
-
-      // 加载搜索结果
-      loadSearch(routeKeyword, routeType);
-    }
-  },
-  { immediate: true }
-);
-
-const handlePlay = (item: any) => {
-  // 添加到下一首
-  playerStore.addToNextPlay(item);
-};
-
-// 点击搜索历史
-const handleSearchHistory = (item: { keyword: string; type: number }) => {
-  // 更新搜索类型
-  searchStore.searchType = item.type;
-  // 先更新搜索值到 store
-  searchStore.searchValue = item.keyword;
-  // 使用关键词和类型加载搜索
-  loadSearch(item.keyword, item.type);
-};
-
-// 处理B站视频播放
-const handlePlayBilibili = async (item: IBilibiliSearchResult) => {
-  try {
-    // 获取视频详情以判断是否为单个视频
-    const videoDetail = await getBilibiliVideoDetail(item.bvid);
-    const pages = videoDetail.data.pages;
-
-    // 如果是单个视频（只有一个分P），直接播放
-    if (pages && pages.length === 1) {
-      // 获取音频URL并播放
-      const audioUrl = await getBilibiliAudioUrl(item.bvid, pages[0].cid);
-
-      // 使用公用方法创建播放项目
-      const playItem = createSimpleBilibiliSong(item, audioUrl);
-      playItem.bilibiliData = {
-        bvid: item.bvid,
-        cid: pages[0].cid
-      };
-
-      // 添加到播放列表并开始播放
-      playerStore.setPlay(playItem);
-    } else {
-      // 多P视频，跳转到详情页面
-      router.push(`/bilibili/${item.bvid}`);
-    }
-  } catch (error) {
-    console.error('处理B站视频播放失败:', error);
-    // 出错时回退到原来的逻辑，跳转详情页
-    router.push(`/bilibili/${item.bvid}`);
-  }
-};
-
-const handlePlayAll = () => {
-  if (!searchDetail.value?.songs?.length) return;
-
-  // 设置播放列表为搜索结果中的所有歌曲
-  playerStore.setPlayList(searchDetail.value.songs);
-
-  // 开始播放第一首歌
-  if (searchDetail.value.songs[0]) {
-    playerStore.setPlay(searchDetail.value.songs[0]);
-  }
-};
 </script>
 
 <style lang="scss" scoped>
-.search-page {
-  @apply flex h-full;
+.search-page-container {
+  position: relative;
 }
 
-.hot-search {
-  @apply mr-4 rounded-xl flex-1 overflow-hidden;
-  @apply bg-light-100 dark:bg-dark-100;
-  animation-duration: 0.2s;
-  min-width: 400px;
-  height: 100%;
+.animate-item {
+  animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
+}
 
-  &-list {
-    @apply pb-28;
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(24px);
   }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 
-  &-item {
-    @apply px-4 py-3 text-lg rounded-xl cursor-pointer;
-    @apply text-gray-900 dark:text-white;
-    transition: all 0.3s ease;
-
-    &:hover {
-      @apply bg-light-100 dark:bg-dark-200;
-    }
-
-    &-count {
-      @apply inline-block ml-3 w-8;
-      @apply text-green-500;
-
-      &-3 {
-        @apply font-bold inline-block ml-3 w-8;
-        @apply text-red-500;
-      }
+.hot-search-card {
+  &:hover {
+    .hot-search-item-count {
+      @apply text-primary;
     }
   }
 }
-
-.search-list {
-  @apply flex-1 rounded-xl;
-  @apply bg-light-100 dark:bg-dark-100;
-  height: 100%;
-  animation-duration: 0.2s;
-
-  &-box {
-    @apply pb-28;
-  }
-}
-
-.title {
-  @apply text-xl font-bold my-2 mx-4 flex items-center;
-  @apply text-gray-900 dark:text-white;
-
-  &-play-all {
-    @apply ml-auto;
-  }
-}
-
-.play-all-btn {
-  @apply flex items-center gap-1 px-3 py-1 rounded-full cursor-pointer transition-all;
-  @apply text-sm font-normal text-gray-900 dark:text-white hover:bg-light-300 dark:hover:bg-dark-300 hover:text-green-500;
-
-  i {
-    @apply text-xl;
-  }
-}
-
-.search-history {
-  &-header {
-    @apply flex justify-between items-center mb-4;
-    @apply text-gray-900 dark:text-white;
-  }
-
-  &-list {
-    @apply flex flex-wrap gap-2 px-4;
-  }
-
-  &-item {
-    @apply cursor-pointer;
-    animation-duration: 0.2s;
-  }
-}
-
-.mobile {
-  .hot-search {
-    @apply mr-0 w-full;
-  }
-}
-
-.loading-more {
-  @apply flex justify-center items-center py-4;
-  @apply text-gray-500 dark:text-gray-400;
-}
-
-.no-more {
-  @apply text-center py-4;
-  @apply text-gray-500 dark:text-gray-400;
-}
 </style>