feat: 完成训练view一级页面的UI和逻辑交互

features/feature/Index.ets

@@ -4,5 +4,7 @@ export { SecondView } from './src/main/ets/view/SecondView';
 
 export { ThirdView } from './src/main/ets/view/ThirdView';
 
+export { FourView } from './src/main/ets/view/FourView';
+
 export { add } from './src/main/ets/utils/Calc';
 

features/feature/src/main/ets/pages/reagencyPage.ets

@@ -0,0 +1,51 @@
+import { RouterPage } from 'basic';
+import { _YtHeader } from '../components/YtComp/_YtHeader';
+import { reagencyViewModel } from '../viewModel/PageVm/reagencyViewModel';
+
+@ComponentV2
+@RouterPage
+struct reagencyPage {
+  @Local vm: reagencyViewModel = new reagencyViewModel();
+
+  build() {
+    NavDestination() {
+      Column() {
+        _YtHeader({
+          title: '反应力训练',
+          rightComp: () => { this.rightComp() }
+        })
+
+        Column(){
+
+        }
+        .width("100%")
+        .layoutWeight(1)
+        .padding({top: 20})
+        .backgroundColor('rgba(255, 255, 255, 0.3)')
+        .borderRadius({topLeft: 23, topRight: 23})
+        .padding({left: 16, right: 16})
+      }
+      .width('100%')
+      .height('100%')
+      .justifyContent(FlexAlign.Start)
+      .alignItems(HorizontalAlign.Start)
+    }
+    .hideTitleBar(true)
+    .padding({ top: this.vm.safeTop })
+    .linearGradient({ colors: [['#FF7FF9C3', 0], ['#FFEEECED', 0.3]]})
+  }
+
+  @Builder
+  rightComp(){
+    Image($r('app.media.icon_setting'))
+      .width(24)
+      .aspectRatio(1)
+      .onClick(() => { this.vm.openSetting() })
+  }
+}
+
+
+@Builder
+function reagencyBuilder() {
+  reagencyPage()
+}

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

