feat(ui): 重构 SearchBar、集成 useScrollTitle 标题滚动显示、修复专辑搜索跳转

- 重新设计 SearchBar:左侧 Tab(播放列表/MV/排行榜)+ 滑动指示器 + 搜索框自动展开收缩
- 新增 navTitle store 和 useScrollTitle hook,支持页面滚动后在 SearchBar 显示标题
- 集成 useScrollTitle 到 MusicListPage、歌手详情、关注/粉丝列表、搜索结果页
- 修复搜索结果页专辑点击跳转失败(缺失 type 字段)
- 新增 5 种语言 searchBar tab i18n 键值
This commit is contained in:
alger
2026-03-15 14:11:59 +08:00
parent 067868f786
commit 57a441312f
15 changed files with 1103 additions and 498 deletions
@@ -9,6 +9,7 @@
<div class="flex flex-col gap-6">
<div>
<h1
ref="titleElRef"
class="text-3xl md:text-4xl font-bold tracking-tight text-neutral-900 dark:text-white mb-1"
>
{{ currentKeyword }}
@@ -245,6 +246,7 @@ 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 { useScrollTitle } from '@/hooks/useScrollTitle';
import { usePlayerStore } from '@/store/modules/player';
import { useSearchStore } from '@/store/modules/search';
import type { SongResult } from '@/types/music';
@@ -283,6 +285,9 @@ const hasMore = ref(true);
const isLoadingMore = ref(false);
const currentKeyword = computed(() => (route.query.keyword as string) || '');
const titleElRef = ref<HTMLElement | null>(null);
useScrollTitle(currentKeyword, titleElRef);
const searchTypeOptions = computed(() => {
return SEARCH_TYPES.map((type) => ({
label: t(type.label),
@@ -406,6 +411,7 @@ const loadSearch = async (isLoadMore = false) => {
item.artists = item.ar;
});
albums.forEach((item: any) => {
item.type = '专辑';
item.desc = `${item.artist.name} ${item.company} ${dateFormat(item.publishTime)}`;
});