背景
在管理端项目中，在一类需求中往往组件的重复度很高，管理端的UI交付风格也相对固定。在这种高重复性的项目中，就给低代码平台或者代码模板、代码片段提供了很好的使用场景。于此同时，一个项目中高阶的业务组件库、物料库会让功能开发事半功倍。
介绍
如何让项目业务组件沉淀下来，避免项目相同的功能、相同业务的组件，在不同的开发者中统一规范？比较好的解决方案是：实现自己业务UI组件库。让UI组件库成为项目中的重要资产。
- 独立性：项目单独打包，单独迭代，多项目使用
- 可维护、可拓展：每个组件单独文件维护，组件增减自由
- 可阅读 ：组件文档提供开发者使用
系统设计
组件框架（dumi）
dumi 项目结构：
dumi具体提供的能力可以到官网查阅，此处就不一一介绍。此处主要介绍dumi在项目中使用到的主要能力：
-
组件封装、打包
官网原文价绍：father 一起为开发者提供一站式的组件开发体验，father 负责组件源码构建，而 dumi 负责组件开发及组件文档生成。 根据dumi提供的项目脚手架，定义业务组件。利用father打包出我们的业务UI组件。
-
组件文档实现
使用dumi文档生成能力，dumi提供demo、API 生成能力。具体以md文件实现文档页面展示
1、手写md文档文件 （ 组件demo介绍 )
手写最简单demo md文档：
---
nav:
path: /components
title: AccessBtnList
---
Demo:
```tsx
import React from 'react';
import { AccessBtnList } from 'dmc-ui';
export default () => (
<AccessBtnList
config={[
{
text: '新增',
onClick() {
console.log('click');
},
filter: 'all',
},
{
text: '编辑',
onClick() {
console.log('click');
},
filter: 'all',
},
{
text: '复制',
onClick() {
console.log('click');
},
filter: 'all',
},
{
text: '查看',
onClick() {
console.log('click');
},
filter: 'all',
},
]}
maxLength={3}
/>
);
<API hideTitle></API>
demo 文档包含 路由、demo 代码，具体用法配置，到官网查阅
2、自动生成文档文件
dumi中提供根据interface注解生成api文档。由此思路，自动文档生成可以使用: md 文件模板 + 组件文件解析，生成文档需要的md文件。
文档解析（babel），使用babel（抽象语法树工具）工具。
- @babel/parse 解析组件文件（tsx）,读取约定接口，获取参数
export interface IAccessBtnListProps {
/**
* @value [{ text:'新增',onClick(){console.log('click')},filter: 'all' },{ text:'编辑',onClick(){console.log('click')},filter: 'all' },{ text:'复制',onClick(){console.log('click')},filter: 'all' },{ text:'查看',onClick(){console.log('click')},filter: 'all' }]
* @description 操作按钮的配置 必传字段
* @default 3
*/
config: AccessConfig[];
/**
* @value 3
* @description 控制操作项展示多少个操作按钮，必传字段
* @default 3
*/
maxLength: number;
/**
* 超出按钮个数限制时，展示的名称
* @description 非必传字段
* @default 更多
*/
moreText?: string | ReactNode;
/**
* 展示超出按钮的触发方式
* @description 非必传字段('click' | 'hover' | 'contextMenu')
* @default hover
*/
trigger?: ('click' | 'hover' | 'contextMenu')[];
}
-
@babel/template 根据解析参数生成 demo 代码
-
md模板文件 拼接demo 代码串，输出md文件
组件库选择（antd pro）
官网介绍： Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。
antd pro 提供的组件跟能力此处不一一介绍，可以到官网查阅。
由于antd pro 提供通用的企业中后台前端的解决方案，针对企业、项目组内部的环境，通用的解决方案并不是最优方案，前端的交互、UI组件样式、组件逻辑等都需要我们在整个项目开始之前做好准备。往往我们需要对基础组件库进行二次封装。组件的封装也是根据各自业务的不用不做封装的介绍，在此只提出建议。
