云应用模型产品系统

华为云应用编排服务，是华为云核心产品，提供基于terraform的云资源编排与自动化部署能力。架构设计器是CAM的核心功能模块，为用户提供可视化拖拽式云架构设计体验，支持30+云服务资源的图形化编排、配置、部署与生命周期管理。

1.可视化画布引擎开发：基于MxGraph+AstroGraph自研图形编辑引擎，实现画布渲染（3D基于PixiJS等距渲染）,支持图元拖拽、缩放、自动布局、小地图导航、快捷键操作等完整的画布交互功能，覆盖VPC、子网、安全组、ECS、CCE、RDS等30+云资源图元的渲染和交互
2.资源依赖关系校验体系：设计并实现云资源拓扑依赖校验引擎，基于Terraform模块关系数据构建依赖图谱，在图元拖拽时实时校验资源间合法性约束（如子网必须位于VPC内，ECS必须位于子网内），校验不通过自动回滚，有效避免用户设计出无效架构。
3.图元配置与表单联动系统：开发30+云资源专属配置组件，采用基类继承+动态表单结构，实际图元双击打开抽屉式配置面板，配置数据与画布图元双向绑定；实现vpc网段变更自动同步子网CIDR、跨vpc拖拽子网自动重算IP等智能联动逻辑。
4.架构图保存/部署/导出全流程：支持实例创建/部署全流程。开发架构图导出为png/pdf，导出Terraform模板，另存为模板能力，图片分段上传解决现网1M限制问题。
5.资源询价与成本预估：对接华为云CBC计费系统，实现按需/包周期双计费模式下的ECS、CCE等资源实时询价，支持部署前查看资源价格清单，帮助用户在架构设计阶段即可预估云资源成本。

1.项目前端负责人，实现项目从0-1落地上线
2.嵌套图元坐标换算
mxGraph中的图元位置是相对于父节点的，但保存时要转成绝对坐标，加载时又要转回来。而且拖拽移动时父节点变了，子节点的相对坐标也要重新计算。我的做法是保存时先遍历所有图元，拿到绝对坐标，减去父节点的绝对坐标得到相对坐标存入JSON，加载时反着算回去。
3.图元渲染时序
Group型图元有父子依赖，必须先渲染父Group再渲染子Group，否则子节点找不到父容器辉渲染失败。我把Groups数据转成树形二维数组，按层级顺序渲染，同时加入延时机制确保DOM树挂载完成后再插入mxGraph节点。
4.图片分段上传
保存架构图时需要同步保存缩略图，但base64图片可能超过1M，现网接口大小限制。我把图片分段成90K的片段，按序号分多次上传，解决这个问题。