歌曲空的界面抽成emptyView

entry/src/main/ets/pages/PlaylistDetailPage.ets

@@ -935,45 +935,46 @@ export struct PlaylistDetailPage {
             // 空状态容器
             Column() {
               // 空状态图标容器
-              Stack() {
-                // 背景圆圈
-                Circle({ width: 160, height: 160 })
-                  .fill('#0a59f715')
-                  .border({
-                    width: 2,
-                    color: '#0a59f71a'
-                  })
-
-                // 中间圆圈
-                Circle({ width: 120, height: 120 })
-                  .fill('#0a59f722')
-
-                // 音符图标
-                Image($r('app.media.music_red'))
-                  .width(64)
-                  .height(64)
-                  .opacity(0.6)
-                  .fillColor(this.themeColor )
-              }
-              .margin({ bottom: 32 })
-
-              // 空状态标题
-              Text('歌单还是空的')
-                .fontSize(22)
-                .fontColor($r('app.color.text_color'))
-                .fontWeight(FontWeight.Bold)
-                .margin({ bottom: 12 })
-                .letterSpacing(0.5)
-
-              // 空状态描述
-              Text('快来添加你喜欢的音乐吧\n让这个歌单充满美妙的旋律')
-                .fontSize(15)
-                .fontColor($r('app.color.text_color'))
-                .opacity(0.8)
-                .margin({ bottom: 40 })
-                .textAlign(TextAlign.Center)
-                .lineHeight(24)
-                .maxLines(2)
+              emptyView(this.themeColor)
+              // Stack() {
+              //   // 背景圆圈
+              //   Circle({ width: 160, height: 160 })
+              //     .fill('#0a59f715')
+              //     .border({
+              //       width: 2,
+              //       color: '#0a59f71a'
+              //     })
+              //
+              //   // 中间圆圈
+              //   Circle({ width: 120, height: 120 })
+              //     .fill('#0a59f722')
+              //
+              //   // 音符图标
+              //   Image($r('app.media.music_red'))
+              //     .width(64)
+              //     .height(64)
+              //     .opacity(0.6)
+              //     .fillColor(this.themeColor )
+              // }
+              // .margin({ bottom: 32 })
+              //
+              // // 空状态标题
+              // Text('歌单还是空的')
+              //   .fontSize(22)
+              //   .fontColor($r('app.color.text_color'))
+              //   .fontWeight(FontWeight.Bold)
+              //   .margin({ bottom: 12 })
+              //   .letterSpacing(0.5)
+              //
+              // // 空状态描述
+              // Text('快来添加你喜欢的音乐吧\n让这个歌单充满美妙的旋律')
+              //   .fontSize(15)
+              //   .fontColor($r('app.color.text_color'))
+              //   .opacity(0.8)
+              //   .margin({ bottom: 40 })
+              //   .textAlign(TextAlign.Center)
+              //   .lineHeight(24)
+              //   .maxLines(2)
 
               // 添加歌曲按钮
               Button() {
@@ -1264,3 +1265,57 @@ export async function convertPlaylistSongsToVideoItems(context: Context,playlist
   LogUtil.info(`heanup 转换完成，共 ${videoItems.length} 首歌曲`)
   return videoItems
 }
+
+
+@Builder
+export function emptyView(themeColor: ResourceColor) {
+
+  Column(){
+    Stack() {
+      // 背景圆圈
+      Circle({ width: 160, height: 160 })
+        .fill('#0a59f715')
+        .border({
+          width: 2,
+          color: '#0a59f71a'
+        })
+
+      // 中间圆圈
+      Circle({ width: 120, height: 120 })
+        .fill('#0a59f722')
+
+      // 音符图标
+      Image($r('app.media.music_red'))
+        .width(64)
+        .height(64)
+        .opacity(0.6)
+        .fillColor(themeColor )
+    }
+    .margin({ bottom: 32 })
+
+    // 空状态标题
+    Text('歌曲还是空的')
+      .fontSize(22)
+      .fontColor($r('app.color.text_color'))
+      .fontWeight(FontWeight.Bold)
+      .margin({ bottom: 12 })
+      .letterSpacing(0.5)
+
+    // 空状态描述
+    Text('快来添加你喜欢的音乐吧\n让这个歌单充满美妙的旋律')
+      .fontSize(15)
+      .fontColor($r('app.color.text_color'))
+      .opacity(0.8)
+      .margin({ bottom: 40 })
+      .textAlign(TextAlign.Center)
+      .lineHeight(24)
+      .maxLines(2)
+
+  }
+
+
+}
+
+
+
+

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

@@ -90,7 +90,7 @@ import { CueComptent } from '../view/CueComptent';
 import PlaylistTable from '../common/util/PlaylistTable';
 import { showAddToPlaylistDialog } from '../dialog/AddToPlaylistDialog';
 import { showCreatePlaylistDialog } from '../dialog/PlaylistDialog';
-import { convertPlaylistSongsToVideoItems } from '../pages/PlaylistDetailPage';
+import { convertPlaylistSongsToVideoItems, emptyView } from '../pages/PlaylistDetailPage';
 import { Playlist, PlaylistSong } from '../viewmodel/Playlist';
 const TAG = 'LocalMusic';
 
@@ -2314,28 +2314,19 @@ export struct LocalMusic {
                   this.getList()
                 }
               }
-              if (this.modeType == 0) {
+              if (this.modeType ==0||this.modeType==4) {
                 Column() {
-                  Button('同步数据', { type: ButtonType.Capsule, stateEffect: true })
-                    .width(130)
-                    .height(50)
-                    .margin({ top: 100, bottom: 40 })
-                    .backgroundColor(this.themeColor)
-                    .clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.5 })
-                    .onClick(() => {
-                      this.asyncCurrentPathData()
-                    })
+                  emptyView(this.themeColor)
 
                 }
-                .height(100)
-                .position({ top: 260 })
+                .position({ top: 180 })
                 .transition(TransitionEffect.asymmetric(TransitionEffect.scale({ x: 1.2, y: 1.2 })
                   .animation({ duration: 500 }),
                   TransitionEffect.scale({ x: 0, y: 0 })))
                 .justifyContent(FlexAlign.Center)
                 .opacity(this.isZero ? 1 : 0)
                 .visibility(this.isZero && !this.isFavMusic && !this.isHistory
-                  && this.modeType === 0 ? Visibility.Visible : Visibility.None)
+                  ? Visibility.Visible : Visibility.None)
                 .animation({
                   duration: 500,
                   curve: 'ease-in-out' // 可选动画曲线
@@ -2343,7 +2334,6 @@ export struct LocalMusic {
                 .width('100%')
               }
 
-
             }
             .layoutWeight(1)
             .height('100%')