feat: 完成军事历史和历史今日的弹窗中的UI和交互逻辑

commons/basic/src/main/ets/models/YTDiaLogModel.ets

@@ -17,6 +17,9 @@ export enum DiaLogPageEnum{
   Confirm,
   // 底部菜单
   BottomMenu,
+
+  // 历史今日
+  HistoryToday,
 }
 
 export interface DiaLogParam<T = ESObject>{

features/feature/src/main/ets/components/YtComp/YTDiaLogBuild.ets

@@ -1,4 +1,4 @@
-import { BasicType } from 'basic'
+import { BasicType, YTAvoid } from 'basic'
 import { DiaLogPageEnum, DiaLogParam } from 'basic/src/main/ets/models/YTDiaLogModel'
 import { NumberKeyBoard, NumberKeyBoardStyle } from './NumberKeyboard'
 import { YtDatePicker } from './YtDatePicker'
@@ -12,6 +12,7 @@ export function getBuilder(param: DiaLogParam, onBack: (ans?: ESObject) => void)
   else if (param.pageEnum == DiaLogPageEnum.NumBerInput) NumberInputBuilder({onBack: onBack, param: param.param})
   else if (param.pageEnum == DiaLogPageEnum.Confirm) DoubleConfirm(onBack, param.param)
   else if (param.pageEnum == DiaLogPageEnum.TextInput) InputComp({onBack: onBack, param: param.param})
+  else if (param.pageEnum == DiaLogPageEnum.HistoryToday) HistoryToday({onBack: onBack, param: param.param})
 }
 
 // 底部菜单
@@ -270,7 +271,81 @@ struct InputComp{
 }
 
 
+@ComponentV2
+struct HistoryToday{
+  @Event onBack: (ans?:ESObject) => void
+  @Param @Require param: BasicType
 
+  @Local dataSource: Array<string> = new Array(10).fill('')
+  @Local safeBottom: number = AppStorage.get(YTAvoid.SAFE_BOTTOM_KEY) as number
+
+  build() {
+    Column({space: 18}){
+      Row(){
+        Text()
+
+        Text('历史今日')
+          .fontSize(18)
+          .fontWeight(500)
+          .fontColor('#FF415C06')
+
+        Image($r('app.media.icon_close'))
+          .width(24)
+          .aspectRatio(1)
+      }
+      .width("100%")
+      .justifyContent(FlexAlign.SpaceBetween)
+
+      Column(){
+        List({space: 18}){
+          Repeat(this.dataSource)
+            .each(i => {
+              ListItem(){
+                Column({space: 10}){
+                  Text('1941年')
+                    .fontSize(18)
+                    .width("100%")
+                    .fontWeight(500)
+                    .fontColor('#FF333333')
+
+                  Text('中国海军新型驱逐舰完成首次远海训练')
+                    .width("100%")
+                    .fontSize(14)
+                    .fontWeight(400)
+                    .fontColor('#FF333333')
+
+                  Text('近日，中国海军某新型驱逐舰圆满完成首次远海\n' +
+                    '实战化训练，检验了多项新型武器装备性能...')
+                    .width("100%")
+                    .fontSize(14)
+                    .fontWeight(300)
+                    .fontColor('#FF333333')
+                }
+                .width("100%")
+                .borderRadius(5)
+                .backgroundColor('#FFE6EBDA')
+                .alignItems(HorizontalAlign.Start)
+                .border({ width: {left: 8.5}, color: '#FF7A9E2B'})
+                .padding({ top: 14, left: 18, right: 18, bottom: 14 })
+              }
+            })
+        }
+        .width("100%")
+        .height("100%")
+        .scrollBar(BarState.Off)
+        .padding({bottom: this.safeBottom})
+      }
+      .layoutWeight(1)
+      .width("100%")
+    }
+    .width("100%")
+    .height('auto')
+    .backgroundColor(Color.White)
+    .borderRadius({ topLeft: 20, topRight: 20 })
+    .padding({left: 16, right: 16, top: 14 })
+    .constraintSize({minHeight: 380, maxHeight: '50%'})
+  }
+}
 
 
 

features/feature/src/main/ets/utils/RouterUtils.ets

@@ -1,9 +1,18 @@
 import { yTRouter } from "basic";
+import { DiaLogPageEnum, DiaLogParam, YTDiaLogModel } from "basic/src/main/ets/models/YTDiaLogModel";
 
 class RouterUtils {
   router2MsgDetailPage(){
     yTRouter.pushPathByName("MsgDetailPage", null)
   }
+
+  router2HistoryToday(){
+    let p: DiaLogParam = {
+      pageEnum: DiaLogPageEnum.HistoryToday,
+      align: YTDiaLogModel.Bottom
+    }
+    yTRouter.router2DiaLog(p)
+  }
 }
 
 export const uRouter: RouterUtils = new RouterUtils();

features/feature/src/main/ets/view/SecondView.ets

@@ -1,214 +1,115 @@
-import { textToSpeech } from '@kit.CoreSpeechKit';
-import { BusinessError } from '@kit.BasicServicesKit';
+import { YTAvoid } from "basic"
+import { uRouter } from "../utils/RouterUtils"
 
