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

import TitleBar from '../view/TitleBar'
import { promptAction, router } from '@kit.ArkUI'
import { CommonConstants } from '../common/constants/CommonConstants'
import { AppUtil, PreferencesUtil } from '@pura/harmony-utils'
import { CustomContentDialog } from '@kit.ArkUI'
import ConfigurationConstant from '@ohos.app.ability.ConfigurationConstant';
import common from '@ohos.app.ability.common';

@Preview
@Entry
@Component
export struct SettingPage {
  @State showApiDialog: boolean = false
  @State tempApiUrl: string = ''
  @State lyricApiUrl: string = PreferencesUtil.getStringSync('LRC_API', '')
  @State isBgPlayOpen: boolean = true //是否启用后台播放
  @State isAutoRatate: boolean = true //是否启用自动横竖屏
  @State isMemoryPlay: boolean = true //是否启用记忆播放
  @State isMediacodec: boolean = false //是否启用硬件解码
  @State isMusicMemoryPlay: boolean = false //是否启用记忆播放
  @State isMusicBGCover: boolean = true //播放背景随封面
  @State sortType: number = 4 //默认排序方式
  @State showCoverApiDialog: boolean = false
  @State tempCoverApiUrl: string = ''
  @State coverApiUrl: string = PreferencesUtil.getStringSync('COVER_API', '')
  @State apiDialogType: 'lyric' | 'cover' = 'lyric'
  static readonly SORT_TYPE: string = 'musicSortType';
  @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_DARK_MODE: string = 'isDarkMode'; // 深色模式设置
  @State titleBarModel: TitleBar.Model = new TitleBar.Model()
    .setTitleTextStyle(FontStyle.Normal)
    .setTitleBarStyle(TitleBar.BarStyle.TRANSPARENT)
    .setLeftIcon($r('app.media.left_back_white'))
    .setTitleName('通用设置')
    .setTitleFontColor(Color.White)
    .setTitleBarBackground($r('app.color.tab_item_bg'))
    .setLeftTitleBackground($r('app.color.tab_item_bg'))
    .setTitleBarBottomLineColor($r('app.color.tab_item_bg'))
    .setOnLeftClickListener(() => {
      router.back()
    })
    .setTitleBarMinHeight(44)
    .setTitleBarNormalPadding(0)
  @State verName: string = ''

  apiDialogController: CustomDialogController = new CustomDialogController({
    builder: CustomContentDialog({
      primaryTitle: this.apiDialogType === 'lyric' ? '修改歌词API地址' : '修改封面API地址',
      contentBuilder: () => {
        this.buildApiDialogContent();
      },
      buttons: [
        {
          value: '取消',
          action: () => {
            this.apiDialogController.close();
          }
        },
        {
          value: '保存',
          action: () => {
            if (this.apiDialogType === 'lyric') {
              this.lyricApiUrl = this.tempApiUrl
              PreferencesUtil.put('LRC_API', this.lyricApiUrl)
              this.getUIContext().getPromptAction().showToast({
                message: '保存成功，当前LRC_API:' + this.lyricApiUrl,
                duration: 2000,
                showMode: promptAction.ToastShowMode.TOP_MOST,
                bottom: 85
              })
            } else {
              this.coverApiUrl = this.tempApiUrl
              PreferencesUtil.put('COVER_API', this.coverApiUrl)
              this.getUIContext().getPromptAction().showToast({
                message: '保存成功，当前COVER_API:' + this.coverApiUrl,
                duration: 2000,
                showMode: promptAction.ToastShowMode.TOP_MOST,
                bottom: 85
              })
            }
            this.apiDialogController.close();
          }
        }
      ]
    }),
    autoCancel: true,
    alignment: DialogAlignment.Center
  })

  @Builder
  buildApiDialogContent() {
    Column() {
      TextInput({ text: this.tempApiUrl, placeholder: this.apiDialogType === 'lyric' ? '请输入歌词API地址' : '请输入封面API地址' })
        .onChange((val: string) => {
          this.tempApiUrl = val
        })
        .width('90%')
        .height(60)
    }
    .width('100%')
  }

