修复聊天重叠bug

This commit is contained in:
mcmy 2025-04-21 12:09:23 +08:00
parent 219dfe59e2
commit 3f5dd9ddaf

View File

@ -5,7 +5,8 @@
import { router } from '@kit.ArkUI'; import { router } from '@kit.ArkUI';
import promptAction from '@ohos.promptAction'; import promptAction from '@ohos.promptAction';
import settingsService, { SettingsModel, TextResources } from '../common/SettingsService'; import settingsService, { SettingsModel, TextResources } from '../common/SettingsService';
import { ClassRoomService, import {
ClassRoomService,
ClassSessionModel, ClassSessionModel,
MessageModel, MessageModel,
QuestionModel, QuestionModel,
@ -89,59 +90,47 @@ enum ClassLiveMode {
struct ClassLivePage { struct ClassLivePage {
// 从路由参数获取模式 // 从路由参数获取模式
@State mode: ClassLiveMode = ClassLiveMode.STUDENT; @State mode: ClassLiveMode = ClassLiveMode.STUDENT;
// 课堂会话 // 课堂会话
@State classSession: ClassSessionModel | null = null; @State classSession: ClassSessionModel | null = null;
// 消息列表 // 消息列表
@State messages: MessageModel[] = []; @State messages: MessageModel[] = [];
// 当前消息 // 当前消息
@State messageText: string = ''; @State messageText: string = '';
// 当前题目 // 当前题目
@State currentQuestion: QuestionModel | null = null; @State currentQuestion: QuestionModel | null = null;
// 学生已选答案 // 学生已选答案
@State selectedOption: number = -1; @State selectedOption: number = -1;
// 是否显示题目统计 // 是否显示题目统计
@State showQuestionStats: boolean = false; @State showQuestionStats: boolean = false;
// 是否显示题目编辑器 // 是否显示题目编辑器
@State showQuestionEditor: boolean = false; @State showQuestionEditor: boolean = false;
// 是否显示答题窗口 // 是否显示答题窗口
@State showAnswerDialog: boolean = false; @State showAnswerDialog: boolean = false;
// 题目编辑相关状态 // 题目编辑相关状态
@State questionTitle: string = ''; @State questionTitle: string = '';
@State questionOptions: QuestionOption[] = []; @State questionOptions: QuestionOption[] = [];
@State correctOption: number = 0; @State correctOption: number = 0;
@State questionDuration: number = 30; @State questionDuration: number = 30;
// 错误信息 // 错误信息
@State errorMessage: string = ''; @State errorMessage: string = '';
// 是否加载中 // 是否加载中
@State isLoading: boolean = false; @State isLoading: boolean = false;
// 倒计时 // 倒计时
@State countdownSeconds: number = 0; @State countdownSeconds: number = 0;
private countdownTimer: number = -1; private countdownTimer: number = -1;
// 从设置服务获取设置 // 从设置服务获取设置
@State settings: SettingsModel = settingsService.getSettings(); @State settings: SettingsModel = settingsService.getSettings();
// 获取文本资源 // 获取文本资源
@State texts: TextResources = settingsService.getTextResources(); @State texts: TextResources = settingsService.getTextResources();
// 事件回调函数引用 // 事件回调函数引用
private messageCallback: (data: EventData) => void = () => {}; private messageCallback: (data: EventData) => void = () => {
private questionCallback: (data: EventData) => void = () => {}; };
private endQuestionCallback: (data: EventData) => void = () => {}; private questionCallback: (data: EventData) => void = () => {
private endClassCallback: (data: EventData) => void = () => {}; };
private endQuestionCallback: (data: EventData) => void = () => {
};
private endClassCallback: (data: EventData) => void = () => {
};
// 用于服务实例 // 用于服务实例
private classRoomService: ClassRoomService = ClassRoomService.getInstance(); private classRoomService: ClassRoomService = ClassRoomService.getInstance();
@ -640,7 +629,8 @@ struct ClassLivePage {
// 只在失败时显示错误提示,成功时不跳转,等待服务器通知 // 只在失败时显示错误提示,成功时不跳转,等待服务器通知
const primaryButton: DialogButton = { const primaryButton: DialogButton = {
value: '确定', value: '确定',
action: () => {} action: () => {
}
}; };
const alertConfig: AlertDialogConfig = { const alertConfig: AlertDialogConfig = {
@ -655,7 +645,8 @@ struct ClassLivePage {
// 显示错误提示 // 显示错误提示
const primaryButton: DialogButton = { const primaryButton: DialogButton = {
value: '确定', value: '确定',
action: () => {} action: () => {
}
}; };
const alertConfig: AlertDialogConfig = { const alertConfig: AlertDialogConfig = {
@ -745,7 +736,8 @@ struct ClassLivePage {
const secondaryButton: DialogButton = { const secondaryButton: DialogButton = {
value: '取消', value: '取消',
action: () => {} action: () => {
}
}; };
const alertConfig: AlertDialogConfig = { const alertConfig: AlertDialogConfig = {
@ -768,7 +760,8 @@ struct ClassLivePage {
const secondaryButton: DialogButton = { const secondaryButton: DialogButton = {
value: '取消', value: '取消',
action: () => {} action: () => {
}
}; };
const alertConfig: AlertDialogConfig = { const alertConfig: AlertDialogConfig = {
@ -813,7 +806,12 @@ struct ClassLivePage {
.backgroundColor('rgba(255,255,255,0.2)') .backgroundColor('rgba(255,255,255,0.2)')
.borderRadius(16) .borderRadius(16)
.fontColor(Color.White) .fontColor(Color.White)
.padding({ left: 12, right: 12, top: 6, bottom: 6 }) .padding({
left: 12,
right: 12,
top: 6,
bottom: 6
})
.margin({ right: 8 }) .margin({ right: 8 })
.onClick(() => { .onClick(() => {
this.checkConnectionStatus(); this.checkConnectionStatus();
@ -827,7 +825,12 @@ struct ClassLivePage {
.backgroundColor('rgba(255,255,255,0.2)') .backgroundColor('rgba(255,255,255,0.2)')
.borderRadius(16) .borderRadius(16)
.fontColor(Color.White) .fontColor(Color.White)
.padding({ left: 12, right: 12, top: 6, bottom: 6 }) .padding({
left: 12,
right: 12,
top: 6,
bottom: 6
})
.onClick(() => { .onClick(() => {
this.endClass(); this.endClass();
}) })
@ -893,10 +896,10 @@ struct ClassLivePage {
// 聊天历史记录区域(可伸缩) // 聊天历史记录区域(可伸缩)
Column() { Column() {
Text("聊天记录") // Text("聊天记录")
.fontSize(18) // .fontSize(18)
.fontWeight(FontWeight.Bold) // .fontWeight(FontWeight.Bold)
.margin({ bottom: 10 }) // .margin({ bottom: 10 })
List({ space: 8 }) { List({ space: 8 }) {
ForEach(this.messages, (message: MessageModel, index) => { ForEach(this.messages, (message: MessageModel, index) => {
@ -927,7 +930,8 @@ struct ClassLivePage {
.fontSize(12) .fontSize(12)
.fontColor('#999') .fontColor('#999')
.margin({ top: 4 }) .margin({ top: 4 })
.alignSelf(message.senderId === settingsService.getCurrentAccount() ? ItemAlign.End : ItemAlign.Start) .alignSelf(message.senderId === settingsService.getCurrentAccount() ? ItemAlign.End :
ItemAlign.Start)
} }
.padding(12) .padding(12)
.backgroundColor(message.senderRole === SenderRole.TEACHER ? '#e1f3d8' : '#edf2fc') .backgroundColor(message.senderRole === SenderRole.TEACHER ? '#e1f3d8' : '#edf2fc')
@ -936,13 +940,14 @@ struct ClassLivePage {
.width('85%') .width('85%')
} }
.width('100%') .width('100%')
.justifyContent(message.senderId === settingsService.getCurrentAccount() ? FlexAlign.End : FlexAlign.Start) .justifyContent(message.senderId === settingsService.getCurrentAccount() ? FlexAlign.End :
FlexAlign.Start)
.margin({ top: 4, bottom: 4 }) .margin({ top: 4, bottom: 4 })
} }
}, (message: MessageModel) => message.id) // 使用消息ID作为唯一键避免重复渲染 }, (message: MessageModel) => message.id) // 使用消息ID作为唯一键避免重复渲染
} }
.width('100%') .width('100%')
.layoutWeight(1) // .layoutWeight(1)
.padding(10) .padding(10)
.backgroundColor('#f9f9f9') .backgroundColor('#f9f9f9')
.borderRadius(8) .borderRadius(8)
@ -1057,7 +1062,8 @@ struct ClassLivePage {
}) })
} }
if (this.mode === ClassLiveMode.STUDENT && this.currentQuestion && !this.showAnswerDialog && !this.showQuestionStats) { if (this.mode === ClassLiveMode.STUDENT && this.currentQuestion && !this.showAnswerDialog &&
!this.showQuestionStats) {
Button({ type: ButtonType.Circle }) { Button({ type: ButtonType.Circle }) {
Image($r('app.media.question')) Image($r('app.media.question'))
.width(24) .width(24)
@ -1474,7 +1480,8 @@ struct ClassLivePage {
// 显示状态对话框 // 显示状态对话框
const primaryButton: DialogButton = { const primaryButton: DialogButton = {
value: '确定', value: '确定',
action: () => {} action: () => {
}
}; };
const secondaryButton: DialogButton = { const secondaryButton: DialogButton = {