|
|
@@ -76,6 +76,10 @@ export struct NavidromePage {
|
|
|
@State isSongPageLoading: boolean = false;
|
|
|
@State isArtistPageLoading: boolean = false;
|
|
|
@State isAlbumPageLoading: boolean = false;
|
|
|
+
|
|
|
+ // 新增:详情视图状态
|
|
|
+ @State isDetailView: boolean = false; // 是否在艺术家/专辑详情视图
|
|
|
+ @State previousTab: number = 0; // 进入详情视图前的标签页索引
|
|
|
@StorageProp('isDarkMode') isDarkMode: boolean = false;
|
|
|
@StorageLink('currentSong') currentSong: VideoItem | undefined = undefined;
|
|
|
@StorageProp('topSafeHeight') topSafeHeight: number = 0;
|
|
|
@@ -326,6 +330,20 @@ export struct NavidromePage {
|
|
|
return artist;
|
|
|
});
|
|
|
this.artists = [...this.artists, ...processed];
|
|
|
+ console.info('onecold 帮我打印这个artists的前20条数据');
|
|
|
+ // 打印前20条艺术家数据
|
|
|
+ const previewCount = Math.min(20, this.artists.length);
|
|
|
+ console.info(`onecold artists总数: ${this.artists.length}, 打印前${previewCount}条:`);
|
|
|
+ for (let i = 0; i < previewCount; i++) {
|
|
|
+ const artist = this.artists[i];
|
|
|
+ console.info(`onecold artist[${i}]:`, JSON.stringify({
|
|
|
+ id: artist.id,
|
|
|
+ name: artist.name,
|
|
|
+ albumCount: artist.albumCount,
|
|
|
+ songCount: artist.songCount,
|
|
|
+ coverUrl: artist.coverUrl
|
|
|
+ }));
|
|
|
+ }
|
|
|
this.artistNextStart = response.nextStart;
|
|
|
void ServerLogUtil.info('ArtistCover', `艺术家列表追加: 本次 ${processed.length} 位, 总数 ${this.artists.length}`);
|
|
|
} finally {
|
|
|
@@ -708,35 +726,63 @@ export struct NavidromePage {
|
|
|
Row({ space: 6 }) {
|
|
|
// 标题或搜索框
|
|
|
if (!this.isSearchMode) {
|
|
|
- // 左侧返回按钮
|
|
|
- Button({ type: ButtonType.Circle, stateEffect: true }) {
|
|
|
- SymbolGlyph($r('sys.symbol.sort'))
|
|
|
- .attributeModifier(new SymbolGlyphFancyModifier(25, '', ''))
|
|
|
- }
|
|
|
- .attributeModifier(new ButtonFancyModifier(40, 40))
|
|
|
- .clickEffect({ level: ClickEffectLevel.MIDDLE, scale: 0.6 })
|
|
|
- .animation({ duration: 300, curve: Curve.Ease })
|
|
|
- .onClick(() => {
|
|
|
- this.getUIContext().animateTo({ duration: 555 }, () => {
|
|
|
- // 动画闭包内控制Image组件的出现和消失
|
|
|
- this.isShowDrawer = !this.isShowDrawer
|
|
|
- this.offsetX = 0
|
|
|
- })
|
|
|
- })
|
|
|
- .attributeModifier(new ShadowModifier())
|
|
|
- .zIndex(0)
|
|
|
- Text(this.selectedAccount.name)
|
|
|
- .margin({ left: 3, right: 10 })
|
|
|
- .fontColor($r('app.color.text_color'))
|
|
|
- .fontSize(18)
|
|
|
- .maxLines(1)
|
|
|
- .textOverflow({ overflow: TextOverflow.MARQUEE })
|
|
|
- .layoutWeight(1)
|
|
|
+ // 详情视图模式下显示返回按钮
|
|
|
+ if (this.isDetailView) {
|
|
|
+ Button({ type: ButtonType.Circle, stateEffect: true }) {
|
|
|
+ SymbolGlyph($r('sys.symbol.chevron_left'))
|
|
|
+ .attributeModifier(new SymbolGlyphFancyModifier(24, '', ''))
|
|
|
+ }
|
|
|
+ .attributeModifier(new ButtonFancyModifier(40, 40))
|
|
|
.clickEffect({ level: ClickEffectLevel.MIDDLE, scale: 0.6 })
|
|
|
+ .animation({ duration: 300, curve: Curve.Ease })
|
|
|
.onClick(() => {
|
|
|
- // 可以添加标题点击事件
|
|
|
+ // 返回到之前的标签页
|
|
|
+ this.isDetailView = false;
|
|
|
+ this.clearFilter();
|
|
|
})
|
|
|
+ .attributeModifier(new ShadowModifier())
|
|
|
+ .zIndex(0)
|
|
|
+
|
|
|
+ Text(this.filterLabel)
|
|
|
+ .margin({ left: 3, right: 10 })
|
|
|
+ .fontColor($r('app.color.text_color'))
|
|
|
+ .fontSize(18)
|
|
|
+ .maxLines(1)
|
|
|
+ .textOverflow({ overflow: TextOverflow.MARQUEE })
|
|
|
+ .layoutWeight(1)
|
|
|
+ .clickEffect({ level: ClickEffectLevel.MIDDLE, scale: 0.6 })
|
|
|
+ .animation({ duration: 300, curve: Curve.Ease })
|
|
|
+ } else {
|
|
|
+ // 正常模式:侧边栏按钮和账号名
|
|
|
+ Button({ type: ButtonType.Circle, stateEffect: true }) {
|
|
|
+ SymbolGlyph($r('sys.symbol.sort'))
|
|
|
+ .attributeModifier(new SymbolGlyphFancyModifier(25, '', ''))
|
|
|
+ }
|
|
|
+ .attributeModifier(new ButtonFancyModifier(40, 40))
|
|
|
+ .clickEffect({ level: ClickEffectLevel.MIDDLE, scale: 0.6 })
|
|
|
.animation({ duration: 300, curve: Curve.Ease })
|
|
|
+ .onClick(() => {
|
|
|
+ this.getUIContext().animateTo({ duration: 555 }, () => {
|
|
|
+ // 动画闭包内控制Image组件的出现和消失
|
|
|
+ this.isShowDrawer = !this.isShowDrawer
|
|
|
+ this.offsetX = 0
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .attributeModifier(new ShadowModifier())
|
|
|
+ .zIndex(0)
|
|
|
+ Text(this.selectedAccount.name)
|
|
|
+ .margin({ left: 3, right: 10 })
|
|
|
+ .fontColor($r('app.color.text_color'))
|
|
|
+ .fontSize(18)
|
|
|
+ .maxLines(1)
|
|
|
+ .textOverflow({ overflow: TextOverflow.MARQUEE })
|
|
|
+ .layoutWeight(1)
|
|
|
+ .clickEffect({ level: ClickEffectLevel.MIDDLE, scale: 0.6 })
|
|
|
+ .onClick(() => {
|
|
|
+ // 可以添加标题点击事件
|
|
|
+ })
|
|
|
+ .animation({ duration: 300, curve: Curve.Ease })
|
|
|
+ }
|
|
|
} else {
|
|
|
Button({ type: ButtonType.Circle, stateEffect: true }) {
|
|
|
SymbolGlyph($r('sys.symbol.chevron_left'))
|
|
|
@@ -1159,9 +1205,10 @@ export struct NavidromePage {
|
|
|
.height(48)
|
|
|
.borderRadius(10)
|
|
|
.draggable(false)
|
|
|
- .interpolation(ImageInterpolation.High)// 用于重采样后的抗锯齿
|
|
|
- .autoResize(true) // 重采样,可减少内存占用
|
|
|
- // .sourceSize({ width: 38, height: 38 })
|
|
|
+ .alt($r('app.media.alt'))
|
|
|
+ // .interpolation(ImageInterpolation.High)// 用于重采样后的抗锯齿
|
|
|
+ // .autoResize(true) // 重采样,可减少内存占用
|
|
|
+ .sourceSize({ width: 38, height: 38 })
|
|
|
.fillColor(artist.coverUrl ? undefined : this.themeColor)
|
|
|
.objectFit(ImageFit.Cover)
|
|
|
.margin({ left: 20 })
|
|
|
@@ -1205,6 +1252,7 @@ export struct NavidromePage {
|
|
|
.height(48)
|
|
|
.borderRadius(10)
|
|
|
.clip(true)
|
|
|
+ .alt($r('app.media.alt'))
|
|
|
.draggable(false)
|
|
|
// .interpolation(ImageInterpolation.High)// 用于重采样后的抗锯齿
|
|
|
// .autoResize(true) // 重采样,可减少内存占用
|
|
|
@@ -1300,6 +1348,11 @@ export struct NavidromePage {
|
|
|
if (!artist || !artist.id) {
|
|
|
return;
|
|
|
}
|
|
|
+ this.isShowTitleBar = true;
|
|
|
+ // 保存当前标签页,进入详情视图
|
|
|
+ this.previousTab = this.selectedTab;
|
|
|
+ this.isDetailView = true;
|
|
|
+ // 应用筛选但不切换标签页
|
|
|
void this.applyFilter(NavFilterType.Artist, artist.id, artist.name ?? Constants.UNKNOWN_ARTIST);
|
|
|
}
|
|
|
|
|
|
@@ -1307,6 +1360,11 @@ export struct NavidromePage {
|
|
|
if (!album || !album.id) {
|
|
|
return;
|
|
|
}
|
|
|
+ this.isShowTitleBar = true;
|
|
|
+ // 保存当前标签页,进入详情视图
|
|
|
+ this.previousTab = this.selectedTab;
|
|
|
+ this.isDetailView = true;
|
|
|
+ // 应用筛选但不切换标签页
|
|
|
void this.applyFilter(NavFilterType.Album, album.id, album.name ?? '未知专辑');
|
|
|
}
|
|
|
|
|
|
@@ -1338,11 +1396,7 @@ export struct NavidromePage {
|
|
|
ToastUtil.showToast(error.message || '筛选数据加载失败');
|
|
|
});
|
|
|
|
|
|
- // 然后执行动画切换标签页
|
|
|
- this.getUIContext().animateTo({ duration: 555 }, () => {
|
|
|
- this.selectedTab = 0;
|
|
|
- this.tabSelectedIndexes = [0];
|
|
|
- })
|
|
|
+ // 不再自动切换标签页,保持在详情视图模式
|
|
|
}
|
|
|
|
|
|
private async loadSongsForFilter(): Promise<void> {
|
|
|
@@ -1387,6 +1441,8 @@ export struct NavidromePage {
|
|
|
this.filterLabel = '';
|
|
|
this.filterSongs = [];
|
|
|
this.isFilterLoading = false;
|
|
|
+ // 退出详情视图
|
|
|
+ this.isDetailView = false;
|
|
|
}
|
|
|
|
|
|
private playSong(song: VideoItem, index: number, isJump: boolean = false): void {
|
|
|
@@ -1515,7 +1571,14 @@ export struct NavidromePage {
|
|
|
.layoutWeight(1)
|
|
|
} else {
|
|
|
List({scroller:this.scroller, space: 8 }) {
|
|
|
- if (this.selectedTab === 0) {
|
|
|
+ // 详情视图模式下显示筛选后的歌曲,否则根据标签页显示对应内容
|
|
|
+ if (this.isDetailView) {
|
|
|
+ ForEach(this.getVisibleSongs(), (item: VideoItem, index: number) => {
|
|
|
+ ListItem() {
|
|
|
+ this.buildSongItem(item, index)
|
|
|
+ }
|
|
|
+ }, (item: VideoItem) => item.id)
|
|
|
+ } else if (this.selectedTab === 0) {
|
|
|
ForEach(this.getVisibleSongs(), (item: VideoItem, index: number) => {
|
|
|
ListItem() {
|
|
|
this.buildSongItem(item, index)
|