CocosPlugin/esengine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新mvvm示例

Browse Source
This commit is contained in:
YHH
2025-07-08 08:55:55 +08:00
parent d2b4455205
commit 7b85039b17
15 changed files with 2599 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitmodules vendored
View File

@@ -16,3 +16,6 @@
[submodule "examples/lawn-mower-demo"]
path = examples/lawn-mower-demo
url = https://github.com/esengine/lawn-mower-demo.git
[submodule "thirdparty/mvvm-ui-framework"]
path = thirdparty/mvvm-ui-framework
url = https://github.com/esengine/mvvm-ui-framework.git

2013
extensions/cocos/cocos-ecs/assets/scenes/scene.scene
View File

File diff suppressed because it is too large Load Diff

9
extensions/cocos/cocos-ecs/assets/scripts/mvvm.meta Normal file
View File

@@ -0,0 +1,9 @@
{
"ver": "1.2.0",
"importer": "directory",
"imported": true,
"uuid": "ab8a85e4-962f-49ac-843a-b57d534f27c5",
"files": [],
"subMetas": {},
"userData": {}
}

87
extensions/cocos/cocos-ecs/assets/scripts/mvvm/TestView.ts Normal file
View File

@@ -0,0 +1,87 @@
import { _decorator, Component, Label, Button } from 'cc';
import { DataBinding, BindingType, BindingMode } from '@esengine/mvvm-ui-framework';
import { TestViewModel } from './TestViewModel';
const { ccclass, property } = _decorator;
@ccclass('TestView')
export class TestView extends Component {
@property(Label)
testLabel: Label = null!;
@property(Button)
testButton: Button = null!;
private viewModel: TestViewModel;
private dataBinding: DataBinding;
private bindingId: string = '';
onLoad() {
console.log('TestView onLoad');
// 初始化数据绑定系统
this.dataBinding = DataBinding.getInstance();
// 创建 ViewModel
this.viewModel = new TestViewModel();
console.log('创建 ViewModel:', this.viewModel);
// 手动添加观察者来测试
this.viewModel.addObserver('testValue', (newValue, oldValue, property) => {
console.log(`属性 ${property} 变化: ${oldValue} -> ${newValue}`);
if (this.testLabel) {
this.testLabel.string = '测试值: ' + newValue;
console.log('手动更新 Label 文本:', this.testLabel.string);
}
});
// 设置数据绑定
this.setupDataBinding();
// 设置按钮事件
this.setupButtonEvent();
// 测试初始值
console.log('初始值:', this.viewModel.testValue);
}
private setupDataBinding(): void {
if (this.testLabel) {
console.log('设置数据绑定');
console.log('Label 对象:', this.testLabel);
console.log('Label 初始文本:', this.testLabel.string);
this.bindingId = this.dataBinding.bind(this.viewModel, this.testLabel, {
type: BindingType.ONE_WAY,
mode: BindingMode.FORMAT,
source: 'testValue',
target: 'string',
format: '测试值: {0}'
});
console.log('绑定ID:', this.bindingId);
// 手动测试一下绑定是否工作
this.testLabel.string = '测试值: ' + this.viewModel.testValue;
console.log('手动设置后的文本:', this.testLabel.string);
}
}
private setupButtonEvent(): void {
if (this.testButton) {
this.testButton.node.on(Button.EventType.CLICK, () => {
console.log('按钮点击');
this.viewModel.addValue();
});
}
}
onDestroy() {
if (this.bindingId) {
this.dataBinding.unbind(this.bindingId);
}
if (this.viewModel) {
this.viewModel.destroy();
}
}
}

9
extensions/cocos/cocos-ecs/assets/scripts/mvvm/TestView.ts.meta Normal file
View File

@@ -0,0 +1,9 @@
{
"ver": "4.0.24",
"importer": "typescript",
"imported": true,
"uuid": "667e05c4-fdf7-4b08-8c65-57e085465210",
"files": [],
"subMetas": {},
"userData": {}
}

38
extensions/cocos/cocos-ecs/assets/scripts/mvvm/TestViewModel.ts Normal file
View File

