feat: 完成点名 view 下的相关 UI 和交互

features/feature/src/main/ets/components/EmptyComp.ets

@@ -14,7 +14,7 @@ export struct EmptyComp {
       }
     }
     .width('100%')
-    .height('100%')
+    .layoutWeight(1)
     .alignItems(HorizontalAlign.Center)
     .justifyContent(FlexAlign.Center)
   }

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

@@ -1,6 +1,102 @@
-@Component
+import { EmptyComp } from "../components/EmptyComp"
+import { FourViewModel } from "../viewModel/FourViewModel"
+
+@ComponentV2
 export struct FourView {
+  @Local vm: FourViewModel = new FourViewModel()
+
   build() {
+    Column(){
+      Row(){
+        Text('座位表')
+          .fontSize(24)
+          .fontWeight(600)
+          .fontColor('#333333')
+        Text('添加')
+          .fontSize(18)
+          .fontWeight(500)
+          .borderRadius(8)
+          .fontColor(Color.White)
+          .backgroundColor(Color.Black)
+          .padding({left: 15, top: 7, right: 15, bottom: 7})
+          .onClick(() => { this.vm._onAddSeatTable() })
+      }
+      .width("100%")
+      .justifyContent(FlexAlign.SpaceBetween)
 
+      Column(){
+        EmptyComp({ isEmpty: this.vm.dataSource.length == 0 }){
+          List({space: 16}){
+            ForEach(this.vm.dataSource, (item: string, index) => {
+              ListItem(){
+                Column({space: 5}){
+                  Text(item)
+                    .fontSize(20)
+                    .fontWeight(500)
+
+                  Text('2025.11.10-2025.9-19')
+                    .fontSize(14)
+                    .fontColor('#666666')
+                }
+                .width("97%")
+                .borderRadius(15)
+                .margin({left: 3})
+                .justifyContent(FlexAlign.Start)
+                .alignItems(HorizontalAlign.Start)
+                .backgroundImageSize(ImageSize.Cover)
+                .backgroundImage($r('app.media.seatBg'))
+                .shadow({ radius: 6, color: '#1a000000' })
+                .padding({left: 12, top: 20, right: 12, bottom: 20})
+              }
+              .align(Alignment.Center)
+              .swipeAction({
+                end: () => { this.swiperAction(index) }
+              })
+            })
+          }
+          .width("100%")
+          .height("100%")
+          .padding({top: 16, bottom: 16})
+          .scrollBar(BarState.Off)
+        }
+      }
+      .width('100%')
+      .layoutWeight(1)
+    }
+    .width('100%')
+    .height('100%')
+    .alignItems(HorizontalAlign.Center)
+    .justifyContent(FlexAlign.Start)
+    .padding({top: this.vm.safeTop, left: 16, right: 16})
   }
+
+  @Builder
+  swiperAction(index: number){
+    Row(){
+      Row(){
+        Image($r('app.media.icon_edit'))
+          .width(25)
+          .aspectRatio(1)
+      }
+      .backgroundColor('#BFBFBF')
+      .alignItems(VerticalAlign.Center)
+      .justifyContent(FlexAlign.Center)
+      .padding({ left: 18, top: 30, right: 18, bottom: 30 })
+      .onClick(() => { this.vm._onEditSeatTable() })
+
+      Row(){
+        Image($r('app.media.icon_del'))
+          .width(25)
+          .aspectRatio(1)
+      }
+      .backgroundColor('#FF3B30')
+      .alignItems(VerticalAlign.Center)
+      .justifyContent(FlexAlign.Center)
+      .borderRadius({topRight: 15, bottomRight: 15})
+      .padding({ left: 18, top: 30, right: 18, bottom: 30 })
+      .onClick(() => { this.vm._onDeleteSeatTable() })
+    }
+    .borderRadius({topRight: 15, bottomRight: 15})
+  }
+
 }

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

