Now let me read the existing files before building:
Let me check what UI components are available:
Now I have full context. Let me build the EBOM to MBOM conversion interface. I'll create a professional enterprise-style dark-themed interface with side-by-side tree views.
Now let me update the layout:
Now let me create the BOM data types and mock data:
Now let me create the BOM tree node component:
Now create the BOM panel component:
Now create the detail panel component:
Now create the conversion center component:
Now create the header component:
Now create the main page:
Now let me read the badge and separator components to make sure they exist:
All components are in place. The interface is built. Let me verify the success and warning colors are properly integrated by checking the globals.css once more:
一切就绪。EBOM 转 MBOM 的功能界面已完成,主要包含以下内容:
- 左右并列布局:EBOM(工程物料清单)和 MBOM(制造物料清单)各占一侧,中间是转化控制区,可点击"执行转化"按钮模拟转化过程
- BOM 层级树形展示:每个节点都标注了
L0~L3 的层级标识,并带有可展开/折叠的树形结构和层级连接线,支持搜索过滤和全部展开/折叠 - 分类标识:装配件、零件、原材料、标准件四种类型各有不同颜色图标,头部还有统计汇总
- 详情面板(桌面端右侧):点击任意节点可查看类型、层级、数量、子节点数等详细信息,底部状态栏实时显示选中状态和转化进度