Преглед изворни кода

优化Navidrome的点击 艺术家或者专辑的时候 不需要切换tab

onecold пре 7 месеци
родитељ
комит
1fe037bcfd
1 измењених фајлова са 97 додато и 34 уклоњено
  1. 97 34
      entry/src/main/ets/view/NavidromePage.ets

+ 97 - 34
entry/src/main/ets/view/NavidromePage.ets

@@ -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)