BossAgents告别重复开发：企业级BOM管理系统的前端架构统一之路
你是否遇到过这样的情况：公司内部有40多个管理页面，每个页面都在重复实现着几乎相同的功能——查询列表、表格展示、创建编辑、删除操作？更让人头疼的是，这些看似相同的功能，却因为历史原因采用了三种完全不同的实现方式，维护成本居高不下，新功能上线周期越来越长。
这不是技术问题，这是架构问题。
混乱的起点：三套创建逻辑的困境
在我们接手这个BOM（物料清单）管理系统时，前端代码库正处于一种“各显神通”的状态。同一个系统内，竟然存在着三套独立的创建逻辑：
第一套是useCapabilityCreate.js，它通过大语言模型（LLM）生成内容，然后级联创建到SCSAI系统。这套逻辑虽然完整，但职责过于集中，像是一个“万能工具箱”，什么都能做，但什么都做不精。
第二套是useItemTypeManagement.js，它走的是AI生成→后端API→SCSAI系统的路线。逻辑相对分散，维护状态一般。
最让人头疼的是第三套——直接散落在各个视图文件中的手写AML（SCSAI Markup Language）代码。以ProductList.vue为例，这个文件里竟然有26处直接调用SCSAI API的地方，全部是手写的AML代码，零复用，大量重复。
想象一下，当你需要修改某个通用逻辑时，需要翻遍40多个文件，逐一排查、修改、测试。这不仅效率低下，更容易引入bug。更可怕的是，新加入的团队成员面对这种“各玩各的”代码风格，学习成本极高。
核心痛点：为什么会出现这种局面？
要理解这个问题，我们需要先了解SCSAI是什么。SCSAI是一个元数据驱动的PLM（产品生命周期管理）系统。简单来说，它把一切都抽象为“对象”：一个螺丝是“Part”对象，一个项目是“Project”对象，甚至连对象本身的定义（ItemType）也是一个对象。
这种设计非常灵活，但也带来了一个挑战：所有操作本质上都是相同的——ApplyItem加上对应的对象类型和属性。区别仅仅在于参数不同。理论上，我们应该可以用一套通用的逻辑来处理所有对象的创建、查询、修改和删除。
但在实际开发中，由于缺乏统一的架构规划，不同的开发人员按照自己的理解实现了不同的方案，最终导致了“三套马车”并存的混乱局面。
我们的解决方案：通用组件架构
面对这个问题，我们决定进行一次彻底的架构重构。核心思路很简单：提取通用组件，实现一套逻辑，多界面复用。
目标架构
重构后的架构分为三层：
页面层：保留现有的业务页面（如ItemTypeManagement.vue、ProductList.vue），但页面不再直接调用SCSAI API，而是调用通用的composables。
通用组件层：这是重构的核心。我们设计了四个核心composable：
useCreate()
- 统一创建，支持任何对象的创建（ItemType、Part、Vendor等） -
useQuery()- 统一查询，支持列表查询和详情查询 -
useModify()- 统一编辑/删除 -
useObjectMeta()- 统一元数据管理
基础设施层：底层的工具函数，包括SCSAI API封装、AML构建器、提示词构建器等。
核心原则：同一套组件，多个界面复用
对象类管理和业务对象管理虽然界面分开，但业务逻辑共用同一套composables。这意味着，无论你是管理“对象类”还是管理“产品”，底层的创建、查询、修改逻辑都是相同的，只是传入的参数不同。
实施过程：分阶段推进
重构不是一蹴而就的，我们将其分为五个阶段：
Phase 0：提取计划
首先，我们对现有代码进行了全面梳理，记录了每个composable和视图文件的来源行号，为后续提取工作做准备。
Phase 1：提取useCreate
从useCapabilityCreate.js和useItemTypeManagement.js中提取通用的创建逻辑，形成独立的useCreate.js。这个文件包含了统一的创建入口，支持对象类型、属性、关系、系统对象等参数。
Phase 2：ItemTypeManagement接入
将ItemTypeManagement.vue接入到新的useCreate中，实现前端直连SCSAI，不再走后端API。
Phase 3：useQuery/useModify/useObjectMeta
实现查询、修改、元数据管理的通用组件。这三个组件分别提供了6个、7个、7个接口，覆盖了绝大多数业务场景。
Phase 4：ProductList.vue接入
这是最难的一步。ProductList.vue有26处直接调用SCSAI API的地方，需要全部迁移到新的通用组件。经过努力，我们成功将所有读操作迁移到rawQuery，将8处写操作也全部迁移，最终实现了_SCSAIApiRequest归零，移除了getBomService()。
Phase 5：清理与合并（待启动）
目前项目视图文件中还有55处_SCSAIApiRequest调用分布在14个vue文件中，需要逐一清理。这是下一步的工作重点。
实践中的教训与思考
在重构过程中，我们积累了一些宝贵的经验：
教训一：不要试图一次性解决所有问题。 我们采用了分阶段推进的策略，每个阶段聚焦一个明确的目标，完成后才进入下一阶段。这样既保证了进度可控，也避免了“大爆炸式”重构带来的风险。
教训二：测试是重构的生命线。 每次代码变更后，我们都进行了充分的回归测试，确保原有功能不受影响。特别是在ProductList.vue接入阶段，我们花了大量时间进行测试，因为这是最核心的业务页面之一。
教训三：文档要跟上。 我们为每个通用组件编写了详细的使用文档，包括参数说明、返回值、使用示例等。这不仅方便了当前团队的协作，也为后续维护提供了保障。
重构成果：数字说话
经过四个阶段的努力，我们取得了显著的成果：
- 代码复用率提升
- 维护成本降低
- 开发效率提升
- 代码质量改善
你能得到什么？
如果你也面临着类似的困境——多个管理页面重复实现相同功能、维护成本居高不下、新功能上线周期长——那么我们的这套架构方案值得借鉴。
核心思路：提取通用组件，实现一套逻辑，多界面复用。
关键步骤：
- 1. 梳理现有代码，识别重复逻辑 2. 设计通用组件，覆盖核心业务场景 3. 分阶段推进，逐步替换旧代码 4. 充分测试，确保功能不受影响
左帮右臂（BossAgents）能为你做什么？
作为专注于企业级AI解决方案的智能体公司，BossAgents不仅提供技术架构咨询，更能帮助你实现从“混乱”到“有序”的数字化转型。
在BOM管理系统重构这个项目中，我们展示了如何通过统一的架构设计，解决多页面重复开发、维护成本高、新功能上线慢等典型问题。我们的团队具备丰富的企业级系统重构经验，能够：
- 诊断现有系统问题
- 设计统一架构方案
- 分阶段实施重构
- 提供持续技术支持
无论你是正在规划系统重构，还是希望提升现有系统的可维护性，BossAgents都能为你提供专业的解决方案。让我们携手，告别“重复造轮子”的困境，走向高效、统一、可维护的数字化未来。