-let ttsEngine: textToSpeech.TextToSpeechEngine;
 
-
-@Component
+@ComponentV2
 export struct SecondView {
-  @State createCount: number = 0;
-  @State voiceInfo: string = "";
-  @State originalText: string = "支付宝到账[n2]1000000元";
+  @Local safeTop: number = AppStorage.get(YTAvoid.SAFE_TOP_KEY) as number
+  @Local dataSource: Array<string> = new Array(18).fill('')
+
+  router2HistoryToday(){
+    uRouter.router2HistoryToday()
+  }
 
   build() {
-    Column() {
-      Scroll() {
-        Column() {
-          TextArea({ placeholder: 'Please enter tts original text', text: `${this.originalText}` })
-            .margin(20)
-            .border({
-              width: 5,
-              color: 0x317AE7,
-              radius: 10,
-              style: BorderStyle.Solid
-            })
-            .onChange((value: string) => {
-              this.originalText = value;
-              console.info(`original text: ${this.originalText}`);
+    Column(){
+      Column({space: 20}){
+        Text('中国近代战争历史时间线')
+          .fontSize(18)
+          .fontWeight(500)
+          .fontColor('#333333')
+
+        Text('查看历史今日事件')
+          .fontSize(13)
+          .borderRadius(6)
+          .fontWeight(400)
+          .fontColor('#415C06')
+          .backgroundColor('#EDFCF6')
+          .padding({left: 19, top: 6, right: 19, bottom: 6})
+          .onClick(() => { this.router2HistoryToday() })
+      }
+      .width("100%")
+      .alignItems(HorizontalAlign.Center)
+      .padding({ top: 25, bottom: 17})
+
+      Column(){
+        List({space: 17}){
+          Repeat(this.dataSource)
+            .each((i) => {
+              HistoryItem()
             })
-          Button() {
-            Text("CreateEngineByCallback")
-              .fontColor(Color.White)
-              .fontSize(20)
-          }
-          .type(ButtonType.Capsule)
-          .backgroundColor("#0x317AE7")
-          .width("80%")
-          .height(50)
-          .margin(10)
-          .onClick(() => {
-            this.createCount++;
-            console.info(`CreateTtsEngine：createCount:${this.createCount}`);
-            this.createByCallback();
-          })
+        }
+        .width("100%")
+        .height("100%")
+        .scrollBar(BarState.Off)
+      }
+      .width("100%")
+      .layoutWeight(1)
+    }
+    .width("100%")
+    .height("100%")
+    .linearGradient({ colors: [['#7FF9C3', 0], ['#F3F3F3', 0.3]] })
+    .padding({ top: this.safeTop, left: 16, right: 16 })
+  }
+}
 
-          Button() {
-            Text("speak")
-              .fontColor(Color.White)
-              .fontSize(20)
-          }
-          .type(ButtonType.Capsule)
-          .backgroundColor("#0x317AE7")
-          .width("80%")
-          .height(50)
-          .margin(10)
-          .onClick(() => {
-            this.createCount++;
-            this.speak();
-          })
+@ComponentV2
+struct HistoryItem{
+  @Local h: number = 120
 
-          Button() {
-            Text("listVoicesCallback")
-              .fontColor(Color.White)
-              .fontSize(20)
-          }
-          .type(ButtonType.Capsule)
-          .backgroundColor("#0x317AE7")
-          .width("80%")
-          .height(50)
-          .margin(10)
-          .onClick(() => {
-            this.listVoicesCallback();
-          })
 
-          Button() {
-            Text("stop")
-              .fontColor(Color.White)
-              .fontSize(20)
-          }
-          .type(ButtonType.Capsule)
-          .backgroundColor("#0x317AE7")
-          .width("80%")
-          .height(50)
-          .margin(10)
-          .onClick(() => {
-            // 停止播报
-            console.info("Stop button clicked.");
-            ttsEngine.stop();
-          })
+  build() {
+    Column({space: 5}){
+      Row({space: 3}){
+        Image($r('app.media.icon_clock'))
+          .width(35)
+          .aspectRatio(1)
 
-          Button() {
-            Text("isBusy")
-              .fontColor(Color.White)
-              .fontSize(20)
-          }
-          .type(ButtonType.Capsule)
-          .backgroundColor("#0x317AE7")
-          .width("80%")
-          .height(50)
-          .margin(10)
-          .onClick(() => {
-            // 查询播报状态
-            let isBusy = ttsEngine.isBusy();
-            console.info(`isBusy: ${isBusy}`);
-          })
+        Text('1840')
+          .fontSize(14)
+          .fontWeight(400)
+          .fontColor('#000000')
+      }
 
-          Button() {
-            Text("shutdown")
-              .fontColor(Color.White)
-              .fontSize(20)
+      Row({space: 3}){
+        Row(){
+          Column()
+            .width(1)
+            .height("100%")
+            .backgroundColor('#D9D9D9')
+        }
+        .width(35)
+        .height(this.h)
+        .justifyContent(FlexAlign.Center)
+
+        Column({space: 13}){
+          Row({space: 5.3}){
+            Image($r('app.media.icon_flag'))
+              .width(23)
+              .aspectRatio(1)
+
+            Text('鸦片战争')
+              .fontSize(16)
+              .fontWeight(500)
+              .fontColor('#333333')
           }
-          .type(ButtonType.Capsule)
-          .backgroundColor("#0x317AA7")
-          .width("80%")
-          .height(50)
-          .margin(10)
-          .onClick(() => {
-            // 释放引擎
-            ttsEngine.shutdown();
-          })
+
+          Text('中国近代史的开端，清政府战败，签订《南京条约》')
+            .fontSize(14)
+            .fontWeight(400)
+            .width("100%")
+            .fontColor('#FF393939')
         }
+        .height('auto')
+        .borderRadius(5)
         .layoutWeight(1)
+        .backgroundColor(Color.White)
+        .alignItems(HorizontalAlign.Start)
+        .constraintSize({minHeight: '115'})
+        .padding({ top: 10, left: 3, right: 3, bottom: 10 })
       }
-      .width('100%')
-      .height('100%')
     }
+    .width("100%")
+    .alignItems(HorizontalAlign.Start)
   }
-
-  // 创建引擎，通过callback形式返回
-  private createByCallback() {
-    // 设置创建引擎参数
-    let extraParam: Record<string, Object> = { "style": 'interaction-broadcast', "locate": 'CN', "name": 'EngineName' };
-    let initParamsInfo: textToSpeech.CreateEngineParams = {
-      language: 'zh-CN',
-      person: 0,
-      online: 1,
-      extraParams: extraParam
-    };
-    // 调用createEngine方法
-    textToSpeech.createEngine(initParamsInfo,
-      (err: BusinessError, textToSpeechEngine: textToSpeech.TextToSpeechEngine) => {
-        if (!err) {
-          console.info('Succeeded in creating engine.');
-          // 接收创建引擎的实例
-          ttsEngine = textToSpeechEngine;
-        } else {
-          console.error(`Failed to create engine. Code: ${err.code}, message: ${err.message}.`);
-        }
-      });
-  };
-
-  // 调用speak播报方法
-  private speak() {
-    let speakListener: textToSpeech.SpeakListener = {
-      // 开始播报回调
-      onStart(requestId: string, response: textToSpeech.StartResponse) {
-        console.info(`onStart, requestId: ${requestId} response: ${JSON.stringify(response)}`);
-      },
-      // 完成播报回调
-      onComplete(requestId: string, response: textToSpeech.CompleteResponse) {
-        console.info(`onComplete, requestId: ${requestId} response: ${JSON.stringify(response)}`);
-      },
-      // 停止播报完成回调，调用stop方法并完成时会触发此回调
-      onStop(requestId: string, response: textToSpeech.StopResponse) {
-        console.info(`onStop, requestId: ${requestId} response: ${JSON.stringify(response)}`);
-      },
-      // 返回音频流
-      onData(requestId: string, audio: ArrayBuffer, response: textToSpeech.SynthesisResponse) {
-        console.info(`onData, requestId: ${requestId} sequence: ${JSON.stringify(response)} audio: ${JSON.stringify(audio)}`);
-      },
-      // 错误回调，播报过程发生错误时触发此回调
-      onError(requestId: string, errorCode: number, errorMessage: string) {
-        console.error(`onError, requestId: ${requestId} errorCode: ${errorCode} errorMessage: ${errorMessage}`);
-      }
-    };
-    // 设置回调
-    ttsEngine.setListener(speakListener);
-    // 设置播报相关参数
-    let extraParam: Record<string, Object> = {
-      "queueMode": 0,
-      "speed": 1,
-      "volume": 2,
-      "pitch": 1,
-      "languageContext": 'zh-CN',
-      "audioType": "pcm",
-      "soundChannel": 3,
-      "playType": 1
-    }
-    let speakParams: textToSpeech.SpeakParams = {
-      requestId: '123456-a', // requestId在同一实例内仅能用一次，请勿重复设置
-      extraParams: extraParam
-    };
-    // 调用speak播报方法
-    ttsEngine.speak(this.originalText, speakParams);
-  };
-
-  // 查询语种音色信息，以callback形式返回
-  private listVoicesCallback() {
-    // 设置查询相关参数
-    let voicesQuery: textToSpeech.VoiceQuery = {
-      requestId: '123456-b', // requestId在同一实例内仅能用一次，请勿重复设置
-      online: 1
-    };
-    // 调用listVoices方法，以callback返回语种音色查询结果
-    ttsEngine.listVoices(voicesQuery, (err: BusinessError, voiceInfo: textToSpeech.VoiceInfo[]) => {
-      if (!err) {
-        // 接收目前支持的语种音色等信息
-        this.voiceInfo = JSON.stringify(voiceInfo);
-        console.info(`Succeeded in listing voices, voiceInfo is ${voiceInfo}`);
-      } else {
-        console.error(`Failed to list voices. Code: ${err.code}, message: ${err.message}`);
-      }
-    });
-  };
 }