初步实现首页界面的自定义背景

整个app改为沉浸式

entry/src/main/ets/common/constants/CommonConstants.ets

@@ -86,6 +86,8 @@ export class CommonConstants {
   static readonly SORT_ARRAY = ["按艺术家升序", "按艺术家降序", "按专辑升序", "按专辑降序", "按名称升序", "按名称降序", "按添加时间升序",
   "按添加时间降序"]
 
+  static readonly TOP_HEIGHT: number = 35;
+
   //德本的接口调用微信支付下单接口返回的支付交易会话ID，该值有效期为2小时。
   static readonly WX_PAY_API: string = "https://pay.ss5.xyz/wechat/prepay"
   //微信支付商务号 剑虾

entry/src/main/ets/common/util/NetAxiosUtil.ets

@@ -69,9 +69,10 @@ class NetAxiosUtil{
     try {
       let baseUrl = cover_api
       LogUtil.debug("onecold getLyricCover baseUrl = "+baseUrl+title+artist);
-      if(cover_api===undefined&&StrUtil.isEmpty(cover_api)){
+      if(cover_api==undefined&&StrUtil.isEmpty(cover_api)){
         LogUtil.debug("onecold getLyricCover baseUrl2 = "+baseUrl);
-        baseUrl =  PreferencesUtil.getStringSync('COVER_API','')
+        // baseUrl =  PreferencesUtil.getStringSync('COVER_API','')
+        baseUrl = ''
       }
       LogUtil.debug("onecold getLyricCover baseUrl3 = "+baseUrl);
       if ( baseUrl=='') {

entry/src/main/ets/entryability/EntryAbility.ets

@@ -122,7 +122,11 @@ export default class EntryAbility extends UIAbility {
             // LogUtil.info( 'getMainWindow = ');
             globalThis.windowClass = data // 赋值给全局变量windowClass
 
-
+            windowClass.setWindowLayoutFullScreen(true).then(() => {
+                console.info('Succeeded in setting the window layout to full-screen mode.');
+            }).catch((e: BusinessError) => {
+                console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(e));
+            })
         })
 
 

entry/src/main/ets/pages/AboutPage.ets

@@ -4,6 +4,7 @@ import { CommonConstants } from '../common/constants/CommonConstants'
 import { AppUtil, ToastUtil } from '@pura/harmony-utils'
 import { Utility } from '../common/util/Utility'
 import { ConfigurationConstant } from '@kit.AbilityKit'
+import { BreakpointTypeEnum } from '../common/util/BreakpointSystem'
 
 @Preview
 @Entry
@@ -13,6 +14,9 @@ export struct AboutPage{
   @StorageProp('currentColorMode') @Watch('onColorModeChange') currentMode: number =
     ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT;
 
+  /** 当前断点类型（如大屏/小屏） */
+  @StorageProp('currentBreakpoint') currentBreakpoint: string = BreakpointTypeEnum.MD;
+
   onColorModeChange() {
     this.isDarkMode = this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK
     this.titleBarModel.setTitleFontColor($r('app.color.title_text'))
@@ -37,6 +41,7 @@ export struct AboutPage{
 
   // 组件生命周期
   aboutToAppear() {
+    // Utility.disableFullScreen()
     this.verName =  AppUtil.getVersionName()
     Utility.getAppName(getContext(this)).then((appName:string)=>{
       this.appName = appName
@@ -52,6 +57,13 @@ export struct AboutPage{
 
   build() {
     Column(){
+      Column(){
+        Line().width('100%').height('100%')
+      }
+      .height(this.currentBreakpoint !== BreakpointTypeEnum.SM?0:CommonConstants.TOP_HEIGHT)
+      .backgroundColor($r('app.color.title_bar_bg'))
+      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
+
       TitleBar({model:$titleBarModel})
       Scroll(){
         Column(){

entry/src/main/ets/pages/Dashboard.ets

@@ -1,69 +0,0 @@
-@Entry
-@ComponentV2
-struct Dashboard {
-  @Local angel: number = 0
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  private radius: number = 120;
-  private centerX: number = 0;
-  private centerY: number = 0;
-
-  draw() {
-    this.context.clearRect(0, 0, this.context.width, this.context.height)
-    // 绘制面板
-    this.context.beginPath();
-    this.context.arc(this.centerX, this.centerY, this.radius, Math.PI, Math.PI * 2);
-    this.context.lineWidth = 1;
-    this.context.strokeStyle = 'black';
-    this.context.stroke();
-
-    // 绘制刻度
-    for (let i = 90; i <= 270; i += 5) {
-      this.context.beginPath()
-      this.context.lineWidth = 1
-      this.context.strokeStyle = 'red'
-      this.context.moveTo(this.centerX + this.radius * Math.sin(i / 180 * Math.PI),
-        this.centerY + this.radius * Math.cos(i / 180 * Math.PI))
-      this.context.lineTo(this.centerX + (this.radius - 3) * Math.sin(i / 180 * Math.PI),
-        this.centerY + (this.radius - 3) * Math.cos(i / 180 * Math.PI))
-      this.context.stroke()
-    }
-
-    // 绘制指针
-    this.context.beginPath()
-    this.context.strokeStyle = 'green'
-    this.context.fillStyle = '#8000ff00'
-    this.context.moveTo(this.centerX, this.centerY)
-    this.context.lineTo(0, this.centerY)
-    this.context.arc(this.centerX, this.centerY, this.radius, Math.PI, Math.PI * (1 + this.angel / 180))
-    this.context.lineTo(this.centerX, this.centerY)
-    this.context.stroke()
-    this.context.fill()
-  }
-
-  build() {
-    Column() {
-      Canvas(this.context)
-        .width(300)
-        .height(150)
-        .backgroundColor(Color.Pink)
-        .onReady(() => {
-          this.centerX = this.context.width / 2
-          this.centerY = this.context.height
-
-          this.draw()
-        })
-        .onTouch((event) => {
-          let x = this.centerX - event.touches[0].x
-          let y = this.centerY - event.touches[0].y
-          this.angel = Math.atan(y / x) * (180 / Math.PI)
-          if (this.angel < 0) {
-            // 表示钝角
-            this.angel += 180
-          }
-          this.draw()
-        })
-      Text('当前角度：' + this.angel.toFixed(2))
-    }.width("100%").height("100%").justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)
-  }
-}

entry/src/main/ets/pages/NewIndex.ets

@@ -158,6 +158,9 @@ struct NewIndex{
    * - 判断是否显示赞助入口
    */
   async aboutToAppear() {
+
+    Utility.enableFullScreen()
+
     this.breakpointSystem.register();
     let params = router.getParams() as Record<string, Object>;
     this.videoLocalList = params.videoList as VideoItem[];

entry/src/main/ets/pages/ScanFilePage.ets

@@ -12,6 +12,7 @@ import { VideoItem } from '../viewmodel/VideoItem'
 import Logger from '../common/util/Logger'
 import { CommonConstants } from '../common/constants/CommonConstants'
 import { emitter } from '@kit.BasicServicesKit'
+import { BreakpointTypeEnum } from '../common/util/BreakpointSystem'
 
 
 @Preview
@@ -30,7 +31,8 @@ export struct ScanFilePage{
   private successpath:string = "common/lottie/success2.json"
   private mainCanvasRenderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.mainRenderingSettings)
   private animateItem: AnimationItem | null = null;
-
+  /** 当前断点类型（如大屏/小屏） */
+  @StorageProp('currentBreakpoint') currentBreakpoint: string = BreakpointTypeEnum.MD;
 
   initLottie(lpath:string,isLoop:boolean){
     lottie.destroy(); //加载动画前先销毁之前加载的动画
@@ -126,6 +128,12 @@ export struct ScanFilePage{
 
   build() {
     Column() {
+      Column(){
+        Line().width('100%').height('100%')
+      }
+      .height(this.currentBreakpoint !== BreakpointTypeEnum.SM?0:CommonConstants.TOP_HEIGHT)
+      .backgroundColor($r('app.color.title_bar_bg'))
+      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
       TitleBar({ model: $titleBarModel })
       Scroll(){
         Column() {

entry/src/main/ets/pages/SettingPage.ets

@@ -1,10 +1,14 @@
 import TitleBar from '../view/TitleBar'
 import { promptAction, router } from '@kit.ArkUI'
 import { CommonConstants } from '../common/constants/CommonConstants'
-import { AppUtil, PreferencesUtil, ToastUtil } from '@pura/harmony-utils'
+import { AppUtil, FileUtil, MD5, PreferencesUtil, ToastUtil } from '@pura/harmony-utils'
 import { CustomContentDialog } from '@kit.ArkUI'
 import ConfigurationConstant from '@ohos.app.ability.ConfigurationConstant';
 import common from '@ohos.app.ability.common';
+import { photoAccessHelper } from '@kit.MediaLibraryKit'
+import { fileIo, fileUri } from '@kit.CoreFileKit'
+import { BusinessError } from '@kit.BasicServicesKit'
+import { BreakpointTypeEnum } from '../common/util/BreakpointSystem'
 
 @Preview
 @Entry
@@ -24,8 +28,10 @@ export struct SettingPage {
   @State isShowSimi:boolean = false //是否显示私密音频
   @State isShowFAV:boolean = true //是否显示我的收藏
   @State isShowHistory:boolean = true //是否显示最近播放
-
-
+  @State isCustomizeBg: boolean = false //自定义背景界面
+  @State isCustomizeBgSheet: boolean = false //自定义背景界面
+  @State customizeBgPath: string | undefined = '';
+  context = getContext(this);
 
   @State showCoverApiDialog: boolean = false
   @State tempCoverApiUrl: string = ''
@@ -47,6 +53,11 @@ export struct SettingPage {
   static readonly IS_SHOW_SIMI: string = 'isShowSimi';
   static readonly IS_SHOW_FAV: string = 'isShowFAV';
   static readonly IS_SHOW_HISTORY: string = 'isShowHistory';
+  static readonly IS_CUSTOMIZE_BG: string = 'is_customize_bg';
+  static readonly IS_CUSTOMIZE_BG_PATH: string = 'is_customize_bg_path';
+  /** 当前断点类型（如大屏/小屏） */
+  @StorageProp('currentBreakpoint') currentBreakpoint: string = BreakpointTypeEnum.MD;
+
   @State titleBarModel: TitleBar.Model = new TitleBar.Model()
     .setTitleTextStyle(FontStyle.Normal)
     .setTitleBarStyle(TitleBar.BarStyle.TRANSPARENT)
@@ -59,7 +70,6 @@ export struct SettingPage {
     .setOnLeftClickListener(() => {
       router.back()
     })
-    .setTitleBarMinHeight(44)
     .setTitleBarNormalPadding(0)
   @State verName: string = ''
 
@@ -128,10 +138,12 @@ export struct SettingPage {
     this.isMediacodec = PreferencesUtil.getBooleanSync(SettingPage.IS_MIDIACODEC_OPEN, false)
     this.isMusicMemoryPlay = PreferencesUtil.getBooleanSync(SettingPage.iS_MUSIC_MEMORY_PLAY, false)
     this.isMusicBGCover = PreferencesUtil.getBooleanSync(SettingPage.iS_MUSIC_BG_COVER, true)
-
+    this.sortType = PreferencesUtil.getNumberSync(SettingPage.SORT_TYPE, 4)
     this.isShowSimi = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_SIMI, false)
     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.customizeBgPath  = PreferencesUtil.getStringSync(SettingPage.IS_CUSTOMIZE_BG_PATH, '')
 
     // 从持久化存储中读取深色模式设置
     const savedDarkMode = PreferencesUtil.getBooleanSync(SettingPage.IS_DARK_MODE, false);
@@ -184,6 +196,12 @@ export struct SettingPage {
 
   build() {
     Column() {
+      Column(){
+        Line().width('100%').height('100%')
+      }
+      .height(this.currentBreakpoint !== BreakpointTypeEnum.SM?0:CommonConstants.TOP_HEIGHT)
+      .backgroundColor($r('app.color.title_bar_bg'))
+      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
       TitleBar({ model: $titleBarModel })
       Scroll() {
         Column() {
@@ -220,7 +238,38 @@ export struct SettingPage {
             .height(55)
 
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
-            // 深色模式
+
+            Row() {
+              Text('自定义背景')
+                .margin({ left: 18 })
+                .fontSize(15)
+                .fontColor(Color.Gray)
+                .fontWeight(480)
+                .layoutWeight(1)
+                .bindSheet($$this.isCustomizeBgSheet, this.customizeBgSheet(), {
+                  height: '90%',
+                  dragBar: true,
+                  showClose: true,
+                  blurStyle: BlurStyle.Thin,
+                  backgroundColor: Color.Transparent,
+                  title: { title: '自定义背景' }
+                })
+
+              Blank()
+              // 右侧箭头
+              Image($r('app.media.arrow_right'))
+                .width(22)
+                .height(22)
+                .margin({ left: 20, right: 20 })
+                .align(Alignment.Center)
+            }
+            .height(55)
+            .onClick(() => {
+              this.isCustomizeBgSheet = !this.isCustomizeBgSheet;
+            })
+
+            Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
+            // 显示私密音频
             Row() {
               Text('显示私密音频')
                 .margin({ left: 18 })
@@ -243,7 +292,7 @@ export struct SettingPage {
             .height(55)
 
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
-            // 深色模式
+            // 显示我的收藏
             Row() {
               Text('显示我的收藏')
                 .margin({ left: 18 })
@@ -266,7 +315,7 @@ export struct SettingPage {
             .height(55)
 
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
-            // 深色模式
+            // 显示最近播放
             Row() {
               Text('显示最近播放')
                 .margin({ left: 18 })
@@ -351,6 +400,7 @@ export struct SettingPage {
                 .onSelect(async (_index: number, text?: string | undefined) => {
                   this.sortType = _index
                   PreferencesUtil.put(SettingPage.SORT_TYPE, this.sortType)
+                  ToastUtil.showToast('本设置重启才生效')
                 })
             }
             .height(55)
@@ -396,7 +446,7 @@ export struct SettingPage {
             // 歌词API
             Row() {
               Text('歌词:')
-                .margin({ left: 38, right: 6 })
+                .margin({ left: 18, right: 6 })
                 .fontSize(15)
                 .fontColor(Color.Gray)
               Text(this.lyricApiUrl)
@@ -404,21 +454,22 @@ export struct SettingPage {
                 .fontSize(15)
                 .fontColor(Color.Gray)
                 .layoutWeight(1)
-              Image($r('app.media.edit'))
-                .width(28)
-                .height(28)
+              Image(this.isDarkMode?$r('app.media.rename2'):$r('app.media.ic_public_edit'))
+                .width(22)
+                .height(22)
                 .margin({ right: 18 })
-                .onClick(() => {
-                  this.apiDialogType = 'lyric'
-                  this.tempApiUrl = this.lyricApiUrl
-                  this.apiDialogController.open()
-                })
+
             }
+            .onClick(() => {
+              this.apiDialogType = 'lyric'
+              this.tempApiUrl = this.lyricApiUrl
+              this.apiDialogController.open()
+            })
             .height(55)
             // 封面API
             Row() {
               Text('封面:')
-                .margin({ left: 38, right: 6 })
+                .margin({ left: 18, right: 6 })
                 .fontSize(15)
                 .fontColor(Color.Gray)
               Text(this.coverApiUrl)
@@ -426,16 +477,17 @@ export struct SettingPage {
                 .fontSize(15)
                 .fontColor(Color.Gray)
                 .layoutWeight(1)
-              Image($r('app.media.edit'))
-                .width(28)
-                .height(28)
+              Image(this.isDarkMode?$r('app.media.rename2'):$r('app.media.ic_public_edit'))
+                .width(22)
+                .height(22)
                 .margin({ right: 18 })
-                .onClick(() => {
-                  this.apiDialogType = 'cover'
-                  this.tempApiUrl = this.coverApiUrl
-                  this.apiDialogController.open()
-                })
+
             }
+            .onClick(() => {
+              this.apiDialogType = 'cover'
+              this.tempApiUrl = this.coverApiUrl
+              this.apiDialogController.open()
+            })
             .height(55)
           }
           .backgroundColor($r('app.color.settings_background_main'))
@@ -443,17 +495,138 @@ export struct SettingPage {
           .margin({ left: 0, right: 0, top: 0, bottom: 10 })
           .padding(0)
         }
-        .margin({ left: 25, right: 25, top: 2, bottom: 30 })
+        .margin({ left: 35, right: 35, top: 20, bottom: 30 })
         .justifyContent(FlexAlign.Start)
       }
       .scrollBar(BarState.Auto)
       .height('100%')
       .width('100%')
-      .margin({bottom:18})
+      .margin({bottom:40})
       .backgroundColor($r('app.color.settings_background'))
     }
 
     .height('100%')
     .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
   }
+
+
+  goSelectImage() {
+
+    let selectUris: Array<string> = [];
+    let photoPicker = new photoAccessHelper.PhotoViewPicker();
+    let photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
+    photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE; // 过滤选择媒体文件类型为IMAGE
+    photoSelectOptions.maxSelectNumber = 1; // 选择媒体文件的最大数目
+
+    photoPicker.select(photoSelectOptions).then(async (photoSelectResult: photoAccessHelper.PhotoSelectResult) => {
+
+      //用一个全局变量存储返回的uri
+      selectUris = photoSelectResult.photoUris;
+      console.info('photoViewPicker.select to file succeed and uris are:' + selectUris);
+      //使用fs.openSync接口，通过uri打开这个文件得到fd
+      let file = fileIo.openSync(selectUris[0], fileIo.OpenMode.READ_ONLY);
+      console.info('file fd: ' + file.fd);
+      let name = await MD5.digestSync('homeBg')
+      let imagePath = this.context.filesDir + FileUtil.separator + name
+      imagePath = fileUri.getUriFromPath(imagePath)
+      let file2 = fileIo.openSync(imagePath, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE)
+      fileIo.copyFileSync(file.fd, file2.fd)
+      fileIo.closeSync(file);
+      fileIo.closeSync(file2);
+
+      this.customizeBgPath = imagePath
+
+      PreferencesUtil.put(SettingPage.IS_CUSTOMIZE_BG_PATH, this.customizeBgPath)
+
+
+    }).catch((err: BusinessError) => {
+
+      console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
+
+    })
+
+
+  }
+
+  @Builder
+  customizeBgSheet() {
+    Scroll() {
+      Column() {
+        this.CustomizeBg()
+      }
+    }
+    .width('100%')
+    .height('100%')
+  }
+  @Builder
+  CustomizeBg() {
+    Column() {
+      Image( this.customizeBgPath)
+        .height('62%')
+        .alt($r('app.color.white'))
+        .objectFit( ImageFit.Contain)
+        .borderRadius(20)
+        .clip(true)
+        .margin({ left: 20,bottom:40 })
+
+      Row() {
+
+        Row() {
+
+          Button('选择图片')
+            .fontColor(Color.White)
+            .fontSize(12)
+            .height(48)
+            .width(100)
+            .backgroundColor($r('app.color.title_bar_bg'))
+            .stateEffect(true)
+            .margin({ right: 5, left: 12 })
+            .onClick(async () => {
+
+              this.goSelectImage()
+
+            })
+
+
+        }
+        .height('100%')
+        .justifyContent(FlexAlign.Center)
+        .layoutWeight(1)
+
+      }
+      .width('100%')
+      .height(58)
+
+
+      Column() {
+        Row() {
+          Text('自定义背景')
+            .margin({ left: 18 })
+            .fontSize(15)
+            .fontColor($r('app.color.text_color'))
+            .fontWeight(480)
+            .layoutWeight(1)
+          Toggle({ type: ToggleType.Switch, isOn: this.isCustomizeBg })
+            .selectedColor($r('app.color.tab_item_bg'))
+            .switchPointColor(Color.White)
+            .margin({ right: 18 })
+            .onChange((checked: boolean) => {
+              this.isCustomizeBg = checked;
+              PreferencesUtil.put(SettingPage.IS_CUSTOMIZE_BG, this.isCustomizeBg)
+            })
+            .width(50)
+            .height(30);
+        }
+        .height(55)
+      }
+      .backgroundColor($r('app.color.settings_background_main'))
+      .borderRadius(20)
+      .margin({ left: 30, right: 30, top: 0, bottom: 30 })
+      .padding(0)
+
+
+    }
+    .margin({ bottom: 30 })
+  }
+
 }

entry/src/main/ets/pages/VerifyPage.ets

@@ -5,6 +5,7 @@ import { AppUtil, PreferencesUtil, ToastUtil } from '@pura/harmony-utils'
 import { Utility } from '../common/util/Utility'
 import UserAuthModel from '../viewmodel/UserAuthModel'
 import { common, Want } from '@kit.AbilityKit'
+import { BreakpointTypeEnum } from '../common/util/BreakpointSystem'
 
 @Preview
 @Entry
@@ -16,7 +17,8 @@ export struct VerifyPage{
   @State isMima:boolean = true
   @State isFingerprint:boolean = false
   @State isFace:boolean = false
-
+  /** 当前断点类型（如大屏/小屏） */
+  @StorageProp('currentBreakpoint') currentBreakpoint: string = BreakpointTypeEnum.MD;
   @State titleBarModel: TitleBar.Model = new TitleBar.Model()
     .setTitleTextStyle(FontStyle.Normal)
     .setTitleBarStyle(TitleBar.BarStyle.TRANSPARENT)
@@ -117,6 +119,7 @@ export struct VerifyPage{
   build() {
     Column(){
       TitleBar({model:$titleBarModel})
+        .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
       Column() {
 
         Column(){

entry/src/main/ets/pages/VipPage.ets

@@ -27,6 +27,7 @@ import { http } from '@kit.NetworkKit';
 import { bundleManager } from '@kit.AbilityKit';
 import { cryptoFramework } from '@kit.CryptoArchitectureKit';
 import { JSON } from '@kit.ArkTS';
+import { BreakpointTypeEnum } from '../common/util/BreakpointSystem';
 
 const context = getContext(this) as common.UIAbilityContext;
 @Preview
@@ -71,7 +72,8 @@ export  struct  VipPage{
   private wxApi = WXApi
   private wxEventHandler = WXEventHandler
   @State resultText: string = ''
-
+  /** 当前断点类型（如大屏/小屏） */
+  @StorageProp('currentBreakpoint') currentBreakpoint: string = BreakpointTypeEnum.MD;
 
   static readonly WX_NOTIFY_URL: string = 'https://webhook.ss5.xyz/wechat_notify.php'
 
@@ -117,6 +119,12 @@ export  struct  VipPage{
 
 
     Column() {
+      Column(){
+        Line().width('100%').height('100%')
+      }
+      .height(this.currentBreakpoint !== BreakpointTypeEnum.SM?0:CommonConstants.TOP_HEIGHT)
+      .backgroundColor($r('app.color.title_bar_bg'))
+      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
       TitleBar({ model: $titleBarModel })
       Scroll() {
       Column() {

entry/src/main/ets/pages/WebIndex.ets

@@ -3,6 +3,9 @@ import { router } from '@kit.ArkUI'
 import { webview } from '@kit.ArkWeb';
 import { NetworkUtil, ToastUtil } from '@pura/harmony-utils';
 import { ConfigurationConstant } from '@kit.AbilityKit';
+import { Utility } from '../common/util/Utility';
+import { BreakpointTypeEnum } from '../common/util/BreakpointSystem';
+import { CommonConstants } from '../common/constants/CommonConstants';
 
 
 @Entry
@@ -21,7 +24,8 @@ struct  WebIndex{
   @State isDarkMode: boolean = false
   @StorageProp('currentColorMode') @Watch('onColorModeChange') currentMode: number =
     ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT;
-
+  /** 当前断点类型（如大屏/小屏） */
+  @StorageProp('currentBreakpoint') currentBreakpoint: string = BreakpointTypeEnum.MD;
   onColorModeChange() {
     this.isDarkMode = this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK
     this.titleBarModel.setTitleFontColor($r('app.color.title_text'))
@@ -50,6 +54,7 @@ struct  WebIndex{
 
   // 组件生命周期
   aboutToAppear() {
+    // Utility.disableFullScreen()
     if(!NetworkUtil.hasDefaultNetSync()){
       ToastUtil.showToast('没有网络，请检查网络连接！')
     }
@@ -59,6 +64,12 @@ struct  WebIndex{
 
   build() {
     Column(){
+      Column(){
+        Line().width('100%').height('100%')
+      }
+      .height(this.currentBreakpoint !== BreakpointTypeEnum.SM?0:CommonConstants.TOP_HEIGHT)
+      .backgroundColor($r('app.color.title_bar_bg'))
+      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
       TitleBar({model:$titleBarModel})
       Progress({ value: 0, total: 100, type: ProgressType.Linear })
         .backgroundColor(this.isDarkMode ? 0x333333 : 0xFFFFFF)

entry/src/main/ets/view/LocalMusic.ets

@@ -168,11 +168,13 @@ export struct LocalMusic {
   @State isShowSimi:boolean = false //是否显示私密音频
   @State isShowFAV:boolean = true //是否显示我的收藏
   @State isShowHistory:boolean = true //是否显示最近播放
-
+  @State isCustomizeBg: boolean = false //自定义背景界面
+  @State customizeBgPath: string | undefined = '';
   @State isDarkMode: boolean = false
   @StorageProp('currentColorMode') @Watch('onColorModeChange') currentMode: number =
     ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT;
 
+
   onColorModeChange() {
     this.isDarkMode = this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK
     if (this.currentMode == ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT) {
@@ -362,6 +364,9 @@ export struct LocalMusic {
   // 组件生命周期
   aboutToAppear() {
     this.sortType = PreferencesUtil.getNumberSync(SettingPage.SORT_TYPE, 4)
+    this.isCustomizeBg  = PreferencesUtil.getBooleanSync(SettingPage.IS_CUSTOMIZE_BG, false)
+    this.customizeBgPath  = PreferencesUtil.getStringSync(SettingPage.IS_CUSTOMIZE_BG_PATH, '')
+
 
     Utility.getAppName(getContext(this)).then((appName: string) => {
       this.appName = appName
@@ -1761,11 +1766,16 @@ export struct LocalMusic {
 
     Scroll() {
       Column() {
+        Column(){
+          Line().width('100%').height('100%')
+        }
+        .height(this.currentBreakpoint !== BreakpointTypeEnum.SM?0:CommonConstants.TOP_HEIGHT)
+        .backgroundColor($r('app.color.title_bar_bg'))
+        .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
         TitleBar({ model: $titleBarModel })
           .id('pup_positon_music')
           .backgroundColor($r('app.color.title_bar_bg'))
           .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
-
         Stack() {
           Column() {
 
@@ -1917,7 +1927,9 @@ export struct LocalMusic {
       }
       .width('100%')
       .height('100%')
-      .backgroundColor($r('app.color.bottom_control_background'))
+      .backgroundImage(this.isCustomizeBg?this.customizeBgPath:$r('app.color.bottom_control_background'))
+      .backgroundImageSize({ height: '100%', width: '100%' })
+      // .backgroundColor($r('app.color.bottom_control_background'))
       .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
 
     }
@@ -2415,6 +2427,7 @@ export struct LocalMusic {
 
       Line().width('100%').height(1).backgroundColor($r('app.color.index_background'))
         .opacity(this.barOpacity)
+        .visibility(this.isCustomizeBg?Visibility.Hidden:Visibility.Visible)
     }
 
   }
@@ -2508,7 +2521,7 @@ export struct LocalMusic {
       .height(50)
       .border({
         width: { bottom: 1 },
-        color: '#12ec5c87'
+        color: this.isCustomizeBg?Color.Transparent:'#12ec5c87'
       })
 
 
@@ -2661,7 +2674,7 @@ export struct LocalMusic {
       .visibility(this.modeType === 0 || this.modeType === 1 || this.isCanBack ? Visibility.Visible : Visibility.None)
       .border({
         width: { bottom: 1 },
-        color: '#12ec5c87'
+        color: this.isCustomizeBg?Color.Transparent:'#12ec5c87'
       })
 
     }
@@ -2887,7 +2900,7 @@ export struct LocalMusic {
       }, (item: VideoItem) => item.filePath)
     }
     // .divider({ strokeWidth: 1, color: this.isDarkMode? '#333333':'#ffe9f0f0' })
-    .margin({ bottom: this.isPuraWP() ? 50 : 108 })
+    .margin({ bottom: this.isPuraWP() ? 100 : 158 })
     .cachedCount(30)
     .borderRadius(20)
     .layoutWeight(1)
@@ -3051,6 +3064,7 @@ export struct LocalMusic {
     Column() {
 
       Line().width('100%').height(1).backgroundColor($r('app.color.index_background'))
+        .visibility(this.isCustomizeBg?Visibility.Hidden:Visibility.Visible)
 
 
       Row() {
@@ -3178,7 +3192,7 @@ export struct LocalMusic {
       .height(this.bottomBarHeight)
       .justifyContent(FlexAlign.Center)
       .hitTestBehavior(HitTestMode.Transparent)
-      .backgroundColor($r('app.color.bottom_control_background'))
+      .backgroundColor(this.isCustomizeBg?Color.Transparent:$r('app.color.bottom_control_background'))
       .bindContentCover($$this.isShowPlay, this.MusicPlayBuilder(), {
         // modalTransition: ModalTransition.DEFAULT,
         transition: AnimationHelper.transitionInDown(666),
@@ -3188,7 +3202,8 @@ export struct LocalMusic {
         left: 16,
         right: 16
       })
-
+      Line().width('100%').height(25).backgroundColor($r('app.color.bottom_control_background'))
+        .visibility(this.isCustomizeBg?Visibility.Hidden:Visibility.Visible)
     }
 
   }
@@ -3335,6 +3350,7 @@ export struct LocalMusic {
             }
             .height('100%')
             .width(100)
+            .visibility(this.isDarkMode?Visibility.None:Visibility.Visible)
             .justifyContent(FlexAlign.Center)
             .alignItems(HorizontalAlign.Start)
 
@@ -3385,7 +3401,7 @@ export struct LocalMusic {
         Row() {
           Text('标题:')
             .fontSize(14)
-            .fontColor(Color.Black)
+            .fontColor($r('app.color.text_color'))
             .margin({ left: 22 })
 
           TextInput({ text: this.currentSong?.name ? this.currentSong.name : '' })
@@ -3393,7 +3409,7 @@ export struct LocalMusic {
             .maxLines(1)
             .fontSize(14)
             .layoutWeight(1)
-            .fontColor(Color.Black)
+            .fontColor($r('app.color.text_color'))
             .margin({ right: 20, left: 10 })
             .onChange((val: string) => {
               this.titleStr = val
@@ -3406,7 +3422,7 @@ export struct LocalMusic {
         Row() {
           Text('艺术家:')
             .fontSize(14)
-            .fontColor(Color.Black)
+            .fontColor($r('app.color.text_color'))
             .margin({ left: 22 })
 
           TextInput({ text: this.currentSong?.artist ? this.currentSong.artist : '' })
@@ -3414,7 +3430,7 @@ export struct LocalMusic {
             .maxLines(1)
             .fontSize(14)
             .layoutWeight(1)
-            .fontColor(Color.Black)
+            .fontColor($r('app.color.text_color'))
             .margin({ right: 20, left: 10 })
             .onChange((val: string) => {
               this.artistStr = val
@@ -3427,14 +3443,14 @@ export struct LocalMusic {
         Row() {
           Text('专辑名:')
             .fontSize(14)
-            .fontColor(Color.Black)
+            .fontColor($r('app.color.text_color'))
             .margin({ left: 22 })
           TextInput({ text: this.currentSong?.album ? this.currentSong.album : '' })
             .height(40)
             .maxLines(1)
             .fontSize(14)
             .layoutWeight(1)
-            .fontColor(Color.Black)
+            .fontColor($r('app.color.text_color'))
             .margin({ right: 20, left: 10 })
             .onChange((val: string) => {
               this.ablumStr = val
@@ -3447,14 +3463,14 @@ export struct LocalMusic {
         Row() {
           Text('歌词:')
             .fontSize(14)
-            .fontColor(Color.Black)
+            .fontColor($r('app.color.text_color'))
             .margin({ left: 22 })
           TextArea({ text: this.lyricContent ? this.lyricContent : '' })
             .type(TextAreaType.NORMAL)
             .height(275)
             .fontSize(14)
             .layoutWeight(1)
-            .fontColor(Color.Black)
+            .fontColor($r('app.color.text_color'))
             .margin({ right: 20, left: 10 })
             .onChange((val: string) => {
               this.lyricConStr = val
@@ -3546,14 +3562,14 @@ export struct LocalMusic {
                   curve: 'Linear',
                 })
 
-                .fontColor($r('app.color.title_bar_bg'))
+                .fontColor($r('app.color.text_color'))
                 .margin({ left: 10 })
               Row() {
                 Text(StrUtil.isEmpty(this.currentSong.artist) ? this.currentSong.cTime :
                   this.currentSong.artist + '  ' + this.currentSong?.album)
                   .fontSize(11)
                   .padding({ top: 8 })
-                  .fontColor($r('app.color.title_bar_bg'))
+                  .fontColor($r('app.color.text_color'))
                   .margin({ left: 10 })
 
               }
@@ -4927,7 +4943,7 @@ export struct LocalMusic {
           Image($r('app.media.menu'))
             .width(24)
             .bindSheet($$this.isShowMoreView, this.PlayMoreSheet(), {
-              height: this.isCoverOpacity() ? '95%' : '95%',
+              height: this.isCoverOpacity() ? '95%' : '93%',
               dragBar: true,
               showClose: true,
               blurStyle: BlurStyle.Thin,
@@ -5090,7 +5106,7 @@ export struct LocalMusic {
       // .visibility(this.isHide?Visibility.Hidden:Visibility.Visible)
 
     }
-    .position({ bottom:this.isCoverOpacity()?30: 55 }) // 将  固定在底部
+    .position({ bottom:this.isCoverOpacity()?55: 80 }) // 将  固定在底部
 
   }