feat(upload): 优化UI

entry/src/main/ets/pages/UploadMusicPage.ets

@@ -572,77 +572,111 @@ export struct UploadMusicPage {
   @Builder
   UploadProgressView() {
     if (this.isUploading && this.currentTask) {
-      Column() {
-        Text('上传进度')
-          .fontSize(16)
-          .fontWeight(FontWeight.Medium)
-          .fontColor(this.isDarkMode ? '#E5FFFFFF' : '#E5000000')
-          .margin({ bottom: 12 })
-          .alignSelf(ItemAlign.Start)
-
-        // 当前文件名
-        Text(`当前文件: ${this.currentTask.name}`)
-          .fontSize(14)
-          .fontColor(this.isDarkMode ? '#99FFFFFF' : '#99000000')
-          .margin({ bottom: 8 })
-          .maxLines(1)
-          .textOverflow({ overflow: TextOverflow.Ellipsis })
+      Column({ space: 16 }) {
+        // 标题行
+        Row({ space: 8 }) {
+          Text('⏫')
+            .fontSize(20)
+          Text('上传中')
+            .fontSize(16)
+            .fontWeight(FontWeight.Medium)
+            .fontColor(this.isDarkMode ? '#E5FFFFFF' : '#E5000000')
+        }
+        .alignSelf(ItemAlign.Start)
 
-        // 进度条
-        Progress({ value: this.uploadProgress, total: 100, type: ProgressType.Linear })
+        // 当前文件信息卡片
+        Column({ space: 10 }) {
+          Row({ space: 8 }) {
+            Text('🎵')
+              .fontSize(18)
+            Text(this.currentTask.name)
+              .fontSize(14)
+              .fontWeight(FontWeight.Medium)
+              .fontColor(this.isDarkMode ? '#E5FFFFFF' : '#1F1F1F')
+              .layoutWeight(1)
+              .maxLines(1)
+              .textOverflow({ overflow: TextOverflow.Ellipsis })
+          }
           .width('100%')
-          .color(this.themeColor)
-          .backgroundColor(this.isDarkMode ? '#33FFFFFF' : '#19000000')
-          .margin({ bottom: 8 })
 
-        // 进度百分比和速度信息行
-        Row() {
-          Text(`${this.uploadProgress}%`)
-            .fontSize(14)
-            .fontWeight(FontWeight.Medium)
-            .fontColor(this.themeColor)
-            .layoutWeight(1)
+          // 进度条
+          Progress({ value: this.uploadProgress, total: 100, type: ProgressType.Linear })
+            .width('100%')
+            .color(this.themeColor)
+            .backgroundColor(this.isDarkMode ? '#2E3238' : '#E5E5EA')
+            .style({ strokeWidth: 6 })
 
-          Text(`${this.uploadSpeed}`)
-            .fontSize(14)
-            .fontColor(this.isDarkMode ? '#66FFFFFF' : '#66000000')
+          // 进度信息行
+          Row() {
+            Text(`${this.uploadProgress}%`)
+              .fontSize(15)
+              .fontWeight(FontWeight.Bold)
+              .fontColor(this.themeColor)
+
+            Blank()
+
+            Text(`${this.uploadSpeed}`)
+              .fontSize(13)
+              .fontColor(this.isDarkMode ? '#99FFFFFF' : '#8E8E93')
+          }
+          .width('100%')
+
+          // 已上传数量
+          Row({ space: 6 }) {
+            Text('✓')
+              .fontSize(14)
+              .fontColor(this.themeColor)
+            Text(`已完成 ${this.uploadedCount}/${this.totalUploadCount}`)
+              .fontSize(13)
+              .fontColor(this.isDarkMode ? '#99FFFFFF' : '#8E8E93')
+          }
         }
         .width('100%')
-        .margin({ bottom: 8 })
-
-        // 已上传数量
-        Text(`已上传: ${this.uploadedCount}/${this.totalUploadCount}`)
-          .fontSize(14)
-          .fontColor(this.isDarkMode ? '#99FFFFFF' : '#99000000')
-          .margin({ bottom: 16 })
+        .padding(14)
+        .backgroundColor(this.isDarkMode ? '#2E3238' : '#F5F7FA')
+        .borderRadius(10)
 
         // 控制按钮
-        Row({ space: 12 }) {
-          Button(this.webdavManager.isPauseUpload ? '恢复' : '暂停')
-            .fontSize(14)
-            .height(44)
-            .layoutWeight(1)
-            .backgroundColor(this.themeColor)
-            .fontColor('#FFFFFF')
-            .borderRadius(8)
-            .onClick(() => {
-              if (this.webdavManager.isPauseUpload) {
-                this.resumeUpload();
-              } else {
-                this.pauseUpload();
-              }
-            })
+        Row({ space: 10 }) {
+          Button({ type: ButtonType.Normal }) {
+            Row({ space: 6 }) {
+              Text(this.webdavManager.isPauseUpload ? '▶️' : '⏸️')
+                .fontSize(16)
+              Text(this.webdavManager.isPauseUpload ? '恢复' : '暂停')
+                .fontSize(14)
+                .fontWeight(FontWeight.Medium)
+            }
+          }
+          .height(44)
+          .layoutWeight(1)
+          .backgroundColor(this.themeColor)
+          .fontColor('#FFFFFF')
+          .borderRadius(10)
+          .onClick(() => {
+            if (this.webdavManager.isPauseUpload) {
+              this.resumeUpload();
+            } else {
+              this.pauseUpload();
+            }
+          })
 
-          Button('取消')
-            .fontSize(14)
-            .height(44)
-            .layoutWeight(1)
-            .backgroundColor(this.isDarkMode ? '#D94838' : '#E84026')
-            .fontColor('#FFFFFF')
-            .borderRadius(8)
-            .onClick(() => {
-              this.cancelUpload();
-            })
+          Button({ type: ButtonType.Normal }) {
+            Row({ space: 6 }) {
+              Text('❌')
+                .fontSize(16)
+              Text('取消')
+                .fontSize(14)
+                .fontWeight(FontWeight.Medium)
+            }
+          }
+          .height(44)
+          .layoutWeight(1)
+          .backgroundColor(this.isDarkMode ? '#D94838' : '#FF3B30')
+          .fontColor('#FFFFFF')
+          .borderRadius(10)
+          .onClick(() => {
+            this.cancelUpload();
+          })
         }
         .width('100%')
       }
@@ -665,24 +699,28 @@ export struct UploadMusicPage {
    */
   @Builder
   UploadQueueView() {
-    Column() {
-      Text('上传队列')
-        .fontSize(16)
-        .fontWeight(FontWeight.Medium)
-        .fontColor(this.isDarkMode ? '#E5FFFFFF' : '#E5000000')
-        .margin({ bottom: 12 })
-        .alignSelf(ItemAlign.Start)
+    Column({ space: 16 }) {
+      // 标题行
+      Row({ space: 8 }) {
+        Text('📊')
+          .fontSize(20)
+        Text('任务队列')
+          .fontSize(16)
+          .fontWeight(FontWeight.Medium)
+          .fontColor(this.isDarkMode ? '#E5FFFFFF' : '#E5000000')
+      }
+      .alignSelf(ItemAlign.Start)
 
       Tabs({ barPosition: BarPosition.Start }) {
         TabContent() {
           this.QueueList(this.uploadQueueDataSource, 'pending')
         }
-        .tabBar(`待上传 (${this.uploadQueue.length})`)
+        .tabBar(this.TabBarBuilder('⏳', '待上传', this.uploadQueue.length))
 
         TabContent() {
           this.QueueList(this.finishQueueDataSource, 'finished')
         }
-        .tabBar(`已完成 (${this.finishQueue.length})`)
+        .tabBar(this.TabBarBuilder('✅', '已完成', this.finishQueue.length))
       }
       .width('100%')
       .height(300)
@@ -703,6 +741,28 @@ export struct UploadMusicPage {
     .margin({ bottom: 16 })
   }
 
+  /**
+   * 自定义Tab标签构建器
+   */
+  @Builder
+  TabBarBuilder(icon: string, title: string, count: number) {
+    Row({ space: 6 }) {
+      Text(icon)
+        .fontSize(16)
+      Text(title)
+        .fontSize(14)
+        .fontWeight(FontWeight.Medium)
+      Text(`${count}`)
+        .fontSize(12)
+        .fontWeight(FontWeight.Medium)
+        .fontColor('#FFFFFF')
+        .padding({ left: 6, right: 6, top: 2, bottom: 2 })
+        .backgroundColor(this.themeColor)
+        .borderRadius(8)
+    }
+    .padding({ left: 4, right: 4 })
+  }
+
   /**
    * 队列列表组件（使用LazyForEach优化性能）
    */
@@ -776,136 +836,244 @@ export struct UploadMusicPage {
    */
   @Builder
   StartUploadButton() {
-    Button('开始上传')
-      .width('100%')
-      .height(52)
-      .fontSize(16)
-      .fontWeight(FontWeight.Bold)
-      .fontColor('#FFFFFF')
-      .backgroundColor(this.themeColor)
-      .borderRadius(12)
-      .enabled(!this.isUploading && this.selectedFiles.length > 0 && this.selectedAccount !== null)
-      .opacity((!this.isUploading && this.selectedFiles.length > 0 && this.selectedAccount !== null) ? 1.0 : 0.5)
-      .shadow({
-        radius: 12,
-        color: this.themeColor + '40',
-        offsetX: 0,
-        offsetY: 4
-      })
-      .onClick(() => {
-        this.startUpload();
-      })
-      .margin({ bottom: 16 })
+    Button({ type: ButtonType.Normal }) {
+      Row({ space: 10 }) {
+        Text('🚀')
+          .fontSize(20)
+        Text('开始上传')
+          .fontSize(16)
+          .fontWeight(FontWeight.Bold)
+      }
+    }
+    .width('100%')
+    .height(54)
+    .backgroundColor(this.themeColor)
+    .fontColor('#FFFFFF')
+    .borderRadius(12)
+    .enabled(!this.isUploading && this.selectedFiles.length > 0 && this.selectedAccount !== null)
+    .opacity((!this.isUploading && this.selectedFiles.length > 0 && this.selectedAccount !== null) ? 1.0 : 0.4)
+    .shadow({
+      radius: 12,
+      color: this.themeColor + '50',
+      offsetX: 0,
+      offsetY: 4
+    })
+    .onClick(() => {
+      this.startUpload();
+    })
+    .margin({ bottom: 16 })
   }
 
   /**
-   * 上传配置区域组件
+   * 远程配置区域组件
    */
   @Builder
   UploadConfigSection() {
-    Column({ space: 12 }) {
-      Text('上传配置')
-        .fontSize(16)
-        .fontWeight(FontWeight.Medium)
-        .fontColor(this.isDarkMode ? '#E5FFFFFF' : '#E5000000')
-        .alignSelf(ItemAlign.Start)
+    Column({ space: 16 }) {
+      // 标题行
+      Row({ space: 8 }) {
+        Text('📁')
+          .fontSize(20)
+        Text('远程配置')
+          .fontSize(16)
+          .fontWeight(FontWeight.Medium)
+          .fontColor(this.isDarkMode ? '#E5FFFFFF' : '#E5000000')
+      }
+      .alignSelf(ItemAlign.Start)
 
-      // 上传路径选择
-      Row({ space: 12 }) {
-        Column({ space: 4 }) {
-          Text('上传路径')
-            .fontSize(12)
-            .fontColor(this.isDarkMode ? '#66FFFFFF' : '#66000000')
+      // 上传路径选择卡片
+      Column({ space: 12 }) {
+        Row({ space: 8 }) {
+          Text('远程目录')
+            .fontSize(13)
+            .fontWeight(FontWeight.Medium)
+            .fontColor(this.isDarkMode ? '#99FFFFFF' : '#66000000')
           
-          Text(this.uploadPath || '请选择路径')
-            .fontSize(14)
-            .fontColor(this.isDarkMode ? '#E5FFFFFF' : '#E5000000')
+          Blank()
+          
+          Button('浏览')
+            .fontSize(13)
+            .height(32)
+            .padding({ left: 12, right: 12 })
+            .backgroundColor(this.themeColor)
+            .fontColor('#FFFFFF')
+            .borderRadius(6)
+            .enabled(this.selectedAccount !== null)
+            .opacity(this.selectedAccount !== null ? 1.0 : 0.4)
+            .onClick(() => {
+              this.openPathBrowser();
+            })
+        }
+        .width('100%')
+        
+        Row({ space: 8 }) {
+          Text('📂')
+            .fontSize(18)
+          
+          Text(this.uploadPath || '请选择远程目录')
+            .fontSize(15)
+            .fontColor(this.uploadPath ? 
+              (this.isDarkMode ? '#E5FFFFFF' : '#1F1F1F') : 
+              (this.isDarkMode ? '#66FFFFFF' : '#99000000'))
+            .fontWeight(this.uploadPath ? FontWeight.Medium : FontWeight.Regular)
+            .layoutWeight(1)
             .maxLines(1)
             .textOverflow({ overflow: TextOverflow.Ellipsis })
         }
-        .alignItems(HorizontalAlign.Start)
-        .layoutWeight(1)
-
-        Button('浏览')
-          .fontSize(14)
-          .height(40)
-          .padding({ left: 16, right: 16 })
-          .backgroundColor(this.themeColor)
-          .fontColor('#FFFFFF')
-          .borderRadius(8)
-          .enabled(this.selectedAccount !== null)
-          .opacity(this.selectedAccount !== null ? 1.0 : 0.5)
-          .onClick(() => {
-            this.openPathBrowser();
-          })
+        .width('100%')
       }
       .width('100%')
-      .padding(16)
-      .backgroundColor(this.isDarkMode ? '#2E3033' : '#F1F3F5')
-      .borderRadius(8)
+      .padding(14)
+      .backgroundColor(this.isDarkMode ? '#2E3238' : '#F5F7FA')
+      .borderRadius(10)
+      .border({
+        width: 1,
+        color: this.uploadPath ? 
+          (this.isDarkMode ? this.themeColor + '40' : this.themeColor + '30') : 
+          (this.isDarkMode ? '#19FFFFFF' : '#E5E5EA')
+      })
 
-      // 重复文件处理方式
-      Column({ space: 8 }) {
+      // 重复文件处理卡片
+      Column({ space: 12 }) {
         Text('重复文件处理')
-          .fontSize(12)
-          .fontColor(this.isDarkMode ? '#66FFFFFF' : '#66000000')
+          .fontSize(13)
+          .fontWeight(FontWeight.Medium)
+          .fontColor(this.isDarkMode ? '#99FFFFFF' : '#66000000')
           .alignSelf(ItemAlign.Start)
 
-        Row({ space: 16 }) {
-          Row({ space: 6 }) {
+        Column({ space: 10 }) {
+          // 跳过选项
+          Row({ space: 10 }) {
             Radio({ value: 'skip', group: 'duplicateAction' })
               .checked(this.duplicateAction === 'skip')
               .radioStyle({
-                checkedBackgroundColor: this.themeColor
+                checkedBackgroundColor: this.themeColor,
+                uncheckedBorderColor: this.isDarkMode ? '#4D4D4D' : '#C7C7CC'
               })
               .onChange((checked: boolean) => {
                 if (checked) {
                   this.duplicateAction = 'skip';
                 }
               })
-            Text('跳过')
-              .fontSize(14)
-              .fontColor(this.isDarkMode ? '#E5FFFFFF' : '#E5000000')
+            
+            Column({ space: 2 }) {
+              Text('跳过')
+                .fontSize(14)
+                .fontWeight(FontWeight.Medium)
+                .fontColor(this.isDarkMode ? '#E5FFFFFF' : '#1F1F1F')
+              Text('保留远程文件，不上传')
+                .fontSize(12)
+                .fontColor(this.isDarkMode ? '#66FFFFFF' : '#8E8E93')
+            }
+            .alignItems(HorizontalAlign.Start)
+            .layoutWeight(1)
           }
+          .width('100%')
+          .padding(12)
+          .backgroundColor(this.duplicateAction === 'skip' ? 
+            (this.isDarkMode ? '#2E3238' : '#FFFFFF') : 
+            'transparent')
+          .borderRadius(8)
+          .border({
+            width: this.duplicateAction === 'skip' ? 2 : 1,
+            color: this.duplicateAction === 'skip' ? 
+              this.themeColor : 
+              (this.isDarkMode ? '#19FFFFFF' : '#E5E5EA')
+          })
+          .onClick(() => {
+            this.duplicateAction = 'skip';
+          })
 
-          Row({ space: 6 }) {
+          // 覆盖选项
+          Row({ space: 10 }) {
             Radio({ value: 'overwrite', group: 'duplicateAction' })
               .checked(this.duplicateAction === 'overwrite')
               .radioStyle({
-                checkedBackgroundColor: this.themeColor
+                checkedBackgroundColor: this.themeColor,
+                uncheckedBorderColor: this.isDarkMode ? '#4D4D4D' : '#C7C7CC'
               })
               .onChange((checked: boolean) => {
                 if (checked) {
                   this.duplicateAction = 'overwrite';
                 }
               })
-            Text('覆盖')
-              .fontSize(14)
-              .fontColor(this.isDarkMode ? '#E5FFFFFF' : '#E5000000')
+            
+            Column({ space: 2 }) {
+              Text('覆盖')
+                .fontSize(14)
+                .fontWeight(FontWeight.Medium)
+                .fontColor(this.isDarkMode ? '#E5FFFFFF' : '#1F1F1F')
+              Text('替换远程文件')
+                .fontSize(12)
+                .fontColor(this.isDarkMode ? '#66FFFFFF' : '#8E8E93')
+            }
+            .alignItems(HorizontalAlign.Start)
+            .layoutWeight(1)
           }
+          .width('100%')
+          .padding(12)
+          .backgroundColor(this.duplicateAction === 'overwrite' ? 
+            (this.isDarkMode ? '#2E3238' : '#FFFFFF') : 
+            'transparent')
+          .borderRadius(8)
+          .border({
+            width: this.duplicateAction === 'overwrite' ? 2 : 1,
+            color: this.duplicateAction === 'overwrite' ? 
+              this.themeColor : 
+              (this.isDarkMode ? '#19FFFFFF' : '#E5E5EA')
+          })
+          .onClick(() => {
+            this.duplicateAction = 'overwrite';
+          })
 
-          Row({ space: 6 }) {
+          // 重命名选项
+          Row({ space: 10 }) {
             Radio({ value: 'rename', group: 'duplicateAction' })
               .checked(this.duplicateAction === 'rename')
               .radioStyle({
-                checkedBackgroundColor: this.themeColor
+                checkedBackgroundColor: this.themeColor,
+                uncheckedBorderColor: this.isDarkMode ? '#4D4D4D' : '#C7C7CC'
               })
               .onChange((checked: boolean) => {
                 if (checked) {
                   this.duplicateAction = 'rename';
                 }
               })
-            Text('重命名')
-              .fontSize(14)
-              .fontColor(this.isDarkMode ? '#E5FFFFFF' : '#E5000000')
+            
+            Column({ space: 2 }) {
+              Text('重命名')
+                .fontSize(14)
+                .fontWeight(FontWeight.Medium)
+                .fontColor(this.isDarkMode ? '#E5FFFFFF' : '#1F1F1F')
+              Text('自动重命名后上传')
+                .fontSize(12)
+                .fontColor(this.isDarkMode ? '#66FFFFFF' : '#8E8E93')
+            }
+            .alignItems(HorizontalAlign.Start)
+            .layoutWeight(1)
           }
+          .width('100%')
+          .padding(12)
+          .backgroundColor(this.duplicateAction === 'rename' ? 
+            (this.isDarkMode ? '#2E3238' : '#FFFFFF') : 
+            'transparent')
+          .borderRadius(8)
+          .border({
+            width: this.duplicateAction === 'rename' ? 2 : 1,
+            color: this.duplicateAction === 'rename' ? 
+              this.themeColor : 
+              (this.isDarkMode ? '#19FFFFFF' : '#E5E5EA')
+          })
+          .onClick(() => {
+            this.duplicateAction = 'rename';
+          })
         }
         .width('100%')
       }
       .width('100%')
-      .padding(16)
-      .backgroundColor(this.isDarkMode ? '#2E3033' : '#F1F3F5')
-      .borderRadius(8)
+      .padding(14)
+      .backgroundColor(this.isDarkMode ? '#2E3238' : '#F5F7FA')
+      .borderRadius(10)
     }
     .width('100%')
     .padding(16)
@@ -1096,12 +1264,17 @@ export struct UploadMusicPage {
    */
   @Builder
   AccountSelectorSection() {
-    Column({ space: 12 }) {
-      Text('选择WebDAV账户')
-        .fontSize(16)
-        .fontWeight(FontWeight.Medium)
-        .fontColor(this.isDarkMode ? '#E5FFFFFF' : '#E5000000')
-        .alignSelf(ItemAlign.Start)
+    Column({ space: 16 }) {
+      // 标题行
+      Row({ space: 8 }) {
+        Text('☁️')
+          .fontSize(20)
+        Text('选择账户')
+          .fontSize(16)
+          .fontWeight(FontWeight.Medium)
+          .fontColor(this.isDarkMode ? '#E5FFFFFF' : '#E5000000')
+      }
+      .alignSelf(ItemAlign.Start)
 
       if (this.accounts.length === 0) {
         Column({ space: 12 }) {
@@ -1132,11 +1305,11 @@ export struct UploadMusicPage {
                   Text(account.name)
                     .fontSize(16)
                     .fontWeight(FontWeight.Medium)
-                    .fontColor(this.isDarkMode ? '#E5FFFFFF' : '#E5000000')
+                    .fontColor(this.isDarkMode ? '#E5FFFFFF' : '#1F1F1F')
                   
                   Text(`${account.host}:${account.port}`)
                     .fontSize(12)
-                    .fontColor(this.isDarkMode ? '#66FFFFFF' : '#66000000')
+                    .fontColor(this.isDarkMode ? '#66FFFFFF' : '#8E8E93')
                 }
                 .alignItems(HorizontalAlign.Start)
                 .layoutWeight(1)
@@ -1148,16 +1321,16 @@ export struct UploadMusicPage {
                 }
               }
               .width('100%')
-              .padding(16)
+              .padding(14)
               .backgroundColor(this.selectedAccount && this.selectedAccount.id === account.id
-                ? (this.isDarkMode ? '#2E3033' : this.themeColor + '1A')
-                : (this.isDarkMode ? '#2E3033' : '#F1F3F5'))
-              .borderRadius(8)
+                ? (this.isDarkMode ? '#2E3238' : '#FFFFFF')
+                : (this.isDarkMode ? '#2E3238' : '#F5F7FA'))
+              .borderRadius(10)
               .border({
-                width: 2,
+                width: this.selectedAccount && this.selectedAccount.id === account.id ? 2 : 1,
                 color: this.selectedAccount && this.selectedAccount.id === account.id
                   ? this.themeColor
-                  : 'transparent'
+                  : (this.isDarkMode ? '#19FFFFFF' : '#E5E5EA')
               })
               .onClick(() => {
                 this.selectUploadAccount(account);
@@ -1190,35 +1363,57 @@ export struct UploadMusicPage {
    */
   @Builder
   FilePickerSection() {
-    Column({ space: 12 }) {
-      Text('选择文件')
-        .fontSize(16)
-        .fontWeight(FontWeight.Medium)
-        .fontColor(this.isDarkMode ? '#E5FFFFFF' : '#E5000000')
-        .alignSelf(ItemAlign.Start)
+    Column({ space: 16 }) {
+      // 标题行
+      Row({ space: 8 }) {
+        Text('🎵')
+          .fontSize(20)
+        Text('选择文件')
+          .fontSize(16)
+          .fontWeight(FontWeight.Medium)
+          .fontColor(this.isDarkMode ? '#E5FFFFFF' : '#E5000000')
+      }
+      .alignSelf(ItemAlign.Start)
 
-      Button('选择音频文件')
-        .width('100%')
-        .height(52)
-        .fontSize(16)
-        .fontColor('#FFFFFF')
-        .backgroundColor(this.themeColor)
-        .borderRadius(12)
-        .onClick(() => {
-          this.openFilePicker();
-        })
+      Button({ type: ButtonType.Normal }) {
+        Row({ space: 8 }) {
+          Text('📂')
+            .fontSize(18)
+          Text('选择音频文件')
+            .fontSize(15)
+            .fontWeight(FontWeight.Medium)
+        }
+      }
+      .width('100%')
+      .height(50)
+      .backgroundColor(this.themeColor)
+      .fontColor('#FFFFFF')
+      .borderRadius(10)
+      .shadow({
+        radius: 8,
+        color: this.themeColor + '40',
+        offsetX: 0,
+        offsetY: 3
+      })
+      .onClick(() => {
+        this.openFilePicker();
+      })
 
       if (this.selectedFiles.length > 0) {
-        Row({ space: 8 }) {
+        Row({ space: 10 }) {
           Text('✓')
             .fontSize(18)
-            .fontColor(this.isDarkMode ? '#5BA854' : '#64BB5C')
+            .fontColor(this.themeColor)
           
           Text(`已选择 ${this.selectedFiles.length} 个文件`)
             .fontSize(14)
-            .fontColor(this.isDarkMode ? '#99FFFFFF' : '#99000000')
+            .fontWeight(FontWeight.Medium)
+            .fontColor(this.isDarkMode ? '#E5FFFFFF' : '#1F1F1F')
         }
-        .padding({ top: 4 })
+        .width('100%')
+        .padding(12)
+        .backgroundColor(this.isDarkMode ? this.themeColor + '20' : this.themeColor + '10')
+        .borderRadius(8)
       }
     }
     .width('100%')
@@ -1239,12 +1434,28 @@ export struct UploadMusicPage {
    */
   @Builder
   SelectedFilesList() {
-    Column({ space: 12 }) {
-      Text('已选文件')
-        .fontSize(16)
-        .fontWeight(FontWeight.Medium)
-        .fontColor(this.isDarkMode ? '#E5FFFFFF' : '#E5000000')
-        .alignSelf(ItemAlign.Start)
+    Column({ space: 16 }) {
+      // 标题行
+      Row({ space: 8 }) {
+        Text('📋')
+          .fontSize(20)
+        Text('已选文件')
+          .fontSize(16)
+          .fontWeight(FontWeight.Medium)
+          .fontColor(this.isDarkMode ? '#E5FFFFFF' : '#E5000000')
+        
+        Blank()
+        
+        Text(`${this.selectedFiles.length}`)
+          .fontSize(13)
+          .fontWeight(FontWeight.Medium)
+          .fontColor('#FFFFFF')
+          .padding({ left: 8, right: 8, top: 4, bottom: 4 })
+          .backgroundColor(this.themeColor)
+          .borderRadius(10)
+      }
+      .width('100%')
+      .alignSelf(ItemAlign.Start)
 
       List({ space: 8 }) {
         ForEach(this.selectedFileNames, (fileName: string, index: number) => {
@@ -1265,7 +1476,7 @@ export struct UploadMusicPage {
                 .fontSize(12)
                 .height(32)
                 .padding({ left: 12, right: 12 })
-                .backgroundColor(this.isDarkMode ? '#D94838' : '#E84026')
+                .backgroundColor(this.isDarkMode ? '#D94838' : '#FF3B30')
                 .fontColor('#FFFFFF')
                 .borderRadius(6)
                 .onClick(() => {
@@ -1274,8 +1485,12 @@ export struct UploadMusicPage {
             }
             .width('100%')
             .padding(12)
-            .backgroundColor(this.isDarkMode ? '#2E3033' : '#F1F3F5')
+            .backgroundColor(this.isDarkMode ? '#2E3238' : '#F5F7FA')
             .borderRadius(8)
+            .border({
+              width: 1,
+              color: this.isDarkMode ? '#19FFFFFF' : '#E5E5EA'
+            })
           }
         }, (fileName: string, index: number) => `${index}-${fileName}`)
       }