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'
import { systemShare } from '@kit.ShareKit'
import { uniformTypeDescriptor } from '@kit.ArkData'

@Preview
// @Entry
@Component
export struct AboutPage{
  context = this.getUIContext().getHostContext() as common.UIAbilityContext
  /** 应用包名 */
  @State bundleName: string = ''
  @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
    })
    this.bundleName = AppUtil.getBundleName()
    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(13)
            .margin({top:10,bottom:10})
            .onClick(()=>{
                let context = this.getUIContext().getHostContext() as common.UIAbilityContext;
                context.openLink(CommonConstants.ICP_URL, {})
            })

          this.aboutItemView()

        }
        .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, 50), 0.6]]} : undefined)
    }
    .layoutWeight(1)
    .width('100%')
    .height('100%')
  }

  @Builder
  aboutItemView(){
    Column() {

      //分享给朋友
      Button({ type: ButtonType.Capsule, stateEffect: true }) {
        Row() {
          SymbolGlyph($r('sys.symbol.share'))
            .fontSize(22)
            .fontColor(['#06B4FD'])
            .alignSelf(ItemAlign.Center)
            .margin({ left: 28 })
          Text('分享给朋友')
            .margin({ left: 10, right: 20 })
            .fontSize(15)
            .layoutWeight(1)
            .fontColor($r('app.color.text_color'))
            .fontWeight(480)
            .id('text_update')
          Blank()
          Image($r('app.media.arrow_right'))
            .width(22)
            .height(22)
            .margin({ left: 20, right: 20 })
            .align(Alignment.Center)

        }
      }
      .backgroundColor(Color.Transparent)
      .clickEffect({ level: ClickEffectLevel.MIDDLE,scale:0.9 })
      .width('100%')
      .height(55)
      .onClick(async () => {
        gotoShare(this.context,this.appName,this.bundleName)

      })


      Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))



      //用户协议
      Button({ type: ButtonType.Capsule, stateEffect: true }) {
        Row() {
          Image($r('app.media.hm_persion'))
            .width(22)
            .height(22)
            .alignSelf(ItemAlign.Center)
            .margin({ left: 28 })
          Text('用户协议')
            .margin({ left: 10, right: 20 })
            .fontSize(15)
            .layoutWeight(1)
            .fontColor($r('app.color.text_color'))
            .fontWeight(480)
            .id('text_update')
          Blank()
          Image($r('app.media.arrow_right'))
            .width(22)
            .height(22)
            .margin({ left: 20, right: 20 })

        }
      }
      .backgroundColor(Color.Transparent)
      .clickEffect({ level: ClickEffectLevel.MIDDLE,scale:0.9 })
      .width('100%')
      .height(55)
      .onClick(() => {
        router.pushUrl({
          url: 'pages/WebIndex',
          params: { titleName: '用户协议', webUrl: CommonConstants.NEW_DUTY }
        });
      })

      Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))


      //隐私政策
      Button({ type: ButtonType.Capsule, stateEffect: true }) {
        Row() {
          Image($r('app.media.hm_version'))
            .width(22)
            .height(22)
            .alignSelf(ItemAlign.Center)
            .margin({ left: 28 })
          Text('隐私政策')
            .margin({ left: 10, right: 20 })
            .fontSize(15)
            .layoutWeight(1)
            .fontColor($r('app.color.text_color'))
            .fontWeight(480)
            .id('text_update')
          Blank()
          Image($r('app.media.arrow_right'))
            .width(22)
            .height(22)
            .margin({ left: 20, right: 20 })

        }
      }
      .backgroundColor(Color.Transparent)
      .clickEffect({ level: ClickEffectLevel.MIDDLE,scale:0.9 })
      .width('100%')
      .height(55)
      .onClick(() => {
        router.pushUrl({
          url: 'pages/WebIndex',
          params: { titleName: '隐私政策', webUrl: CommonConstants.NEW_YS_HW }
        });
      })

      Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))


      //给个好评
      Button({ type: ButtonType.Capsule, stateEffect: true }) {
        Row() {
          Image($r('app.media.hm_flower'))
            .width(22)
            .height(22)
            .alignSelf(ItemAlign.Center)
            .margin({ left: 28 })
          Text('给个好评')
            .margin({ left: 10, right: 20 })
            .fontSize(15)
            .layoutWeight(1)
            .fontColor($r('app.color.text_color'))
            .fontWeight(480)
            .id('text_update')
          Blank()
          Image($r('app.media.arrow_right'))
            .width(22)
            .height(22)
            .margin({ left: 20, right: 20 })
        }
      }
      .backgroundColor(Color.Transparent)
      .clickEffect({ level: ClickEffectLevel.MIDDLE,scale:0.9 })
      .width('100%')
      .height(55)
      .onClick(() => {
        Utility.gotoMarket(this.context, this.bundleName)
      })

      Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))

      Button({ type: ButtonType.Capsule, stateEffect: true }) {
        Row() {
          SymbolGlyph($r('sys.symbol.music'))
            .fontSize(22)
            .fontColor(['#06B4FD'])
            .alignSelf(ItemAlign.Center)
            .margin({ left: 28 })
          Text('音频标签')
            .margin({ left: 10, right: 20 })
            .fontSize(15)
            .layoutWeight(1)
            .fontColor($r('app.color.text_color'))
            .fontWeight(480)
            .id('text_update')
          Blank()
          Image($r('app.media.arrow_right'))
            .width(22)
            .height(22)
            .margin({ left: 20, right: 20 })
        }
      }
      .backgroundColor(Color.Transparent)
      .clickEffect({ level: ClickEffectLevel.MIDDLE,scale:0.9 })
      .width('100%')
      .height(55)
      .onClick(() => {
        Utility.gotoMarket(this.context, 'com.xgplayer.ttmusic.tags')
      })
      Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))

      Button({ type: ButtonType.Capsule, stateEffect: true }) {
        Row() {
          SymbolGlyph($r('sys.symbol.media_center'))
            .fontSize(22)
            .fontColor(['#06B4FD'])
            .alignSelf(ItemAlign.Center)
            .margin({ left: 28 })
          Text('视频播放器')
            .margin({ left: 10, right: 20 })
            .fontSize(15)
            .layoutWeight(1)
            .fontColor($r('app.color.text_color'))
            .fontWeight(480)
            .id('text_update')
          Blank()
          Image($r('app.media.arrow_right'))
            .width(22)
            .height(22)
            .margin({ left: 20, right: 20 })
        }
      }
      .backgroundColor(Color.Transparent)
      .clickEffect({ level: ClickEffectLevel.MIDDLE,scale:0.9 })
      .width('100%')
      .height(55)
      .onClick(() => {
        Utility.gotoMarket(this.context, 'com.kuaiyao.kdb.hm')
      })


      Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))

      //关于我们
      Button({ type: ButtonType.Capsule, stateEffect: true }) {
        Row() {
          SymbolGlyph($r('sys.symbol.person_2'))
            .fontSize(22)
            .fontColor(['#06B4FD'])
            .alignSelf(ItemAlign.Center)
            .margin({ left: 28 })
          Text('粉丝Q群(用户反馈)')
            .margin({ left: 10, right: 20 })
            .fontSize(15)
            .layoutWeight(1)
            .fontColor($r('app.color.text_color'))
            .fontWeight(480)
            .id('text_update')
          Blank()
          Image($r('app.media.arrow_right'))
            .width(22)
            .height(22)
            .margin({ left: 20, right: 20 })

        }
      }
      .backgroundColor(Color.Transparent)
      .clickEffect({ level: ClickEffectLevel.MIDDLE,scale:0.9 })
      .width('100%')
      .height(55)
      .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, {})
      })


      // Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))


    }
    .backgroundColor($r('app.color.silvery'))
    .opacity(0.7)
    .margin({left:20,right:20,top:20,bottom:10})
    .borderRadius(30)


  }
}

export async function gotoShare(mContext: common.UIAbilityContext,appName:string, bundleName:string) {

  let shareData: systemShare.SharedData = new systemShare.SharedData({
    utd: uniformTypeDescriptor.UniformDataType.TEXT,
    content: 'https://appgallery.huawei.com/app/detail?id=' + bundleName,
    title: appName, // 不传title字段时,显示content
    description: '精心雕琢的无损音乐播放器',
    // thumbnail: new Uint8Array(buffer) // 推荐传入适合的缩略图 不传则显示默认text图标
    thumbnail: mContext.resourceManager.getMediaContentSync($r("app.media.icon_32"))// 获取小于32k大小的图标才可以
  });

  // 进行分享面板显示
  let controller: systemShare.ShareController = new systemShare.ShareController(shareData);
  controller.show(mContext, {
    selectionMode: systemShare.SelectionMode.SINGLE,
    previewMode: systemShare.SharePreviewMode.DETAIL,
  }).then(() => {
    console.info('ShareController show success.');
  }).catch((error: BusinessError) => {
    console.error(`ShareController show error. code: ${error.code}, message: ${error.message}`);
  });
}