mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-05-18 03:17:29 +08:00
feat(ui): 重构 SearchBar、集成 useScrollTitle 标题滚动显示、修复专辑搜索跳转
- 重新设计 SearchBar:左侧 Tab(播放列表/MV/排行榜)+ 滑动指示器 + 搜索框自动展开收缩 - 新增 navTitle store 和 useScrollTitle hook,支持页面滚动后在 SearchBar 显示标题 - 集成 useScrollTitle 到 MusicListPage、歌手详情、关注/粉丝列表、搜索结果页 - 修复搜索结果页专辑点击跳转失败(缺失 type 字段) - 新增 5 种语言 searchBar tab i18n 键值
This commit is contained in:
@@ -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)}`;
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user