通过mobx来进行整体布局和宏观上的状态管理，比如业务涉及多个卡片，每次点击的时候只展示其中的一个。然后在跟后端设计接口的时候，每个卡片的数据在同一个接口里面返回。 然后作为配套的，封装了每个卡片单独的样式以及显示和隐藏的逻辑，并且在整个页面做了可拓展的设计，这些后续迭代的时候，这些卡片就直接复用。

页面设计和markdown解析

一个需求是，我们需要在聊天模块中发送和解析富文本内容，比如商品卡片，订单详情还有活动链接等等，而普通的markdown无法满足这种需求。

然后我们考虑了几种方案：

1，直接使用html字符串，会有xss风险 2，使用成熟的富文本编辑器，但是这个方案很成熟，但是对于我们这种场景来说，编辑器的功能过于复杂，且不易定制。而且从项目维护的角度，这个项目尽管做过微前端的系统拆分，但是这一块拆完之后打包出来还是有几十MB，还是太大了。

最终方案是基于Markdown-it做拓展，我们的做法，通过约定式的::card[...]的不同类型来渲染不同的React组件。

然后组件里面具体的内容根据不同场景设置成根据id去异步请求的或者直接传递数据的方式。

优势是：

安全可控，杜绝xss风险，不必使用dangerouslySetInnerHTML 体积小，markdown-it只有几十KB 易于定制，基于插件化的设计，可以灵活添加和修改语法 易于维护，前后端都可以基于同一套语法规范进行编码 用户体验好，渲染成React组件后，可以更好地控制样式