1029 lines
30 KiB
Plaintext
1029 lines
30 KiB
Plaintext
/**
|
||
* Copyright (c) 2025 TDCAT.CN
|
||
* Author: CC
|
||
*/
|
||
|
||
import { router } from '@kit.ArkUI';
|
||
import { hilog } from '@kit.PerformanceAnalysisKit';
|
||
import settingsService, { ThemeColor, Language, SettingsModel, TextResources, UserInfoModel } from '../common/SettingsService';
|
||
import logManager, { LogCategory, LogEventType, VersionLogItem } from '../common/logtext';
|
||
import { promptAction } from '@kit.ArkUI';
|
||
|
||
@Entry
|
||
@Component
|
||
struct SettingsPage {
|
||
// 使用SettingsService中的用户信息
|
||
@State userInfo: UserInfoModel = settingsService.getUserInfo();
|
||
|
||
// 从设置服务获取设置
|
||
@State settings: SettingsModel = settingsService.getSettings();
|
||
// 获取文本资源
|
||
@State texts: TextResources = settingsService.getTextResources();
|
||
@State themeColor: ThemeColor = settingsService.getSettings().themeColor;
|
||
|
||
// 更新用户邮箱的方法
|
||
private updateUserEmail(newEmail: string): void {
|
||
if (newEmail && newEmail.trim() !== '') {
|
||
// 使用SettingsService更新用户邮箱
|
||
settingsService.updateUserEmail(newEmail.trim());
|
||
|
||
// 显示更新成功的提示
|
||
const currentLanguage = settingsService.getSettings().language;
|
||
promptAction.showToast({
|
||
message: currentLanguage === Language.CHINESE ? '邮箱已更新' : 'Email updated',
|
||
duration: 2000
|
||
});
|
||
}
|
||
}
|
||
|
||
aboutToAppear() {
|
||
// 注册语言变化的回调 - 确保更新所有相关状态
|
||
settingsService.registerLanguageChangeCallback(() => {
|
||
this.texts = settingsService.getTextResources();
|
||
this.settings = settingsService.getSettings();
|
||
});
|
||
|
||
//页面颜色变化
|
||
settingsService.registerColorChangeCallback(() => {
|
||
this.themeColor = settingsService.getSettings().themeColor;
|
||
this.settings = settingsService.getSettings(); // 同时更新整个设置对象
|
||
});
|
||
|
||
// 注册用户信息变化的回调
|
||
settingsService.registerUserInfoChangeCallback(() => {
|
||
this.userInfo = settingsService.getUserInfo();
|
||
});
|
||
|
||
// 页面加载时初始化设置
|
||
this.Log_Event('aboutToAppear');
|
||
}
|
||
|
||
build() {
|
||
Column() {
|
||
// 顶部导航栏 - 美化版
|
||
Row() {
|
||
Text(this.texts.settingsTitle)
|
||
.fontSize(24)
|
||
.fontColor(Color.White)
|
||
.fontWeight(FontWeight.Bold)
|
||
}
|
||
.width('100%')
|
||
.backgroundColor(this.themeColor)
|
||
.height(70)
|
||
.padding({ left: 24, right: 24 })
|
||
.justifyContent(FlexAlign.Center)
|
||
// 添加阴影效果
|
||
.shadow({ radius: 8, color: 'rgba(0, 0, 0, 0.1)', offsetY: 2 })
|
||
// 为顶部导航栏添加动画效果
|
||
.animation({
|
||
duration: 300,
|
||
curve: Curve.EaseOut
|
||
})
|
||
|
||
// 页面内容区
|
||
Scroll() {
|
||
Column() {
|
||
// 用户信息卡片
|
||
UserCard({
|
||
user: this.userInfo,
|
||
themeColor: this.themeColor,
|
||
updateEmail: (newEmail: string) => this.updateUserEmail(newEmail)
|
||
})
|
||
.margin({ top: 24, bottom: 24 })
|
||
.width('100%')
|
||
// 为卡片添加转场动画
|
||
.transition({
|
||
type: TransitionType.Insert,
|
||
translate: { x: 0, y: 50, z: 0 },
|
||
opacity: 0
|
||
})
|
||
.animation({
|
||
duration: 300,
|
||
delay: 100,
|
||
curve: Curve.EaseOut
|
||
})
|
||
.transition({
|
||
type: TransitionType.Delete,
|
||
translate: { x: 0, y: 50, z: 0 },
|
||
opacity: 0
|
||
})
|
||
|
||
// 系统设置选项
|
||
SystemSettings({
|
||
themeColor: this.settings.themeColor,
|
||
language: this.settings.language,
|
||
notificationEnabled: this.settings.notificationEnabled,
|
||
texts: this.texts
|
||
})
|
||
.width('100%')
|
||
// 为设置卡片添加转场动画
|
||
.transition({
|
||
type: TransitionType.Insert,
|
||
translate: { x: 0, y: 50, z: 0 },
|
||
opacity: 0
|
||
})
|
||
.animation({
|
||
duration: 300,
|
||
delay: 100,
|
||
curve: Curve.EaseOut
|
||
})
|
||
.transition({
|
||
type: TransitionType.Delete,
|
||
translate: { x: 0, y: 50, z: 0 },
|
||
opacity: 0
|
||
})
|
||
}
|
||
.width('100%')
|
||
.padding({ left: 20, right: 20 })
|
||
.alignItems(HorizontalAlign.Center)
|
||
}
|
||
.layoutWeight(1)
|
||
.scrollBar(BarState.Off)
|
||
.edgeEffect(EdgeEffect.Spring) // 添加弹性滚动效果
|
||
|
||
// 底部导航栏
|
||
BottomNavigation({
|
||
activePage: 'settings',
|
||
themeColor: this.settings.themeColor,
|
||
texts: this.texts
|
||
})
|
||
// 为底部导航添加阴影和动画
|
||
.shadow({ radius: 16, color: 'rgba(0, 0, 0, 0.08)', offsetY: -2 })
|
||
.animation({
|
||
duration: 300,
|
||
curve: Curve.EaseOut
|
||
})
|
||
}
|
||
.width('100%')
|
||
.height('100%')
|
||
.backgroundColor('#f5f7fa') // 设置页面背景色，提升层次感
|
||
}
|
||
|
||
// 页面生命周期方法
|
||
onPageShow(): void {
|
||
this.Log_Event('onPageShow');
|
||
}
|
||
|
||
onPageHide(): void {
|
||
this.Log_Event('onPageHide');
|
||
}
|
||
|
||
onBackPress(): void {
|
||
this.Log_Event('onBackPress');
|
||
}
|
||
|
||
aboutToDisappear(): void {
|
||
this.Log_Event('aboutToDisappear');
|
||
}
|
||
|
||
// 日志记录方法
|
||
public Log_Event(eventName: string): void {
|
||
hilog.info(0, 'ClassMG', `SettingsPage: ${eventName}`);
|
||
}
|
||
}
|
||
|
||
export { SettingsPage }
|
||
|
||
// 用户信息卡片组件 - 美化版
|
||
@Component
|
||
struct UserCard {
|
||
@ObjectLink user: UserInfoModel; // 使用@ObjectLink而不是直接值传递，确保对象引用更新
|
||
@Prop themeColor: string = '#409eff';
|
||
|
||
// 头像的动画状态
|
||
@State avatarScale: number = 1;
|
||
// 添加编辑邮箱的状态
|
||
@State isEditingEmail: boolean = false;
|
||
// 临时存储编辑中的邮箱
|
||
@State tempEmail: string = '';
|
||
// 编辑按钮的动画状态
|
||
@State editScale: number = 1;
|
||
// 添加邮箱验证错误状态
|
||
@State emailError: boolean = false;
|
||
@State errorMessage: string = '';
|
||
|
||
// 邮箱更新回调
|
||
updateEmail: (newEmail: string) => void = () => {};
|
||
|
||
// 验证邮箱格式
|
||
private validateEmail(email: string): boolean {
|
||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||
return emailRegex.test(email);
|
||
}
|
||
|
||
// 保存邮箱
|
||
private saveEmail(): void {
|
||
// 验证邮箱格式
|
||
if (!this.validateEmail(this.tempEmail)) {
|
||
this.emailError = true;
|
||
this.errorMessage = '请输入有效的邮箱地址';
|
||
return;
|
||
}
|
||
|
||
// 更新邮箱
|
||
this.updateEmail(this.tempEmail);
|
||
|
||
// 退出编辑模式
|
||
this.isEditingEmail = false;
|
||
this.emailError = false;
|
||
this.errorMessage = '';
|
||
}
|
||
|
||
build() {
|
||
Column() {
|
||
// 用户信息标题
|
||
Row() {
|
||
Text("用户信息")
|
||
.fontSize(18)
|
||
.fontWeight(FontWeight.Bold)
|
||
.fontColor('#333')
|
||
}
|
||
.width('100%')
|
||
.padding({ top: 8, bottom: 16 })
|
||
|
||
// 头像和用户信息
|
||
Row() {
|
||
// 头像 - 圆形设计
|
||
Stack() {
|
||
// 圆形背景
|
||
Circle()
|
||
.width(88)
|
||
.height(88)
|
||
.fill('#f5f5f5')
|
||
|
||
// 用户头像
|
||
Image(this.user.avatar || 'http://139.155.155.67:2342/images/default_avatar.png')
|
||
.width(80)
|
||
.height(80)
|
||
.borderRadius(40)
|
||
.objectFit(ImageFit.Cover)
|
||
.scale({ x: this.avatarScale, y: this.avatarScale })
|
||
.onHover((isHover: boolean) => {
|
||
animateTo({ duration: 300, curve: Curve.EaseOut }, () => {
|
||
this.avatarScale = isHover ? 1.05 : 1;
|
||
})
|
||
})
|
||
}
|
||
.margin({ right: 24 })
|
||
|
||
// 用户基本信息
|
||
Column() {
|
||
// 用户名和用户类型
|
||
Row() {
|
||
Text(this.user.name || '未设置昵称')
|
||
.fontSize(20)
|
||
.fontWeight(FontWeight.Bold)
|
||
.fontColor('#333')
|
||
|
||
// 用户类型标签
|
||
if (this.user.category) {
|
||
Text(this.user.category === 'student' ? '学生' : '教师')
|
||
.fontSize(12)
|
||
.backgroundColor(this.user.category === 'student' ? '#e6f7ff' : '#f6ffed')
|
||
.fontColor(this.user.category === 'student' ? '#1890ff' : '#52c41a')
|
||
.borderRadius(4)
|
||
.padding({ left: 8, right: 8, top: 2, bottom: 2 })
|
||
.margin({ left: 8 })
|
||
}
|
||
}
|
||
.width('100%')
|
||
.margin({ bottom: 10 })
|
||
|
||
// 账号信息
|
||
Row() {
|
||
Text("账号: ")
|
||
.fontSize(14)
|
||
.fontColor('#666')
|
||
|
||
Text(this.user.account || '暂未配置')
|
||
.fontSize(14)
|
||
.fontColor('#666')
|
||
}
|
||
.margin({ bottom: 6 })
|
||
|
||
// 手机号
|
||
Row() {
|
||
Text("手机: ")
|
||
.fontSize(14)
|
||
.fontColor('#666')
|
||
|
||
Text(this.user.phone || '暂未配置')
|
||
.fontSize(14)
|
||
.fontColor('#666')
|
||
}
|
||
.margin({ bottom: 6 })
|
||
}
|
||
.alignItems(HorizontalAlign.Start)
|
||
.layoutWeight(1)
|
||
}
|
||
.width('100%')
|
||
.alignItems(VerticalAlign.Center)
|
||
.padding({ bottom: 20 })
|
||
|
||
// 邮箱信息 - 可编辑
|
||
Column() {
|
||
// 邮箱编辑区域
|
||
Row() {
|
||
Text("邮箱: ")
|
||
.fontSize(14)
|
||
.fontColor('#666')
|
||
.width(50)
|
||
|
||
if (this.isEditingEmail) {
|
||
// 编辑模式 - 显示输入框
|
||
TextInput({
|
||
placeholder: '请输入邮箱',
|
||
text: this.tempEmail || this.user.email || ''
|
||
})
|
||
.width('60%')
|
||
.height(36)
|
||
.fontSize(14)
|
||
.fontColor('#333')
|
||
.backgroundColor('#f5f5f5')
|
||
.borderRadius(4)
|
||
.onChange((value: string) => {
|
||
this.tempEmail = value;
|
||
this.emailError = false;
|
||
})
|
||
|
||
// 保存按钮
|
||
Button("保存")
|
||
.fontSize(14)
|
||
.fontColor(Color.White)
|
||
.backgroundColor(this.themeColor)
|
||
.borderRadius(4)
|
||
.margin({ left: 10 })
|
||
.width(60)
|
||
.height(36)
|
||
.onClick(() => {
|
||
this.saveEmail();
|
||
})
|
||
|
||
// 取消按钮
|
||
Button("取消")
|
||
.fontSize(14)
|
||
.fontColor('#666')
|
||
.backgroundColor('#f0f0f0')
|
||
.borderRadius(4)
|
||
.margin({ left: 10 })
|
||
.width(60)
|
||
.height(36)
|
||
.onClick(() => {
|
||
this.isEditingEmail = false;
|
||
this.emailError = false;
|
||
this.errorMessage = '';
|
||
})
|
||
} else {
|
||
// 显示模式 - 显示当前邮箱
|
||
Text(this.user.email || '暂未配置')
|
||
.fontSize(14)
|
||
.fontColor('#666')
|
||
.layoutWeight(1)
|
||
|
||
// 编辑按钮
|
||
Button({ type: ButtonType.Circle }) {
|
||
Image($r('app.media.edit'))
|
||
.width(16)
|
||
.height(16)
|
||
.fillColor('#666')
|
||
}
|
||
.width(32)
|
||
.height(32)
|
||
.backgroundColor('#f5f5f5')
|
||
.scale({ x: this.editScale, y: this.editScale })
|
||
.onClick(() => {
|
||
this.isEditingEmail = true;
|
||
this.tempEmail = this.user.email || '';
|
||
})
|
||
.onHover((isHover: boolean) => {
|
||
animateTo({ duration: 300, curve: Curve.EaseOut }, () => {
|
||
this.editScale = isHover ? 1.1 : 1;
|
||
})
|
||
})
|
||
}
|
||
}
|
||
.width('100%')
|
||
.alignItems(VerticalAlign.Center)
|
||
|
||
// 邮箱错误提示
|
||
if (this.emailError) {
|
||
Text(this.errorMessage)
|
||
.fontSize(12)
|
||
.fontColor('#ff4d4f')
|
||
.margin({ top: 4, left: 50 })
|
||
}
|
||
}
|
||
.width('100%')
|
||
.margin({ bottom: 10 })
|
||
}
|
||
.width('100%')
|
||
.backgroundColor(Color.White)
|
||
.borderRadius(12)
|
||
.padding(20)
|
||
.shadow({ radius: 6, color: '#eeeeee', offsetY: 2 })
|
||
}
|
||
}
|
||
|
||
// 系统设置组件 - 美化版
|
||
@Component
|
||
struct SystemSettings {
|
||
@Prop themeColor: string;
|
||
@Prop language: string;
|
||
@Prop notificationEnabled: boolean;
|
||
@Prop texts: TextResources = {} as TextResources;
|
||
|
||
// 强制UI刷新的控制变量
|
||
@State refreshTrigger: number = 0;
|
||
// 显示加载动画的状态
|
||
@State isLoading: boolean = false;
|
||
|
||
// 添加本地状态，在组件内部获取最新设置
|
||
@State currentTexts: TextResources = settingsService.getTextResources();
|
||
// 添加本地状态跟踪当前设置
|
||
@State currentLanguage: string = settingsService.getSettings().language;
|
||
@State currentThemeColor: string = settingsService.getSettings().themeColor;
|
||
@State currentNotificationEnabled: boolean = settingsService.getSettings().notificationEnabled;
|
||
|
||
aboutToAppear() {
|
||
// 注册语言变化的回调，确保组件内文本也会更新
|
||
settingsService.registerLanguageChangeCallback(() => {
|
||
this.currentTexts = settingsService.getTextResources();
|
||
this.currentLanguage = settingsService.getSettings().language;
|
||
this.forceRefresh();
|
||
});
|
||
|
||
// 注册颜色变化的回调
|
||
settingsService.registerColorChangeCallback(() => {
|
||
this.currentThemeColor = settingsService.getSettings().themeColor;
|
||
this.forceRefresh();
|
||
});
|
||
|
||
// 注册通知设置变化的回调
|
||
settingsService.registerNotificationChangeCallback(() => {
|
||
this.currentNotificationEnabled = settingsService.getSettings().notificationEnabled;
|
||
this.forceRefresh();
|
||
});
|
||
}
|
||
|
||
// 强制刷新UI
|
||
private forceRefresh() {
|
||
this.refreshTrigger++;
|
||
}
|
||
|
||
// 退出登录
|
||
private handleLogout() {
|
||
const currentLanguage = settingsService.getSettings().language;
|
||
AlertDialog.show({
|
||
title: currentLanguage === Language.CHINESE ? '确认退出' : 'Confirm Logout',
|
||
message: currentLanguage === Language.CHINESE ? '确定要退出登录吗？' : 'Are you sure you want to log out?',
|
||
buttons: [
|
||
{
|
||
value: currentLanguage === Language.CHINESE ? '确定' : 'Confirm',
|
||
action: () => {
|
||
// 清空当前用户信息
|
||
settingsService.setCurrentAccount('');
|
||
|
||
// 记录退出登录日志
|
||
logManager.info(LogCategory.USER, LogEventType.LOGOUT, 'User logged out');
|
||
|
||
// 跳转到登录页面
|
||
router.replaceUrl({
|
||
url: 'pages/login'
|
||
});
|
||
}
|
||
},
|
||
{
|
||
value: currentLanguage === Language.CHINESE ? '取消' : 'Cancel',
|
||
action: () => {
|
||
// 取消操作，不做任何事
|
||
}
|
||
}
|
||
]
|
||
});
|
||
}
|
||
|
||
// 获取主题颜色显示名称
|
||
private getThemeColorDisplayName(): string {
|
||
const settings = settingsService.getSettings();
|
||
const texts = settingsService.getTextResources();
|
||
|
||
switch (settings.themeColor) {
|
||
case ThemeColor.BLUE:
|
||
return texts.blue;
|
||
case ThemeColor.GREEN:
|
||
return texts.green;
|
||
case ThemeColor.RED:
|
||
return texts.red;
|
||
case ThemeColor.ORANGE:
|
||
return texts.orange;
|
||
case ThemeColor.PURPLE:
|
||
return texts.purple;
|
||
default:
|
||
return texts.blue;
|
||
}
|
||
}
|
||
|
||
// 获取通知状态显示名称
|
||
private getNotificationStatusDisplayName(): string {
|
||
const settings = settingsService.getSettings();
|
||
const texts = settingsService.getTextResources();
|
||
|
||
return settings.notificationEnabled ? texts.enabled : texts.disabled;
|
||
}
|
||
|
||
// 显示过渡动画并在完成后更新UI
|
||
private showTransitionAndUpdate(updateFunc: () => void) {
|
||
// 显示全屏过渡动画
|
||
this.isLoading = true;
|
||
|
||
// 立即执行更新函数
|
||
updateFunc();
|
||
|
||
// 1秒后隐藏过渡动画，此时所有页面更新已完成
|
||
setTimeout(() => {
|
||
this.isLoading = false;
|
||
this.forceRefresh();
|
||
}, 1000);
|
||
}
|
||
|
||
build() {
|
||
Stack({ alignContent: Alignment.Center }) {
|
||
// 主要内容区（仅在非加载状态显示）
|
||
if (!this.isLoading) {
|
||
Column() {
|
||
// 标题区域
|
||
Row() {
|
||
Text(this.currentTexts.systemSettings)
|
||
.fontSize(20)
|
||
.fontWeight(FontWeight.Bold)
|
||
.fontColor('#333')
|
||
|
||
Blank()
|
||
|
||
// 小标志
|
||
Circle({ width: 8, height: 8 })
|
||
.fill(this.currentThemeColor)
|
||
.margin({ right: 6 })
|
||
.opacity(0.8)
|
||
}
|
||
.width('100%')
|
||
.padding({ top: 20, bottom: 20, left: 24, right: 24 })
|
||
|
||
// 分隔线
|
||
Divider()
|
||
.height(1)
|
||
.opacity(0.08)
|
||
.color('#000')
|
||
.width('100%')
|
||
|
||
// 设置项列表
|
||
Column({ space: 'none' }) {
|
||
SettingItem({
|
||
title: this.currentTexts.themeColor,
|
||
value: this.getThemeColorDisplayName(),
|
||
refreshTrigger: this.refreshTrigger,
|
||
themeColor: this.currentThemeColor,
|
||
icon: $r('app.media.theme'),
|
||
onItemClick: () => this.showThemeColorDialog()
|
||
})
|
||
|
||
SettingItem({
|
||
title: this.currentTexts.languageText,
|
||
value: settingsService.getSettings().language,
|
||
refreshTrigger: this.refreshTrigger,
|
||
themeColor: this.currentThemeColor,
|
||
icon: $r('app.media.language'),
|
||
onItemClick: () => this.showLanguageDialog()
|
||
})
|
||
|
||
SettingItem({
|
||
title: this.currentTexts.notificationSettings,
|
||
value: this.getNotificationStatusDisplayName(),
|
||
refreshTrigger: this.refreshTrigger,
|
||
themeColor: this.currentThemeColor,
|
||
icon: $r('app.media.notification'),
|
||
onItemClick: () => this.toggleNotification()
|
||
})
|
||
|
||
// 添加日志记录设置项
|
||
SettingItem({
|
||
title: this.texts.versionLog || '日志记录',
|
||
value: '点一点',
|
||
refreshTrigger: this.refreshTrigger,
|
||
themeColor: this.themeColor,
|
||
icon: $r('app.media.update'),
|
||
onItemClick: () => {
|
||
this.showVersionLog();
|
||
}
|
||
})
|
||
|
||
// 添加关于选项
|
||
SettingItem({
|
||
title: this.currentTexts.about || '关于',
|
||
value: `v${settingsService.getCurrentVersion()}`,
|
||
refreshTrigger: this.refreshTrigger,
|
||
themeColor: this.currentThemeColor,
|
||
icon: $r('app.media.info'),
|
||
onItemClick: () => this.showAboutInfo()
|
||
})
|
||
}
|
||
.width('100%')
|
||
|
||
// 与系统设置分开的退出登录按钮
|
||
Column() {
|
||
// 添加间距
|
||
Divider()
|
||
.width('100%')
|
||
.color('#EEEEEE')
|
||
.margin({ top: 30, bottom: 30 })
|
||
|
||
Button({
|
||
type: ButtonType.Normal
|
||
}) {
|
||
Row() {
|
||
Text(this.currentLanguage === Language.CHINESE ? '退出登录' : 'Logout')
|
||
.fontSize(16)
|
||
.fontColor('#FFFFFF')
|
||
}
|
||
.width('100%')
|
||
.justifyContent(FlexAlign.Center)
|
||
}
|
||
.width('100%')
|
||
.height(50)
|
||
.backgroundColor('#F56C6C')
|
||
.borderRadius(10)
|
||
.onClick(() => {
|
||
this.handleLogout();
|
||
})
|
||
}
|
||
.width('100%')
|
||
.margin({ bottom: 20 })
|
||
}
|
||
.width('100%')
|
||
.backgroundColor(Color.White)
|
||
.borderRadius(16)
|
||
.shadow({ radius: 15, color: 'rgba(0, 0, 0, 0.08)', offsetY: 2 })
|
||
}
|
||
|
||
// 加载动画层 - 美化版
|
||
if (this.isLoading) {
|
||
Column() {
|
||
LoadingProgress()
|
||
.color(this.currentThemeColor)
|
||
.width(100).height(100)
|
||
}
|
||
.width('100%')
|
||
.height('100%')
|
||
.justifyContent(FlexAlign.Center)
|
||
.backgroundColor(Color.White)
|
||
// 添加淡入淡出效果
|
||
.opacity(1)
|
||
.animation({
|
||
delay: 0,
|
||
duration: 300,
|
||
curve: Curve.EaseInOut
|
||
})
|
||
}
|
||
}
|
||
.width('100%')
|
||
.height('100%')
|
||
}
|
||
|
||
// 显示主题颜色选择对话框
|
||
private showThemeColorDialog(): void {
|
||
// 确保获取最新的文本资源
|
||
const texts = settingsService.getTextResources();
|
||
const currentLanguage = settingsService.getSettings().language;
|
||
AlertDialog.show({
|
||
title: texts.themeColor,
|
||
message: currentLanguage === Language.CHINESE ? '请选择您喜欢的应用主题颜色' : 'Choose your preferred theme color',
|
||
buttons: [
|
||
{
|
||
value: texts.blue,
|
||
action: () => {
|
||
// 使用过渡动画更新设置
|
||
this.showTransitionAndUpdate(() => {
|
||
settingsService.setThemeColor(ThemeColor.BLUE);
|
||
});
|
||
}
|
||
},
|
||
{
|
||
value: texts.green,
|
||
action: () => {
|
||
// 使用过渡动画更新设置
|
||
this.showTransitionAndUpdate(() => {
|
||
settingsService.setThemeColor(ThemeColor.GREEN);
|
||
});
|
||
}
|
||
},
|
||
{
|
||
value: texts.red,
|
||
action: () => {
|
||
// 使用过渡动画更新设置
|
||
this.showTransitionAndUpdate(() => {
|
||
settingsService.setThemeColor(ThemeColor.RED);
|
||
});
|
||
}
|
||
},
|
||
{
|
||
value: texts.orange,
|
||
action: () => {
|
||
// 使用过渡动画更新设置
|
||
this.showTransitionAndUpdate(() => {
|
||
settingsService.setThemeColor(ThemeColor.ORANGE);
|
||
});
|
||
}
|
||
},
|
||
{
|
||
value: currentLanguage === Language.CHINESE ? '取消' : 'Cancel',
|
||
action: () => {}
|
||
}
|
||
]
|
||
})
|
||
}
|
||
|
||
// 显示语言选择对话框
|
||
private showLanguageDialog(): void {
|
||
// 确保获取最新的文本资源
|
||
const texts = settingsService.getTextResources();
|
||
const currentLanguage = settingsService.getSettings().language;
|
||
AlertDialog.show({
|
||
title: texts.languageText,
|
||
message: currentLanguage === Language.CHINESE ? '请选择应用语言' : 'Please select a language',
|
||
buttons: [
|
||
{
|
||
value: '中文',
|
||
action: () => {
|
||
// 使用过渡动画更新设置
|
||
this.showTransitionAndUpdate(() => {
|
||
settingsService.setLanguage(Language.CHINESE);
|
||
// 语言变更需要更新文本资源
|
||
setTimeout(() => {
|
||
this.currentTexts = settingsService.getTextResources();
|
||
}, 500);
|
||
});
|
||
}
|
||
},
|
||
{
|
||
value: 'English',
|
||
action: () => {
|
||
// 使用过渡动画更新设置
|
||
this.showTransitionAndUpdate(() => {
|
||
settingsService.setLanguage(Language.ENGLISH);
|
||
// 语言变更需要更新文本资源
|
||
setTimeout(() => {
|
||
this.currentTexts = settingsService.getTextResources();
|
||
}, 500);
|
||
});
|
||
}
|
||
},
|
||
{
|
||
value: currentLanguage === Language.CHINESE ? '取消' : 'Cancel',
|
||
action: () => {}
|
||
}
|
||
]
|
||
})
|
||
}
|
||
|
||
// 切换通知设置
|
||
private toggleNotification(): void {
|
||
// 获取当前通知状态并切换
|
||
const settings = settingsService.getSettings();
|
||
const newValue = !settings.notificationEnabled;
|
||
const currentLanguage = settings.language;
|
||
|
||
// 使用过渡动画更新设置
|
||
this.showTransitionAndUpdate(() => {
|
||
settingsService.setNotificationEnabled(newValue);
|
||
|
||
// 延迟显示提示信息，等待动画结束后
|
||
setTimeout(() => {
|
||
const texts = settingsService.getTextResources();
|
||
promptAction.showToast({
|
||
message: newValue
|
||
? (currentLanguage === Language.CHINESE ? '通知已开启' : 'Notifications enabled')
|
||
: (currentLanguage === Language.CHINESE ? '通知已关闭' : 'Notifications disabled'),
|
||
duration: 2000
|
||
});
|
||
}, 1100);
|
||
});
|
||
}
|
||
|
||
// 显示版本日志对话框
|
||
private showVersionLog(): void {
|
||
const versionLogs = settingsService.getVersionLogs();
|
||
if (versionLogs.length === 0) {
|
||
promptAction.showToast({
|
||
message: '暂无更新日志',
|
||
duration: 2000
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 使用LogManager的版本比较逻辑进行排序
|
||
const sortedLogs = [...versionLogs].sort((a, b) => {
|
||
return logManager.compareVersions(a.version, b.version);
|
||
});
|
||
|
||
// 构建版本日志内容
|
||
let message = '';
|
||
for (const log of sortedLogs) {
|
||
message += `版本 ${log.version}（${log.date}）\n`;
|
||
for (const change of log.changes) {
|
||
message += `• ${change}\n`;
|
||
}
|
||
message += '\n';
|
||
}
|
||
|
||
// 显示对话框
|
||
AlertDialog.show({
|
||
title: '日志记录',
|
||
message: message,
|
||
confirm: {
|
||
value: this.currentLanguage === Language.CHINESE ? '确定' : 'OK',
|
||
action: () => {}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 显示关于信息
|
||
private showAboutInfo(): void {
|
||
// 确保使用最新的文本资源
|
||
const texts = settingsService.getTextResources();
|
||
const currentLanguage = settingsService.getSettings().language;
|
||
const currentVersion = settingsService.getCurrentVersion();
|
||
AlertDialog.show({
|
||
title: texts.about,
|
||
message: `v${currentVersion}\n© 922213102鸿蒙第一组 版权所有`,
|
||
confirm: {
|
||
value: currentLanguage === Language.CHINESE ? '确定' : 'OK',
|
||
action: () => {}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
// 设置项组件 - 美化版
|
||
@Component
|
||
struct SettingItem {
|
||
title: string = '';
|
||
value: string = '';
|
||
// 添加刷新触发器属性，用于强制组件刷新
|
||
refreshTrigger: number = 0;
|
||
// 添加主题颜色属性
|
||
themeColor: string = '#409eff';
|
||
// 添加图标属性
|
||
icon: Resource = $r('app.media.settings');
|
||
|
||
onItemClick: () => void = () => {};
|
||
|
||
// 动画状态
|
||
@State pressed: boolean = false;
|
||
|
||
build() {
|
||
Row() {
|
||
// 图标容器
|
||
Row() {
|
||
Image(this.icon)
|
||
.width(22)
|
||
.height(22)
|
||
.fillColor(this.themeColor)
|
||
.opacity(0.9)
|
||
}
|
||
.width(40)
|
||
.height(40)
|
||
.borderRadius(20)
|
||
.backgroundColor(`${this.themeColor}15`) // 使用主题色的淡色背景
|
||
.justifyContent(FlexAlign.Center)
|
||
.margin({ right: 16 })
|
||
|
||
// 标题和值
|
||
Column() {
|
||
Text(this.title)
|
||
.fontSize(16)
|
||
.fontColor('#333')
|
||
.fontWeight(FontWeight.Medium)
|
||
}
|
||
.alignItems(HorizontalAlign.Start)
|
||
.layoutWeight(1)
|
||
|
||
// 值和箭头
|
||
Row() {
|
||
Text(this.value)
|
||
.fontSize(16)
|
||
.fontColor('#999')
|
||
.textAlign(TextAlign.End)
|
||
|
||
Image($r('app.media.arrow_right'))
|
||
.width(18)
|
||
.height(18)
|
||
.margin({ left: 8 })
|
||
.fillColor('#999')
|
||
}
|
||
.alignItems(VerticalAlign.Center)
|
||
}
|
||
.width('100%')
|
||
.height(76)
|
||
.padding({ left: 20, right: 20 })
|
||
.backgroundColor(this.pressed ? '#f5f5f5' : Color.White)
|
||
.alignItems(VerticalAlign.Center)
|
||
.borderRadius(12)
|
||
.animation({
|
||
duration: 200,
|
||
curve: Curve.EaseInOut
|
||
})
|
||
.onTouch((event) => {
|
||
if (event.type === TouchType.Down) {
|
||
this.pressed = true;
|
||
} else if (event.type === TouchType.Up || event.type === TouchType.Cancel) {
|
||
this.pressed = false;
|
||
if (event.type === TouchType.Up) {
|
||
this.onItemClick();
|
||
}
|
||
}
|
||
})
|
||
|
||
}
|
||
}
|
||
|
||
// 底部导航栏组件
|
||
@Component
|
||
struct BottomNavigation {
|
||
@Prop activePage: string = 'settings';
|
||
@Prop themeColor: string;
|
||
@Prop texts: TextResources = {} as TextResources;
|
||
|
||
build() {
|
||
Row() {
|
||
// 首页按钮
|
||
Column() {
|
||
Image($r('app.media.home'))
|
||
.width(24)
|
||
.height(24)
|
||
.fillColor(this.activePage === 'home' ? this.themeColor : '#999')
|
||
Text(this.texts.home)
|
||
.fontSize(12)
|
||
.fontColor(this.activePage === 'home' ? this.themeColor : '#999')
|
||
.margin({ top: 4 })
|
||
}
|
||
.layoutWeight(1)
|
||
.onClick(() => {
|
||
if (this.activePage !== 'home') {
|
||
router.replaceUrl({
|
||
url: 'pages/HomePage',
|
||
params: {
|
||
direction: 'left' // 从设置页向左切换到首页
|
||
}
|
||
});
|
||
}
|
||
})
|
||
|
||
// 上课按钮
|
||
Column() {
|
||
Image($r('app.media.class'))
|
||
.width(24)
|
||
.height(24)
|
||
.fillColor(this.activePage === 'class' ? this.themeColor : '#999')
|
||
Text(this.texts.class)
|
||
.fontSize(12)
|
||
.fontColor(this.activePage === 'class' ? this.themeColor : '#999')
|
||
.margin({ top: 4 })
|
||
}
|
||
.layoutWeight(1)
|
||
.onClick(() => {
|
||
if (this.activePage !== 'class') {
|
||
router.replaceUrl({
|
||
url: 'pages/ClassPage',
|
||
params: {
|
||
direction: 'left' // 从设置页向左切换到上课页
|
||
}
|
||
});
|
||
}
|
||
})
|
||
|
||
// 设置按钮
|
||
Column() {
|
||
Image($r('app.media.settings'))
|
||
.width(24)
|
||
.height(24)
|
||
.fillColor(this.activePage === 'settings' ? this.themeColor : '#999')
|
||
Text(this.texts.settings)
|
||
.fontSize(12)
|
||
.fontColor(this.activePage === 'settings' ? this.themeColor : '#999')
|
||
.margin({ top: 4 })
|
||
}
|
||
.layoutWeight(1)
|
||
.onClick(() => {
|
||
if (this.activePage !== 'settings') {
|
||
router.replaceUrl({
|
||
url: 'pages/SettingsPage'
|
||
});
|
||
}
|
||
})
|
||
}
|
||
.width('100%')
|
||
.height(60)
|
||
.backgroundColor(Color.White)
|
||
.border({ color: '#eeeeee', width: 1, style: BorderStyle.Solid })
|
||
}
|
||
} |