  // 组件生命周期
  aboutToAppear() {
    this.isBgPlayOpen = PreferencesUtil.getBooleanSync(SettingPage.IS_BGPLAY_OPEN, true)
    this.isAutoRatate = PreferencesUtil.getBooleanSync(SettingPage.IS_AUTO_RATATE, true)
    this.isMemoryPlay = PreferencesUtil.getBooleanSync(SettingPage.iS_MEMORY_PLAY, true)
    this.isMediacodec = PreferencesUtil.getBooleanSync(SettingPage.IS_MIDIACODEC_OPEN, false)
    this.isMusicMemoryPlay = PreferencesUtil.getBooleanSync(SettingPage.iS_MUSIC_MEMORY_PLAY, false)
    this.isMusicBGCover = PreferencesUtil.getBooleanSync(SettingPage.iS_MUSIC_BG_COVER, true)

    // 从持久化存储中读取深色模式设置
    const savedDarkMode = PreferencesUtil.getBooleanSync(SettingPage.IS_DARK_MODE, false);
    this.isDarkMode = savedDarkMode;
    this.currentMode = savedDarkMode ? ConfigurationConstant.ColorMode.COLOR_MODE_DARK : ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT;
    AppStorage.setOrCreate('currentColorMode', this.currentMode);
    AppStorage.setOrCreate('isDarkMode', this.isDarkMode);
  }

  // 监听颜色模式变化
  onColorModeChange(): void {
    this.isDarkMode = this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK;
    AppStorage.setOrCreate('isDarkMode', this.isDarkMode);
    // 保存深色模式设置到持久化存储
    PreferencesUtil.putSync(SettingPage.IS_DARK_MODE, this.isDarkMode);
  }

  // 切换深色模式
  async toggleDarkMode(checked: boolean) {
    try {
      const newMode = checked ? ConfigurationConstant.ColorMode.COLOR_MODE_DARK : ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT;

      // 更新 AppStorage 中的颜色模式
      AppStorage.setOrCreate('currentColorMode', newMode);
      AppStorage.setOrCreate('isDarkMode', checked);

      // 保存深色模式设置到持久化存储
      PreferencesUtil.putSync(SettingPage.IS_DARK_MODE, checked);

      // 通知系统更新颜色模式
      const context = getContext(this) as common.UIAbilityContext;
      context.getApplicationContext().setColorMode(newMode);

      // 显示提示
      this.getUIContext().getPromptAction().showToast({
        message: checked ? '已切换到深色模式' : '已切换到浅色模式',
        duration: 2000,
        showMode: promptAction.ToastShowMode.TOP_MOST,
        bottom: 85
      });
    } catch (err) {
      console.error('Failed to update color mode:', err);
    }
  }

  // 组件生命周期
  aboutToDisappear() {
    // 无需处理apiDialogController
  }

  build() {
    Column() {
      TitleBar({ model: $titleBarModel })
      Scroll() {
        Column() {
          // 主题设置分组
          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.tab_item_bg'))
                .switchPointColor(Color.White)
                .margin({ right: 18 })
                .onChange((checked: boolean) => {
                  this.toggleDarkMode(checked);
                })
                .width(50)
                .height(30);
            }
            .height(55)
          }
          .backgroundColor($r('app.color.settings_background_main'))
          .borderRadius(20)
          .margin({ left: 0, right: 0, top: 0, bottom: 10 })
          .padding(0)

          // 音频设置分组
          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.tab_item_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.tab_item_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)
          }
          .backgroundColor($r('app.color.settings_background_main'))
          .borderRadius(20)
          .margin({ left: 0, right: 0, top: 0, bottom: 10 })
          .padding(0)

          // 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)
          }
          .backgroundColor($r('app.color.settings_background_main'))
          .borderRadius(20)
          .margin({ left: 0, right: 0, top: 0, bottom: 10 })
          .padding(0)
        }
        .margin({ left: 25, right: 25, top: 2, bottom: 30 })
        .justifyContent(FlexAlign.Start)
      }
      .scrollBar(BarState.Auto)
      .height('100%')
      .width('100%')
      .margin({bottom:18})
    }
    .backgroundColor($r('app.color.settings_background'))
    .height('100%')
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
  }
}