Navidrome适配黑暗模式

entry/src/main/ets/view/NavidromePage.ets

@@ -50,6 +50,7 @@ export struct NavidromePage {
   @State artists: NavidromeRestArtist[] = [];
   @State albums: NavidromeRestAlbum[] = [];
   @State loading: boolean = false;
+  @StorageProp('isDarkMode') isDarkMode: boolean = false;
   @StorageLink('currentSong') currentSong: VideoItem | undefined = undefined;
   @StorageProp('topRectHeight') topRectHeight: number = 0;
   @State @Watch('onTabSelectedIndexesChanged') tabSelectedIndexes: number[] = [0];
@@ -228,7 +229,7 @@ export struct NavidromePage {
           })
           .attributeModifier(new ShadowModifier())
           .zIndex(0)
-          Text('Navidrome音乐')
+          Text(this.selectedAccount.name)
             .margin({ left: 3, right: 10 })
             .fontColor($r('app.color.text_color'))
             .fontSize(18)
@@ -272,7 +273,7 @@ export struct NavidromePage {
           .layoutWeight(1)
           .height(35)
           .maxLength(20)
-          .backgroundColor(Color.White)
+          .backgroundColor(this.isDarkMode?Color.Black:'#F5F5F5')
           .placeholderColor(Color.Grey)
           .placeholderFont({ size: 14, weight: 400 })
           .textFont({ size: 14, weight: 400 })
@@ -661,12 +662,12 @@ export struct NavidromePage {
     if (song.duration) {
       parts.push(song.duration as string);
     }
-    if (song.size) {
-      parts.push(song.size as string);
-    }
-    if (parts.length === 0 && song.cTime) {
-      parts.push(song.cTime as string);
-    }
+    // if (song.size) {
+    //   parts.push(song.size as string);
+    // }
+    // if (parts.length === 0 && song.cTime) {
+    //   parts.push(song.cTime as string);
+    // }
     return parts.join(' · ');
   }
 
@@ -674,14 +675,11 @@ export struct NavidromePage {
     const albumCount = artist.albumCount ?? 0;
     const songCount = artist.songCount ?? 0;
     const playCount = artist.playCount ?? 0;
-    return `专辑 ${albumCount} · 歌曲 ${songCount} · 播放 ${playCount}`;
+    return `专辑 ${albumCount} · 歌曲 ${songCount} `;
   }
 
   private buildAlbumMetaLine(album: NavidromeRestAlbum): string {
     const parts: string[] = [];
-    if (album.songCount !== undefined) {
-      parts.push(`歌曲 ${album.songCount}`);
-    }
     if (album.duration !== undefined) {
       const duration = this.formatSongDuration(album.duration);
       if (duration) {
@@ -778,97 +776,106 @@ export struct NavidromePage {
     }
   }
 
-  build() {
-    Column() {
-      this.topTitleBar()
+  @Builder
+  buildContentView(){
+    // 主内容区域
+    if (this.loading) {
+      Column() {
+        LoadingProgress()
+          .width(50)
+          .height(50)
+          .color($r('app.color.title_bar_bg'))
+
+        Text('加载中...')
+          .margin({ top: 10 })
+          .fontSize(14)
+          .fontColor($r('app.color.index_tab_unselected_font_color'))
+      }
+      .width('100%')
+      .layoutWeight(1)
+      .justifyContent(FlexAlign.Center)
+    } else {
+      if (this.selectedTab === 0 && this.filterType !== NavFilterType.None) {
+        Row({ space: 8 }) {
+          Text(`筛选：${this.filterLabel}`)
+            .fontSize(13)
+            .fontColor(this.themeColor)
+            .layoutWeight(1)
+          Button('清除筛选')
+            .type(ButtonType.Capsule)
+            .backgroundColor(this.themeColor)
+            .fontSize(12)
+            .onClick(() => this.clearFilter())
+        }
+        .width('90%')
+        .padding({ left: 16, right: 16, top: 6, bottom: 2 })
+      }
 
-      // 主内容区域
-      if (this.loading) {
+      List({ space: 8 }) {
+        if (this.selectedTab === 0) {
+          ForEach(this.getVisibleSongs(), (item: VideoItem, index: number) => {
+            ListItem() {
+              this.buildSongItem(item, index)
+            }
+          }, (item: VideoItem) => item.id)
+        } else if (this.selectedTab === 1) {
+          ForEach(this.artists, (artist: NavidromeRestArtist) => {
+            ListItem() {
+              this.buildArtistItem(artist)
+            }
+          }, (artist: NavidromeRestArtist) => artist.id)
+        } else {
+          ForEach(this.albums, (album: NavidromeRestAlbum) => {
+            ListItem() {
+              this.buildAlbumItem(album)
+            }
+          }, (album: NavidromeRestAlbum) => album.id)
+        }
+      }
+      .width('100%')
+      .layoutWeight(1)
+      .padding({ top: 10, bottom: 10 })
+      .listDirection(Axis.Vertical)
+      .scrollBar(BarState.Auto)
+      .edgeEffect(EdgeEffect.Spring)
+
+      // 空状态
+      if (this.getCurrentCount() === 0) {
         Column() {
-          LoadingProgress()
-            .width(50)
-            .height(50)
-            .color($r('app.color.title_bar_bg'))
+          Image($r('app.media.music_red'))
+            .width(80)
+            .height(80)
+            .opacity(0.6)
 
-          Text('加载中...')
-            .margin({ top: 10 })
+          Text(this.getEmptyTitle())
+            .margin({ top: 16 })
+            .fontSize(16)
+            .fontColor($r('app.color.index_tab_unselected_font_color'))
+
+          Text(this.getEmptySubtitle())
+            .margin({ top: 8 })
             .fontSize(14)
             .fontColor($r('app.color.index_tab_unselected_font_color'))
         }
         .width('100%')
         .layoutWeight(1)
         .justifyContent(FlexAlign.Center)
-      } else {
-        if (this.selectedTab === 0 && this.filterType !== NavFilterType.None) {
-          Row({ space: 8 }) {
-            Text(`筛选：${this.filterLabel}`)
-              .fontSize(13)
-              .fontColor(this.themeColor)
-              .layoutWeight(1)
-            Button('清除筛选')
-              .type(ButtonType.Capsule)
-              .backgroundColor(this.themeColor)
-              .fontSize(12)
-              .onClick(() => this.clearFilter())
-          }
-          .width('90%')
-          .padding({ left: 16, right: 16, top: 6, bottom: 2 })
-        }
-
-        List({ space: 8 }) {
-          if (this.selectedTab === 0) {
-            ForEach(this.getVisibleSongs(), (item: VideoItem, index: number) => {
-              ListItem() {
-                this.buildSongItem(item, index)
-              }
-            }, (item: VideoItem) => item.id)
-          } else if (this.selectedTab === 1) {
-            ForEach(this.artists, (artist: NavidromeRestArtist) => {
-              ListItem() {
-                this.buildArtistItem(artist)
-              }
-            }, (artist: NavidromeRestArtist) => artist.id)
-          } else {
-            ForEach(this.albums, (album: NavidromeRestAlbum) => {
-              ListItem() {
-                this.buildAlbumItem(album)
-              }
-            }, (album: NavidromeRestAlbum) => album.id)
-          }
-        }
-        .width('100%')
-        .layoutWeight(1)
-        .padding({ top: 10, bottom: 10 })
-        .listDirection(Axis.Vertical)
-        .scrollBar(BarState.Auto)
-        .edgeEffect(EdgeEffect.Spring)
-
-        // 空状态
-        if (this.getCurrentCount() === 0) {
-          Column() {
-            Image($r('app.media.music_red'))
-              .width(80)
-              .height(80)
-              .opacity(0.6)
+      }
+    }
+  }
 
-            Text(this.getEmptyTitle())
-              .margin({ top: 16 })
-              .fontSize(16)
-              .fontColor($r('app.color.index_tab_unselected_font_color'))
+  build() {
 
-            Text(this.getEmptySubtitle())
-              .margin({ top: 8 })
-              .fontSize(14)
-              .fontColor($r('app.color.index_tab_unselected_font_color'))
-          }
-          .width('100%')
-          .layoutWeight(1)
-          .justifyContent(FlexAlign.Center)
-        }
+    Stack() {
+      this.buildContentView();
+      Column() {
+        this.topTitleBar()
       }
+
     }
+    .alignContent(Alignment.Top)
     .width('100%')
     .height('100%')
-    .backgroundColor($r('app.color.start_window_background'))
+
   }
 }