更新mvvm示例

2025-07-08 08:55:55 +08:00
parent d2b4455205
commit 7b85039b17
15 changed files with 2599 additions and 21 deletions
--- a/extensions/cocos/cocos-ecs/assets/scripts/mvvm/UserInfoViewModel.ts
+++ b/extensions/cocos/cocos-ecs/assets/scripts/mvvm/UserInfoViewModel.ts
@@ -0,0 +1,128 @@
+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
+        });
+    }
+}