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, DeviceUtil, DisplayUtil, ToastUtil } from '@pura/harmony-utils'
import { Utility } from '../common/util/Utility'
import { common, ConfigurationConstant } from '@kit.AbilityKit'
import { BreakpointTypeEnum } from '../common/util/BreakpointSystem'
import { resourceManager } from '@kit.LocalizationKit'
import { PreferencesUtil } from '@pura/harmony-utils'
import { hilog } from '@kit.PerformanceAnalysisKit'
import { BusinessError } from '@kit.BasicServicesKit'

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

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

  @StorageProp('themeColor') themeColor: string = CommonConstants.DEFAULT_THEME_COLOR;

  onColorModeChange() {
    this.isDarkMode = this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK
  }

  @State verName:string = ''
  @State appName:string = ''
  @StorageProp('topRectHeight') topRectHeight: number = px2vp(AppUtil.getStatusBarHeight());

  // 组件生命周期
  aboutToAppear() {
    // Utility.disableFullScreen()
    this.topRectHeight = px2vp(AppUtil.getStatusBarHeight());
    this.verName =  AppUtil.getVersionName()
    Utility.getAppName(getContext(this)).then((appName:string)=>{
      this.appName = appName
    })
    let themeColor = PreferencesUtil.getStringSync('THEME_COLOR', CommonConstants.DEFAULT_THEME_COLOR);
    AppStorage.setOrCreate('themeColor', themeColor);
    this.themeColor = themeColor;
    this.onColorModeChange()
    console.info('LifeCycleComponent aboutToAppear');
  }

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


  // 工具函数：hex转hsl、hsl转hex、生成渐变色
   hexToHsl(hex: string): [number, number, number] {
    hex = hex.replace('#', '');
    let r = parseInt(hex.substring(0,2), 16) / 255;
    let g = parseInt(hex.substring(2,4), 16) / 255;
    let b = parseInt(hex.substring(4,6), 16) / 255;
    let max = Math.max(r, g, b), min = Math.min(r, g, b);
    let h = 0, s = 0, l = (max + min) / 2;
    if(max !== min){
      let d = max - min;
      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
      switch(max){
        case r: h = (g - b) / d + (g < b ? 6 : 0); break;
        case g: h = (b - r) / d + 2; break;
        case b: h = (r - g) / d + 4; break;
      }
      h = h * 60;
    }
    return [h, s, l];
  }
   hslToHex(h: number, s: number, l: number): string {
    let c = (1 - Math.abs(2 * l - 1)) * s;
    let x = c * (1 - Math.abs((h / 60) % 2 - 1));
    let m = l - c/2;
    let r=0, g=0, b=0;
    if (0 <= h && h < 60) { r = c; g = x; b = 0; }
    else if (60 <= h && h < 120) { r = x; g = c; b = 0; }
    else if (120 <= h && h < 180) { r = 0; g = c; b = x; }
    else if (180 <= h && h < 240) { r = 0; g = x; b = c; }
    else if (240 <= h && h < 300) { r = x; g = 0; b = c; }
    else if (300 <= h && h < 360) { r = c; g = 0; b = x; }
    let toHex = (v: number) => Math.round((v + m) * 255).toString(16).padStart(2, '0');
    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
  }
   getGradientColor(themeColor: string, offset: number = 40): string {
     let hsl = this.hexToHsl(themeColor);
     let h = hsl[0];
     let s = hsl[1];
     let l = hsl[2];
     h = (h + offset) % 360;
    return this.hslToHex(h, s, l);
  }

  build() {
    Column(){

      // 顶部安全区和自定义标题栏
      Column() {
        // 顶部安全区
        Blank()
          .height(this.topRectHeight)
          .backgroundColor(this.isDarkMode?$r('app.color.title_bar_bg'):this.themeColor)
          .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
        // 自定义标题栏（Stack实现绝对居中）
        Stack() {
          // 居中标题
          Text('关于我们')
            .fontSize(18)
            .fontColor(Color.White)
            .align(Alignment.Center)
          // 左右按钮
          Row() {
            Image($r('app.media.left_back_white'))
              .width(26)
              .height(26)
              .margin({ left: 12, right: 8 })
              .onClick(() => {
                this.getUIContext()?.animateTo({ duration: 555 }, () => {
                  // 动画闭包内控制Image组件的出现和消失
                  // this.isShowDrawer = !this.isShowDrawer
                  // this.offsetX = 0
                  this.mType =0
                })
              })
            Blank().flexGrow(1)
            Blank().width(32)
          }
          .height(48)
          .width('100%')
          .alignItems(VerticalAlign.Center)
        }
        .height(48)
        .width('100%')
        .backgroundColor(this.isDarkMode?$r('app.color.title_bar_bg'):this.themeColor)
      }
      Scroll(){

        Column(){

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

          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(17)
            .margin({top:10,bottom:10})
            .onClick(()=>{
                let context = this.getUIContext().getHostContext() as common.UIAbilityContext;
                context.openLink(CommonConstants.ICP_URL, {})
            })

          Button('用户协议', { type: ButtonType.Capsule, stateEffect: false })
            .width(this.currentBreakpoint !== BreakpointTypeEnum.SM?'25%':'60%')
            .height(55)
            .margin({top:10,bottom:10})
            .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.7})
            .stateEffect(true)
            .backgroundColor(this.themeColor)
            .onClick(()=>{
              router.pushUrl({
                url: 'pages/WebIndex',
                params: { titleName: '用户协议', webUrl: CommonConstants.NEW_DUTY }
              });
            })
          Button('隐私政策', { type: ButtonType.Capsule, stateEffect: false })
            .width(this.currentBreakpoint !== BreakpointTypeEnum.SM?'25%':'60%')
            .height(55)
            .margin({top:10,bottom:10})
            .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.7})
            .stateEffect(true)
            .backgroundColor(this.themeColor)
            .onClick(()=>{
              router.pushUrl({
                url: 'pages/WebIndex',
                params: { titleName: '隐私政策', webUrl: CommonConstants.NEW_YS_HW }
              });
            })

          Button('音频标签', { type: ButtonType.Capsule, stateEffect: false })
            .width(this.currentBreakpoint !== BreakpointTypeEnum.SM?'25%':'60%')
            .height(55)
            .margin({top:10,bottom:10})
            .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.7})
            .stateEffect(true)
            .backgroundColor(this.themeColor)
            .onClick(()=>{
              Utility.gotoMarket(getContext(this) as common.UIAbilityContext, 'com.xgplayer.ttmusic.tags')
            })

          Button('视频播放器', { type: ButtonType.Capsule, stateEffect: false })
            .width(this.currentBreakpoint !== BreakpointTypeEnum.SM?'25%':'60%')
            .height(55)
            .margin({top:10,bottom:10})
            .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.7})
            .stateEffect(true)
            .backgroundColor(this.themeColor)
            .onClick(()=>{
              Utility.gotoMarket(getContext(this) as common.UIAbilityContext, 'com.kuaiyao.kdb.hm')
            })

          Button('粉丝QQ群', { type: ButtonType.Capsule, stateEffect: false })
            .width(this.currentBreakpoint !== BreakpointTypeEnum.SM?'25%':'60%')
            .height(55)
            .margin({top:10,bottom:20})
            .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.7})
            .stateEffect(true)
            .backgroundColor(this.themeColor)
            .onClick(()=>{
              ToastUtil.showToast('复制群号成功！')
              Utility.copyText('685109858')
              const qqUrl = `mqqapi://card/show_pslcard?src_type=internal&version=1&uin=${CommonConstants.QQ_GROUP}&card_type=group&source=external`;
              let context = this.getUIContext().getHostContext() as common.UIAbilityContext;
              context.openLink(qqUrl, {})
            })

          Button('用户反馈', { type: ButtonType.Capsule, stateEffect: false })
            .width(this.currentBreakpoint !== BreakpointTypeEnum.SM?'25%':'60%')
            .height(55)
            .stateEffect(true)
            .margin({bottom:20})
            .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.7})
            .backgroundColor(this.themeColor)
            .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)
                  }
                }
              })
            })
        }
        .justifyContent(FlexAlign.Start)
        .width('100%')

      }
      .layoutWeight(1)
      .transition(TransitionEffect.move(TransitionEdge.BOTTOM)
        .animation({ duration: 380, curve: Curve.Ease,delay:50 }))
      .backgroundColor(this.isDarkMode?Color.Black:this.themeColor)
      .linearGradient(!this.isDarkMode ? {colors:[[this.themeColor, 0.0], [this.getGradientColor(this.themeColor, 40), 0.6]]} : undefined)
    }
    .layoutWeight(1)
    .width('100%')
    .height('100%')
  }
}