====== Nop 的三个前端项目：关系与演化 ======

Nop 平台目前有三个前端仓库，它们代表了不同的设计阶段和定位。本文理清三者的关系。

===== nop-chaos（旧版，Vue3） =====

[[https://gitee.com/canonical-entropy/nop-chaos|nop-chaos]] 是最早的前端项目，基于 Vue3 + ant-design-vue + 百度 AMIS + logicflow + xspreadsheet。

特点：

  * 与后端 nop-entropy 配套使用
  * 页面由后端生成的 AMIS JSON 驱动
  * 构建产物被打包为 Java jar 模块（nop-web-site、nop-web-amis-editor）
  * 开发时不需要单独编译前端

这个项目目前处于维护状态。新功能开发主要在 chaos-flux 和 chaos-next 上进行。

===== nop-chaos-flux（新版 Runtime） =====

[[https://github.com/entropy-cloud/nop-chaos-flux|nop-chaos-flux]] 是用 TypeScript/React 从零构建的前端运行时，核心是**七个原语**（Template、ScopeRef、Value、Resource、Reaction、Capability、Host Projection）。

与 chaos 的关键区别：

  * 不依赖 AMIS，有自己的渲染引擎
  * JSON Schema 驱动，支持编译期优化
  * 内建 Flow Designer、Report Designer、电子表格、文字编辑器
  * MIT 许可证

定位：**"从 JSON 生成 UI"的底层基础设施**。适合平台团队构建低代码工具。

===== nop-chaos-next（新版应用框架） =====

[[https://github.com/entropy-cloud/nop-chaos-next|nop-chaos-next]] 是 TypeScript/React 的应用框架，基于 AMIS 渲染，提供企业应用脚手架。

核心能力：

  * Extension 系统 — 品牌、主题、菜单、语言、页面的统一配置
  * Plugin 系统 — 基于 SystemJS 的远程插件加载和隔离
  * 内置页面模板：Dashboard、AI Workbench、Flow Editor、主子表 CRUD
  * 多租户、多主题、国际化

定位：**"如何构建可扩展的业务应用"的应用框架**。适合业务团队快速开发企业级后台。

===== 关系总结 =====

<code>
nop-chaos（Vue3 + AMIS，旧版）
    │
    ├─→ 演进方向
    │
    └─→ nop-chaos-flux（React，自研渲染引擎）
           └─→ 提供 UI 组件库、主题 token
                   │
                   ↓
           nop-chaos-next（React + AMIS，应用框架）
                   │
                   ├─→ 同步 flux 的 ui/tailwind/theme 包
                   └─→ 后续可引入 flux 作为可选渲染层
</code>

一套后端（nop-entropy），三套前端可选：

^ 项目 ^ 技术栈 ^ 定位 ^ 适合谁 ^
| nop-chaos | Vue3 + AMIS | 旧版前端，维护中 | 已有项目 |
| chaos-flux | React 19 + 自研 | Schema 驱动运行时 | 平台团队 |
| chaos-next | React 19 + AMIS | 企业应用框架 | 业务团队 |

三个前端项目共享同样的后端 API 和 Delta 定制机制，选择哪个取决于你的技术栈偏好和项目需求。

===== 进一步阅读 =====

  * [[.:flux_guide|Chaos Flux 运行时详解]]
  * [[.:next_guide|Chaos Next 应用框架]]
  * [[.:frontend_guide|前端架构概述]]