@@ -0,0 +1,158 @@
+import { BasicType, YTAvoid, YTRequest, yTRouter } from "basic"
+
+@ComponentV2
+export struct FourView {
+  @Local safeTop: number = AppStorage.get(YTAvoid.SAFE_TOP_KEY) as number
+
+  private layoutOptions: GridLayoutOptions = {
+    regularSize: [1, 1],
+    irregularIndexes: [4],
+    onGetIrregularSizeByIndex: (index: number) => {
+        return [1, 2]
+    }
+  }
+
+  private forEach: Array<BasicType> = [
+    {
+      // reagency
+      text: '反应力训练',
+      src: $r('app.media.icon_reagency'),
+      acSrc: $r('app.media.img_reagency')
+    }, {
+      // stability
+      text: '稳定性训练',
+      src: $r('app.media.icon_stability'),
+      acSrc: $r('app.media.img_stability')
+    }, {
+      // observational
+      text: '观察记忆力训练',
+      src: $r('app.media.icon_observational'),
+      acSrc: $r('app.media.img_observational')
+    }, {
+      // vision
+      text: '视力检测',
+      src: $r('app.media.icon_vision'),
+      acSrc: $r('app.media.img_vision')
+    }, {
+      // chess
+      text: '军棋学习',
+      src: $r('app.media.icon_chess'),
+      acSrc: $r('app.media.img_chess')
+    }
+  ]
+
+  onRouter(index: number){
+    switch (index){
+      case 0:
+        yTRouter.pushPathByName('reagencyPage', null)
+        break
+    }
+  }
+
+  build() {
+    Column() {
+      Row(){
+        Text('娱乐训练')
+          .fontSize(18)
+          .fontWeight(500)
+          .fontColor('#FF333333')
+      }
+      .width("100%")
+      .padding({top: 20, bottom: 9})
+      .justifyContent(FlexAlign.Center)
+
+      Grid(undefined, this.layoutOptions) {
+        Repeat(this.forEach)
+          .each((item) => {
+            GridItem(){
+              if(item.index < 4) {
+                Column(){
+                  Row(){
+                    Image(item.item.src)
+                      .width(77)
+                      .aspectRatio(1)
+                      .offset({y: -17})
+                  }
+                  .width("100%")
+                  .padding({left: 8})
+                  .justifyContent(FlexAlign.Start)
+
+                  Column(){
+                    Text(item.item.text)
+                      .fontSize(20)
+                      .fontWeight(500)
+                      .padding({left: 14})
+                      .fontColor('#FF333333')
+
+                    Image($r('app.media.icon_entry'))
+                      .width(30)
+                      .aspectRatio(1)
+                      .margin({left: 17})
+                  }
+                  .width("100%")
+                  .layoutWeight(1)
+                  .padding({bottom: 10})
+                  .alignItems(HorizontalAlign.Start)
+                  .justifyContent(FlexAlign.SpaceBetween)
+                }
+                .width("100%")
+                .aspectRatio(165/180)
+                .backgroundImage(item.item.acSrc)
+                .alignItems(HorizontalAlign.Start)
+                .backgroundImageSize({width: '100%', height: '100%'})
+                .onClick(() => { this.onRouter(item.index) })
+              } else {
+                RelativeContainer(){
+                  Row(){
+                    Text(item.item.text)
+                      .fontSize(20)
+                      .fontWeight(500)
+                      .padding({left: 14})
+                      .fontColor('#FF333333')
+                  }
+                  .padding({top: 20})
+                  .alignRules({
+                    center: { anchor: '__container__', align: VerticalAlign.Center },
+                    left: { anchor: '__container__', align: HorizontalAlign.Start },
+                  })
+
+                  Image(item.item.src)
+                    .width(77)
+                    .aspectRatio(1)
+                    .alignRules({
+                      center: { anchor: '__container__', align: VerticalAlign.Center },
+                      right: { anchor: '__container__', align: HorizontalAlign.End },
+                    })
+
+                  Image($r('app.media.icon_entry'))
+                    .width(30)
+                    .aspectRatio(1)
+                    .alignRules({
+                      bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
+                      left: { anchor: '__container__', align: HorizontalAlign.Start },
+                    })
+
+                }
+                .width("100%")
+                .aspectRatio(343/135)
+                .backgroundImage(item.item.acSrc)
+                .padding({left: 15, right: 33, bottom: 11})
+                .backgroundImageSize({width: '100%', height: '100%'})
+                .onClick(() => { this.onRouter(item.index) })
+              }
+            }
+          })
+      }
+      .rowsGap(20)
+      .width('100%')
+      .columnsGap(13)
+      .padding({top: 25})
+      .columnsTemplate('repeat(2, 1fr)')
+    }
+    .width("100%")
+    .height("100%")
+    .backgroundImage($r('app.media.img_fourViewBg'))
+    .padding({ top: this.safeTop, left: 16, right: 16 })
+    .backgroundImageSize({width: '100%', height: '100%'})
+  }
+}

features/feature/src/main/ets/viewModel/PageVm/reagencyViewModel.ets

@@ -0,0 +1,17 @@
+import { YTAvoid } from "basic"
+
+@ObservedV2
+export class reagencyViewModel{
+  @Trace safeTop: number = 0
+
+
+  // 打开设置页面
+  openSetting() {}
+
+
+  constructor() {
+    this.safeTop = AppStorage.get(YTAvoid.SAFE_TOP_KEY) as number
+  }
+
+
+}

features/feature/src/main/resources/base/profile/router_map.json

@@ -9,6 +9,11 @@
       "name": "MsgDetailPage",
       "pageSourceFile": "src/main/ets/pages/MsgDetailPage.ets",
       "buildFunction": "MsgDetailBuilder"
+    },
+    {
+      "name": "reagencyPage",
+      "pageSourceFile": "src/main/ets/pages/reagencyPage.ets",
+      "buildFunction": "reagencyBuilder"
     }
   ]
 }

products/entry/src/main/ets/pages/Index.ets

@@ -1,7 +1,7 @@
 import {
   BasicType, ContextHelper, YTAvoid, yTRouter
 } from 'basic';
-import { MainView, SecondView, ThirdView } from 'feature';
+import { FourView, MainView, SecondView, ThirdView } from 'feature';
 import { Mine_ } from 'user';
 
 @Entry
@@ -60,6 +60,8 @@ struct Index {
                   SecondView()
                 } else if (index == 2) {
                   ThirdView()
+                }else if (index == 3) {
+                  FourView()
                 } else {
                   Mine_()
                 }