@@ -1,6 +1,179 @@
-@Component
+import { EmptyComp } from "../components/EmptyComp";
+import { ThirdViewModel } from "../viewModel/ThirdViewModel";
+import text from "@ohos.graphics.text";
+
+@ComponentV2
 export struct ThirdView {
+  @Local vm:ThirdViewModel = new ThirdViewModel()
+
   build() {
+    Column({space: 28}){
+      // 选择学生
+      Column(){
+        Row(){
+          Row().width(58).aspectRatio(1)
+
+          Text('当前被选中的学生')
+            .fontSize(18)
+            .fontWeight(400)
+            .fontColor('#333333')
+
+          Row(){
+            if(this.vm.studentName) {
+              Text('再选一次')
+                .fontSize(14)
+                .borderRadius(29)
+                .fontColor('#5668FC')
+                .backgroundColor(Color.White)
+                .padding({left: 10, right: 10, top: 10, bottom: 10})
+                .border({width:4, color: '#7186F9'})
+                .onClick(()=>{ this.vm._onRandomStudent() })
+            }
+          }.width(58).aspectRatio(1)
+        }
+        .width("100%")
+        .padding({top: 8, left: 6, right: 6, bottom: 8})
+        .alignItems(VerticalAlign.Top)
+        .justifyContent(FlexAlign.SpaceBetween)
+
+        Column(){
+          Text(this.vm.studentName)
+            .fontSize(30)
+            .fontWeight(400)
+            .zIndex(999)
+            .fontColor('#333333')
+            .onSizeChange((_o, _n) => {
+              if(this.vm.studentName) {
+                this.vm.studentWidgetLength = _n.width ?? 94
+              } else {
+                this.vm.studentWidgetLength = 94
+              }
+            })
+
+          Row()
+            .height(9.5)
+            .offset({y: -10})
+            .borderRadius(999)
+            .backgroundColor('#AFBBFF')
+            .width(this.vm.studentWidgetLength)
+        }
+        .width("100%")
+        .height(60)
+        .justifyContent(FlexAlign.Center)
+
+        Column(){
+          Text('回答')
+            .fontSize(16)
+            .fontColor('#5668FC')
+            .opacity(this.vm.studentName ? 1 : 0)
+          if(this.vm.studentName){
+            Row(){
+              Text('正确')
+                .borderRadius(10)
+                .fontColor(Color.White)
+                .backgroundColor('#7186F9')
+                .padding({left: 24, top: 8, right: 24, bottom: 8})
+                .onClick(() => { this.vm._onAnswerIsRight(true) })
+
+              Text('错误')
+                .borderRadius(10)
+                .fontColor(Color.White)
+                .backgroundColor('#7186F9')
+                .padding({left: 24, top: 8, right: 24, bottom: 8})
+                .onClick(() => { this.vm._onAnswerIsRight(false) })
+            }
+            .width("100%")
+            .padding({left: 60, right: 60, top: 5})
+            .justifyContent(FlexAlign.SpaceBetween)
+          } else {
+            Text('随机抽取')
+              .borderRadius(10)
+              .fontColor(Color.White)
+              .backgroundColor('#7186F9')
+              .padding({left: 24, top: 8, right: 24, bottom: 8})
+              .onClick(() => { this.vm._onRandomStudent() })
+          }
+        }
+        .width("100%")
+        .padding({top: 32})
+        .alignItems(HorizontalAlign.Center)
+      }
+      .height(250)
+      .width('100%')
+      .borderRadius(15)
+      .border({width: 1, color: '#7186F9'})
+      .linearGradient({
+        colors: [['#E7EAFF', 0.1], ['#F8E8FF', 0.5], ['#F8F9FF', 1]],
+        angle: 35
+      })
+
+      Column({space: 14.5}){
+        Text('答题记录')
+          .fontSize(20)
+          .fontWeight(600)
+
+        Column(){
+          Row(){
+            Text('日期')
+              .fontWeight(500)
+              .fontColor('#293AC4')
+            Text('姓名')
+              .fontWeight(500)
+              .fontColor('#293AC4')
+            Text('表现')
+              .fontWeight(500)
+              .fontColor('#293AC4')
+          }
+          .width("100%")
+          .justifyContent(FlexAlign.SpaceBetween)
+          .borderRadius({topLeft: 15, topRight: 15})
+          .padding({ left: 35, right: 35, top: 10, bottom: 10 })
+          .linearGradient({ colors: [['#C0AEFF', 0.2], ['#E3E6FF', 1]], })
+
+          Column(){
+            EmptyComp({isEmpty: false}){
+              List({space: 13}){
+                ForEach(new Array(20).fill(1), (item: number, index) => {
+                  ListItem(){
+                    Row(){
+                      Text('2025/09/09')
+                        .fontSize(12)
+                        .fontColor('#5467FF')
+
+                      Text('一二三一二三')
+                        .fontSize(12)
+                        .fontColor('#5467FF')
 
+                      Text('正确')
+                        .fontSize(12)
+                        .fontColor('#5467FF')
+                    }
+                    .width("100%")
+                    .justifyContent(FlexAlign.SpaceBetween)
+                  }
+                })
+              }
+              .width("100%")
+              .height("100%")
+              .scrollBar(BarState.Off)
+              .padding({left: 18, right: 38, top: 5, bottom: 5})
+            }
+          }
+          .height(300)
+          .width("100%")
+        }
+        .borderRadius(15)
+        .border({width:1, color: '#7186F9'})
+      }
+      .width('100%')
+      .layoutWeight(1)
+      .alignItems(HorizontalAlign.Start)
+      .justifyContent(FlexAlign.Start)
+    }
+    .height('100%')
+    .width('100%')
+    .justifyContent(FlexAlign.Start)
+    .alignItems(HorizontalAlign.Center)
+    .padding({ top: this.vm.safeTop + 35, left: 16, right: 16 })
   }
 }

