半模态配置主题

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

@@ -10,12 +10,50 @@ import { fileIo, fileUri } from '@kit.CoreFileKit'
 import { BusinessError, emitter } from '@kit.BasicServicesKit'
 import { BreakpointTypeEnum } from '../common/util/BreakpointSystem'
 import { resourceManager } from '@kit.LocalizationKit'
-import { IBestButton, IBestColorPicker, IBestField, IBestPopup } from '@ibestservices/ibest-ui'
+import {
+  IBestButton,
+  IBestColorPicker,
+  IBestField,
+  IBestPopup,
+  IBestRadio,
+  IBestRadioGroup
+} from '@ibestservices/ibest-ui'
 
 @Preview
 @Entry
 @Component
 export struct SettingPage {
+  static readonly THEME_MODE: string = 'themeMode';
+  static readonly SORT_TYPE: string = 'musicSortType';
+  static readonly IS_BGPLAY_OPEN: string = 'isBgPlayOpen';
+  static readonly IS_AUTO_RATATE: string = 'isAutoRatate';
+  static readonly iS_MEMORY_PLAY: string = 'isMemoryPlay';
+  static readonly IS_MIDIACODEC_OPEN: string = 'isMediacodec';
+  static readonly iS_MUSIC_MEMORY_PLAY: string = 'isMusicMemoryPlay';
+  static readonly iS_MUSIC_BG_COVER: string = 'isMusicBGCover';
+  static readonly iS_SAVE_PLAY_MODE: string = 'isSavePlayMode';
+  static readonly IS_COVER_RECTANGLE: string = 'isCoverRectangle'; //封面圆形或者方形
+  static readonly IS_SHOW_SIMI: string = 'isShowSimi';
+  static readonly IS_SHOW_FAV: string = 'isShowFAV';
+  static readonly IS_SHOW_HISTORY: string = 'isShowHistory';
+  static readonly IS_CUSTOMIZE_BG: string = 'is_customize_bg';
+  static readonly IS_GRID_MUSIC: string = 'is_grid_music';
+  static readonly IS_CUSTOMIZE_BG_PATH: string = 'is_customize_bg_path';
+  static readonly IS_SCROLL_HIDE: string = 'isScrollHide';
+  static readonly IS_SAMETIME_PLAY: string = 'isSameTimePlay';
+  static readonly CUSTOMIZE_BG_BLUR: string = 'customize_bg_blur';
+  static readonly BG_BRIGHTNESS: string = 'bg_brightness';
+  public static THEME_COLOR_KEY: string = 'THEME_COLOR';
+  public static THEME_COLOR_LIST: Array<ThemeColorItem> = [
+    { name: '湛心蓝', color: '#0A59F7' },
+    { name: '便单黄', color: '#FFC107' },
+    { name: '枫叶红', color: '#F44336' },
+    { name: '活力粉', color: '#FF4081' },
+    { name: '闪电紫', color: '#9C27B0' },
+    { name: '宝石绿', color: '#64BB5C' },
+    { name: '草木青', color: '#00BCD4' },
+    { name: '自定义', color: '#607D8B' }
+  ];
   @State showApiDialog: boolean = false
   @State tempApiUrl: string = ''
   @State lyricApiUrl: string = PreferencesUtil.getStringSync('LRC_API', '')
@@ -26,59 +64,36 @@ export struct SettingPage {
   @State isMusicMemoryPlay: boolean = false //是否启用记忆播放
   @State isMusicBGCover: boolean = true //播放背景随封面
   @State sortType: number = 4 //默认排序方式
-
-  @State isShowSimi:boolean = false //是否显示私密音频
-  @State isShowFAV:boolean = true //是否显示我的收藏
-  @State isShowHistory:boolean = true //是否显示最近播放
+  @State isShowSimi: boolean = false //是否显示私密音频
+  @State isShowFAV: boolean = true //是否显示我的收藏
+  @State isShowHistory: boolean = true //是否显示最近播放
   @State isCustomizeBg: boolean = false //自定义背景界面
   @State isCustomizeBgSheet: boolean = false //自定义背景界面
   @State blurValue: number = 0 //背景模糊
   @State bgBrightness: number = 0 //背景亮度
-
   @State isGridMusic: boolean = false //是否网格布局
   @State isScrollHide: boolean = false //是否滚动隐藏
   @State isSameTimePlay: boolean = false //是否和其他app同时播放
   @State isSavePlayMode: boolean = true
   @State customizeBgPath: string | undefined = '';
   context = getContext(this);
-
   @State showCoverApiDialog: boolean = false
   @State tempCoverApiUrl: string = ''
   @State coverApiUrl: string = PreferencesUtil.getStringSync('COVER_API', '')
   @State apiDialogType: 'lyric' | 'cover' = 'lyric'
   @State themeMode: number = 0 // 0: 跟随系统, 1: 浅色, 2: 深色
-  static readonly THEME_MODE: string = 'themeMode';
-  static readonly SORT_TYPE: string = 'musicSortType';
-  @StorageProp('currentColorMode') @Watch('onColorModeChange') currentMode: number = ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT;
+  @StorageProp('currentColorMode') @Watch('onColorModeChange') currentMode: number =
+    ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT;
   @StorageLink('isDarkMode') isDarkMode: boolean = false // 是否启用深色模式
-  static readonly IS_BGPLAY_OPEN: string = 'isBgPlayOpen';
-  static readonly IS_AUTO_RATATE: string = 'isAutoRatate';
-  static readonly iS_MEMORY_PLAY: string = 'isMemoryPlay';
-  static readonly IS_MIDIACODEC_OPEN: string = 'isMediacodec';
-  static readonly iS_MUSIC_MEMORY_PLAY: string = 'isMusicMemoryPlay';
-  static readonly iS_MUSIC_BG_COVER: string = 'isMusicBGCover';
-  static readonly iS_SAVE_PLAY_MODE: string = 'isSavePlayMode';
-  static readonly IS_COVER_RECTANGLE: string = 'isCoverRectangle'; //封面圆形或者方形
-
-  static readonly IS_SHOW_SIMI: string = 'isShowSimi';
-  static readonly IS_SHOW_FAV: string = 'isShowFAV';
-  static readonly IS_SHOW_HISTORY: string = 'isShowHistory';
-  static readonly IS_CUSTOMIZE_BG: string = 'is_customize_bg';
-  static readonly IS_GRID_MUSIC: string = 'is_grid_music';
-  static readonly IS_CUSTOMIZE_BG_PATH: string = 'is_customize_bg_path';
-  static readonly IS_SCROLL_HIDE: string = 'isScrollHide';
-  static readonly IS_SAMETIME_PLAY: string = 'isSameTimePlay';
-  static readonly CUSTOMIZE_BG_BLUR: string = 'customize_bg_blur';
-  static readonly BG_BRIGHTNESS: string = 'bg_brightness';
-
   /** 当前断点类型（如大屏/小屏） */
   @StorageProp('currentBreakpoint') currentBreakpoint: string = BreakpointTypeEnum.MD;
   @State verName: string = ''
   @StorageProp('themeColor') themeColor: string = PreferencesUtil.getStringSync('THEME_COLOR', '#FF4081');
-
   @State showColorPicker: boolean = false
   @State customColor: string = PreferencesUtil.getStringSync('THEME_COLOR', '#FF4081');
-
+  @State isThemeSheet: boolean = false // 主题设置弹窗显示状态
+  @State colorRows: Array<Array<ThemeColorItem>> = chunkArray(SettingPage.THEME_COLOR_LIST, 2);
+  @State colorGroup: string = "group"
   apiDialogController: CustomDialogController = new CustomDialogController({
     builder: CustomContentDialog({
       primaryTitle: this.apiDialogType === 'lyric' ? '修改歌词API地址' : '修改封面API地址',
@@ -126,7 +141,10 @@ export struct SettingPage {
   @Builder
   buildApiDialogContent() {
     Column() {
-      TextInput({ text: this.tempApiUrl, placeholder: this.apiDialogType === 'lyric' ? '请输入歌词API地址' : '请输入封面API地址' })
+      TextInput({
+        text: this.tempApiUrl,
+        placeholder: this.apiDialogType === 'lyric' ? '请输入歌词API地址' : '请输入封面API地址'
+      })
         .onChange((val: string) => {
           this.tempApiUrl = val
         })
@@ -148,8 +166,8 @@ export struct SettingPage {
     this.isShowSimi = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_SIMI, false)
     this.isShowFAV = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_FAV, true)
     this.isShowHistory = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_HISTORY, true)
-    this.isCustomizeBg  = PreferencesUtil.getBooleanSync(SettingPage.IS_CUSTOMIZE_BG, false)
-    this.customizeBgPath  = PreferencesUtil.getStringSync(SettingPage.IS_CUSTOMIZE_BG_PATH, '')
+    this.isCustomizeBg = PreferencesUtil.getBooleanSync(SettingPage.IS_CUSTOMIZE_BG, false)
+    this.customizeBgPath = PreferencesUtil.getStringSync(SettingPage.IS_CUSTOMIZE_BG_PATH, '')
     this.isGridMusic = PreferencesUtil.getBooleanSync(SettingPage.IS_GRID_MUSIC, false)
     this.isScrollHide = PreferencesUtil.getBooleanSync(SettingPage.IS_SCROLL_HIDE, false)
     this.isSameTimePlay = PreferencesUtil.getBooleanSync(SettingPage.IS_SAMETIME_PLAY, false)
@@ -174,6 +192,7 @@ export struct SettingPage {
   aboutToDisappear() {
     // 无需处理apiDialogController
   }
+
   applyThemeMode(mode: number) {
     let colorMode = ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET
     if (mode === 1) {
@@ -194,19 +213,21 @@ export struct SettingPage {
   isPhoneLan() {
     if (DeviceUtil.getDeviceType() === resourceManager.DeviceType.DEVICE_TYPE_PHONE
       && this.currentBreakpoint !== BreakpointTypeEnum.SM) {
-      if (DisplayUtil.getFoldStatus() === 0 ) {
+      if (DisplayUtil.getFoldStatus() === 0) {
         return true
       }
     }
 
     return false
   }
-  @Builder pickerBuilder(){
-    Column({space: 20}){
+
+  @Builder
+  pickerBuilder() {
+    Column({ space: 20 }) {
       IBestColorPicker({
         value: this.customColor
       })
-      Row({space: 20}){
+      Row({ space: 20 }) {
         IBestButton({
           text: "取消",
           onBtnClick: () => {
@@ -227,14 +248,147 @@ export struct SettingPage {
       }
     }.padding(20)
   }
+
+  @Builder
+  themeSheetBuilder() {
+    Column() {
+
+      // 颜色模式分组卡片
+      Column() {
+
+        Row({ space: 36 }) {
+          Text('颜色模式')
+            .fontSize(15)
+            .fontWeight(500)
+            .margin({ left: 12 })
+          Column() {
+            Row() {
+              IBestRadioGroup({ group: this.colorGroup, active: $themeMode, placeDirection: Axis.Horizontal }) {
+                ForEach(['自动', '明亮', '黑暗'], (item: string, idx: number) => {
+                  Column() {
+                    IBestRadio({
+                      group: this.colorGroup,
+                      checkedColor: '#ee0a24',
+                      label: '', // 不在Radio里显示label
+                      name: idx
+                    })
+                    Text(item)
+                      .fontSize(15)
+                      .fontColor($r('app.color.text_color'))
+                      .margin({ top: 6 })
+                  }
+                  .onClick(() => {
+                    this.themeMode = idx
+                    this.applyThemeMode(idx)
+                    this.sendChangeEvent()
+                  })
+                  .alignItems(HorizontalAlign.Center)
+                })
+              }
+            }
+            .margin({ right: 12 })
+          }
+        }
+        .justifyContent(FlexAlign.Center)
+      }
+      .backgroundColor($r('app.color.settings_background_main'))
+      .borderRadius(18)
+      .border({ width: 1, color: '#F0F0F0' })
+      .shadow({
+        radius: 12,
+        color: 0x11000000,
+        offsetX: 0,
+        offsetY: 2
+      })
+      .margin({
+        left: 18,
+        right: 18,
+        top: 10,
+        bottom: 18
+      })
+      .padding({ top: 18, bottom: 18 })
+      .width('90%')
+
+      // 主题色分组卡片
+      Column() {
+        Text('主题色')
+          .fontSize(15)
+          .fontWeight(500)
+          .margin({ left: 12, top: 8, bottom: 12 })
+        Column() {
+          ForEach(this.colorRows, (row: Array<ThemeColorItem>, rowIdx: number) => {
+            Row() {
+              ForEach(row, (item: ThemeColorItem, colIdx: number) => {
+                Button() {
+                  Row() {
+                    Blank()
+                      .width(22)
+                      .height(22)
+                      .backgroundColor(item.color)
+                      .border({ width: 2, color:$r('app.color.text_color')})
+                      .borderRadius(11)
+                    Text(item.name)
+                      .fontSize(15)
+                      .fontColor($r('app.color.text_color'))
+                      .margin({ left: 10 })
+                  }
+                  .alignItems(VerticalAlign.Top)
+                  .justifyContent(FlexAlign.Start)
+                }
+                .width(120)
+                .height(40)
+                .backgroundColor(this.themeColor === item.color ? item.color : $r('app.color.settings_background_main'))
+                .borderRadius(20)
+                .onClick(() => {
+                  if (item.name === '自定义') {
+                    this.showColorPicker = true
+                  } else {
+                    this.themeColor = item.color
+                    PreferencesUtil.putSync(SettingPage.THEME_COLOR_KEY, item.color)
+                    AppStorage.setOrCreate('themeColor', item.color)
+                    this.sendChangeEvent()
+                  }
+                })
+                .margin({ right: colIdx === 0 ? 24 : 0, bottom: 10 })
+              })
+            }
+            .justifyContent(FlexAlign.Start)
+          })
+        }
+      }
+      .width('90%')
+      .backgroundColor($r('app.color.settings_background_main'))
+      .borderRadius(18)
+      .border({ width: 1, color: '#F0F0F0' })
+      .shadow({
+        radius: 12,
+        color: 0x11000000,
+        offsetX: 0,
+        offsetY: 2
+      })
+      .margin({
+        left: 18,
+        right: 18,
+        top: 0,
+        bottom: 18
+      })
+      .padding({ top: 18, bottom: 18 })
+    }
+    .padding({ top: 8, bottom: 8 })
+    .width('90%')
+    .backgroundColor(Color.Transparent)
+    .borderRadius(24)
+  }
+
   build() {
     Column() {
-      Column(){
+      Column() {
         Line().width('100%').height('100%')
       }
-      .height(this.isPhoneLan()?0:px2vp(AppUtil.getStatusBarHeight()))
-      .backgroundColor(this.isDarkMode?$r('app.color.title_bar_bg'):this.themeColor)
+      .height(this.isPhoneLan() ? 0 : px2vp(AppUtil.getStatusBarHeight()))
+      .backgroundColor(this.isDarkMode ? $r('app.color.title_bar_bg') : this.themeColor)
       .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
+
       // 自定义标题栏
       Stack() {
         // 居中标题
@@ -260,7 +414,8 @@ export struct SettingPage {
       }
       .height(48)
       .width('100%')
-      .backgroundColor(this.isDarkMode?$r('app.color.title_bar_bg'):this.themeColor)
+      .backgroundColor(this.isDarkMode ? $r('app.color.title_bar_bg') : this.themeColor)
+
       Scroll() {
         Column() {
           // 主题设置分组
@@ -274,94 +429,35 @@ export struct SettingPage {
                 .layoutWeight(1)
             }
             .height(48)
+
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
+            // 主题设置弹框入口
             Row() {
-              Text('主题模式')
+              Text('主题设置')
                 .margin({ left: 18 })
                 .fontSize(15)
                 .fontColor(Color.Gray)
                 .fontWeight(480)
                 .layoutWeight(1)
-              Select([
-                { value: '跟随系统' },
-                { value: '浅色' },
-                { value: '深色' }
-              ])
-                .font({ size: 15, weight: FontWeight.Medium })
-                .fontColor(Color.Gray)
+              Image($r('app.media.arrow_right'))
+                .width(22)
+                .height(22)
                 .margin({ right: 18 })
-                .selected(this.themeMode)
-                .value(['跟随系统', '浅色', '深色'][this.themeMode])
-                .onSelect((_index: number) => {
-                  this.themeMode = _index
-                  this.applyThemeMode(_index)
-                  this.getUIContext().getPromptAction().showToast({
-                    message: ['已切换为跟随系统', '已切换为浅色', '已切换为深色'][_index],
-                    duration: 2000,
-                    showMode: promptAction.ToastShowMode.TOP_MOST,
-                    bottom: 85
-                  })
-                  this.sendChangeEvent()
-                })
-            }
-            .height(55)
-
-            // 主题色选择
-            Row() {
-              Text('主题色')
-                .margin({ left: 18 })
-                .fontSize(15)
-                .fontColor(Color.Gray)
-                .fontWeight(480)
-                .layoutWeight(1)
-              Scroll() {
-                Row() {
-                  ForEach(SettingPage.THEME_COLOR_LIST, (color: string, index: number) => {
-                    Blank()
-                      .width(32)
-                      .height(32)
-                      .backgroundColor(color)
-                      .borderRadius(16)
-                      .border({
-                        width: this.themeColor === color ? 3 : 1,
-                        color: this.themeColor === color ? Color.Black : Color.Gray
-                      })
-                      .margin({ right: 8 })
-                      .onClick(() => {
-                        this.themeColor = color
-                        PreferencesUtil.putSync(SettingPage.THEME_COLOR_KEY, color)
-                        AppStorage.setOrCreate('themeColor', color)
-                        this.sendChangeEvent()
-                      })
-                  })
-                }
-              }
-              .margin({right:18})
-
-              .scrollable(ScrollDirection.Horizontal)
-              .scrollBar(BarState.Off)
             }
             .height(55)
-
-            Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
-            IBestField({
-              label: '选择颜色',
-              value: this.customColor,
-              placeholder: "请选择颜色",
-              isLink: true,
-              hasBorder: false,
-              rightIcon:"location",
-              rightIconColor:this.customColor,
-              onFieldClick: () => {
-                this.showColorPicker = true
-              }
+            .onClick(() => {
+              this.isThemeSheet = true
             })
-            // 弹出层
-            IBestPopup({
-              visible: this.showColorPicker,
-              popupWidth: 320,
-              contentBuilder: (): void => this.pickerBuilder()
+            .bindSheet($$this.isThemeSheet, this.themeSheetBuilder(), {
+              height: '90%',
+              dragBar: true,
+              preferType: this.currentBreakpoint !== BreakpointTypeEnum.SM ? SheetType.CENTER : SheetType.BOTTOM,
+              showClose: true,
+              blurStyle: BlurStyle.Thin,
+              backgroundColor: Color.Transparent,
+              title: { title: '主题' }
             })
+
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
             Row() {
               Text('自定义背景')
@@ -373,7 +469,7 @@ export struct SettingPage {
                 .bindSheet($$this.isCustomizeBgSheet, this.customizeBgSheet(), {
                   height: '90%',
                   dragBar: true,
-                  preferType: this.currentBreakpoint!==BreakpointTypeEnum.SM?SheetType.CENTER:SheetType.BOTTOM,
+                  preferType: this.currentBreakpoint !== BreakpointTypeEnum.SM ? SheetType.CENTER : SheetType.BOTTOM,
                   showClose: true,
                   blurStyle: BlurStyle.Thin,
                   backgroundColor: Color.Transparent,
@@ -512,7 +608,12 @@ export struct SettingPage {
           }
           .backgroundColor($r('app.color.settings_background_main'))
           .borderRadius(20)
-          .margin({ left: 0, right: 0, top: 0, bottom: 10 })
+          .margin({
+            left: 0,
+            right: 0,
+            top: 0,
+            bottom: 10
+          })
           .padding(0)
 
           // 音频设置分组
@@ -526,6 +627,7 @@ export struct SettingPage {
                 .layoutWeight(1)
             }
             .height(48)
+
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
             // 记忆播放
             Row() {
@@ -547,6 +649,7 @@ export struct SettingPage {
                 .height(30);
             }
             .height(55)
+
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
             // 默认排序模式
             Row() {
@@ -577,6 +680,7 @@ export struct SettingPage {
                 })
             }
             .height(55)
+
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
               .visibility(Visibility.None)
             // 默认排序模式
@@ -599,6 +703,7 @@ export struct SettingPage {
                 .height(30);
             }
             .height(55)
+
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
               .visibility(Visibility.None)
             Row() {
@@ -621,6 +726,7 @@ export struct SettingPage {
             }
             .height(55)
             .visibility(Visibility.None)
+
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
             // 播放背景随音乐封面
             Row() {
@@ -645,7 +751,12 @@ export struct SettingPage {
           }
           .backgroundColor($r('app.color.settings_background_main'))
           .borderRadius(20)
-          .margin({ left: 0, right: 0, top: 10, bottom: 10 })
+          .margin({
+            left: 0,
+            right: 0,
+            top: 10,
+            bottom: 10
+          })
           .padding(0)
 
           // API设置分组
@@ -659,6 +770,7 @@ export struct SettingPage {
                 .layoutWeight(1)
             }
             .height(48)
+
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
             // 歌词API
             Row() {
@@ -671,7 +783,7 @@ export struct SettingPage {
                 .fontSize(15)
                 .fontColor(Color.Gray)
                 .layoutWeight(1)
-              Image(this.isDarkMode?$r('app.media.rename2'):$r('app.media.ic_public_edit'))
+              Image(this.isDarkMode ? $r('app.media.rename2') : $r('app.media.ic_public_edit'))
                 .width(22)
                 .height(22)
                 .margin({ right: 18 })
@@ -683,6 +795,7 @@ export struct SettingPage {
               this.apiDialogController.open()
             })
             .height(55)
+
             // 封面API
             Row() {
               Text('封面:')
@@ -694,7 +807,7 @@ export struct SettingPage {
                 .fontSize(15)
                 .fontColor(Color.Gray)
                 .layoutWeight(1)
-              Image(this.isDarkMode?$r('app.media.rename2'):$r('app.media.ic_public_edit'))
+              Image(this.isDarkMode ? $r('app.media.rename2') : $r('app.media.ic_public_edit'))
                 .width(22)
                 .height(22)
                 .margin({ right: 18 })
@@ -710,7 +823,12 @@ export struct SettingPage {
           }
           .backgroundColor($r('app.color.settings_background_main'))
           .borderRadius(20)
-          .margin({ left: 0, right: 0, top: 10, bottom: 20 })
+          .margin({
+            left: 0,
+            right: 0,
+            top: 10,
+            bottom: 20
+          })
           .padding(0)
 
           //空白
@@ -719,14 +837,18 @@ export struct SettingPage {
               .height(88)
           }.height(88)
         }
-        .margin({ left: this.currentBreakpoint !== BreakpointTypeEnum.SM?35:20,
-          right: this.currentBreakpoint !== BreakpointTypeEnum.SM?35:20, top: 20, bottom: 20 })
+        .margin({
+          left: this.currentBreakpoint !== BreakpointTypeEnum.SM ? 35 : 20,
+          right: this.currentBreakpoint !== BreakpointTypeEnum.SM ? 35 : 20,
+          top: 20,
+          bottom: 20
+        })
         .justifyContent(FlexAlign.Start)
       }
       .scrollBar(BarState.Auto)
-      .height(px2vp(DisplayUtil.getHeight()-AppUtil.getStatusBarHeight()-AppUtil.getNavigationIndicatorHeight()))
+      .height(px2vp(DisplayUtil.getHeight() - AppUtil.getStatusBarHeight() - AppUtil.getNavigationIndicatorHeight()))
       .width('100%')
-      .margin({bottom:10})
+      .margin({ bottom: 10 })
       .backgroundColor($r('app.color.settings_background'))
     }
 
@@ -735,7 +857,7 @@ export struct SettingPage {
   }
 
   //发送广播通知更新UI
-  sendChangeEvent(){
+  sendChangeEvent() {
     const eventData: emitter.EventData = {};
     emitter.emit({ eventId: 333 }, eventData); // 发送音频广播通知更新doSwipBack
   }
@@ -757,7 +879,7 @@ export struct SettingPage {
       let file = fileIo.openSync(selectUris[0], fileIo.OpenMode.READ_ONLY);
       console.info('file fd: ' + file.fd);
       const timestamp: number = Math.floor(Date.now() / 1000);
-      let name = timestamp+"_homebg"
+      let name = timestamp + "_homebg"
       let imagePath = this.context.filesDir + FileUtil.separator + name
       imagePath = fileUri.getUriFromPath(imagePath)
       let file2 = fileIo.openSync(imagePath, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE)
@@ -789,18 +911,19 @@ export struct SettingPage {
     .width('100%')
     .height('100%')
   }
+
   @Builder
   CustomizeBg() {
     Column() {
-      Image( this.customizeBgPath)
+      Image(this.customizeBgPath)
         .height('42%')
         .alt($r('app.color.white'))
-        .objectFit( ImageFit.Contain)
+        .objectFit(ImageFit.Contain)
         .borderRadius(20)
         .clip(true)
         .blur(this.blurValue)
-        .brightness(this.bgBrightness+0.8)
-        .margin({left:30,right:30,bottom:20 })
+        .brightness(this.bgBrightness + 0.8)
+        .margin({ left: 30, right: 30, bottom: 20 })
 
       Row() {
 
@@ -828,7 +951,7 @@ export struct SettingPage {
       }
       .width('100%')
       .height(58)
-      .margin({ bottom:20 })
+      .margin({ bottom: 20 })
 
       Column() {
         Row() {
@@ -856,7 +979,12 @@ export struct SettingPage {
       }
       .backgroundColor($r('app.color.settings_background_main'))
       .borderRadius(15)
-      .margin({ left: 30, right: 30, top: 0, bottom: 20 })
+      .margin({
+        left: 30,
+        right: 30,
+        top: 0,
+        bottom: 20
+      })
       .padding(0)
 
       Column() {
@@ -888,8 +1016,14 @@ export struct SettingPage {
       }
       .backgroundColor($r('app.color.settings_background_main'))
       .borderRadius(15)
-      .margin({ left: 30, right: 30, top: 0, bottom: 20 })
+      .margin({
+        left: 30,
+        right: 30,
+        top: 0,
+        bottom: 20
+      })
       .padding(0)
+
       Column() {
         Row() {
           Text('背景亮度:')
@@ -919,25 +1053,36 @@ export struct SettingPage {
       }
       .backgroundColor($r('app.color.settings_background_main'))
       .borderRadius(15)
-      .margin({ left: 30, right: 30, top: 0, bottom: 20 })
+      .margin({
+        left: 30,
+        right: 30,
+        top: 0,
+        bottom: 20
+      })
       .padding(0)
 
     }
     .margin({ bottom: 30 })
   }
+}
 
-  public static THEME_COLOR_KEY: string = 'THEME_COLOR';
-  public static THEME_COLOR_LIST: Array<string> = [
-    '#FF4081', // 粉
-    '#0A59F7', // 蓝
-    '#64BB5C', // 绿
-    '#ED6F21', // 橙
-    '#5BA854', // 青
-    '#9C27B0', // 紫
-    '#F44336', // 红
-    '#00BCD4', // 蓝绿
-    '#FFC107', // 黄
-    '#607D8B'  // 灰蓝
-  ];
+// 主题色类型声明
+export interface ThemeColorItem {
+  name: string;
+  color: string;
+}
 
+// 工具函数：将一维数组分成每行2个的二维数组
+function chunkArray<T>(arr: Array<T>, size: number): Array<Array<T>> {
+  const result: Array<Array<T>> = [];
+  for (let i = 0; i < arr.length; i += size) {
+    const row: Array<T> = [];
+    for (let j = 0; j < size; j++) {
+      if (i + j < arr.length) {
+        row.push(arr[i + j]);
+      }
+    }
+    result.push(row);
+  }
+  return result;
 }