feat: 用 AI 来生成描述文字

docs/blog.md

@@ -5,23 +5,23 @@ nav:
   order: 20
 ---
 
-# 诞生背景
+嘿大家好，今天我想跟大家探讨一下产品经理提出的一些有趣的需求。有一天，产品经理突然跳出来说，我们需要一个网络部署拓扑图，并希望在一周内进行演示，其他细节不用管，但一定要有拓扑图！于是，我们急忙想出了第一个解决方案：首先，通过UI设计制作了一个静态图片，然后前端根据这个图片对设备坐标进行相应标记，并将信息记录在前端的静态资源中。最后，通过绝对定位的形式绑定设备信息，当用户操作点击设备信息时，实际上是通过绝对定位得到的结构进行操作。最终，我们成功实现了拓扑图功能！
 
-某日，产品经理突然提出一个需求，需要做一个网络部署拓扑图，怎么实现我不管，一周后需要演示；于是第一个版本的技术解决方案就是 UI 设计好一个静态图片前端根据 UI 提供的静态图片对设备坐标进行未知、大小标记并记录在前端的静态资源中，然后再页面上通过绝对定位的形式绑定设备信息，用户操作点击设备信息的时候实际上操作的是通过 position absolute 定位出来的一个结构，最终实现了拓扑图功能
+但可想而知，需求是会不断迭代的。产品经理又提出了一些新的需求：
 
-但是，随着需求的迭代，产品又提出了新需求
+1. 部署情况可能会变动，也就是设备位置和设备信息会随之改变；
+2. 公司现在是总公司，以后还将有很多省级分公司；
+3. 需要以红色显示那些离线的设备出口；
+4. 希望为连线之间添加流入流出的动画效果；
+5. 期望根据用户屏幕大小做到自适应。
 
-- 部署的情况可能会变动(也就是设备位置、设备信息会变化)
-- 目前是总公司，后面还有各个省的分公司
-- 离线的设备出口连线需要红色显示
-- 连线之间的动画流入流出
-- 需要根据用户屏幕的大小可以自适应
+这一下子，事情可就不太简单了！如果还沿用之前的方法，问题就很大了：
 
-鉴于上面的情况如果还是采用之前的形式，那么存在的问题
+1. 超过几十个省公司意味着我们需要设计几十多种不同的静态图片；
+2. 如果各省公司的部署结构发生改变，我们还得重新设计图片；
+3. 没能实现屏幕尺寸的自适应；
+4. 很难实现流入流出的动画效果。
 
-1. 三十多个省公司可能需要 UI 设计三十多份静态图片
-2. 如果期间有省公司部署结构发生变动需要重新设计图片
-3. 没法去做自适应
-4. 流入流出动画不好实现
+显而易见，之前的解决方案已经无法继续支撑了。于是，我们面临着新的挑战，也就是这个组件的诞生！
 
-这个时间很明显之前 UI 提供静态图片的形式已经无法满足需求了，于是诞生了该组件
+不过话说回来，我们能不能想出一些新的思路呢？或许给产品经理一些惊喜会更有意思！这样可以向他展示，我们可绝不是省油的灯！哈哈，这下就有些意思了！