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

import TitleBar from '../view/TitleBar'
import { router } from '@kit.ArkUI'
import { CommonConstants } from '../common/constants/CommonConstants'
import { AppUtil, ToastUtil } from '@pura/harmony-utils'
import { Utility } from '../common/util/Utility'
import { ConfigurationConstant } from '@kit.AbilityKit'
import { BreakpointTypeEnum } from '../common/util/BreakpointSystem'

@Preview
@Entry
@Component
export struct AboutPage{
  @State isDarkMode: boolean = false
  @StorageProp('currentColorMode') @Watch('onColorModeChange') currentMode: number =
    ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT;

  /** 当前断点类型（如大屏/小屏） */
  @StorageProp('currentBreakpoint') currentBreakpoint: string = BreakpointTypeEnum.MD;

  onColorModeChange() {
    this.isDarkMode = this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK
    this.titleBarModel.setTitleFontColor($r('app.color.title_text'))
      .setTitleBarBackground($r('app.color.title_bar_bg'))
      .setLeftTitleBackground($r('app.color.title_bar_bg'))
  }

  @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.title_bar_bg'))
    .setLeftTitleBackground($r('app.color.title_bar_bg'))
    .setTitleBarBottomLineColor($r('app.color.title_bar_bg'))
    .setOnLeftClickListener(() => {
      router.back()
    })
  @State verName:string = ''
  @State appName:string = ''

  // 组件生命周期
  aboutToAppear() {
    // Utility.disableFullScreen()
    this.verName =  AppUtil.getVersionName()
    Utility.getAppName(getContext(this)).then((appName:string)=>{
      this.appName = appName
    })
    this.onColorModeChange()
    console.info('LifeCycleComponent aboutToAppear');
  }

  // 组件生命周期
  aboutToDisappear() {
    console.info('LifeCycleComponent aboutToDisappear');
  }

  build() {
    Column(){
      Column(){
        Line().width('100%').height('100%')
      }
      .height(this.currentBreakpoint !== BreakpointTypeEnum.SM?0:CommonConstants.TOP_HEIGHT)
      .backgroundColor($r('app.color.title_bar_bg'))
      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])

      TitleBar({model:$titleBarModel})
      Scroll(){
        Column(){
          Image($r('app.media.icon'))
            .width(150)
            .height(150)
            .borderRadius('100%')
            .clip(true)
            .margin({top:55})
          Text(this.appName+'V:'+this.verName)
            .fontColor(this.isDarkMode ? Color.White : Color.Black)
            .fontWeight(480)
            .fontSize(17)
            .margin({top:20,bottom:20})

          Text(CommonConstants.ICP_NO)
            .fontColor(this.isDarkMode ? Color.White : Color.Black)
            .fontWeight(480)
            .decoration({ type: TextDecorationType.Underline, color: this.isDarkMode ? Color.White : Color.Black })
            .fontSize(18)
            .margin({top:20,bottom:20})
            .onClick(()=>{
              router.pushUrl({url:'pages/WebIndex',
                params:{ titleName:'ICP备案',webUrl:CommonConstants.ICP_URL}
              });
            })

          Button('加入Q群：685109858', { type: ButtonType.Capsule, stateEffect: false })
            .width('60%')
            .height(55)
            .margin({top:50,bottom:20})
              // .visibility(Visibility.None)
            .stateEffect(true)
            .backgroundColor(this.isDarkMode ? '#1E90FF' : '#FF4081')
            .stateStyles({
              pressed: { opacity: 0.6 }
            })
            .onClick(()=>{
              ToastUtil.showToast('复制群号成功！')
              Utility.copyText('685109858')
            })

          Button('用户反馈', { type: ButtonType.Capsule, stateEffect: false })
            .width('60%')
            .height(55)
            .stateEffect(true)
            .margin({bottom:20})
            .backgroundColor(this.isDarkMode ? '#1E90FF' : '#FF4081')
            .stateStyles({
              pressed: { opacity: 0.6 }
            })
            .onClick(()=>{
              AlertDialog.show({
                title:'发送邮件',
                message:'感谢你的支持，如果有什么不支持的格式不能播放请反馈给我们修复，谢谢！有建议和反馈的请邮件联系我们：'+CommonConstants.CONTACT_MAIL,
                autoCancel:true,
                alignment:DialogAlignment.Center,
                offset:{dx:0,dy:-20},
                confirm:{
                  value:'确定',
                  fontColor:Color.White,
                  backgroundColor:$r('app.color.title_bar_bg'),
                  action:()=>{
                    ToastUtil.showToast('复制邮件地址成功！')
                    Utility.copyText(CommonConstants.CONTACT_MAIL)
                  }
                }
              })
            })
        }
        .height('95%')
        .width('100%')
      }
      .height('100%')
      .backgroundColor(this.isDarkMode ? '#1A1A1A' : undefined)
      .linearGradient(!this.isDarkMode ? {colors:[['#FF4081', 0.0], ['#FF8C00', 0.6]]} : undefined)
    }
  }
}