🚀 复盘：我如何从 0 到 1 开发一个企业级 AI 表单填充 SDK
摘要：历时 3 个月，从需求分析到架构设计，再到最终上线。本文记录了 AutoForm SDK 开发过程中的技术选型、踩坑经验和心得体会。
1. 缘起
公司内部有大量的旧系统（JSP, jQuery），业务部门天天抱怨填表繁琐。 重构是不可能重构的，这辈子都不可能重构。 于是老板下令：做一个通用的插件，挂上去就能自动填表。
2. 技术选型：艰难的抉择
方案 A：Chrome 插件
- 优点：权限大，跨域方便。
- 缺点：需要每个员工安装，更新麻烦，无法集成到客户的 SaaS 产品中。
- 结论：Pass
方案 B：iframe 嵌入
- 优点：简单，隔离性好。
- 缺点：无法操作宿主 DOM，通信麻烦。
- 结论：Pass
方案 C：Web Component SDK (最终选择)
- 优点：原生支持，样式隔离，可操作 DOM，集成简单（一行 JS）。
- 缺点：兼容性（IE 拜拜），开发门槛稍高。
3. 核心难点攻克
难点一：元素定位
页面结构一变，脚本就挂。
解法：引入 @medv/finder 生成 CSS 选择器 + 语义化指纹（Label/Placeholder）双重定位。
难点二：框架兼容
React/Vue 的受控组件无法直接赋值。 解法：劫持原生 Setter + 模拟完整事件链（Input/Change）。
难点三：体积控制
不能影响宿主页面性能。 解法：Loader + Core 双层架构。Loader 仅 5KB，Core 按需动态加载。
4. 心得体会
- 不要重复造轮子：善用开源社区的力量（如
rrweb,finder,user-event）。 - 用户体验至上：技术再牛，如果用户觉得难用也是白搭。我们花了很多时间打磨悬浮球的交互和 AI 的对话体验。
- 保持敬畏：在别人的页面上跑代码，一定要小心小心再小心（样式隔离、异常捕获）。
5. 广告时间
如果你也想体验一下这个 SDK，或者想看看源码实现，欢迎访问我们的官网。
👉 官网地址：51bpms.com
也可以添加微信详细沟通
