开发者可以通过 Intellij Plugin 分析视觉稿，自动生成对应的视图代码，以及和页面框架结合的能力。
在整体开发定位上，野心不小——提供一套可扩展的页面消息框架，并自动生成大部分 UI 代码。具体来说，带来以下好处：
- 快速构建新应用，框架搞定大部分工作，业务开发同学只需关注业务代码
- 降低开发人员的进入门槛。落地案例中，后端同学只要有基本概念，无需太多精力就能直接上手写代码
- 页面架构统一化，开发有统一规则，后续维护更方便
- 提供通用组件库，可重复利用
## 核心设计思路
设计上主要参考了 MVP、CLEAN、VIPER 以及 FISH_REDUX 等框架。为了实现高内聚低耦合，拆分为视图组装层、视图展示层、数据层、事件交互层。各层职责分离，不互相干扰，又能互相通信。
分层的好处显而易见：容易维护，可以针对“业务展示”和“业务逻辑”分别做单元测试；框架清晰，统一规则，编写简单且可复用。
UI2CODE 页面框架的设计核心主要分为三大元素：**Page**、**Card**、**Reaction**。上层的 Page 负责组装页面、制定风格；Card 是可重复利用的视图展示元素；Reaction 则负责事件响应的监听。
整个页面框架下，UI2CODE Plugin 可以分析视觉稿并自动化生成业务 UI，产出 Page、Card、Card(DataModel)。开发者只需要修改 Card 上的额外业务展示，以及撰写 Reaction 中的业务逻辑。
## 具体实现架构
在介绍框架组件前，先看看 UI2CODE 的基本页面目录结构：
以 Page 为单位，页面本体 `demo_page` 是其他页面路由调用的起点。通过设置 `Config.dart` 决定内部包含的卡片列表和事件处理列表，组合出 Card 和 Reaction 的关联。
详细架构关系如下：
## Page
Page 是框架的基础单位，代表单一页面，负责视图的组装以及页面样式（Template）。
Page 内部可以包含多个 Card 和 Reaction，分别负责视图展示和事件处理。这样可以把业务场景清晰分割成小模块，互不影响。
- `implements Lifecycle`：框架统一分发管理页面生命周期
- 通过设定 Template 指定页面要呈现的模板，或修改背景等属性
- 通过设定 Config 指定页面包含的 Cards 和 Reactions
- 通过设定 PageState 添加额外数据
### Page Template
Template 是页面的抽象化表达，整体上提供多种可选模板，并支持设置 AppBar（非必选）、Header（非必选）、Body、Stack（非必选）等子模板。
模板可以理解为页面的容器，目前支持以下模板，并可扩展：
- **PageTemplate**：通用页面容器，支持 NestedScrollView 的 SliverHeader 滚动（如果需要）
- **PageBottomNa vigatorTemplate**：含有底部导航的容器，如首页
- **PageSwitchTabTemplate**：含有分页 Tab 功能的容器
各个子模板也有对应的 Template 可选择，比如 Body 内部的模板决定 Cards 的排列方式，例如 BodyListViewTemplate 就是列表展示。
使用 Template 最大的好处是减少开发工作量，直接用封装好的接口即可。而且页面内的所有模板共用消息机制，可以互相传递消息，比如 Body 内部的卡片可以轻松发消息给 AppBar。这是框架的一个有力特性。
### Page Config
Config 决定页面的组装，包含哪些元件以及事件处理反射的类绑定。
- 通过设定 `cards` 注册页面加载的卡片
- 通过设定 `actions` 注册页面响应的类，支持卡片事件和页面事件
- 支持额外设置 AppBar、Header、Stack 等组件（非必须）
如何绑定？举例来说：
```dart
void actionConfig(List
## Card
Card 是基本的视图展示单元，代表业务 UI。它包含 View widget 和 DataModel 数据，框架会将两者进行数据绑定，由数据驱动最终展示。这达到了类似 MVP 中 View 和 ViewModel 的隔离效果。
- 通过 `BaseCard
## Reaction
Reaction 代表事件发生后的响应，可以选择是否处理。若处理，可以同步或异步修改对应的 DataModel。
- `RegisterReactions()` 注册感兴趣的事件
- handler 上可加 `async` 指定为异步处理
- Reaction 内部依据事件修改 DataModel，只关心事件改变后的数据，不持有数据本身，视图会自动刷新
举例来说：
```dart
// 发送rAssignPrice事件
doAction(Card6736Event.rAssignPrice);
// 接收rAssignPrice事件，并对数据做处理
@override
Map registerReactions() {
return {
Card6736Event.rAssignPrice: (PageItemBean state, CardAction action, Card6736DataModel data) {
// 修改数据字段
data.userName = "123";
},
};
}
```
## 结合 Redux
在页面框架的背后，采用了 Redux 进行封装。Redux 是一套数据管理框架，所有数据存储在 Store 的 State 中。事件发生时会产生不同的 Action，根据事件响应不同的 Reducer 去改变 State。State 变化后，绑定的视图会按需刷新。
（详细 Redux 可参考官方文档。）
应用了 Redux 中 State、Action、Reducer、Store、Middleware 的概念，赋予页面生命状态，组件间支持消息机制。Redux 对初学者有一定门槛，但在本框架的封装下，基本上感觉不到 Redux 的存在。
## 消息机制
在 UI2CODE 消息框架下，页面内的各个组件和容器都可以灵活地进行消息传递——Page、Card、Reaction 任意位置都可以发送消息，实现自身、兄弟间、子对父、父对子的通知。
各种消息传递路径说明如下：
- **自身**：Card 发出的消息由自身定义的 Reaction 处理
- **兄弟间**：Reaction 内可选择转发，指定转发的对象为另外一张 Card
- **父对子**：可在 Page 内指定发送给某个 Card
- **子对父**：若发出的消息在 Card 内无人处理，则会冒泡到 Page 层级处理
## 总结：进化的 UI2CODE
- 框架简单，只需了解基本元素，不需要懂 Redux 就能实现数据管理
- 目前闲鱼内部新应用落地，所有页面都通过这套框架实现消息传递。其中 1/3 页面的 UI 是通过自动化生成的，整体开发时间减少了约一半
- 组件分层解耦，维护时可以清晰看到页面的组成及复用代码；修改组件时不影响其他组件
- 事件可以在页面框架下自由传递，实现高内聚，响应支持同步和异步流程
- 开发者只需关心数据处理，视图刷新由框架自动处理
## 未来展望
通过整合 UI2CODE Plugin，插件可自动分析视觉稿并产生 Page、Config、Card 等。开发者可以在自动化的基础上进行修改，大大减少从零开始的开发时间。期望开发者只需专注于修改业务展示和业务逻辑，无需对页面设置做过多处理。
通过与业务合作，获得了很多实际反馈和对不同业务场景的适应经验。在这些经验上不断优化框架，让它更解耦、支持更多能力。未来希望不光是在闲鱼内部使用，也能扩展到更多应用。
