Explorar o código

优化上传界面Button的UI

onecold hai 8 meses
pai
achega
e6c556eb6c
Modificáronse 1 ficheiros con 28 adicións e 26 borrados
  1. 28 26
      entry/src/main/ets/pages/UploadMusicPage.ets

+ 28 - 26
entry/src/main/ets/pages/UploadMusicPage.ets

@@ -1247,9 +1247,9 @@ export struct UploadMusicPage {
 
           // 已上传数量
           Row({ space: 6 }) {
-            Text('✓')
+            SymbolGlyph($r('sys.symbol.checkmark'))
               .fontSize(14)
-              .fontColor(this.themeColor)
+              .fontColor([this.themeColor])
             Text(`已完成 ${this.uploadedCount}/${this.totalUploadCount}`)
               .fontSize(13)
               .fontColor(this.isDarkMode ? '#99FFFFFF' : '#8E8E93')
@@ -1262,10 +1262,12 @@ export struct UploadMusicPage {
 
         // 控制按钮
         Row({ space: 10 }) {
-          Button({ type: ButtonType.Normal }) {
+          Button({ type: ButtonType.Capsule,stateEffect: true }) {
             Row({ space: 6 }) {
-              Text(this.webdavManager.isPauseUpload ? '▶️' : '⏸️')
+              SymbolGlyph(this.webdavManager.isPauseUpload ?$r('sys.symbol.play_fill'):$r('sys.symbol.pause'))
                 .fontSize(16)
+                .fontColor([this.themeColor])
+                .alignSelf(ItemAlign.Center)
               Text(this.webdavManager.isPauseUpload ? '恢复' : '暂停')
                 .fontSize(14)
                 .fontWeight(FontWeight.Medium)
@@ -1273,8 +1275,7 @@ export struct UploadMusicPage {
           }
           .height(44)
           .layoutWeight(1)
-          .backgroundColor(this.themeColor)
-          .fontColor('#FFFFFF')
+          .backgroundColor($r('app.color.index_background'))
           .borderRadius(10)
           .onClick(() => {
             if (this.webdavManager.isPauseUpload) {
@@ -1284,10 +1285,12 @@ export struct UploadMusicPage {
             }
           })
 
-          Button({ type: ButtonType.Normal }) {
+          Button({ type: ButtonType.Capsule,stateEffect: true }) {
             Row({ space: 6 }) {
-              Text('❌')
+              SymbolGlyph($r('sys.symbol.xmark'))
                 .fontSize(16)
+                .fontColor([this.themeColor])
+                .alignSelf(ItemAlign.Center)
               Text('取消')
                 .fontSize(14)
                 .fontWeight(FontWeight.Medium)
@@ -1295,8 +1298,7 @@ export struct UploadMusicPage {
           }
           .height(44)
           .layoutWeight(1)
-          .backgroundColor(this.isDarkMode ? '#D94838' : '#FF3B30')
-          .fontColor('#FFFFFF')
+          .backgroundColor($r('app.color.index_background'))
           .borderRadius(10)
           .onClick(() => {
             this.cancelUpload();
@@ -1439,7 +1441,7 @@ export struct UploadMusicPage {
                 .textOverflow({ overflow: TextOverflow.Ellipsis })
 
               if (type === 'pending') {
-                Button('移除')
+                Button('移除',{ type: ButtonType.Capsule,stateEffect: true })
                   .fontSize(12)
                   .height(32)
                   .padding({ left: 12, right: 12 })
@@ -1482,7 +1484,7 @@ export struct UploadMusicPage {
    */
   @Builder
   StartUploadButton() {
-    Button({ type: ButtonType.Normal }) {
+    Button({ type: ButtonType.Capsule,stateEffect: true }) {
       Row({ space: 10 }) {
         SymbolGlyph($r('sys.symbol.arrow_up_to_line'))
           .fontSize(20)
@@ -1694,9 +1696,10 @@ export struct UploadMusicPage {
           ForEach(this.browseFolders, (folder: FileInfo, index: number) => {
             ListItem() {
               Row({ space: 12 }) {
-                Text('📁')
+                SymbolGlyph($r('sys.symbol.folder'))
                   .fontSize(24)
-
+                  .fontColor([this.themeColor])
+                  .alignSelf(ItemAlign.Center)
                 Text(folder.fileName)
                   .fontSize(14)
                   .fontColor(this.isDarkMode ? '#E5FFFFFF' : '#E5000000')
@@ -1730,7 +1733,7 @@ export struct UploadMusicPage {
 
       // 底部按钮
       Row({ space: 12 }) {
-        Button('取消')
+        Button('取消',{ type: ButtonType.Capsule,stateEffect: true })
           .fontSize(14)
           .height(48)
           .layoutWeight(1)
@@ -1741,7 +1744,7 @@ export struct UploadMusicPage {
             this.closePathBrowser();
           })
 
-        Button('选择此路径')
+        Button('选择此路径',{ type: ButtonType.Capsule,stateEffect: true })
           .fontSize(14)
           .height(48)
           .layoutWeight(1)
@@ -1874,7 +1877,7 @@ export struct UploadMusicPage {
 
       // 按钮组
       Row({ space: 10 }) {
-        Button({ type: ButtonType.Normal }) {
+        Button({ type: ButtonType.Capsule,stateEffect:true }) {
           Row({ space: 6 }) {
             SymbolGlyph($r('sys.symbol.folder'))
               .fontSize(20)
@@ -1899,7 +1902,7 @@ export struct UploadMusicPage {
           this.openFilePicker();
         })
 
-        Button({ type: ButtonType.Normal }) {
+        Button({ type: ButtonType.Capsule,stateEffect:true }) {
           Row({ space: 6 }) {
             SymbolGlyph($r('sys.symbol.music'))
               .fontSize(20)
@@ -1929,10 +1932,9 @@ export struct UploadMusicPage {
 
       if (this.selectedFiles.length > 0) {
         Row({ space: 10 }) {
-          Text('✓')
-            .fontSize(18)
-            .fontColor(this.themeColor)
-
+          SymbolGlyph($r('sys.symbol.checkmark'))
+            .fontSize(14)
+            .fontColor([this.themeColor])
           Column({ space: 2 }) {
             Text(`已选择 ${this.selectedFiles.length} 项`)
               .fontSize(14)
@@ -2039,7 +2041,7 @@ export struct UploadMusicPage {
               .alignItems(HorizontalAlign.Start)
               .layoutWeight(1)
 
-              Button({ type: ButtonType.Normal }) {
+              Button({ type: ButtonType.Capsule,stateEffect: true }) {
                 Text('移除')
                   .fontSize(12)
                   .fontWeight(FontWeight.Medium)
@@ -2209,7 +2211,7 @@ export struct UploadMusicPage {
         .layoutWeight(1)
 
         if (this.fileBrowserPath.lastIndexOf('/') > 0) {
-          Button('返回上级')
+          Button('返回上级',{ type: ButtonType.Capsule,stateEffect: true })
             .fontSize(12)
             .height(36)
             .padding({ left: 12, right: 12 })
@@ -2332,7 +2334,7 @@ export struct UploadMusicPage {
           .fontColor(this.isDarkMode ? '#99FFFFFF' : '#8E8E93')
           .layoutWeight(1)
 
-        Button('取消')
+        Button('取消',{ type: ButtonType.Capsule,stateEffect: true })
           .fontSize(14)
           .height(48)
           .padding({ left: 30, right: 30 })
@@ -2343,7 +2345,7 @@ export struct UploadMusicPage {
             this.closeFileBrowser();
           })
 
-        Button('确定')
+        Button('确定',{ type: ButtonType.Capsule,stateEffect: true })
           .fontSize(14)
           .height(48)
           .padding({ left: 30, right: 30 })