全新UI效果 继续3

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

@@ -12,6 +12,7 @@ import { EventConstants } from '../common/constants/EventConstants';
 import { common } from '@kit.AbilityKit';
 import { LazyDataSource } from '../common/util/LazyDataSource';
 import { ConfigurationConstant } from '@kit.AbilityKit';
+import { ButtonFancyModifier, ShadowModifier, SymbolGlyphFancyModifier } from '../common/util/AttributeModifierUtil';
 
 // 工具函数：将 #RRGGBB 字符串和透明度转为 'rgba(r,g,b,a)' 字符串，深色模式下可返回深色变体
 function themeColorWithAlpha(themeColor: string, alpha: number, isDarkMode: boolean = false): string {
@@ -44,6 +45,7 @@ interface PlaylistEventData {
 @Entry
 @Component
 export struct PlaylistDetailPage {
+  @StorageProp('topSafeHeight') topSafeHeight: number = 0;
   context = this.getUIContext().getHostContext() as common.UIAbilityContext
   @StorageProp('topRectHeight') topRectHeight: number = 0;
   @State playlist: Playlist | null = null
@@ -514,55 +516,110 @@ export struct PlaylistDetailPage {
     }
   }
 
-  build() {
+  @Builder
+  topTitleBar(){
     Column() {
-      // 顶部安全区和标题栏
-      Column() {
-        Blank()
-          .height(this.topRectHeight+5)
-          .backgroundColor(this.isDarkMode ? $r('app.color.title_bar_bg') : this.themeColor)
-          .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
-
-        // 标题栏
-        Row() {
-          Image($r('app.media.back'))
-            .width(24)
-            .height(24)
-            .margin({ left: 12, right: 8 })
-            .onClick(() => {
-              // 如果在排序模式，先退出排序模式
-              if (this.isSortMode) {
-                this.exitSortMode()
-              } else {
-                router.back()
-              }
-            })
-
-          Text(this.isSortMode ? '排序模式' : (this.playlist?.name || '歌单详情'))
-            .fontSize(18)
-            .fontColor(Color.White)
-            .fontWeight(FontWeight.Medium)
-            .layoutWeight(1)
-            .textAlign(TextAlign.Center)
+      Row({ space: 15 }) {
 
-          // 排序/完成按钮
-          Text(this.isSortMode ? '完成' : '排序')
-            .fontSize(16)
-            .fontColor(Color.White)
-            .margin({ right: 12 })
-            .onClick(() => {
-              if (this.isSortMode) {
-                this.exitSortMode()
-              } else {
-                this.enterSortMode()
-              }
-            })
+        //左侧滑动按钮
+        Button({ type: ButtonType.Circle, stateEffect: true }) {
+          SymbolGlyph($r('sys.symbol.chevron_left'))
+            .attributeModifier(new SymbolGlyphFancyModifier(25, '', ''))
         }
-        .height(48)
-        .width('100%')
-        .alignItems(VerticalAlign.Center)
-        .backgroundColor(this.isDarkMode ? $r('app.color.title_bar_bg') : this.themeColor)
+        .attributeModifier(new ButtonFancyModifier(40, 40))
+        .clickEffect({ level: ClickEffectLevel.MIDDLE,scale:0.6 })
+        .animation({ duration: 300, curve: Curve.Ease })
+        .onClick(() => {
+          // 如果在排序模式，先退出排序模式
+          if (this.isSortMode) {
+            this.exitSortMode()
+          } else {
+            router.back()
+          }
+
+        })
+        .attributeModifier(new ShadowModifier())
+        .zIndex(0)
+
+        Text(this.isSortMode ? '排序模式' : (this.playlist?.name || '歌单详情'))
+          .margin({left:3,right:10})
+          .fontColor($r('app.color.text_color'))
+          .fontSize(19)
+          .maxLines(1)
+          .textOverflow({ overflow: TextOverflow.MARQUEE })//超长滚动
+          .layoutWeight(1)
+          .clickEffect({ level: ClickEffectLevel.MIDDLE,scale:0.6 })
+
+        // 排序/完成按钮
+        Text(this.isSortMode ? '完成' : '排序')
+          .fontSize(16)
+          .fontColor(Color.White)
+          .margin({ right: 12 })
+          .onClick(() => {
+            if (this.isSortMode) {
+              this.exitSortMode()
+            } else {
+              this.enterSortMode()
+            }
+          })
+
+
       }
+    }
+    .padding({ top: this.topSafeHeight+10, left: 10, right: 10,bottom:12 })
+    .width('100%')
+  }
+
+  build() {
+    Column() {
+      // 顶部安全区和标题栏
+      this.topTitleBar()
+      // Column() {
+      //   Blank()
+      //     .height(this.topRectHeight+5)
+      //     .backgroundColor(this.isDarkMode ? $r('app.color.title_bar_bg') : this.themeColor)
+      //     .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
+      //
+      //   // 标题栏
+      //   Row() {
+      //     Image($r('app.media.back'))
+      //       .width(24)
+      //       .height(24)
+      //       .margin({ left: 12, right: 8 })
+      //       .onClick(() => {
+      //         // 如果在排序模式，先退出排序模式
+      //         if (this.isSortMode) {
+      //           this.exitSortMode()
+      //         } else {
+      //           router.back()
+      //         }
+      //       })
+      //
+      //     Text(this.isSortMode ? '排序模式' : (this.playlist?.name || '歌单详情'))
+      //       .fontSize(18)
+      //       .fontColor(Color.White)
+      //       .fontWeight(FontWeight.Medium)
+      //       .layoutWeight(1)
+      //       .textAlign(TextAlign.Center)
+      //
+      //     // 排序/完成按钮
+      //     Text(this.isSortMode ? '完成' : '排序')
+      //       .fontSize(16)
+      //       .fontColor(Color.White)
+      //       .margin({ right: 12 })
+      //       .onClick(() => {
+      //         if (this.isSortMode) {
+      //           this.exitSortMode()
+      //         } else {
+      //           this.enterSortMode()
+      //         }
+      //       })
+      //   }
+      //   .height(48)
+      //   .width('100%')
+      //   .alignItems(VerticalAlign.Center)
+      //   .backgroundColor(this.isDarkMode ? $r('app.color.title_bar_bg') : this.themeColor)
+      // }
 
       if (this.isLoading) {
         // 加载状态

entry/src/main/ets/pages/WebDavMainPage.ets

@@ -13,6 +13,7 @@ import { emitter } from '@kit.BasicServicesKit';
 import { EventConstants } from '../common/constants/EventConstants';
 import { LazyDataSource } from '../common/util/LazyDataSource';
 import { PreferencesUtil } from '@pura/harmony-utils';
+import { ButtonFancyModifier, ShadowModifier, SymbolGlyphFancyModifier } from '../common/util/AttributeModifierUtil';
 
 /**
  * 歌单播放事件数据
@@ -60,6 +61,7 @@ function decodeUrlEncodedString(encodedStr: string): string {
 @Entry
 @Component
 export struct WebDavMainPage {
+  @StorageProp('topSafeHeight') topSafeHeight: number = 0;
   @State webdavManager: WebdavManager = WebdavManager.getInstance();
   @State accounts: WebDavAccount[] = [];
   @Prop @Watch('onSwitchAccount') selectedAccount: WebDavAccount;
@@ -487,41 +489,51 @@ export struct WebDavMainPage {
     }
   }
 
-  build() {
+
+  @Builder
+  topTitleBar(){
     Column() {
-      // 顶部安全区和标题栏
-      Column() {
-        Blank()
-          .height(this.topRectHeight + 5)
-          .backgroundColor(this.isDarkMode ? $r('app.color.title_bar_bg') : this.themeColor)
-          .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
-
-        // 标题栏
-        Row() {
-          Image($r('app.media.menu'))
-            .width(24)
-            .height(24)
-            .margin({ left: 12, right: 8 })
-            .onClick(() => {
-              this.getUIContext()?.animateTo({ duration: 555 }, () => {
-                this.isShowDrawer = !this.isShowDrawer
-                this.offsetX = 0
-              })
-            });
+      Row({ space: 15 }) {
 
+        //左侧滑动按钮
+        Button({ type: ButtonType.Circle, stateEffect: true }) {
+          SymbolGlyph($r('sys.symbol.sort'))
+            .attributeModifier(new SymbolGlyphFancyModifier(25, '', ''))
+        }
+        .attributeModifier(new ButtonFancyModifier(40, 40))
+        .clickEffect({ level: ClickEffectLevel.MIDDLE,scale:0.6 })
+        .animation({ duration: 300, curve: Curve.Ease })
+        .onClick(() => {
+          this.getUIContext().animateTo({ duration: 555 }, () => {
+            // 动画闭包内控制Image组件的出现和消失
+            this.isShowDrawer = !this.isShowDrawer
+            this.offsetX = 0
+          })
+
+        })
+        .attributeModifier(new ShadowModifier())
+        .zIndex(0)
+
+        Text(this.selectedAccount.name)
+          .margin({left:3,right:10})
+          .fontColor($r('app.color.text_color'))
+          .fontSize(19)
+          .maxLines(1)
+          .textOverflow({ overflow: TextOverflow.MARQUEE })//超长滚动
+          .layoutWeight(1)
+          .clickEffect({ level: ClickEffectLevel.MIDDLE,scale:0.6 })
 
-          Text(this.selectedAccount.name || 'WebDav')
-            .fontSize(18)
-            .fontColor(Color.White)
-            .fontWeight(FontWeight.Medium)
-            .textAlign(TextAlign.Center)
 
-        }
-        .height(48)
-        .width('100%')
-        .alignItems(VerticalAlign.Center)
-        .backgroundColor(this.isDarkMode ? $r('app.color.title_bar_bg') : this.themeColor)
       }
+    }
+    .padding({ top: this.topSafeHeight+10, left: 10, right: 10,bottom:2 })
+    .width('100%')
+  }
+
+  build() {
+    Column() {
+      // 顶部安全区和标题栏
+      this.topTitleBar()
 
       // 内容区域
       if (this.accounts.length === 0) {

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

@@ -1474,7 +1474,7 @@ export struct LocalMusic {
   SortMenuBuilder() {
     Menu() {
       MenuItem({
-        symbolStartIcon: new SymbolGlyphModifier($r('sys.symbol.textformat_size_square')),
+        symbolStartIcon: new SymbolGlyphModifier($r('sys.symbol.text_and_arrow_up')),
         content: "按艺术家升序"
       })
         .onClick(async () => {
@@ -1483,7 +1483,7 @@ export struct LocalMusic {
           this.updateListData(this.videoLocalList, true)
         })
       MenuItem({
-        symbolStartIcon: new SymbolGlyphModifier($r('sys.symbol.character_arrow_clockwise')),
+        symbolStartIcon: new SymbolGlyphModifier($r('sys.symbol.text_and_arrow_down')),
         content: "按艺术家降序"
       })
         .onClick(async () => {