@@ -0,0 +1,38 @@
import 'reflect-metadata';
import { ViewModel, observable } from '@esengine/mvvm-ui-framework';
/**
* 简单的测试 ViewModel
*/
export class TestViewModel extends ViewModel {
public get name(): string {
return 'TestViewModel';
}
@observable
testValue: number = 0;
public addValue(): void {
console.log('添加值之前:', this.testValue);
console.log('notifyObservers 方法存在吗?', typeof this.notifyObservers);
// 检查属性描述符
const descriptor = Object.getOwnPropertyDescriptor(this, 'testValue') ||
Object.getOwnPropertyDescriptor(Object.getPrototypeOf(this), 'testValue');
console.log('testValue 属性描述符:', descriptor);
// 检查私有属性
console.log('_testValue 私有属性:', (this as any)._testValue);
this.testValue += 1;
console.log('添加值之后:', this.testValue);
console.log('_testValue 私有属性 (之后):', (this as any)._testValue);
// 手动触发通知测试
if (this.notifyObservers) {
console.log('手动触发通知');
this.notifyObservers('testValue', this.testValue, this.testValue - 1);
}
}
}

9
extensions/cocos/cocos-ecs/assets/scripts/mvvm/TestViewModel.ts.meta Normal file
View File

@@ -0,0 +1,9 @@
{
"ver": "4.0.24",
"importer": "typescript",
"imported": true,
"uuid": "28999657-2992-4293-839b-101ae666b364",
"files": [],
"subMetas": {},
"userData": {}
}

257
extensions/cocos/cocos-ecs/assets/scripts/mvvm/UserInfoView.ts Normal file
View File

