MovableType Demo

movable-type 的使用示例项目，演示从简到繁的三个层级。

技术栈

• Umi 3 + React 17 + TypeScript
• Ant Design 4
• movable-type ^1.0.1

快速开始

npm install
npm run dev

访问 http://localhost:8000

示例说明

路由	名称	说明
/simple	Simple Demo	最简表单：字段池 + 配置直接渲染
/simplehooks/list	SimpleHooks Demo	完整 CRUD：列表 + 新增/编辑/查看（localStorage mock）
/complexhooks/list	ComplexHooks Demo	复杂场景：字段联动、自定义组件、多场景覆盖、完整 CRUD

项目结构

src/pages/
  simple/          # 最简表单（单页）
  simplehooks/     # 基础 CRUD（列表 + 表单）
    add/           # 新增/编辑/查看页面
    mock.ts        # localStorage 模拟数据
    services.ts    # API 封装
  complexhooks/    # 复杂 CRUD
    fields.ts      # 字段池（纯数据，可复用）
    add/           # 多场景表单 + 自定义组件
    mock.ts
    services.ts

架构

核心概念

MovableType 的设计是活字印刷思路：

1. 字段池（fields）：定义所有可用字段，全局复用
2. 表单配置（config）：决定本次用哪些字段、怎么分组、怎么布局
3. 组件注册表（components）：按需扩展自定义组件

三者解耦，改需求时只改配置，不动组件代码。

相关仓库

• MovableType 引擎源码