features/feature/src/main/ets/viewModel/FourViewModel.ets

@@ -0,0 +1,54 @@
+import { YTAvoid, yTRouter } from "basic"
+import { iRouter } from "../utils/RouterUtils"
+
+@ObservedV2
+export class FourViewModel{
+
+  @Trace safeTop: number = 0
+  @Trace dataSource: string[] = new Array(15).fill('第二次月考座位表')
+
+  constructor() {
+    this.safeTop = AppStorage.get(YTAvoid.SAFE_TOP_KEY) as number
+  }
+
+  // 添加座位表
+  _onAddSeatTable() {
+    iRouter.router2SeatingPlanPage({}, () => {
+
+    })
+  }
+
+  // 删除
+  _onDeleteSeatTable() {
+    yTRouter.router2DoubleConfirmDiaLog({
+      text: '是否确认删除？',
+      color: '#7186F9'
+    }, (res) => {
+      if (res?.result && res.result == 'true') {
+
+      }
+    })
+  }
+
+  // 编辑 座位表信息
+  _onEditSeatTable() {
+    iRouter.router2AddSeatTableDialog({
+      color: '#5668FC',
+      generics: {
+        name: '座位表1',
+        startDate: '2025.11.10',
+        endDate: '2025.9.19'
+      }
+    }, () => {
+
+    })
+  }
+  /**
+   * 重写的返回逻辑
+   * @returns
+   */
+  _onBackPressed(){
+    yTRouter.pop('')
+    return true;
+  }
+}

features/feature/src/main/ets/viewModel/ThirdViewModel.ets

@@ -0,0 +1,32 @@
+import { YTAvoid, yTRouter } from "basic"
+
+@ObservedV2
+export class ThirdViewModel{
+  @Trace safeTop: number = 0
+
+  // 当前抽取的学生姓名
+  @Trace studentName: string = ''
+  // 学生名字的长度
+  @Trace studentWidgetLength: Length = 94
+
+  constructor() {
+    this.safeTop = AppStorage.get(YTAvoid.SAFE_TOP_KEY) as number
+  }
+
+  // 随机抽取学生
+  _onRandomStudent(): void {
+    this.studentName = '杨阳羊'
+  }
+
+  // 回答是否正确
+  _onAnswerIsRight(isTrue: boolean){}
+
+  /**
+   * 重写的返回逻辑
+   * @returns
+   */
+  _onBackPressed(){
+    yTRouter.pop('')
+    return true;
+  }
+}