老赵写字的地方

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 的示例代码。

进一步阅读

zh/nop/practical_guide/frontend/next_guide.txt · 最后更改: 由 127.0.0.1