@@ -0,0 +1,257 @@
import { _decorator, Component, Node, Label, Button } from 'cc';
import { DataBinding, BindingType, BindingMode } from '@esengine/mvvm-ui-framework';
import { UserInfoViewModel } from './UserInfoViewModel';
const { ccclass, property } = _decorator;
/**
* 用户信息视图组件
* 展示如何使用 MVVM 框架进行 Label 数据绑定
*/
@ccclass('UserInfoView')
export class UserInfoView extends Component {
@property(Label)
userNameLabel: Label = null!;
@property(Label)
levelLabel: Label = null!;
@property(Label)
scoreLabel: Label = null!;
@property(Label)
coinsLabel: Label = null!;
@property(Label)
onlineStatusLabel: Label = null!;
@property(Label)
displayNameLabel: Label = null!;
@property(Label)
totalAssetsLabel: Label = null!;
@property(Button)
addScoreButton: Button = null!;
@property(Button)
addCoinsButton: Button = null!;
@property(Button)
levelUpButton: Button = null!;
@property(Button)
toggleOnlineButton: Button = null!;
@property(Button)
resetButton: Button = null!;
private viewModel: UserInfoViewModel;
private dataBinding: DataBinding;
private bindingIds: string[] = [];
onLoad() {
// 初始化数据绑定系统
this.dataBinding = DataBinding.getInstance();
// 创建 ViewModel
this.viewModel = new UserInfoViewModel();
// 设置数据绑定
this.setupDataBindings();
// 设置按钮事件
this.setupButtonEvents();
}
/**
* 设置数据绑定
*/
private setupDataBindings(): void {
// 用户名绑定
if (this.userNameLabel) {
const bindingId = this.dataBinding.bind(this.viewModel, this.userNameLabel, {
type: BindingType.ONE_WAY,
mode: BindingMode.REPLACE,
source: 'userName',
target: 'string'
});
this.bindingIds.push(bindingId);
this.dataBinding.bind(this.viewModel, this.coinsLabel, {
type: BindingType.ONE_WAY,
mode: BindingMode.REPLACE,
source: 'price',
target: 'string',
converter: 'currency', // 货币转换器
converterParams: ['USD', 2], // 美元，2位小数
format: '价格: {0}'
});
this.dataBinding.registerConverter('currency', {
convert: (value: number) => `${(value * 100).toFixed(1)}%`,
convertBack: (value: string) => parseFloat(value) / 100
});
}
// 等级绑定（使用格式化）
if (this.levelLabel) {
const bindingId = this.dataBinding.bind(this.viewModel, this.levelLabel, {
type: BindingType.ONE_WAY,
mode: BindingMode.FORMAT,
source: 'level',
target: 'string',
format: '等级: {0}'
});
this.bindingIds.push(bindingId);
}
// 分数绑定（使用数字转换器）
if (this.scoreLabel) {
const bindingId = this.dataBinding.bind(this.viewModel, this.scoreLabel, {
type: BindingType.ONE_WAY,
mode: BindingMode.FORMAT,
source: 'score',
target: 'string',
converter: 'number',
format: '分数: {0}'
});
this.bindingIds.push(bindingId);
}
// 金币绑定（使用数字转换器）
if (this.coinsLabel) {
const bindingId = this.dataBinding.bind(this.viewModel, this.coinsLabel, {
type: BindingType.ONE_WAY,
mode: BindingMode.FORMAT,
source: 'coins',
target: 'string',
converter: 'number',
format: '金币: {0}'
});
this.bindingIds.push(bindingId);
}
// 在线状态绑定
if (this.onlineStatusLabel) {
const bindingId = this.dataBinding.bind(this.viewModel, this.onlineStatusLabel, {
type: BindingType.ONE_WAY,
mode: BindingMode.FORMAT,
source: 'onlineStatusText',
target: 'string',
format: '状态: {0}'
});
this.bindingIds.push(bindingId);
}
// 显示名称绑定（计算属性）
if (this.displayNameLabel) {
const bindingId = this.dataBinding.bind(this.viewModel, this.displayNameLabel, {
type: BindingType.ONE_WAY,
mode: BindingMode.REPLACE,
source: 'displayName',
target: 'string'
});
this.bindingIds.push(bindingId);
}
// 总资产绑定（计算属性）
if (this.totalAssetsLabel) {
const bindingId = this.dataBinding.bind(this.viewModel, this.totalAssetsLabel, {
type: BindingType.ONE_WAY,
mode: BindingMode.FORMAT,
source: 'totalAssets',
target: 'string',
converter: 'number',
format: '总资产: {0}'
});
this.bindingIds.push(bindingId);
}
}
/**
* 设置按钮事件
*/
private setupButtonEvents(): void {
// 增加分数按钮 - 直接调用方法
if (this.addScoreButton) {
this.addScoreButton.node.on(Button.EventType.CLICK, () => {
this.viewModel.executeCommand('addScore');
});
}
// 增加金币按钮 - 使用命令系统，支持 canExecute 检查
if (this.addCoinsButton) {
this.addCoinsButton.node.on(Button.EventType.CLICK, () => {
// 检查命令是否可以执行
if (this.viewModel.canExecuteCommand('addCoins')) {
this.viewModel.executeCommand('addCoins');
} else {
console.log('等级太低，无法获得金币！');
}
});
}
// 升级按钮 - 使用命令系统，支持 canExecute 检查
if (this.levelUpButton) {
this.levelUpButton.node.on(Button.EventType.CLICK, () => {
// 检查命令是否可以执行
if (this.viewModel.canExecuteCommand('levelUp')) {
this.viewModel.executeCommand('levelUp');
} else {
console.log('分数不足，无法升级！');
}
});
}
// 切换在线状态按钮 - 直接调用方法
if (this.toggleOnlineButton) {
this.toggleOnlineButton.node.on(Button.EventType.CLICK, () => {
this.viewModel.toggleOnlineStatus();
});
}
// 重置按钮 - 直接调用方法
if (this.resetButton) {
this.resetButton.node.on(Button.EventType.CLICK, () => {
this.viewModel.resetUserData();
});
}
}
/**
* 手动更新用户信息（演示用）
*/
public updateUserInfo(): void {
// 可以通过代码直接修改 ViewModel 的属性
// 绑定的 Label 会自动更新
this.viewModel.userName = '测试用户' + Math.floor(Math.random() * 1000);
this.viewModel.level = Math.floor(Math.random() * 50) + 1;
this.viewModel.score = Math.floor(Math.random() * 10000);
this.viewModel.coins = Math.floor(Math.random() * 1000);
this.viewModel.isOnline = Math.random() > 0.5;
}
/**
* 获取当前 ViewModel
*/
public getViewModel(): UserInfoViewModel {
return this.viewModel;
}
onDestroy() {
// 清理绑定
for (const bindingId of this.bindingIds) {
this.dataBinding.unbind(bindingId);
}
this.bindingIds = [];
// 销毁 ViewModel
if (this.viewModel) {
this.viewModel.destroy();
}
}
}

9
extensions/cocos/cocos-ecs/assets/scripts/mvvm/UserInfoView.ts.meta Normal file
View File

