Explorar o código

实现主页背景随音乐封面(自定义背景可设置)的功能

onecold hai 4 meses
pai
achega
17a4009392

+ 9 - 1
entry/src/main/ets/pages/NewIndex.ets

@@ -1250,6 +1250,10 @@ struct NewIndex {
     .translate({ y: this.miniPlayerContentTranslateY })
     .hitTestBehavior(HitTestMode.Transparent)
     .zIndex(2)
+    .opacity(0.9)
+    .onClick(()=>{
+      this.setShowPlayTrue()
+    })
     .onTouch((event: TouchEvent): void => {
       if (event.type === TouchType.Down) {
         this.pointLightOptions = {
@@ -1282,10 +1286,14 @@ struct NewIndex {
       this.hiCarLeadingCluster()
       this.hiCarCenterInfo()
     }
+    .opacity(0.9)
     .width('100%')
     .height(this.bottomBarHeight)
     .hitTestBehavior(HitTestMode.Transparent)
     .zIndex(2)
+    .onClick(()=>{
+      this.setShowPlayTrue()
+    })
     .onTouch((event: TouchEvent): void => {
       if (event.type === TouchType.Down) {
         this.pointLightOptions = {
@@ -1592,7 +1600,7 @@ struct NewIndex {
 
   @Builder
   private hiCarPlayConRigth() {
-    Row() {
+    Row({space:8}) {
       PointLightContentButton({
         pointColor: this.themeColor,
         buttonRadius: 22,

+ 68 - 5
entry/src/main/ets/pages/SettingPage.ets

@@ -30,6 +30,7 @@ import { audio } from '@kit.AudioKit'
 import cacheManageService, { CacheDirectoryInfo } from '../common/util/CacheManageService'
 import { CacheManageSheet } from '../view/CacheManageSheet'
 import { TitleBarPointLightButton } from '../view/PointLight/TitleBarPointLightButton'
+import { VideoItem } from '../viewmodel/VideoItem'
 
 @Preview
 // @Entry
@@ -86,6 +87,7 @@ export struct SettingPage {
   static readonly IS_CUSTOMIZE_BG: string = 'is_customize_bg';
   static readonly IS_GRID_MUSIC: string = 'is_grid_music';
   static readonly IS_CUSTOMIZE_BG_PATH: string = 'is_customize_bg_path';
+  static readonly IS_HOME_BG_FOLLOW_MUSIC_COVER: string = 'is_home_bg_follow_music_cover';
   static readonly IS_SCROLL_HIDE: string = 'isAutoScrollHide';
   static readonly IS_SAMETIME_PLAY: string = 'isSameTimePlay';
   static readonly CUSTOMIZE_BG_BLUR: string = 'customize_bg_blur';
@@ -169,6 +171,7 @@ export struct SettingPage {
   @State isClearingLogs: boolean = false //是否正在清除日志
   @State isShowHeader: boolean = true
   @State isCustomizeBg: boolean = false //自定义背景界面
+  @State isHomeBgFollowMusicCover: boolean = true //主页背景随当前播放封面
   @State isCustomizeBgSheet: boolean = false //自定义背景界面
   @State isShowTitleBar: boolean = true //是否显示分类导航条
   @State isShowAllBar: boolean = true //是否显示播放全部条
@@ -193,6 +196,8 @@ export struct SettingPage {
   @State isLongNameRoLL: boolean = true//长歌名滚动
 
   @State customizeBgPath: string | undefined = '';
+  @StorageProp('customizeMusicBgPath') customizeMusicBgPath: string = '';
+  @StorageLink('currentSong') @Watch('onHomeBgCurrentSongChange') currentSong: VideoItem | undefined = undefined
   context = getContext(this);
   @State showCoverApiDialog: boolean = false
   @State tempCoverApiUrl: string = ''
@@ -296,7 +301,9 @@ export struct SettingPage {
     this.isShowFAV = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_FAV, true)
     this.isShowHistory = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_HISTORY, true)
     this.isCustomizeBg = PreferencesUtil.getBooleanSync(SettingPage.IS_CUSTOMIZE_BG, false)
+    this.isHomeBgFollowMusicCover = PreferencesUtil.getBooleanSync(SettingPage.IS_HOME_BG_FOLLOW_MUSIC_COVER, true)
     this.customizeBgPath = PreferencesUtil.getStringSync(SettingPage.IS_CUSTOMIZE_BG_PATH, '')
+    this.syncCustomizeMusicBgPath()
     this.isGridMusic = PreferencesUtil.getBooleanSync(SettingPage.IS_GRID_MUSIC, true)
     this.isScrollHide = PreferencesUtil.getBooleanSync(SettingPage.IS_SCROLL_HIDE, false)
     this.isSameTimePlay = PreferencesUtil.getBooleanSync(SettingPage.IS_SAMETIME_PLAY, false)
@@ -3040,6 +3047,39 @@ export struct SettingPage {
     emitter.emit({ eventId: EventConstants.EVENT_SETTING_UPDATE }, eventData); // 发送广播通知更新doSwipBack
   }
 
+  private onHomeBgCurrentSongChange(): void {
+    this.syncCustomizeMusicBgPath()
+  }
+
+  private syncCustomizeMusicBgPath(): void {
+    if (!this.isHomeBgFollowMusicCover) {
+      return
+    }
+    const coverPath: string = this.currentSong?.pixelMapPath ?? ''
+    AppStorage.setOrCreate('customizeMusicBgPath', coverPath)
+  }
+
+  private updateCustomizeBgEnabled(checked: boolean): void {
+    this.isCustomizeBg = checked
+    PreferencesUtil.put(SettingPage.IS_CUSTOMIZE_BG, this.isCustomizeBg)
+    if (checked && this.isHomeBgFollowMusicCover) {
+      this.isHomeBgFollowMusicCover = false
+      PreferencesUtil.put(SettingPage.IS_HOME_BG_FOLLOW_MUSIC_COVER, false)
+    }
+    this.sendChangeEvent()
+  }
+
+  private updateHomeBgFollowMusicCoverEnabled(checked: boolean): void {
+    this.isHomeBgFollowMusicCover = checked
+    PreferencesUtil.put(SettingPage.IS_HOME_BG_FOLLOW_MUSIC_COVER, this.isHomeBgFollowMusicCover)
+    if (checked && this.isCustomizeBg) {
+      this.isCustomizeBg = false
+      PreferencesUtil.put(SettingPage.IS_CUSTOMIZE_BG, false)
+    }
+    this.syncCustomizeMusicBgPath()
+    this.sendChangeEvent()
+  }
+
   goSelectImage() {
 
     let selectUris: Array<string> = [];
@@ -3093,7 +3133,8 @@ export struct SettingPage {
   @Builder
   CustomizeBg() {
     Column() {
-      Image(this.customizeBgPath)
+      Image(this.isHomeBgFollowMusicCover && this.customizeMusicBgPath.length > 0
+        ? this.customizeMusicBgPath : this.customizeBgPath)
         .height('42%')
         .alt($r('app.media.add_image2'))
         .objectFit(ImageFit.Contain)
@@ -3139,6 +3180,31 @@ export struct SettingPage {
       .margin({ bottom: 20 })
 
       Column() {
+        Row() {
+          Text('主页背景随音乐封面:')
+            .margin({ left: 18 })
+            .fontSize(15)
+            .fontColor($r('app.color.text_color'))
+            .fontWeight(480)
+            .layoutWeight(1)
+          Toggle({ type: ToggleType.Switch, isOn: this.isHomeBgFollowMusicCover })
+            .selectedColor(this.themeColor)
+            .switchPointColor(Color.White)
+            .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
+            .margin({ right: 18 })
+            .onChange((checked: boolean) => {
+              this.updateHomeBgFollowMusicCoverEnabled(checked)
+            })
+            .width(50)
+            .height(30);
+        }
+        .height(55)
+
+        Divider()
+          .strokeWidth(1)
+          .color($r('app.color.speed_text_color'))
+          .margin({ left: 18, right: 18 })
+
         Row() {
           Text('自定义背景:')
             .margin({ left: 18 })
@@ -3152,10 +3218,7 @@ export struct SettingPage {
             .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
             .margin({ right: 18 })
             .onChange((checked: boolean) => {
-              this.isCustomizeBg = checked;
-              PreferencesUtil.put(SettingPage.IS_CUSTOMIZE_BG, this.isCustomizeBg)
-
-              this.sendChangeEvent()
+              this.updateCustomizeBgEnabled(checked)
             })
             .width(50)
             .height(30);

+ 29 - 3
entry/src/main/ets/pages/WebDavMainPage.ets

@@ -108,17 +108,19 @@ export struct WebDavMainPage {
   private prevOffsetY: number = 0; // 记录上一次的Y轴偏移量
   @State autoHideTitle: boolean = true //滚动自动隐藏标题栏
   @State isCustomizeBg: boolean = false //自定义背景界面
+  @State isHomeBgFollowMusicCover: boolean = true //主页背景随当前播放封面
   @StorageProp('isLandscape')  isLandscape: boolean = false;
   @State blurValue: number = 0 //背景模糊
   @State bgBrightness: number = 0 //背景亮度
   @State customizeBgPath: string | undefined = '';
+  @StorageProp('customizeMusicBgPath') customizeMusicBgPath: string = '';
   private listScroller: ListScroller = new ListScroller()
   @StorageProp('bottomSafeHeight') bottomSafeHeight: number = 0;
   searchController: SearchController = new SearchController()
   private searchTicket: number = 0;
   @StorageProp('animationState') animationState: AnimationStatus= AnimationStatus.Running
   @State isSearchMode: boolean = false
-  @StorageLink('currentSong') currentSong: VideoItem | undefined = undefined;
+  @StorageLink('currentSong') @Watch('onHomeBgCurrentSongChange') currentSong: VideoItem | undefined = undefined;
   @StorageProp('topSafeHeight') topSafeHeight: number = 0;
   @State webdavManager: RemoteDriveManager = RemoteDriveManager.getInstance();
   @State accounts: WebDavAccount[] = [];
@@ -2093,6 +2095,7 @@ export struct WebDavMainPage {
 
   initSetting(){
     this.isCustomizeBg  = PreferencesUtil.getBooleanSync(SettingPage.IS_CUSTOMIZE_BG, false)
+    this.isHomeBgFollowMusicCover = PreferencesUtil.getBooleanSync(SettingPage.IS_HOME_BG_FOLLOW_MUSIC_COVER, true)
     this.customizeBgPath  = PreferencesUtil.getStringSync(SettingPage.IS_CUSTOMIZE_BG_PATH, '')
     this.blurValue = PreferencesUtil.getNumberSync(SettingPage.CUSTOMIZE_BG_BLUR, 0)
     this.bgBrightness = PreferencesUtil.getNumberSync(SettingPage.BG_BRIGHTNESS, 0)
@@ -2101,6 +2104,23 @@ export struct WebDavMainPage {
     this.sortType = PreferencesUtil.getNumberSync('webDavSortType', 0)
     this.isShowTitleBar = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_TITLTBAR, true)
     this.autoHideTitle = PreferencesUtil.getBooleanSync('autoHideTitle', true)
+    this.syncCustomizeMusicBgPath()
+  }
+
+  private onHomeBgCurrentSongChange(): void {
+    this.syncCustomizeMusicBgPath()
+  }
+
+  private syncCustomizeMusicBgPath(): void {
+    if (!this.isHomeBgFollowMusicCover) {
+      return
+    }
+    const coverPath: string = this.currentSong?.pixelMapPath ?? ''
+    AppStorage.setOrCreate('customizeMusicBgPath', coverPath)
+  }
+
+  private isMusicCoverHomeBackgroundActive(): boolean {
+    return this.isHomeBgFollowMusicCover && this.customizeMusicBgPath.length > 0
   }
   aboutToAppear(): void {
     Utility.getAppName(getContext(this)).then((appName: string) => {
@@ -3410,11 +3430,17 @@ export struct WebDavMainPage {
     .width('100%')
     .height('100%')
     .alignContent(Alignment.Bottom)
-    .backgroundImage(this.isCustomizeBg?this.customizeBgPath:$r('app.color.start_window_background'))
+    .backgroundImage(this.isMusicCoverHomeBackgroundActive()
+      ? this.customizeMusicBgPath
+      : (this.isCustomizeBg ? this.customizeBgPath : $r('app.color.start_window_background')))
     .backgroundImageSize(this.isLandscape?{width:'100%'}:{ height: '100%'})
     .backgroundImagePosition(Alignment.Center)
     .backdropBlur(this.blurValue)
-    .backgroundBrightness({rate:this.isCustomizeBg?0.1:0,lightUpDegree:this.bgBrightness})
+    .backgroundBrightness({rate:this.isMusicCoverHomeBackgroundActive() || this.isCustomizeBg ? 0.1 : 0,
+      lightUpDegree:this.bgBrightness})
+    .backgroundBlurStyle(this.isMusicCoverHomeBackgroundActive()
+      ? BlurStyle.BACKGROUND_ULTRA_THICK :
+      BlurStyle.NONE)
     .bindSheet($$this.isShowSongPropertySheet, this.SongPropertySheetBuilder(), {
       height: '99%',
       dragBar: true,

+ 3 - 2
entry/src/main/ets/view/FindAlbumDetail.ets

@@ -31,6 +31,7 @@ export struct FindAlbumDetail {
   @Prop topSafeHeight: number = 0
   @Prop bottomSafeHeight: number = 0
   @Prop themeColor: string = CommonConstants.DEFAULT_THEME_COLOR
+  @Prop useTransparentBackground: boolean = false
   @Prop defaultSortType: number = FindCollectionSortType.TRACK_ASC
   @Prop supportRecentPlayedSort: boolean = false
   @StorageProp('isDarkMode') isDarkMode: boolean = false
@@ -513,7 +514,7 @@ export struct FindAlbumDetail {
     }
     .width('100%')
     .padding({ left: 14, right: 14, top: 14, bottom: 14 })
-    .backgroundColor(this.getCardBackgroundColor())
+    .backgroundColor(this.useTransparentBackground ? Color.Transparent :this.getCardBackgroundColor())
   }
 
   @Builder
@@ -669,7 +670,7 @@ export struct FindAlbumDetail {
     .height('100%')
     .scrollBar(BarState.Off)
     .edgeEffect(EdgeEffect.Spring)
-    .backgroundColor($r('app.color.start_window_background'))
+    .backgroundColor(this.useTransparentBackground ? Color.Transparent : $r('app.color.start_window_background'))
     .padding({ bottom: this.bottomSafeHeight + 75 })
   }
 }

+ 64 - 6
entry/src/main/ets/view/FindView.ets

@@ -126,6 +126,7 @@ function getFindAlbumPageKey(item: FindAlbumPage, index: number): string {
 export struct FindView {
   @StorageProp('isLandscape')  isLandscape: boolean = false;
   @State isCustomizeBg: boolean = false //自定义背景界面
+  @State isHomeBgFollowMusicCover: boolean = true //主页背景随当前播放封面
   @State blurValue: number = 0 //背景模糊
   @State bgBrightness: number = 0 //背景亮度
   @State customizeBgPath: string | undefined = '';
@@ -185,7 +186,8 @@ export struct FindView {
   @StorageProp('bottomSafeHeight') bottomSafeHeight: number = 0
   @StorageProp('isDarkMode') isDarkMode: boolean = false
   @StorageProp('themeColor') themeColor: string = CommonConstants.DEFAULT_THEME_COLOR
-  @StorageLink('currentSong') currentSong: VideoItem | undefined = undefined
+  @StorageProp('customizeMusicBgPath') customizeMusicBgPath: string = ''
+  @StorageLink('currentSong') @Watch('onHomeBgCurrentSongChange') currentSong: VideoItem | undefined = undefined
   @StorageLink('isPlaying') isPlaying: boolean = false
 
   private mediaTable?: MediaTable
@@ -233,11 +235,53 @@ export struct FindView {
 
   initSetting(){
     this.isCustomizeBg  = PreferencesUtil.getBooleanSync(SettingPage.IS_CUSTOMIZE_BG, false)
+    this.isHomeBgFollowMusicCover = PreferencesUtil.getBooleanSync(SettingPage.IS_HOME_BG_FOLLOW_MUSIC_COVER, true)
     this.customizeBgPath  = PreferencesUtil.getStringSync(SettingPage.IS_CUSTOMIZE_BG_PATH, '')
     this.blurValue = PreferencesUtil.getNumberSync(SettingPage.CUSTOMIZE_BG_BLUR, 0)
     this.bgBrightness = PreferencesUtil.getNumberSync(SettingPage.BG_BRIGHTNESS, 0)
     this.isShowTitleBar = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_TITLTBAR, true)
     this.autoHideTitle = PreferencesUtil.getBooleanSync('autoHideTitle', true)
+    this.syncCustomizeMusicBgPath()
+  }
+
+  private onHomeBgCurrentSongChange(): void {
+    this.syncCustomizeMusicBgPath()
+  }
+
+  private syncCustomizeMusicBgPath(): void {
+    if (!this.isHomeBgFollowMusicCover) {
+      return
+    }
+    const coverPath: string = this.currentSong?.pixelMapPath ?? ''
+    AppStorage.setOrCreate('customizeMusicBgPath', coverPath)
+  }
+
+  private isMusicCoverHomeBackgroundActive(): boolean {
+    return this.isHomeBgFollowMusicCover && this.customizeMusicBgPath.length > 0
+  }
+
+  private shouldUseDiscoveryImageBackgroundOverlay(): boolean {
+    return this.isCustomizeBg || this.isMusicCoverHomeBackgroundActive()
+  }
+
+  private getDiscoveryTopBarBackgroundColor(): ResourceColor | string {
+    if (!this.isSearchMode && !this.isAlbumMode) {
+      return Color.Transparent
+    }
+    if (this.shouldUseDiscoveryImageBackgroundOverlay()) {
+      return this.isDarkMode ? '#66111111' : '#66FFFFFF'
+    }
+    return $r('app.color.start_window_background_blur')
+  }
+
+  private getDiscoverySearchBackgroundColor(): ResourceColor | string {
+    if (this.isMusicCoverHomeBackgroundActive()) {
+      return this.isDarkMode ? '#80111111' : '#80FFFFFF'
+    }
+    if (this.isCustomizeBg) {
+      return this.isDarkMode ? '#66111111' : '#73FFFFFF'
+    }
+    return $r('app.color.input_background')
   }
 
   private onDiscoverBreakpointChange(): void {
@@ -2235,7 +2279,10 @@ export struct FindView {
             .layoutWeight(1)
             .height(35)
             .maxLength(40)
-            .backgroundColor($r('app.color.input_background'))
+            .backgroundColor(this.getDiscoverySearchBackgroundColor())
+            .backgroundBlurStyle(this.shouldUseDiscoveryImageBackgroundOverlay()
+              ? BlurStyle.BACKGROUND_THICK
+              : BlurStyle.NONE)
             .placeholderColor(this.getSecondaryTextColor())
             .placeholderFont({ size: 14, weight: 400 })
             .textFont({ size: 14, weight: 400 })
@@ -2270,7 +2317,10 @@ export struct FindView {
     }
     .padding({ top: this.topSafeHeight + 10, left: 10, right: 10, bottom: 6 })
     .width('100%')
-    .backgroundColor(this.isSearchMode || this.isAlbumMode ? $r('app.color.start_window_background_blur') : Color.Transparent)
+    .backgroundColor(this.getDiscoveryTopBarBackgroundColor())
+    .backgroundBlurStyle(this.shouldUseDiscoveryImageBackgroundOverlay() && (this.isSearchMode || this.isAlbumMode)
+      ? BlurStyle.BACKGROUND_ULTRA_THICK
+      : BlurStyle.NONE)
   }
 
   @Builder
@@ -3438,11 +3488,17 @@ export struct FindView {
     .width('100%')
     .height('100%')
     .alignContent(Alignment.Bottom)
-    .backgroundImage(this.isCustomizeBg?this.customizeBgPath:$r('app.color.start_window_background'))
+    .backgroundImage(this.isMusicCoverHomeBackgroundActive()
+      ? this.customizeMusicBgPath
+      : (this.isCustomizeBg ? this.customizeBgPath : $r('app.color.start_window_background')))
     .backgroundImageSize(this.isLandscape?{width:'100%'}:{ height: '100%'})
     .backgroundImagePosition(Alignment.Center)
     .backdropBlur(this.blurValue)
-    .backgroundBrightness({rate:this.isCustomizeBg?0.1:0,lightUpDegree:this.bgBrightness})
+    .backgroundBrightness({rate:this.isMusicCoverHomeBackgroundActive() || this.isCustomizeBg ? 0.1 : 0,
+      lightUpDegree:this.bgBrightness})
+    .backgroundBlurStyle(this.isMusicCoverHomeBackgroundActive()
+      ? BlurStyle.BACKGROUND_ULTRA_THICK :
+      BlurStyle.NONE)
     .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
   }
 
@@ -3459,6 +3515,7 @@ export struct FindView {
           albumCoverPath: this.currentAlbumCoverPath,
           albumSourceLabel: this.currentAlbumSourceLabel,
           songs: this.currentAlbumSongs,
+          useTransparentBackground: this.isCustomizeBg || this.isMusicCoverHomeBackgroundActive(),
           defaultSortType: this.currentAlbumDefaultSortType,
           supportRecentPlayedSort: this.currentAlbumSupportRecentPlayedSort,
           allowDelete: this.canDeleteCurrentAlbumSongs(),
@@ -3514,6 +3571,7 @@ export struct FindView {
     }
     .width('100%')
     .height('100%')
-    .backgroundColor(this.isCustomizeBg ? Color.Transparent : $r('app.color.start_window_background'))
+    .backgroundColor(this.isCustomizeBg || this.isMusicCoverHomeBackgroundActive()
+      ? Color.Transparent : $r('app.color.start_window_background'))
   }
 }

+ 31 - 4
entry/src/main/ets/view/LocalMusic.ets

@@ -527,6 +527,7 @@ export struct LocalMusic {
   @State isEnableWordByWordLyric: boolean = true //是否开启逐字歌词
   @State isShowHistory: boolean = true //是否显示最近播放
   @State @Watch('onColorModeChange') isCustomizeBg: boolean = false //自定义背景界面
+  @State isHomeBgFollowMusicCover: boolean = true //主页背景随当前播放封面
   @State isGridMusic: boolean = false //是否网格布局
   @State isCircleBtn: boolean = false //是否圆形播放按钮
   @State twoFingerType: number = 3 //双支放大缩小的类型
@@ -545,6 +546,7 @@ export struct LocalMusic {
   @State isPlayPageSwipeNext: boolean = true // 播放页上滑切歌
   @State isLightText: boolean = true //是否开启歌词发光
   @State customizeBgPath: string | undefined = '';
+  @StorageProp('customizeMusicBgPath') customizeMusicBgPath: string = '';
   @State isDarkMode: boolean = false
   @State lyricTextWeight: number = 400
   @State lyricTextWeightPip: number = 400
@@ -767,7 +769,7 @@ export struct LocalMusic {
     Logger.info('heanup onModeChange', `doSortType: 切换排序方式 sortType=${this.sortType}, mode=${this.modeType}`);
   }
   // @Consume currentSong: VideoItem | undefined;
-  @StorageLink('currentSong') currentSong: VideoItem | undefined = undefined;
+  @StorageLink('currentSong') @Watch('onHomeBgCurrentSongChange') currentSong: VideoItem | undefined = undefined;
   // @StorageLink('isPlay') isPlay: boolean = false;
   @Consume isShowPlay: boolean ;
   @State isShowCoverScaleGuide: boolean = false
@@ -1523,6 +1525,7 @@ export struct LocalMusic {
     this.isShowPrecious = PreferencesUtil.getBooleanSync('isShowPrecious', false)
     this.sortType = PreferencesUtil.getNumberSync(SettingPage.SORT_TYPE, 4)
     this.isCustomizeBg = PreferencesUtil.getBooleanSync(SettingPage.IS_CUSTOMIZE_BG, false)
+    this.isHomeBgFollowMusicCover = PreferencesUtil.getBooleanSync(SettingPage.IS_HOME_BG_FOLLOW_MUSIC_COVER, true)
     this.customizeBgPath = PreferencesUtil.getStringSync(SettingPage.IS_CUSTOMIZE_BG_PATH, '')
     this.isGridMusic = PreferencesUtil.getBooleanSync(SettingPage.IS_GRID_MUSIC, true)
     this.isScrollHide = PreferencesUtil.getBooleanSync(SettingPage.IS_SCROLL_HIDE, false)
@@ -1534,6 +1537,7 @@ export struct LocalMusic {
     this.isMemoryLastPlay = PreferencesUtil.getBooleanSync(SettingPage.iS_MEMORY_LAST_PLAY, false)
     this.isShowTitleBar = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_TITLTBAR, true)
     this.isShowAllBar = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_ALLBAR, true)
+    this.syncCustomizeMusicBgPath()
     this.twoFingerType = PreferencesUtil.getNumberSync(SettingPage.TWO_FINGER_TYPE, 3)
     this.isCircleBtn = PreferencesUtil.getBooleanSync(SettingPage.IS_CIRCLE_BTN, true)
     this.isShowPlayPageBack = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_PLAYPAGE_BACK, false)
@@ -1603,6 +1607,22 @@ export struct LocalMusic {
 
   }
 
+  private onHomeBgCurrentSongChange(): void {
+    this.syncCustomizeMusicBgPath()
+  }
+
+  private syncCustomizeMusicBgPath(): void {
+    if (!this.isHomeBgFollowMusicCover) {
+      return
+    }
+    const coverPath: string = this.currentSong?.pixelMapPath ?? ''
+    AppStorage.setOrCreate('customizeMusicBgPath', coverPath)
+  }
+
+  private isMusicCoverHomeBackgroundActive(): boolean {
+    return this.isHomeBgFollowMusicCover && this.customizeMusicBgPath.length > 0
+  }
+
   doChangeSetting() {
     this.initSetting()
     this.deleteCache(this.currentPath)
@@ -4157,11 +4177,17 @@ export struct LocalMusic {
       }
       .width('100%')
       .height('100%')
-      .backgroundImage(this.isCustomizeBg ? this.customizeBgPath : $r('app.color.bottom_control_background'))
+      .backgroundImage(this.isMusicCoverHomeBackgroundActive()
+        ? this.customizeMusicBgPath
+        : (this.isCustomizeBg ? this.customizeBgPath : $r('app.color.bottom_control_background')))
       .backgroundImageSize(this.isCoverOpacity() ? { width: '100%' } : { height: '100%' })
       .backgroundImagePosition(Alignment.Center)
       .backdropBlur(this.blurValue)
-      .backgroundBrightness({ rate: this.isCustomizeBg ? 0.1 : 0, lightUpDegree: this.bgBrightness })
+      .backgroundBrightness({ rate: this.isMusicCoverHomeBackgroundActive() || this.isCustomizeBg ? 0.1 : 0,
+        lightUpDegree: this.bgBrightness })
+      .backgroundBlurStyle(this.isMusicCoverHomeBackgroundActive()
+        ? BlurStyle.BACKGROUND_ULTRA_THICK :
+        BlurStyle.NONE)
       .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
     }
 
@@ -6104,9 +6130,10 @@ export struct LocalMusic {
                 .padding({ top: 8 ,right:25})
                 .visibility(this.isShowFileName?Visibility.None:Visibility.Visible)
                 .maxLines(1)
+                .opacity(0.85)
                 .textOverflow({ overflow: TextOverflow.Ellipsis })//列表模式固定省略
                 .fontColor(this.currentSong?.filePath === item.filePath ? this.themeColor :
-                  Color.Gray)
+                  $r('app.color.text_color'))
                 .margin({ left: this.twoFingerType == 3 ? 6 : 8 })
               Blank()
               Text(this.isShowFileName?item.duration:item.size)

+ 29 - 3
entry/src/main/ets/view/RemoteMusicPage.ets

@@ -206,10 +206,12 @@ export struct RemoteMusicPage {
   private prevOffsetY: number = 0; // 记录上一次的Y轴偏移量
   @State autoHideTitle: boolean = true //滚动自动隐藏标题栏
   @State isCustomizeBg: boolean = false //自定义背景界面
+  @State isHomeBgFollowMusicCover: boolean = true //主页背景随当前播放封面
   @StorageProp('isLandscape')  isLandscape: boolean = false;
   @State blurValue: number = 0 //背景模糊
   @State bgBrightness: number = 0 //背景亮度
   @State customizeBgPath: string | undefined = '';
+  @StorageProp('customizeMusicBgPath') customizeMusicBgPath: string = '';
   @State private pointLightOptions: hdsEffect.PointLightOptions | undefined = undefined
   @State private activePointLightItemKey: string = ''
   @Link mType: number;
@@ -245,7 +247,7 @@ export struct RemoteMusicPage {
   @Link isDetailView: boolean; // 是否在艺术家/专辑详情视图
   @State previousTab: number = 0; // 进入详情视图前的标签页索引
   @StorageProp('isDarkMode') isDarkMode: boolean = false;
-  @StorageLink('currentSong') currentSong: VideoItem | undefined = undefined;
+  @StorageLink('currentSong') @Watch('onHomeBgCurrentSongChange') currentSong: VideoItem | undefined = undefined;
   @StorageProp('topSafeHeight') topSafeHeight: number = 0;
   @State @Watch('onTabSelectedIndexesChanged') tabSelectedIndexes: number[] = [0];
   @StorageProp('themeColor') themeColor: string =
@@ -375,6 +377,7 @@ export struct RemoteMusicPage {
 
   initSetting(){
     this.isCustomizeBg  = PreferencesUtil.getBooleanSync(SettingPage.IS_CUSTOMIZE_BG, false)
+    this.isHomeBgFollowMusicCover = PreferencesUtil.getBooleanSync(SettingPage.IS_HOME_BG_FOLLOW_MUSIC_COVER, true)
     this.customizeBgPath  = PreferencesUtil.getStringSync(SettingPage.IS_CUSTOMIZE_BG_PATH, '')
     this.blurValue = PreferencesUtil.getNumberSync(SettingPage.CUSTOMIZE_BG_BLUR, 0)
     this.bgBrightness = PreferencesUtil.getNumberSync(SettingPage.BG_BRIGHTNESS, 0)
@@ -383,6 +386,23 @@ export struct RemoteMusicPage {
     this.autoHideTitle = PreferencesUtil.getBooleanSync('autoHideTitle', true)
     this.twoFingerType = PreferencesUtil.getNumberSync(SettingPage.TWO_FINGER_TYPE, 3)
     this.isGridMusic = PreferencesUtil.getBooleanSync(SettingPage.IS_GRID_MUSIC, true)
+    this.syncCustomizeMusicBgPath()
+  }
+
+  private onHomeBgCurrentSongChange(): void {
+    this.syncCustomizeMusicBgPath()
+  }
+
+  private syncCustomizeMusicBgPath(): void {
+    if (!this.isHomeBgFollowMusicCover) {
+      return
+    }
+    const coverPath: string = this.currentSong?.pixelMapPath ?? ''
+    AppStorage.setOrCreate('customizeMusicBgPath', coverPath)
+  }
+
+  private isMusicCoverHomeBackgroundActive(): boolean {
+    return this.isHomeBgFollowMusicCover && this.customizeMusicBgPath.length > 0
   }
 
   aboutToAppear() {
@@ -4523,11 +4543,17 @@ export struct RemoteMusicPage {
       .alignContent(Alignment.Top)
       .width('100%')
       .height('100%')
-      .backgroundImage(this.isCustomizeBg?this.customizeBgPath:$r('app.color.start_window_background'))
+      .backgroundImage(this.isMusicCoverHomeBackgroundActive()
+        ? this.customizeMusicBgPath
+        : (this.isCustomizeBg ? this.customizeBgPath : $r('app.color.start_window_background')))
       .backgroundImageSize(this.isLandscape?{width:'100%'}:{ height: '100%'})
       .backgroundImagePosition(Alignment.Center)
       .backdropBlur(this.blurValue)
-      .backgroundBrightness({rate:this.isCustomizeBg?0.1:0,lightUpDegree:this.bgBrightness})
+      .backgroundBrightness({rate:this.isMusicCoverHomeBackgroundActive() || this.isCustomizeBg ? 0.1 : 0,
+        lightUpDegree:this.bgBrightness})
+      .backgroundBlurStyle(this.isMusicCoverHomeBackgroundActive()
+        ? BlurStyle.BACKGROUND_ULTRA_THICK :
+        BlurStyle.NONE)
       .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
 
     }