调整方形封面卡片布局

entry/src/main/ets/widget/pages/PlayerWidgetRectangle.ets

@@ -64,6 +64,27 @@ struct PlayerWidgetRectangle {
   // 兼容性属性（用于获取复合状态）
   @LocalStorageProp('imgName') imgName: string = ''; // 图片文件名，用于memory://协议
   @LocalStorageProp('isFavorite') isFavorite: boolean = false;
+
+  /**
+   * 格式化歌曲标题显示
+   */
+  private getDisplayTitle(): string {
+    if (!this.songTitle || this.songTitle.trim() === '') {
+      return '暂无播放';
+    }
+    return this.songTitle;
+  }
+
+  /**
+   * 格式化艺术家显示
+   */
+  private getDisplayArtist(): string {
+    if (!this.songArtist || this.songArtist.trim() === '') {
+      return '未知艺术家';
+    }
+    return this.songArtist;
+  }
+
   /**
    * 检查是否为网络URL
    */
@@ -96,162 +117,168 @@ struct PlayerWidgetRectangle {
   }
 
   build() {
-    RelativeContainer() {
-      // 歌曲标题
-      Text(this.songTitle)
-        .fontSize(16)
-        .fontWeight(FontWeight.Bold)
-        .width('60%')
-        .fontColor(Color.White)
-        .textOverflow({ overflow: TextOverflow.Ellipsis })
-        .maxLines(1)
-        .alignRules(RectangleTitleAlignRules)
-        .margin({ left: 16, top: 8 })
-        .id('musicTitle')
-
-      // 艺术家名称
-      Text(this.songArtist)
-        .fontSize(12)
-        .fontColor('#CCFFFFFF')
-        .fontWeight(FontWeight.Normal)
-        .maxLines(1)
-        .alignRules(RectangleSingerAlignRules)
-        .margin({ left: 16, top: 2 })
-        .id('singerText')
+    Stack() {
+      // 背景和主要内容
+      RelativeContainer() {
+        // 歌曲标题
+        Text(this.getDisplayTitle())
+          .fontSize(16)
+          .fontWeight(FontWeight.Bold)
+          .width('60%')
+          .fontColor(Color.White)
+          .textOverflow({ overflow: TextOverflow.Ellipsis })
+          .maxLines(1)
+          .alignRules(RectangleTitleAlignRules)
+          .margin({ left: 16, top: 8 })
+          .id('musicTitle')
 
-      // 专辑封面
-      Image(this.getCoverImage())
-        .width(88)
-        .height(88)
-        .borderRadius(8) // Square cover with rounded corners
-        .alignRules(RectangleCoverAlignRules)
-        .id('musicCover')
-        .onClick(() => {
-          postCardAction(this, {
-            'action': 'router',
-            'abilityName': 'EntryAbility'
-          });
-        })
+        // 艺术家名称
+        Text(this.getDisplayArtist())
+          .fontSize(12)
+          .fontColor('#CCFFFFFF')
+          .fontWeight(FontWeight.Normal)
+          .maxLines(1)
+          .alignRules(RectangleSingerAlignRules)
+          .margin({ left: 16, top: 2 })
+          .id('singerText')
 
-      // 播放控制按钮区域
-      Row() {
-        // 上一首按钮
-        Button() {
-          Image($r('app.media.hm_previous'))
-            .width(20)
-            .height(20)
-            .fillColor('#E5FFFFFF')
-        }
-        .width(40)
-        .height(40)
-        .backgroundColor(Color.Transparent)
-        .opacity(this.hasPrevious ? 1.0 : 0.5)
-        .onClick(() => {
-          console.info(`Heanup PlayerWidgetRectangle: Previous button clicked`);
-          if (!this.isLoading && this.hasPrevious) {
+        // 专辑封面
+        Image(this.getCoverImage())
+          .width(88)
+          .height(88)
+          .borderRadius(8) // Square cover with rounded corners
+          .alignRules(RectangleCoverAlignRules)
+          .id('musicCover')
+          .onClick(() => {
             postCardAction(this, {
-              'action': 'call',
-              'abilityName': 'EntryAbility',
-              'params': {
-                'formId': this.formId,
-                'method': 'prevSong'
-              }
+              'action': 'router',
+              'abilityName': 'EntryAbility'
             });
+          })
+
+        // 播放控制按钮区域
+        Row() {
+          // 上一首按钮
+          Button() {
+            SymbolGlyph($r('sys.symbol.backward_end_fill'))
+              .fontSize(36)
+              .fontColor(['#E5FFFFFF'])
           }
-        })
+          .width(40)
+          .height(40)
+          .backgroundColor(Color.Transparent)
+          .opacity(this.hasPrevious ? 1.0 : 0.5)
+          .onClick(() => {
+            console.info(`Heanup PlayerWidgetRectangle: Previous button clicked`);
+            if (!this.isLoading && this.hasPrevious) {
+              postCardAction(this, {
+                'action': 'call',
+                'abilityName': 'EntryAbility',
+                'params': {
+                  'formId': this.formId,
+                  'method': 'prevSong'
+                }
+              });
+            }
+          })
 
-        // 播放/暂停按钮
-        Button() {
-          SymbolGlyph(this.isPlaying ? $r('sys.symbol.pause_round_triangle_fill') : $r('sys.symbol.play_round_triangle_fill'))
-            .fontSize(36)
-            .symbolEffect(new ReplaceSymbolEffect(EffectScope.WHOLE), true)
-            .fontColor(['#E5FFFFFF'])
-        }
-        .width(48)
-        .height(48)
-        .backgroundColor(Color.Transparent)
-        .margin({ left: 20, right: 20 })
-        .onClick(() => {
-          console.info('Heanup PlayerWidgetRectangle: Play/Pause button clicked');
-          if (!this.isLoading) {
-            postCardAction(this, {
-              'action': 'call',
-              'abilityName': 'EntryAbility',
-              'params': {
-                'formId': this.formId,
-                'method': 'playPause',
-                'widgetIsPlaying': this.isPlaying // 传递卡片当前显示的播放状态
-              }
-            });
+          // 播放/暂停按钮
+          Button() {
+            SymbolGlyph(this.isPlaying ? $r('sys.symbol.pause_round_triangle_fill') : $r('sys.symbol.play_round_triangle_fill'))
+              .fontSize(36)
+              .symbolEffect(new ReplaceSymbolEffect(EffectScope.WHOLE), true)
+              .fontColor(['#E5FFFFFF'])
           }
-        })
+          .width(48)
+          .height(48)
+          .backgroundColor(Color.Transparent)
+          .margin({ left: 20, right: 20 })
+          .onClick(() => {
+            console.info('Heanup PlayerWidgetRectangle: Play/Pause button clicked');
+            if (!this.isLoading) {
+              postCardAction(this, {
+                'action': 'call',
+                'abilityName': 'EntryAbility',
+                'params': {
+                  'formId': this.formId,
+                  'method': 'playPause',
+                  'widgetIsPlaying': this.isPlaying // 传递卡片当前显示的播放状态
+                }
+              });
+            }
+          })
 
-        // 下一首按钮
-        Button() {
-          Image($r('app.media.hm_next'))
-            .width(20)
-            .height(20)
-            .fillColor('#E5FFFFFF')
-        }
-        .width(40)
-        .height(40)
-        .backgroundColor(Color.Transparent)
-        .opacity(this.hasNext ? 1.0 : 0.5)
-        .onClick(() => {
-          console.info(`Heanup PlayerWidgetRectangle: Next button clicked`);
-          if (!this.isLoading && this.hasNext) {
-            postCardAction(this, {
-              'action': 'call',
-              'abilityName': 'EntryAbility',
-              'params': {
-                'formId': this.formId,
-                'method': 'nextSong'
-              }
-            });
+          // 下一首按钮
+          Button() {
+            SymbolGlyph($r('sys.symbol.forward_end_fill'))
+              .fontSize(36)
+              .fontColor(['#E5FFFFFF'])
           }
-        })
-        
-        // 收藏按钮
-        Button() {
-          SymbolGlyph(this.isFavorite ? $r('sys.symbol.heart_fill') : $r('sys.symbol.heart'))
-            .width(20)
-            .height(20)
-            .fontColor(['#E5FFFFFF'])
+          .width(40)
+          .height(40)
+          .backgroundColor(Color.Transparent)
+          .opacity(this.hasNext ? 1.0 : 0.5)
+          .onClick(() => {
+            console.info(`Heanup PlayerWidgetRectangle: Next button clicked`);
+            if (!this.isLoading && this.hasNext) {
+              postCardAction(this, {
+                'action': 'call',
+                'abilityName': 'EntryAbility',
+                'params': {
+                  'formId': this.formId,
+                  'method': 'nextSong'
+                }
+              });
+            }
+          })
         }
-        .width(40)
-        .height(40)
-        .backgroundColor(Color.Transparent)
-        .onClick(() => {
-          console.info(`Heanup PlayerWidgetRectangle: Favorite button clicked`);
-          if (!this.isLoading) {
-            postCardAction(this, {
-              'action': 'call',
-              'abilityName': 'EntryAbility',
-              'params': {
-                'formId': this.formId,
-                'method': 'toggleFavorite'
-              }
-            });
-          }
-        })
+        .width('100%')
+        .justifyContent(FlexAlign.Center)
+        .alignRules(RectanglePlayControlAlignRules)
+        .id('playControls')
       }
+      .height('100%')
       .width('100%')
-      .justifyContent(FlexAlign.Center)
-      .alignRules(RectanglePlayControlAlignRules)
-      .id('playControls')
+      .padding(12)
+      .backgroundImage(this.getCoverImage())
+      .backgroundBlurStyle(BlurStyle.BACKGROUND_ULTRA_THICK)
+      .backgroundImageSize(ImageSize.Cover)
+      .onClick(() => {
+        console.info('Heanup PlayerWidgetRectangle: Container clicked, jumping to main app');
+        postCardAction(this, {
+          'action': 'router',
+          'abilityName': 'EntryAbility'
+        });
+      })
+
+      // 收藏按钮放在Stack顶层，确保可以正常点击
+      Button() {
+        SymbolGlyph(this.isFavorite ? $r('sys.symbol.heart_fill') : $r('sys.symbol.heart'))
+          .fontSize(24)
+          .symbolEffect(new ReplaceSymbolEffect(EffectScope.WHOLE), true)
+          .fontColor(['#E5FFFFFF'])
+      }
+      .width(40)
+      .height(40)
+      .backgroundColor(Color.Transparent)
+      .onClick(() => {
+        console.info(`Heanup PlayerWidgetRectangle: Favorite button clicked`);
+        postCardAction(this, {
+          'action': 'call',
+          'abilityName': 'EntryAbility',
+          'params': {
+            'formId': this.formId,
+            'method': 'toggleFavorite'
+          }
+        });
+      })
+      .position({
+        x: '100%',
+        y: 0
+      })
+      .translate({ x: -52, y: 12 }) // 调整到右上角位置
     }
     .height('100%')
     .width('100%')
-    .padding(12)
-    .backgroundImage(this.getCoverImage())
-    .backgroundBlurStyle(BlurStyle.BACKGROUND_ULTRA_THICK)
-    .backgroundImageSize(ImageSize.Cover)
-    .onClick(() => {
-      console.info('Heanup PlayerWidgetRectangle: Container clicked, jumping to main app');
-      postCardAction(this, {
-        'action': 'router',
-        'abilityName': 'EntryAbility'
-      });
-    })
   }
 }