NoesisDemo - TypeScript + AI 赋能的 MVVM 开发方案
项目仓库: https://github.com/No-needto-recall/NoesisDemo
这个项目是做什么的？
这是一个 Unreal Engine 5.4 的示例项目，旨在演示：
- 用 TypeScript 编写 NoesisGUI 的 ViewModel - 利用 PuerTS 的
uclass_extends特性，彻底告别蓝图开发。 - 完美复刻官方 Buttons 和 QuestLog 示例 - 证明该方案的完整性和可行性。
- 完整的 AI 辅助开发支持 (例如 Claude Code) - 实现近乎自动化的 UI 代码生成。
- 纯代码工作流 - XAML + TypeScript ，对版本控制极其友好，再无蓝图合并冲突。
核心理念：XAML 和 ViewModel 都是代码 → AI 完全理解 → 自动生成和修改 → 开发效率 dramatically improved
目录
核心特性
完美复刻官方示例：成功使用 TypeScript 复刻了 NoesisGUI 官方的 Buttons 和 QuestLog 示例。
TypeScript 代码化 ViewModel：使用 PuerTS 的 uclass_extends 直接继承 UE 类并自动生成蓝图。
动态 DataContext 设置：自定义 UNoesisViewModeInstance，调整 DataContext 的赋值时机。
AI 友好：XAML 和 ViewModel 均为代码，易于 AI 理解和生成。
版本控制友好：完全基于代码，告别蓝图合并的噩梦。
属性自动通知：NoesisProxy 自动处理 PropertyChanged，并原生支持 TArray 和 TMap。
AI 辅助开发 - 近乎自动化的 UI 代码生成
为什么这套方案对 AI 友好？
本方案采用完全代码化的工作流：
XAML 文件是纯文本格式 - AI 可以轻松理解和生成。
ViewModel 使用 TypeScript 编写 - 这是 AI 的强项。
数据绑定逻辑清晰可读 - AI 能够进行推理。
这使得本项目与 AI 辅助开发工具（如 Claude Code, GitHub Copilot, Cursor 等）完全兼容。
AI 能做什么？
自动生成 ViewModel 代码
只需描述你的需求，AI 就能生成完整的 ViewModel：
// 输入："创建一个设置界面，包含音量和画质选项" // AI 自动生成： class TS_SettingsViewMode extends UE.Object { @uproperty(uproperty.EditAnywhere, uproperty.BlueprintReadWrite) Volume: number = 80; @uproperty(uproperty.EditAnywhere, uproperty.BlueprintReadWrite) Quality: string = "High"; @ufunction(ufunction.BlueprintCallable) ApplySettings(): void { console.log(`Applying: Volume=${this.Volume}, Quality=${this.Quality}`); } } 自动修改和重构代码
告诉 AI “增加一个音效开关” → 自动修改 TypeScript 和 XAML 。 AI 能理解数据绑定逻辑，自动添加相应的属性和命令。 AI 还能自动处理复杂的集合绑定 (TArray, TMap)。
快速生成完整界面
“创建一个包含用户列表的界面” → AI 自动生成 XAML + ViewModel 。 “增加搜索和筛选功能” → AI 自动补全相关代码。 “实现拖拽排序” → AI 生成完整的事件处理逻辑。
使用 Claude Code 等 AI 工具，只需描述 UI 需求和交互逻辑，AI 就能自动生成 XAML 和 ViewModel 代码。 开发者只需审查和微调，极大地提升了开发效率，实现了近乎自动化的 UI 代码开发体验。
"再也不用手动拉蓝图连线了AI 直接生成代码！" - 某开发者
技术架构亮点
PuerTS uclass_extends - 自动生成蓝图类
通过 TypeScript 装饰器定义属性和方法，PuerTS 会自动生成对应的蓝图类：
class TS_ButtonsViewMode extends UE.Object { static Path(): string { return "/Game/BluePrints/TypeScript/ViewMode/Buttons/TS_ButtonsViewMode_C"; } @uproperty(uproperty.EditAnywhere, uproperty.BlueprintReadWrite) TestValue: string = "Hello NoesisGUI"; @ufunction(ufunction.BlueprintCallable) StartCommand(): void { console.log("Button clicked!"); } } UNoesisViewModeInstance - 解决 DataContext 限制
自定义的 UNoesisInstance 子类，在 XamlLoaded 回调中自动设置 DataContext，解决了官方类不支持动态设置的问题。
NoesisProxy - 属性自动通知
利用 Javascript Proxy API 自动拦截属性修改，并触发 NoesisGUI 的更新：
const proxy = createNoesisProxy<TS_ButtonsViewMode>(viewMode); // 任何属性修改都会自动通知 NoesisGUI proxy.TestValue = "New Value"; // 支持 TArray 自动通知 proxy.items.Add(newItem); // 自动调用 NotifyArrayPostAdd proxy.items.RemoveAt(0); // 自动调用 NotifyArrayPreRemove + PostRemove // 支持 TMap 自动通知 proxy.map.Add("key", value); // 自动调用 NotifyMapPostAdd 数据绑定流程：
TypeScript 类定义 (@uproperty, @ufunction) ↓ PuerTS 生成蓝图类 ↓ TypeScript 创建实例 (UE.NewObject) ↓ 绑定到 UNoesisViewModeInstance (PendingDataContext) ↓ XAML 加载完成 (XamlLoaded 回调) ↓ 自动设置 Dataontext ↓ 数据绑定生效 (XAML Binding → ViewModel 属性) ↓ 属性更新 (NoesisProxy → NotifyPropertyChanged → UI 刷新) 完美复刻官方示例
Buttons 示例
演示了基础的 MVVM 数据绑定：
- 基本属性绑定
- 命令绑定
- XAML 动画与样式
QuestLog 示例
演示了复杂的数据绑定：
TArray集合绑定 - 任务列表- 复杂数据对象 - Quest 类（标题、图片、难度、描述等）
- 动态数据操作 -
AddQuest方法，自动触发 UI 更新
// QuestLog ViewModel 示例 class TS_QuestLogViewMode extends UE.Object { @uproperty(uproperty.EditAnywhere, uproperty.BlueprintReadWrite) Quests: UE.TArray<TS_Quest>; @ufunction(ufunction.BlueprintCallable) AddQuest(Title: string, Image: UE.Texture2D, ...): TS_Quest { const Quest = UE.NewObject(TS_Quest); Quest.Initialize(Title, Image, ...); // 使用 Proxy 自动触发 TArray 更新通知 let Proxy = createNoesisProxy<TS_QuestLogViewMode>(this); Proxy.Quests.Add(Quest); return Quest; } } 快速开始
环境要求：
- Unreal Engine 5.4
- NoesisGUI 插件 3.2+
- PuerTS 插件 (最新版)
获取项目：
git clone https://github.com/No-needto-recall/NoesisDemo.git 重要提示：
- Windows 用户：克隆后，直接双击
NoesisDemo.uproject即可打开，开箱即用。 - Mac/Linux 用户：需要手动编译 C++ 代码。
详细的安装步骤、配置说明和使用教程，请访问项目的 GitHub 仓库查看完整文档。
相关链接
- GitHub 仓库: https://github.com/No-needto-recall/NoesisDemo
- PuerTS UClass Extends 文档: https://puerts.github.io/docs/puerts/unreal/uclass_extends/
- NoesisGUI 属性变更通知: 官方文档
总结
这个项目为 Unreal Engine 中的 NoesisGUI 开发提供了一种全新的思路：
使用 TypeScript 替代蓝图编写 ViewModel
完全代码化，版本控制友好，无蓝图合并冲突
全面兼容 AI 辅助开发工具，实现近乎自动化的 UI 代码生成
复刻官方示例，证明了方案的完整性和可行性
自动属性通知，支持复杂的 TArray 和 TMap 绑定
非常适合：
- 需要频繁迭代 UI 的项目
- 多人协作的团队项目
- 希望利用 AI 辅助开发的开发者
- 试图杜绝蓝图合并冲突的开发者
如果这个项目对你有帮助，请给它一个 Star ！ 欢迎提交 PR 来复刻更多官方 UI 示例，一起完善这个方案！
Made with for the NoesisGUI Community
目前尚无回复
Select Language