@@ -0,0 +1,9 @@
{
"ver": "4.0.24",
"importer": "typescript",
"imported": true,
"uuid": "0a14765b-2165-4fba-b286-00ba485caa11",
"files": [],
"subMetas": {},
"userData": {}
}

128
extensions/cocos/cocos-ecs/assets/scripts/mvvm/UserInfoViewModel.ts Normal file
View File

@@ -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
});
}
}

9
extensions/cocos/cocos-ecs/assets/scripts/mvvm/UserInfoViewModel.ts.meta Normal file
View File

@@ -0,0 +1,9 @@
{
"ver": "4.0.24",
"importer": "typescript",
"imported": true,
"uuid": "0e90a89e-1c64-4c47-ab61-9093f9964678",
"files": [],
"subMetas": {},
"userData": {}
}

41
extensions/cocos/cocos-ecs/package-lock.json generated
View File

@@ -6,9 +6,29 @@
"": {
"name": "cocos-ecs",
"dependencies": {
"@esengine/ai": "^2.0.15",
"@esengine/ai": "^2.0.17",
"@esengine/cocos-nexus": "^1.0.1",
"@esengine/ecs-framework": "^2.1.23"
"@esengine/ecs-framework": "^2.1.23",
"@esengine/mvvm-ui-framework": "^1.0.3"
}
},
"../../../thirdparty/mvvm-ui-framework": {
"name": "@esengine/mvvm-ui-framework",
"version": "1.0.2",
"extraneous": true,
"license": "MIT",
"dependencies": {
"reflect-metadata": "^0.1.13"
},
"devDependencies": {
"@rollup/plugin-commonjs": "^28.0.3",
"@rollup/plugin-node-resolve": "^16.0.1",
"@rollup/plugin-terser": "^0.4.4",
"@types/node": "^20.19.0",
"rimraf": "^5.0.0",
"rollup": "^4.42.0",
"rollup-plugin-dts": "^6.2.1",
"typescript": "^5.8.3"
}
},
"node_modules/@cocos/creator-types": {
@@ -18,9 +38,9 @@
"peer": true
},
"node_modules/@esengine/ai": {
"version": "2.0.15",
"resolved": "https://registry.npmjs.org/@esengine/ai/-/ai-2.0.15.tgz",
"integrity": "sha512-n6z66aWtVvIvwmJSXNeMbnfi63AUgXV7ZSrLmVeUMQGxtGjHbbnMwAdk2IN+ab6yTk0Gw4p5eA1UiXP2+r1wqA==",
"version": "2.0.17",
"resolved": "https://registry.npmjs.org/@esengine/ai/-/ai-2.0.17.tgz",
"integrity": "sha512-ek19BGzW4VmkZsCr6N0SDJthzU6q+FTjb5wMwc3dEU1PdDRxPeSaD5wwhPfnTkgMXuGkncnM3NGuboz915LWyg==",
"dependencies": {
"@esengine/ecs-framework": "^2.1.20"
},
@@ -48,6 +68,17 @@
"node": ">=16.0.0"
}
},
"node_modules/@esengine/mvvm-ui-framework": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@esengine/mvvm-ui-framework/-/mvvm-ui-framework-1.0.3.tgz",
"integrity": "sha512-6WSY5PwE5du9H6xXfOmqPdscE4Lyf4lCwoEHQVGEJW3Dqhhb5O0ZuShF1XGpfJY/fONoLPTdL6Jln4japm432w==",
"dependencies": {
"reflect-metadata": "^0.1.13"
},
"engines": {
"node": ">=16.0.0"
}
},
"node_modules/reflect-metadata": {
"version": "0.1.14",
"resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.14.tgz",

5
extensions/cocos/cocos-ecs/package.json
View File

@@ -5,8 +5,9 @@
"version": "3.8.6"
},
"dependencies": {
"@esengine/ai": "^2.0.15",
"@esengine/ai": "^2.0.17",
"@esengine/cocos-nexus": "^1.0.1",
"@esengine/ecs-framework": "^2.1.23",
"@esengine/cocos-nexus": "^1.0.1"
"@esengine/mvvm-ui-framework": "^1.0.3"
}
}

2
thirdparty/BehaviourTree-ai vendored

Submodule thirdparty/BehaviourTree-ai updated: 4da406cf02...76bde06988

1
thirdparty/mvvm-ui-framework vendored Submodule

Submodule thirdparty/mvvm-ui-framework added at 9c28abce28