修正setting UI

entry/src/main/ets/pages/SettingPage.ets

@@ -166,211 +166,207 @@ export struct SettingPage {
   }
 
   build() {
-
     Column() {
       TitleBar({ model: $titleBarModel })
       Scroll() {
         Column() {
-        // 主题设置
-          Row() {
-          Text('主题设置')
-              .margin({ left: 38, right: 20 })
-              .fontSize(16)
-              .fontColor(Color.Gray)
-              .fontWeight(480)
-            Blank()
-          }
-          .width('100%')
-          .height(55)
-          Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
-
-        // 深色模式开关
-          Row() {
-            Image($r('app.media.kp_music_nor'))
-              .width(22)
-              .height(22)
-              .visibility(Visibility.None)
-              .alignSelf(ItemAlign.Center)
-              .margin({ left: 28 })
-          Text('深色模式')
-              .margin({ left: 10, right: 20 })
-              .fontSize(15)
-              .fontColor(Color.Gray)
-              .fontWeight(480)
-            Blank()
-          Toggle({ type: ToggleType.Switch, isOn: this.isDarkMode })
-            .selectedColor($r('app.color.title_bar_bg'))
-            .switchPointColor(Color.White)
-              .margin({ right: 28 })
-            .onChange((checked: boolean) => {
-              this.toggleDarkMode(checked);
-              })
-              .width(50)
-              .height(30);
-          }
-          .width('100%')
-          .height(55)
-
-        Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
-
-        //音频设置
-        Row() {
-          Text('音频设置')
-            .margin({ left: 38, right: 20 })
-            .fontSize(16)
-            .fontColor(Color.Gray)
-            .fontWeight(480)
-          Blank()
-        }
-        .width('100%')
-        .height(55)
-
-          Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
-          Row() {
-            Image($r('app.media.kp_music_nor'))
-              .width(22)
-              .height(22)
-              .visibility(Visibility.None)
-              .alignSelf(ItemAlign.Center)
-              .margin({ left: 28 })
-          Text('记忆播放')
-              .margin({ left: 10, right: 20 })
-              .fontSize(15)
-              .fontColor(Color.Gray)
-              .fontWeight(480)
-            Blank()
-          Toggle({ type: ToggleType.Switch, isOn: this.isMusicMemoryPlay })
-            .selectedColor($r('app.color.title_bar_bg'))// 设置开关打开时的背景颜色为蓝色
-            .switchPointColor(Color.White)// 设置开关关闭时的滑块颜色为白色
-            .margin({ right: 28 })
-            .onChange((checked: boolean) => { // 选择开关状态变化时触发事件
-              this.isMusicMemoryPlay = checked;
-              PreferencesUtil.put(SettingPage.iS_MUSIC_MEMORY_PLAY, this.isMusicMemoryPlay)
-              })
-            .width(50)
-            .height(30);
-          }
-          .width('100%')
-          .height(55)
-
-          Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
-          Row() {
-            Image($r('app.media.kp_music_nor'))
-              .width(22)
-              .height(22)
-              .visibility(Visibility.None)
-              .alignSelf(ItemAlign.Center)
-              .margin({ left: 28 })
-            Text('播放背景随音乐封面')
-              .margin({ left: 10, right: 20 })
-              .fontSize(15)
-              .fontColor(Color.Gray)
-              .fontWeight(480)
-            Blank()
-            Toggle({ type: ToggleType.Switch, isOn: this.isMusicBGCover })
-              .selectedColor($r('app.color.title_bar_bg'))// 设置开关打开时的背景颜色为蓝色
-              .switchPointColor(Color.White)// 设置开关关闭时的滑块颜色为白色
-              .margin({ right: 28 })
-              .onChange((checked: boolean) => { // 选择开关状态变化时触发事件
-                this.isMusicBGCover = checked;
-                PreferencesUtil.put(SettingPage.iS_MUSIC_BG_COVER, this.isMusicBGCover)
-
-              })
-              .width(50)
-              .height(30);
-          }
-          .width('100%')
-          .height(55)
-
-          Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
-
-          // API设置（合并标题）
-          Row() {
-            Text('API设置')
-              .margin({ left: 38, right: 20 })
-              .fontSize(16)
-              .fontColor(Color.Gray)
-              .fontWeight(480)
+          // 主题设置分组
+          Column() {
+            Row() {
+              Text('主题设置')
+                .margin({ left: 18, right: 20 })
+                .fontSize(16)
+                .fontColor(Color.Gray)
+                .fontWeight(480)
+                .layoutWeight(1)
+            }
+            .height(48)
+            Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
+            // 深色模式
+            Row() {
+              Text('深色模式')
+                .margin({ left: 18 })
+                .fontSize(15)
+                .fontColor(Color.Gray)
+                .fontWeight(480)
+                .layoutWeight(1)
+              Toggle({ type: ToggleType.Switch, isOn: this.isDarkMode })
+                .selectedColor($r('app.color.title_bar_bg'))
+                .switchPointColor(Color.White)
+                .margin({ right: 18 })
+                .onChange((checked: boolean) => {
+                  this.toggleDarkMode(checked);
+                })
+                .width(50)
+                .height(30);
+            }
+            .height(55)
           }
-          .width('100%')
-          .height(55)
+          .backgroundColor(Color.White)
+          .borderRadius(20)
+          .margin({ left: 0, right: 0, top: 0, bottom: 18 })
+          .padding(0)
 
-          Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
-          // 歌词API地址展示
-          Row() {
-            Text('歌词:')
-              .margin({ left: 38, right: 6 })
-              .fontSize(15)
-              .fontColor(Color.Gray)
-            Text(this.lyricApiUrl)
-              .margin({ right: 10 })
-              .fontSize(15)
-              .fontColor(Color.Gray)
-              .layoutWeight(1)
-            // 编辑图标按钮
-            Image($r('app.media.edit'))
-              .width(28)
-              .height(28)
-              .margin({ right: 18 })
-              .onClick(() => {
-                this.apiDialogType = 'lyric'
-                this.tempApiUrl = this.lyricApiUrl
-                this.apiDialogController.open()
-              })
-            Blank()
+          // 音频设置分组
+          Column() {
+            Row() {
+              Text('音频设置')
+                .margin({ left: 18, right: 20 })
+                .fontSize(16)
+                .fontColor(Color.Gray)
+                .fontWeight(480)
+                .layoutWeight(1)
+            }
+            .height(48)
+            Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
+            // 记忆播放
+            Row() {
+              Text('记忆播放')
+                .margin({ left: 18 })
+                .fontSize(15)
+                .fontColor(Color.Gray)
+                .fontWeight(480)
+                .layoutWeight(1)
+              Toggle({ type: ToggleType.Switch, isOn: this.isMusicMemoryPlay })
+                .selectedColor($r('app.color.title_bar_bg'))
+                .switchPointColor(Color.White)
+                .margin({ right: 18 })
+                .onChange((checked: boolean) => {
+                  this.isMusicMemoryPlay = checked;
+                  PreferencesUtil.put(SettingPage.iS_MUSIC_MEMORY_PLAY, this.isMusicMemoryPlay)
+                })
+                .width(50)
+                .height(30);
+            }
+            .height(55)
+            Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
+            // 默认排序模式
+            Row() {
+              Text('默认排序模式')
+                .margin({ left: 18 })
+                .fontSize(15)
+                .fontColor(Color.Gray)
+                .fontWeight(480)
+                .layoutWeight(1)
+              Select([
+                { value: CommonConstants.SORT_ARRAY[0] },
+                { value: CommonConstants.SORT_ARRAY[1] },
+                { value: CommonConstants.SORT_ARRAY[2] },
+                { value: CommonConstants.SORT_ARRAY[3] },
+                { value: CommonConstants.SORT_ARRAY[4] },
+                { value: CommonConstants.SORT_ARRAY[5] },
+                { value: CommonConstants.SORT_ARRAY[6] },
+                { value: CommonConstants.SORT_ARRAY[7] }])
+                .font({ size: 15, weight: FontWeight.Medium })
+                .fontColor(Color.Gray)
+                .margin({ right: 18 })
+                .selected(this.sortType)
+                .value(CommonConstants.SORT_ARRAY[this.sortType])
+                .onSelect(async (_index: number, text?: string | undefined) => {
+                  this.sortType = _index
+                  PreferencesUtil.put(SettingPage.SORT_TYPE, this.sortType)
+                })
+            }
+            .height(55)
+            Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
+            // 播放背景随音乐封面
+            Row() {
+              Text('播放背景随音乐封面')
+                .margin({ left: 18 })
+                .fontSize(15)
+                .fontColor(Color.Gray)
+                .fontWeight(480)
+                .layoutWeight(1)
+              Toggle({ type: ToggleType.Switch, isOn: this.isMusicBGCover })
+                .selectedColor($r('app.color.title_bar_bg'))
+                .switchPointColor(Color.White)
+                .margin({ right: 18 })
+                .onChange((checked: boolean) => {
+                  this.isMusicBGCover = checked;
+                  PreferencesUtil.put(SettingPage.iS_MUSIC_BG_COVER, this.isMusicBGCover)
+                })
+                .width(50)
+                .height(30);
+            }
+            .height(55)
           }
-          .width('100%')
-          .margin({ top: 8, bottom: 12 })
+          .backgroundColor(Color.White)
+          .borderRadius(20)
+          .margin({ left: 0, right: 0, top: 0, bottom: 18 })
+          .padding(0)
 
-          // 封面API地址展示
-          Row() {
-            Text('封面:')
-              .margin({ left: 38, right: 6 })
-              .fontSize(15)
-              .fontColor(Color.Gray)
-            Text(this.coverApiUrl)
-              .margin({ right: 10 })
-              .fontSize(15)
-              .fontColor(Color.Gray)
-              .layoutWeight(1)
-            // 编辑图标按钮
-            Image($r('app.media.edit'))
-              .width(28)
-              .height(28)
-              .margin({ right: 18 })
-              .onClick(() => {
-                this.apiDialogType = 'cover'
-                this.tempApiUrl = this.coverApiUrl
-                this.apiDialogController.open()
-              })
-            Blank()
+          // API设置分组
+          Column() {
+            Row() {
+              Text('API设置')
+                .margin({ left: 18, right: 20 })
+                .fontSize(16)
+                .fontColor(Color.Gray)
+                .fontWeight(480)
+                .layoutWeight(1)
+            }
+            .height(48)
+            Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
+            // 歌词API
+            Row() {
+              Text('歌词:')
+                .margin({ left: 38, right: 6 })
+                .fontSize(15)
+                .fontColor(Color.Gray)
+              Text(this.lyricApiUrl)
+                .margin({ right: 10 })
+                .fontSize(15)
+                .fontColor(Color.Gray)
+                .layoutWeight(1)
+              Image($r('app.media.edit'))
+                .width(28)
+                .height(28)
+                .margin({ right: 18 })
+                .onClick(() => {
+                  this.apiDialogType = 'lyric'
+                  this.tempApiUrl = this.lyricApiUrl
+                  this.apiDialogController.open()
+                })
+            }
+            .height(55)
+            // 封面API
+            Row() {
+              Text('封面:')
+                .margin({ left: 38, right: 6 })
+                .fontSize(15)
+                .fontColor(Color.Gray)
+              Text(this.coverApiUrl)
+                .margin({ right: 10 })
+                .fontSize(15)
+                .fontColor(Color.Gray)
+                .layoutWeight(1)
+              Image($r('app.media.edit'))
+                .width(28)
+                .height(28)
+                .margin({ right: 18 })
+                .onClick(() => {
+                  this.apiDialogType = 'cover'
+                  this.tempApiUrl = this.coverApiUrl
+                  this.apiDialogController.open()
+                })
+            }
+            .height(55)
           }
-          .width('100%')
-          .margin({ top: 8, bottom: 12 })
-
+          .backgroundColor(Color.White)
+          .borderRadius(20)
+          .margin({ left: 0, right: 0, top: 0, bottom: 18 })
+          .padding(0)
         }
-      .backgroundColor(this.isDarkMode ? '#1E1E1E' : Color.White)
-        .margin({
-          left: 25,
-          right: 25,
-          top: 20,
-          bottom: 50
-        })
-        .layoutWeight(1)
-        .justifyContent(FlexAlign.Start) // Align items to the start
-        .borderRadius(30)
-
-
+        .margin({ left: 25, right: 25, top: 20, bottom: 50 })
+        .justifyContent(FlexAlign.Start)
       }
       .scrollBar(BarState.Auto)
       .height('100%')
       .width('100%')
       .margin({bottom:18})
-
     }
-    .backgroundColor(this.isDarkMode ? '#121212' : $r('app.color.index_background'))
+    .backgroundColor($r('app.color.settings_background'))
     .height('100%')
     .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
   }
-
 }

entry/src/main/resources/base/element/color.json

@@ -130,6 +130,14 @@
     {
       "name": "bg_card",
       "value": "#ffffff"
+    },
+    {
+      "name": "settings_background",
+      "value": "#FFECE7E7"
+    },
+    {
+      "name": "settings_background_main",
+      "value": "#ffffff"
     }
   ]
 }

