1. 基础组件Card设计关于内外边距和边框的思考

在我们设计Card组件的时候 可以根据有无边框分为两种情况。比如：

这两种区别会造成一些显而易见的视觉效果不同

• 无边框更适合背景颜色较深，有边框更适合背景为白色
• 无边框更适合做圆角，即使弧度很大 也并不违和

当无边框Card在白色背景中使用时。会造成无边界感。失去了卡片存在的意义 比如用户可能会提出这种问题：

实际上就是由于用户将Card单纯当做一小块布局工具来使用了，方便他画title和内容的内间距。是一种错误的用法。

另外当我们从实现的角度来考虑Card 外边距最好只设定一个默认的margin-bottom； 激进一点，甚至可以连margin-bottom都不要，在实际使用中 卡边级别的布局交给专业的布局组件来实现。或者用户自定义更能满足需求。

为什么呢？

假使用户没有自己的UI规范，那么你设置的初始外边据往往是没有意义需要被覆盖的，甚至是副作用的，因为你要考虑到外层布局组件的内边距。即使你有自己的UI规范，那么你也要考虑到组件的应用场景往往是很复杂的。比如卡片套卡片。

（从以上的角度来看 再去看antd的卡片设计就会觉得很有设计感）

2. 记一次技术选型的思考

需求是实现一个这种

那么已知是有历史其他人在相同项目上实现过这种

问题：

• 过往图形和结果目标略有区别（多了中间节点，连线上少内容，多余起始节点，节点内容简陋）
• 历史代码较为复杂已两年多没人动过，作者早已离职

思考过程：
首先，实现时间上只有一天，还有其他交互，那么重写不太想重写，echarts基础按理里并没有类似图形

看了下过往实现，发现历史采用dagre-d3来实现。但项目用的是react；dagre-d3写法并不react。

搜了搜发现有dagre-d3的react实现库 不过发现dagre-d3-react 并不能解决节点内容写react JSX代码。那么并没有解决核心问题，引入无外乎引入其他学习成本，那么不如直接用dagre-d3；最终实现