主题图片首页完善

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

@@ -291,7 +291,7 @@ export struct SettingPage {
               .fillColor(this.themeColor)
             Text('颜色模式')
               .fontSize(15)
-              .margin({left:8})
+              .margin({left:6})
               .fontWeight(500)
           }
           .layoutWeight(1)
@@ -303,6 +303,7 @@ export struct SettingPage {
                     value: idx+"",
                     group: this.colorGroup,
                   })
+                    .checked(this.themeMode===idx)
                     .radioStyle({
                       checkedBackgroundColor: this.themeColor
                     })

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

@@ -542,7 +542,6 @@ export struct LocalMusic {
     if (this.modeType === 0) {
       this.getSortedFiles(this.currentPath)
     }
-
   }
 
   doChangeBarHeight() {
@@ -969,6 +968,7 @@ export struct LocalMusic {
     }
     let dataBean = new BubbleBean()
     dataBean.data = ["首页", "媒体库", "艺术家", "专辑", "同步数据"]
+    dataBean.color = this.themeColor
     dataBean.imageRes =
       [$r('app.media.home_press'), $r('app.media.kp_music'), $r('app.media.music_menu'), $r('app.media.llq'),
         $r('app.media.refresh')]
@@ -1620,6 +1620,7 @@ export struct LocalMusic {
     }
     let dataBean = new BubbleBean()
     dataBean.data = mList
+    dataBean.color = this.themeColor
     dataBean.onItemClick = (i) => {
       const newPath = rPath + '/' + mList[i] + '/' + item.fileName
       Logger.info('newPath = ' + newPath)
@@ -1698,6 +1699,7 @@ export struct LocalMusic {
     let dataBean = new BubbleBean()
     dataBean.data = mList
     dataBean.isCopy = true
+    dataBean.color = this.themeColor
     dataBean.onItemClick = (i) => {
       const newPath = rPath + '/' + mList[i] + '/' + item.fileName
       Logger.info('newPath = ' + newPath)
@@ -1730,11 +1732,7 @@ export struct LocalMusic {
     if (index <= 3) {
       popupPosition = PopupPosition.BOTTOM
     }
-    // let pup = XPopup.Builder()
-    //   .setPopupPosition(popupPosition)
-    //   .atView(id)
-    //   .asBubble(wrapBuilder(cutPopupBuilder), dataBean)
-    //   .show()
+
     let pup:XPopup
     if (this.isDarkMode) {
       pup = XPopup.Builder()
@@ -2071,6 +2069,7 @@ export struct LocalMusic {
     }
     let dataBean = new BubbleBean();
     dataBean.data = mList;
+    dataBean.color = this.themeColor
     dataBean.onItemClick = (i) => {
       const newDirPath = rPath + '/' + mList[i];
       // Logger.info('newDirPath = ' + newDirPath)
@@ -2106,11 +2105,6 @@ export struct LocalMusic {
       XPopup.dismissTop();
     };
 
-    // let pup = XPopup.Builder()
-    //   .setPopupPosition(PopupPosition.TOP)
-    //   .atView(viewId)
-    //   .asBubble(wrapBuilder(cutPopupBuilder), dataBean)
-    //   .show();
     let pup:XPopup
     if (this.isDarkMode) {
       pup = XPopup.Builder()
@@ -2176,6 +2170,7 @@ export struct LocalMusic {
     let dataBean = new BubbleBean();
     dataBean.data = mList;
     dataBean.isCopy = true
+    dataBean.color = this.themeColor
     dataBean.onItemClick = (i) => {
       const newDirPath = rPath + '/' + mList[i];
       // Logger.info('newDirPath = ' + newDirPath)
@@ -3030,132 +3025,130 @@ export struct LocalMusic {
   @State tempLyricContent:string = ''
   @Builder
   private MusicItemGrid(item: VideoItem, index: number) {
-
-    Stack() {
-
-      Column() {
-        Image(StrUtil.isEmpty(item.pixelMapPath) ?Utility.getMusisBg2(index) : item.pixelMapPath)
-          .height(150)
-          .width(150)
-          .alt($r('app.media.ic_avatar6'))
-          .clip(true)
-          .borderRadius({
-            topLeft: 20,
-            topRight	: 20,
-            bottomLeft: 0,
-            bottomRight: 0
-          })
-          .draggable(false)
-          .opacity(this.opacityItem)// 绑定透明度
-          .animation({ curve: Curve.Sharp, duration: 300 })
-          .margin({ left: this.currentBreakpoint !== BreakpointTypeEnum.SM?40:20 ,
-            right: this.currentBreakpoint !== BreakpointTypeEnum.SM?40:20})
+    Button({ type: ButtonType.Normal, stateEffect: true }) {
+      Stack() {
         Column() {
-          Text(item.name.startsWith('.')?item.name.replace(/\./g, ''):item.name)
-            .fontSize(14)
-            .maxLines(1)
-            .fontWeight(FontWeight.Bold)
-            .textOverflow({overflow: TextOverflow.MARQUEE}) //超长滚动
-            .animation({
-              duration: 555,
-              curve: 'Linear',
+          Image(StrUtil.isEmpty(item.pixelMapPath) ?Utility.getMusisBg2(index) : item.pixelMapPath)
+            .height(150)
+            .width(150)
+            .alt($r('app.media.ic_avatar6'))
+            .clip(true)
+            .borderRadius({
+              topLeft: 20,
+              topRight	: 20,
+              bottomLeft: 0,
+              bottomRight: 0
             })
-            .fontColor(this.currentSong?.filePath === item.filePath ?  this.themeColor :
-            $r('app.color.text_color'))
-
-          Column(){
-            Text(`${this.artistMap.get(item.name)?.length ?? 0}首`)
-              .fontSize(11)
-              .visibility(this.modeType===2&&!this.isCanBack?Visibility.Visible:Visibility.None)
-              .fontColor($r('app.color.text_color'))
-            Text(`${this.albumMap.get(item.name)?.length ?? 0}首`)
-              .fontSize(11)
-              .visibility(this.modeType===3&&!this.isCanBack?Visibility.Visible:Visibility.None)
-              .fontColor($r('app.color.text_color'))
-            Text(StrUtil.isEmpty(item.artist) ? 'Unknown' : item.artist )
-              .fontSize(11)
+            .draggable(false)
+            .opacity(this.opacityItem)// 绑定透明度
+            .animation({ curve: Curve.Sharp, duration: 300 })
+            .margin({ left: this.currentBreakpoint !== BreakpointTypeEnum.SM?40:20 ,
+              right: this.currentBreakpoint !== BreakpointTypeEnum.SM?40:20})
+          Column() {
+            Text(item.name.startsWith('.')?item.name.replace(/\./g, ''):item.name)
+              .fontSize(14)
               .maxLines(1)
-              .margin({top:2})
-              .visibility(item.type==CommonConstants.TYPE_IS_ARTIST
-                ||item.type==CommonConstants.TYPE_IS_ALBUM
-                ||item.type==CommonConstants.TYPE_IS_DIR?Visibility.None:Visibility.Visible)
-              .fontWeight(FontWeight.Medium)
-              .fontColor(this.currentSong?.filePath === item.filePath ?  this.themeColor:
+              .fontWeight(FontWeight.Bold)
+              .textOverflow({overflow: TextOverflow.MARQUEE}) //超长滚动
+              .animation({
+                duration: 555,
+                curve: 'Linear',
+              })
+              .fontColor(this.currentSong?.filePath === item.filePath ?  this.themeColor :
               $r('app.color.text_color'))
 
-          }
-          .alignItems(HorizontalAlign.Center) // 关键：使内容水平居中
+            Column(){
+              Text(`${this.artistMap.get(item.name)?.length ?? 0}首`)
+                .fontSize(11)
+                .visibility(this.modeType===2&&!this.isCanBack?Visibility.Visible:Visibility.None)
+                .fontColor($r('app.color.text_color'))
+              Text(`${this.albumMap.get(item.name)?.length ?? 0}首`)
+                .fontSize(11)
+                .visibility(this.modeType===3&&!this.isCanBack?Visibility.Visible:Visibility.None)
+                .fontColor($r('app.color.text_color'))
+              Text(StrUtil.isEmpty(item.artist) ? 'Unknown' : item.artist )
+                .fontSize(11)
+                .maxLines(1)
+                .margin({top:2})
+                .visibility(item.type==CommonConstants.TYPE_IS_ARTIST
+                  ||item.type==CommonConstants.TYPE_IS_ALBUM
+                  ||item.type==CommonConstants.TYPE_IS_DIR?Visibility.None:Visibility.Visible)
+                .fontWeight(FontWeight.Medium)
+                .fontColor(this.currentSong?.filePath === item.filePath ?  this.themeColor:
+                $r('app.color.text_color'))
 
-        }
-        .bindPopup(this.longItemFilePath === item.filePath, {
-          builder: this.MenuBuilder(item,index,item.filePath),
-          placement: Placement.Top,
-          // autoCancel: true,
-          mask: {color:'#33000000'},
-          // popupColor: Color.Yellow,
-          enableArrow: false,//是否显示箭头
-          showInSubWindow: false,
-          onStateChange: (e) => {
-            if (!e.isVisible) {
-              this.longItemFilePath = ''
-              this.tempLyricContent = ''
             }
-          }
-        })
+            .alignItems(HorizontalAlign.Center) // 关键：使内容水平居中
 
-        .gesture(LongPressGesture()
-          .onAction(async () => {
-            //如果是专辑和艺术家的首页，不能长按
-            if((this.modeType===2||this.modeType==3)&&!this.isCanBack)
-              return
-            //如果是我的收藏 最近播放等也不能长按
-            if(item.name === LocalMusic.STR_LOCK_VIDEO || item.name === LocalMusic.STR_FAC_VIDEO ||
-              item.name === LocalMusic.STR_HISTORY_MUSIC
-            )
-              return
-            this.longItemFilePath = item.filePath
-            this.tempLyricContent = await this.getLyricContent(item)
-            LogUtil.info('长按this.tempLyricContent = '+this.tempLyricContent)
+          }
+          .bindPopup(this.longItemFilePath === item.filePath, {
+            builder: this.MenuBuilder(item,index,item.filePath),
+            placement: Placement.Top,
+            // autoCancel: true,
+            mask: {color:'#33000000'},
+            // popupColor: Color.Yellow,
+            enableArrow: false,//是否显示箭头
+            showInSubWindow: false,
+            onStateChange: (e) => {
+              if (!e.isVisible) {
+                this.longItemFilePath = ''
+                this.tempLyricContent = ''
+              }
+            }
           })
-          .onActionEnd((event: GestureEvent) => {
 
-          })
-        )
-        .height(50)
-        .width(150)
-        .justifyContent(FlexAlign.Center)
-        .margin({ left: this.currentBreakpoint !== BreakpointTypeEnum.SM?40:20 ,
-          right: this.currentBreakpoint !== BreakpointTypeEnum.SM?40:20})
+          .gesture(LongPressGesture()
+            .onAction(async () => {
+              //如果是专辑和艺术家的首页，不能长按
+              if((this.modeType===2||this.modeType==3)&&!this.isCanBack)
+                return
+              //如果是我的收藏 最近播放等也不能长按
+              if(item.name === LocalMusic.STR_LOCK_VIDEO || item.name === LocalMusic.STR_FAC_VIDEO ||
+                item.name === LocalMusic.STR_HISTORY_MUSIC
+              )
+                return
+              this.longItemFilePath = item.filePath
+              this.tempLyricContent = await this.getLyricContent(item)
+              LogUtil.info('长按this.tempLyricContent = '+this.tempLyricContent)
+            })
+            .onActionEnd((event: GestureEvent) => {
 
-      }
-      .width(150)
-      .borderRadius(20)
-      .backgroundImage(item.pixelMapPath)
-      .backgroundImageSize({ height: '100%',width:'100%' })
-      .backgroundBlurStyle(BlurStyle.BACKGROUND_ULTRA_THICK)
-      .animation({ curve: Curve.Sharp, duration: 300 })
+            })
+          )
+          .height(50)
+          .width(150)
+          .justifyContent(FlexAlign.Center)
+          .margin({ left: this.currentBreakpoint !== BreakpointTypeEnum.SM?40:20 ,
+            right: this.currentBreakpoint !== BreakpointTypeEnum.SM?40:20})
+
+        }
+        .width(150)
+        .borderRadius(20)
+        .backgroundImage(item.pixelMapPath)
+        .backgroundImageSize({ height: '100%',width:'100%' })
+        .backgroundBlurStyle(BlurStyle.BACKGROUND_ULTRA_THICK)
+        .animation({ curve: Curve.Sharp, duration: 300 })
 
 
-      Checkbox({ name: 'checkbox' + index })
-        .select(this.selectedFiles.some(x  => x.filePath  === item.filePath))
-        .selectedColor(this.themeColor)
-        .shape(CheckBoxShape.CIRCLE)
-        .opacity(this.isMultiSelect ? 1 : 0)
-        .animation({
-          duration: 666,
-          curve: 'Smooth' // 可选动画曲线
-        })
-        .visibility(this.isMultiSelect&&item.type!==CommonConstants.TYPE_IS_DIR?Visibility.Visible:Visibility.None)
-        .onChange((checked: boolean) => this.handleFileSelection(item, checked))
-        .margin({ left: 20, top: 8, bottom: 8 })
-        .width(38)
-        .height(38)
+        Checkbox({ name: 'checkbox' + index })
+          .select(this.selectedFiles.some(x  => x.filePath  === item.filePath))
+          .selectedColor(this.themeColor)
+          .shape(CheckBoxShape.CIRCLE)
+          .opacity(this.isMultiSelect ? 1 : 0)
+          .animation({
+            duration: 666,
+            curve: 'Smooth' // 可选动画曲线
+          })
+          .visibility(this.isMultiSelect&&item.type!==CommonConstants.TYPE_IS_DIR?Visibility.Visible:Visibility.None)
+          .onChange((checked: boolean) => this.handleFileSelection(item, checked))
+          .margin({ left: 20, top: 8, bottom: 8 })
+          .width(38)
+          .height(38)
+      }
     }
+    .backgroundColor(Color.Transparent)
     .width('100%')
     .height(205)
-    .stateStyles({
-      pressed: { opacity: 0.6 } // 按压反馈
-    })
     .onClick(() => {
       if(this.isMultiSelect&&item.type!==CommonConstants.TYPE_IS_DIR){
         this.handleFileSelection(item, !this.selectedFiles.some(x  => x.filePath  === item.filePath))
@@ -9464,25 +9457,29 @@ function customPopupBuilder(dataBu: BubbleBean) {
   List() {
     LazyForEach(new LazyDataSource(dataBu.data), (item: string, index: number) => {
       ListItem() {
-        Row() {
-          Column() {
-            Image(dataBu.imageRes[index])
-              .height(28)
-              .alignSelf(ItemAlign.Center)
+        Button({ type: ButtonType.Capsule, stateEffect: true }) {
+          Row() {
+            Column() {
+              Image(dataBu.imageRes[index])
+                .height(28)
+                .fillColor(dataBu.color)
+                .alignSelf(ItemAlign.Center)
+            }
+            .width(32)
 
+            Text(item)
+              .padding({
+                top: 10,
+                bottom: 10,
+                right: 10,
+                left: 10
+              })
+              .textAlign(TextAlign.Start)
+              .width("100%")
           }
-          .width(32)
-
-          Text(item)
-            .padding({
-              top: 10,
-              bottom: 10,
-              right: 10,
-              left: 10
-            })
-            .textAlign(TextAlign.Start)
-            .width("100%")
+
         }
+        .backgroundColor($r('app.color.settings_background_main'))
         .margin({ top: 6, bottom: 6 })
       }.onClick(() => {
         dataBu.onItemClick?.(index)
@@ -9533,27 +9530,30 @@ function cutPopupBuilder(dataBu: BubbleBean) {
     List() {
       ForEach(dataBu.data, (item: string, index: number) => {
         ListItem() {
-          Row() {
-            Column() {
-              // Image($r('app.media.music_group'))
-              SymbolGlyph($r('sys.symbol.identify_song'))
-                .height(28)
-                .fontColor([$r('app.color.img_color')])
-                .alignSelf(ItemAlign.Center)
+          Button({ type: ButtonType.Capsule, stateEffect: true }) {
+            Row() {
+              Column() {
+                Image($r('app.media.music_group'))
+                  .height(28)
+                  .fillColor(dataBu.color)
+                  .alignSelf(ItemAlign.Center)
 
-            }
-            .width(32)
+              }
+              .width(32)
 
-            Text(item.startsWith('.') ? item.replace(/\./g, '') : item)
-              .padding({
-                top: 10,
-                bottom: 10,
-                right: 10,
-                left: 10
-              })
-              .textAlign(TextAlign.Start).width("100%")// .fontColor(Color.Gray)
-              .fontSize(15)
+              Text(item.startsWith('.') ? item.replace(/\./g, '') : item)
+                .padding({
+                  top: 10,
+                  bottom: 10,
+                  right: 10,
+                  left: 10
+                })
+                .textAlign(TextAlign.Start).width("100%")// .fontColor(Color.Gray)
+                .fontSize(15)
+            }
           }
+          .backgroundColor(Color.Transparent)
+
           .margin({ top: 7, bottom: 7 })
 
         }.onClick(() => {

entry/src/main/ets/viewmodel/BubbleBean.ets

@@ -1,6 +1,7 @@
 export class BubbleBean {
   data: string[] = []
   imageRes:ResourceStr[] = []
+  color:string='#000000'
   onItemClick?: (index:number) => void
   isCopy?:boolean
 }

entry/src/main/resources/base/media/home_press.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1750418610481" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="39385" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M526.279111 117.646222l4.209778 2.958222 398.222222 341.333334a28.444444 28.444444 0 0 1-32.824889 46.193778l-4.152889-2.958223-9.955555-8.533333v328.248889a85.333333 85.333333 0 0 1-77.141334 84.935111L796.444444 910.222222H227.555556a85.333333 85.333333 0 0 1-84.935112-77.141333L142.222222 824.888889V496.583111l-9.955555 8.533333a28.444444 28.444444 0 0 1-36.408889 0.568889l-3.697778-3.640889a28.444444 28.444444 0 0 1-0.455111-36.408888l3.584-3.697778 398.222222-341.333334a28.444444 28.444444 0 0 1 32.768-2.958222zM512 179.655111L198.883556 448l0.227555 2.275556V824.888889a28.444444 28.444444 0 0 0 23.324445 27.989333L227.555556 853.333333h151.665777a15.815111 15.815111 0 0 0 15.303111-11.719111l0.568889-4.096v-176.924444a72.704 72.704 0 0 1 64.455111-72.248889l8.192-0.512h88.519112a72.704 72.704 0 0 1 72.248888 64.512l0.455112 8.192v176.981333a15.815111 15.815111 0 0 0 11.662222 15.246222l4.096 0.568889H796.444444a28.444444 28.444444 0 0 0 27.989334-23.324444l0.455111-5.12V450.275556l0.170667-2.275556L512 179.655111z m44.259556 465.066667H467.740444a15.815111 15.815111 0 0 0-15.246222 11.719111l-0.568889 4.096v176.981333c0 5.404444-0.568889 10.695111-1.706666 15.872h123.562666a72.647111 72.647111 0 0 1-1.251555-7.68l-0.455111-8.192v-176.924444a15.815111 15.815111 0 0 0-11.719111-15.36l-4.096-0.512z" fill="#212121" p-id="39386"></path></svg>

entry/src/main/resources/base/media/kp_music.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1750418511259" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21678" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M511.4 1013c-229.6 0-430.8-169.1-464.3-402.8C10.4 354.1 188.9 115.8 445.1 79c31.3-4.5 63.1-5.8 94.4-4 12.3 0.7 21.7 11.3 21 23.6-0.7 12.3-11.3 21.7-23.6 21-28.4-1.7-57.1-0.4-85.5 3.6C219.6 156.4 58 372.1 91.2 603.9 124.5 835.7 340.1 997.3 572 964.1c231.8-33.2 393.4-248.9 360.2-480.7-8.7-60.8-29.8-117.7-62.7-168.9-6.6-10.4-3.6-24.2 6.7-30.8 10.4-6.6 24.2-3.6 30.8 6.7 36.4 56.7 59.7 119.5 69.3 186.7 36.7 256.2-141.8 494.5-398 531.2-22.5 3.1-44.8 4.7-66.9 4.7z" fill="#515151" p-id="21679"></path><path d="M777.7 205.9c-61.3 0-111.2-43.5-111.2-97s49.9-97 111.2-97 111.2 43.5 111.2 97-49.9 97-111.2 97z m0-149.3c-36.7 0-66.6 23.5-66.6 52.4s29.9 52.4 66.6 52.4c36.7 0 66.6-23.5 66.6-52.4s-29.9-52.4-66.6-52.4zM511.7 743c-109.9 0-199.3-89.4-199.3-199.3s89.4-199.3 199.3-199.3S711 433.7 711 543.6 621.6 743 511.7 743z m0-354.1c-85.3 0-154.7 69.4-154.7 154.7 0 85.3 69.4 154.7 154.7 154.7s154.7-69.4 154.7-154.7c0-85.3-69.4-154.7-154.7-154.7z" fill="#515151" p-id="21680"></path><path d="M688.7 565.9c-12.3 0-22.3-10-22.3-22.3V107.2c0-12.3 10-22.3 22.3-22.3s22.3 10 22.3 22.3v436.5c0 12.2-10 22.2-22.3 22.2z" fill="#515151" p-id="21681"></path></svg>

entry/src/main/resources/base/media/music_menu.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1750418462082" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15422" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M485.376 931.84c-231.424 0-419.84-188.416-419.84-419.84S253.952 92.16 485.376 92.16c197.632 0 370.688 140.288 410.624 333.824 2.048 11.264 4.096 23.552 6.144 34.816 2.048 16.384-10.24 31.744-26.624 33.792-16.384 2.048-31.744-10.24-33.792-26.624-1.024-10.24-3.072-20.48-5.12-29.696-34.816-165.888-182.272-286.72-352.256-286.72-197.632 1.024-358.4 161.792-358.4 360.448S286.72 871.424 485.376 871.424c177.152 0 329.728-132.096 355.328-306.176 2.048-16.384 17.408-27.648 33.792-25.6 16.384 2.048 27.648 17.408 25.6 33.792-29.696 204.8-208.896 358.4-414.72 358.4z" p-id="15423"></path><path d="M95.232 758.784c-45.056 0-70.656-12.288-80.896-36.864-19.456-45.056 34.816-94.208 77.824-126.976 13.312-10.24 31.744-8.192 41.984 5.12 10.24 13.312 8.192 31.744-5.12 41.984-36.864 28.672-51.2 46.08-56.32 55.296 39.936 10.24 202.752-16.384 464.896-130.048s393.216-215.04 412.672-250.88c-12.288-3.072-47.104-5.12-131.072 14.336-16.384 4.096-32.768-6.144-35.84-22.528-4.096-16.384 6.144-32.768 22.528-35.84 122.88-28.672 185.344-22.528 203.776 18.432 17.408 40.96-19.456 90.112-121.856 158.72-82.944 56.32-198.656 117.76-325.632 173.056C435.2 677.888 311.296 720.896 212.992 742.4c-48.128 11.264-87.04 16.384-117.76 16.384z" p-id="15424"></path></svg>