这周给外包项目添加了坐标系和工具箱的配置页面，主要提供两者的CRUD功能。
甲方提供了坐标系和工具箱的接口。每一个坐标系或者工具箱都包含了名称和id以及一系列点，其中坐标系包含3个点，坐标系包含6个点。而每个点则具有12个属性。
甲方要求坐标系和工具箱分开进行配置，并且放在之前的安全界面。
经过和美工组同学的讨论之后，他们很快设计好了UI，交由我来制作。
这个业务最大的特点就是表单庞大，需要提交的内容很多。
但其实很明显，坐标系和工具箱之间有很多逻辑是可以复用的。
于是我构建了两个组件，一个是PointGroup，一个是 CoordinateControl
PointGroup 组件
该组件的功能就是提供某个点的配置功能，含有12个input。
该组件接收2个属性，分别代表点的类型和序号.
1 | interface PointGroupProps { |
其中type表示坐标系还是工具箱，index则表示点的序号。
关于Input的value和placeholder：
这一点在之前我从来没有特意关注过，可能是因为之前的输入框主要是输入字符串。这次我们的输入框的内容都是数字。我最开始为每个输入框的value定义了类型是number的state。state的初始值设为0.此时我发现input的placeholder失效了。并且输入的时候没有办法将0删除并重新输入。
通过查阅资料，我发现input的value最好设定为string类型，然后在onchange事件中进行非法字符的判断。只有这样才不影响用户的输入体验。
CoordinateControl 组件
该组件提供了对于坐标系或者工具箱的name和point的管理功能。
接收一个属性：type，用来区分其是坐标系还是工具箱。
该组件首先使用一个下拉菜单来呈现当前数据库中所有的坐标系。并且在这个下拉菜单中提供增加坐标系的功能。
在该功能的实现上，我起初考虑了Antd rn 的Selector组件，但是在阅读文档之后，感觉其定制能力较弱。考虑再三后选择了比较熟悉的 ElementUI 的Tooltip组件。
组件下方提供了3或者6个按钮，以方便用户选择切换点。
通过Redux来实现复用
由于工具箱和坐标系是可以同时编辑的，因此我们要分别对其进行状态的维护与管理。其内部的管理大同小异，我们以坐标系为例。
坐标系包括了3个点，每个点的状态都要进行保存。
同时我们UI中有个小功能是，当用户配置完某个点时，controller中对应的按钮要变色。
因此我们设定了每个点的check flag
这样，我们用户编辑完一个点之后，需要点击PointGroup的保存按钮来保存该点的状态。此时我们对输入进行合法性检验，检验完毕之后，dispatch到store之中。并且对check flag属性也进行变更。
总结
在实现这个功能之后，我觉得我们在拿到一个业务之后，不要急于下手去干，而是要仔细分析，先在脑海里有一个大体的程序结构，再去把它们实现。
正是因为有了架构，在这次开发中我才没有犯很大的错误，功能的实现进行的比较顺利。