NOP Chaos Next:AMIS 前端应用框架
NOP Chaos Next 是 Nop 平台的 AMIS 前端应用框架,项目地址 nop-chaos-next。它定位为企业级应用脚手架,提供扩展系统和插件化能力,团队通过声明式配置即可构建复杂业务应用。
Next 基于 AMIS 渲染(已迁移到 React 19),同时逐步引入 Flux 作为可选渲染层。
与 Flux 的分工
Nop 前端有两个并行的项目:
| 维度 | Chaos Flux | Chaos Next |
|---|---|---|
| 定位 | 低代码运行时和渲染框架 | 前端应用框架和脚手架 |
| 核心能力 | 七个原语构建的 runtime | Extension 系统 + Plugin 系统 |
| 渲染层 | 自研 renderer 架构 | 基于 AMIS(React 19 迁移版) |
| 使用者 | 平台团队构建低代码基础设施 | 业务团队构建企业级应用 |
Flux = 如何从 JSON 生成 UI(底层 runtime) Next = 如何构建可扩展的业务应用(应用框架)
Next 当前从 Flux 同步 ui、theme-tokens、tailwind-preset 三个包,后续将引入 Flux 渲染引擎作为可选的页面渲染层。
Extension 系统
Extension 是宿主应用的扩展机制,在启动时加载一次,用于配置和资源注入。一个 Extension 可以提供:
- 品牌配置 — 名称、logo、标题
- 主题和样式 — 运行时主题切换
- 语言资源 — i18n 翻译
- 菜单扩展 — 动态注册菜单项
- 页面注册 — 内置页面添加
- 插件清单 — 声明可用的插件
- 认证配置 — 登录方式
Extension 在应用初始化阶段加载,不涉及运行时动态加载,适合静态配置场景。
Plugin 系统
Plugin 是页面级扩展,通过 SystemJS 远程加载,支持运行时动态加载和卸载:
- 独立的页面渲染逻辑
- 独立的构建和部署
- 运行时动态加载和卸载
- 与宿主的隔离通信机制
Plugin 适合以下场景:
- 第三方开发者提供独立业务页面
- 多租户环境下按需加载功能
- 大型应用中按权限动态加载模块
Plugin 通过预定义的通信桥(plugin-bridge)与宿主交互,保证隔离性。
内置页面模板
Next 提供了完整的业务页面模板,可以直接使用或作为参考:
| 页面 | 说明 |
|---|---|
| Dashboard | 数据概览和统计卡片 |
| AI Workbench | AI 辅助工作台 |
| Flow Editor | 流程编辑器 |
| Master-Detail | 主子表 CRUD |
| List + Form | 列表和表单组合 |
项目结构
nop-chaos-next/
apps/main/ ← 主应用(宿主)
packages/
core/ ← 核心工具和类型
shared/ ← 共享类型定义
amis-core/ ← AMIS 宿主桥接层
amis-react/ ← AMIS React 集成
plugin-bridge/ ← 插件通信桥
theme-tokens/ ← 主题 token
tailwind-preset/ ← Tailwind 预设
ui/ ← 共享 UI 组件
flux-lib/ui/ ← 来自 Flux 的 UI 包
examples/
plugin-demo/ ← 插件开发示例
extension-demo/ ← Extension 示例
docs/ ← 文档
核心架构
应用启动时,Next 的工作流:
1. 加载 Extension(继承基础配置) 2. 初始化主题和国际化 3. 注册菜单和页面路由 4. 按需加载 AMIS 或 Flux 渲染引擎 5. 动态加载 Plugin(SystemJS) 6. 渲染应用界面
其中第 3-5 步均可通过 Delta 定制覆盖——菜单、页面、插件都可以从后端 Delta 层自动合并配置。
快速体验
git clone https://github.com/entropy-cloud/nop-chaos-next.git cd nop-chaos-next pnpm install pnpm dev
访问 http://localhost:5173 查看主应用。examples 目录下包含插件和 Extension 的示例代码。