From 652a83435b43549529c9f6fdc80a633957eeded5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E6=9C=89Bug?= <1002275364@qq.com> Date: Wed, 17 Jan 2024 11:28:53 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E7=94=A8=20AI=20=E6=9D=A5=E7=94=9F?= =?UTF-8?q?=E6=88=90=E6=8F=8F=E8=BF=B0=E6=96=87=E5=AD=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/blog.md | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/docs/blog.md b/docs/blog.md index 1a3f100..6e6d2e2 100644 --- a/docs/blog.md +++ b/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 提供静态图片的形式已经无法满足需求了，于是诞生了该组件 +不过话说回来，我们能不能想出一些新的思路呢？或许给产品经理一些惊喜会更有意思！这样可以向他展示，我们可绝不是省油的灯！哈哈，这下就有些意思了！