128 lines
2.6 KiB
TypeScript
128 lines
2.6 KiB
TypeScript
import { ViewModel, observable, computed, command, viewModel } from '@esengine/mvvm-ui-framework';
|
||
|
||
/**
|
||
* 用户信息视图模型
|
||
* 展示如何使用 MVVM 框架进行数据绑定
|
||
*/
|
||
@viewModel
|
||
export class UserInfoViewModel extends ViewModel {
|
||
|
||
public get name(): string {
|
||
return 'UserInfoViewModel';
|
||
}
|
||
|
||
/**
|
||
* 用户名 - 使用 @observable 装饰器自动处理数据绑定
|
||
*/
|
||
@observable
|
||
userName: string = '未知用户';
|
||
|
||
/**
|
||
* 用户等级
|
||
*/
|
||
level: number = 1;
|
||
|
||
/**
|
||
* 用户分数
|
||
*/
|
||
@observable
|
||
score: number = 0;
|
||
|
||
/**
|
||
* 用户金币
|
||
*/
|
||
@observable
|
||
coins: number = 100;
|
||
|
||
/**
|
||
* 是否在线
|
||
*/
|
||
@observable
|
||
isOnline: boolean = false;
|
||
|
||
/**
|
||
* 计算属性：用户显示名称（格式化）
|
||
*/
|
||
@computed(['userName', 'level'])
|
||
get displayName(): string {
|
||
return `${this.userName} (Lv.${this.level})`;
|
||
}
|
||
|
||
/**
|
||
* 计算属性：在线状态文本
|
||
*/
|
||
@computed(['isOnline'])
|
||
get onlineStatusText(): string {
|
||
return this.isOnline ? '在线' : '离线';
|
||
}
|
||
|
||
/**
|
||
* 计算属性：总资产（分数 + 金币）
|
||
*/
|
||
@computed(['score', 'coins'])
|
||
get totalAssets(): number {
|
||
return this.score + this.coins;
|
||
}
|
||
|
||
/**
|
||
* 增加分数 - 使用 @command 装饰器，可以通过 executeCommand('addScore') 调用
|
||
*/
|
||
@command()
|
||
public addScore(amount: number = 10): void {
|
||
this.score += amount;
|
||
}
|
||
|
||
|
||
|
||
/**
|
||
* 增加金币 - 带有 canExecute 逻辑的命令
|
||
*/
|
||
@command('canAddCoins')
|
||
public addCoins(amount: number = 5): void {
|
||
this.coins += amount;
|
||
}
|
||
|
||
/**
|
||
* 检查是否可以增加金币（例如：等级必须大于 1）
|
||
*/
|
||
public canAddCoins(): boolean {
|
||
return this.level > 1;
|
||
}
|
||
|
||
/**
|
||
* 升级 - 带有复杂 canExecute 逻辑的命令
|
||
*/
|
||
@command('canLevelUp')
|
||
public levelUp(): void {
|
||
this.level += 1;
|
||
this.score += this.level * 100; // 升级奖励
|
||
}
|
||
|
||
/**
|
||
* 检查是否可以升级（例如：需要足够的分数）
|
||
*/
|
||
public canLevelUp(): boolean {
|
||
return this.score >= this.level * 100;
|
||
}
|
||
|
||
/**
|
||
* 切换在线状态
|
||
*/
|
||
@command()
|
||
public toggleOnlineStatus(): void {
|
||
this.isOnline = !this.isOnline;
|
||
}
|
||
|
||
/**
|
||
* 重置用户数据
|
||
*/
|
||
public resetUserData(): void {
|
||
this.batchUpdate({
|
||
userName: '新用户',
|
||
level: 1,
|
||
score: 0,
|
||
coins: 100,
|
||
isOnline: false
|
||
});
|
||
}
|
||
}
|