entry/src/main/resources/dark/element/color.json

@@ -38,7 +38,7 @@
     },
     {
       "name": "index_background",
-      "value": "#121212"
+      "value": "#FF373737"
     },
     {
       "name": "tab_bar_sel",
@@ -147,6 +147,14 @@
     {
       "name": "bg_card",
       "value": "#1E1E1E"
+    },
+    {
+      "name": "settings_background",
+      "value": "#FF2D2C2C"
+    },
+    {
+      "name": "settings_background_main",
+      "value": "#000000"
     }
   ]
 }

entry/src/main/resources/light/element/color.json

@@ -1,120 +0,0 @@
-{
-  "color": [
-    {
-      "name": "text_color",
-      "value": "#333333"
-    },
-    {
-      "name": "start_window_background",
-      "value": "#FFFFFF"
-    },
-    {
-      "name": "silvery",
-      "value": "#F5F5F5"
-    },
-    {
-      "name": "white",
-      "value": "#FFFFFF"
-    },
-    {
-      "name": "touming",
-      "value": "#00FFFFFF"
-    },
-    {
-      "name": "ban_touming",
-      "value": "#00000000"
-    },
-    {
-      "name": "title_bar_bg",
-      "value": "#FF4081"
-    },
-    {
-      "name": "index_background",
-      "value": "#FFFFFF"
-    },
-    {
-      "name": "tab_bar_sel",
-      "value": "#55ceac"
-    },
-    {
-      "name": "tab_bar_normal",
-      "value": "#F5F5F5"
-    },
-    {
-      "name": "index_tab_font_color",
-      "value": "#333333"
-    },
-    {
-      "name": "index_tab_selected_font_color",
-      "value": "#007DFF"
-    },
-    {
-      "name": "index_tab_unselected_font_color",
-      "value": "#999999"
-    },
-    {
-      "name": "index_tab_local_list_font_color",
-      "value": "#666666"
-    },
-    {
-      "name": "divider_color",
-      "value": "#E0E0E0"
-    },
-    {
-      "name": "button_back_ground_color",
-      "value": "#007DFF"
-    },
-    {
-      "name": "dodgerBlue",
-      "value": "#1E90FF"
-    },
-    {
-      "name": "RoyalBlue",
-      "value": "#4169E1"
-    },
-    {
-      "name": "track_color",
-      "value": "#E0E0E0"
-    },
-    {
-      "name": "speed_text_color",
-      "value": "#666666"
-    },
-    {
-      "name": "btn_green",
-      "value": "#55ceac"
-    },
-    {
-      "name": "pri_bg",
-      "value": "#F5F5F5"
-    },
-    {
-      "name": "orange",
-      "value": "#FF8C00"
-    },
-    {
-      "name": "line_blue",
-      "value": "#00cccc"
-    },
-    {
-      "name": "btn_red",
-      "value": "#ff6b47"
-    },
-    {
-      "name": "slider_track",
-      "value": "#33000000"
-    },
-    {
-      "name": "select_swiper",
-      "value": "#DB000000"
-    },
-    {
-      "name": "playlistText_color",
-      "value": "#D3D3D3"
-    },
-    {
-      "name": "title_bar_bg_text",
-      "value": "#FF4081"
-    }
-  ]
-}