半模态配置主题

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

@@ -45,14 +45,22 @@ export struct SettingPage {
   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: '#0A59F7' },
+    { name: '活力黄', color: '#FFC107' },
     { name: '枫叶红', color: '#F44336' },
-    { name: '活力粉', color: '#FF4081' },
-    { name: '闪电紫', color: '#9C27B0' },
-    { name: '宝石绿', color: '#64BB5C' },
-    { name: '草木青', color: '#00BCD4' },
-    { name: '自定义', color: '#607D8B' }
+    { name: '玫瑰粉', color: '#FF4081' },
+    { name: '幻影紫', color: '#9C27B0' },
+    { name: '翡翠绿', color: '#64BB5C' },
+    { name: '竹青蓝', color: '#00BCD4' },
+    { name: '深空灰', color: '#607D8B' },
+    { name: '橙霞橙', color: '#FF9800' },
+    { name: '湖水蓝', color: '#00BFFF' },
+    { name: '柠檬绿', color: '#C6FF00' },
+    { name: '樱花粉', color: '#FF69B4' },
+    { name: '暮夜蓝', color: '#283593' },
+    { name: '薄荷青', color: '#1DE9B6' },
+    { name: '银沙灰', color: '#B0BEC5' },
+    { name: '自定义', color: '#ffecec' }
   ];
   @State showApiDialog: boolean = false
   @State tempApiUrl: string = ''
@@ -252,10 +260,8 @@ export struct SettingPage {
   @Builder
   themeSheetBuilder() {
     Column() {
-
       // 颜色模式分组卡片
       Column() {
-
         Row({ space: 36 }) {
           Text('颜色模式')
             .fontSize(15)
@@ -314,7 +320,7 @@ export struct SettingPage {
         Text('主题色')
           .fontSize(15)
           .fontWeight(500)
-          .margin({ left: 12, top: 8, bottom: 12 })
+          .margin({ left: 12 })
         Column() {
           ForEach(this.colorRows, (row: Array<ThemeColorItem>, rowIdx: number) => {
             Row() {
@@ -324,7 +330,7 @@ export struct SettingPage {
                     Blank()
                       .width(22)
                       .height(22)
-                      .backgroundColor(item.color)
+                      .backgroundColor(item.name === '自定义' && this.isCustomThemeColor() ? this.themeColor : item.color)
                       .border({ width: 2, color:$r('app.color.text_color')})
                       .borderRadius(11)
                     Text(item.name)
@@ -337,7 +343,11 @@ export struct SettingPage {
                 }
                 .width(120)
                 .height(40)
-                .backgroundColor(this.themeColor === item.color ? item.color : $r('app.color.settings_background_main'))
+                .backgroundColor(
+                  (item.name === '自定义' && this.isCustomThemeColor()) || this.themeColor === item.color
+                    ? this.themeColor
+                    : $r('app.color.settings_background_main')
+                )
                 .borderRadius(20)
                 .onClick(() => {
                   if (item.name === '自定义') {
@@ -373,6 +383,13 @@ export struct SettingPage {
         bottom: 18
       })
       .padding({ top: 18, bottom: 18 })
+
+      // 主题色自定义弹窗
+      IBestPopup({
+        visible: $showColorPicker,
+        popupWidth: 320,
+        contentBuilder: (): void => this.pickerBuilder()
+      })
     }
     .padding({ top: 8, bottom: 8 })
     .width('90%')
@@ -446,7 +463,12 @@ export struct SettingPage {
             }
             .height(55)
             .onClick(() => {
-              this.isThemeSheet = true
+              this.showColorPicker = false;
+              this.isThemeSheet = true;
+              // 如果当前颜色是自定义，则同步到自定义色块
+              // if (this.isCustomThemeColor()) {
+                this.customColor = this.themeColor;
+              // }
             })
             .bindSheet($$this.isThemeSheet, this.themeSheetBuilder(), {
               height: '90%',
@@ -455,7 +477,11 @@ export struct SettingPage {
               showClose: true,
               blurStyle: BlurStyle.Thin,
               backgroundColor: Color.Transparent,
-              title: { title: '主题' }
+              title: { title: '主题' },
+              shouldDismiss:(SheetDismiss:SheetDismiss)=>{
+                SheetDismiss.dismiss();
+                this.showColorPicker = false;
+              }
             })
 
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
@@ -1064,6 +1090,16 @@ export struct SettingPage {
     }
     .margin({ bottom: 30 })
   }
+
+  // 判断当前主题色是否为自定义色
+  isCustomThemeColor(): boolean {
+    for (let i = 0; i < SettingPage.THEME_COLOR_LIST.length - 1; i++) {
+      if (SettingPage.THEME_COLOR_LIST[i].color === this.themeColor) {
+        return false;
+      }
+    }
+    return true;
+  }
 }
 
 // 主题色类型声明