中台前端交接思维导图
前端开发以及基本规范介绍
树图思维导图提供 中台前端交接 在线思维导图免费制作，点击“编辑”按钮，可对 中台前端交接 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：03322adcce072c002c79b657c8ffcc90
思维导图大纲
中台前端交接思维导图模板大纲
前端开发以及基本规范介绍
项目启动以及发布
https://www.yuque.com/zhuangxp/glz/hlnk7q
切勿在根目录src下进行开发，需要在packages下面开发新服务（模块）
子模块命名规范： o2-(bbc/oms)-XXX
权限编码维护规范
https://www.yuque.com/zhuangxp/glz/pz5nh2
o2-front子模块
存放客制化的通用组件以及通用配置
model层中model文件命名需要使用小驼峰
stores目录下的ds文件需要使用驼峰并以DS结尾
services目录下的文件需要使用驼峰命名
commit规范
https://www.yuque.com/zhuangxp/glz/id95lg
可后续二次自定义，配置文件位置：根目录/scripts/verify-commit.js
前端工程主要目录结构介绍
根目录/.hzerorc
子模块配置, webpack配置扩展
根目录/app.ts
全局配置入口
根目录/global.module.less
全局样式覆盖文件
根目录/src/config/xxxx.yml
关联packge.json中命令语句的NODE_PROFILE配置
根目录/docker/enterpoint.sh
脚本文件，主要用来替换环境变量
根目录/packages/XXXX
子模块
dataSet基本使用
基础列表开发
ds文件定义配置对象
queryFields
查询字段配置
fields
列表字段配置
transports
前后端交互配置，包括增删改查
events
事件监听配置
对应c7n-pro组件通过dataSet属性关联ds配置对象的实例，并通过columns属性配置关联展示列字段
更多属性配置参考
https://open.hand-china.com/choerodon-ui/zh
装修页面新增组件开发示例
参考优惠券组件
后端配置对应新增组件
在model层级的fetchComponentList effect中配置ICON
页面展示部分
packages\o2-bbc-business\src\routes\o2cms\SiteH5PageDecoration\H5Preview\LayoutPreview\PreviewComponents\Coupon.js
modal抽屉部分
packages\o2-bbc-business\src\routes\o2cms\SiteH5PageDecoration\H5Preview\LayoutPreview\ComponentOptionsModal\CouponModal
其他定制化注意事项
二开基本流程
通过package.json查看对应需要覆盖部分的子模块版本
在对应版本中找到对应功能模块的代码并将其本地化至当前工程的对应子模块下
在当前工程的子模块内进行路由覆盖
script脚本如何添加
由于hzero架构并没有暴露index.html模板文件，所以需要在app.ts的dvaAppInit方法中通过创建节点并插入的形式进行装载
自定义lov的相关配置
同上也是在app.ts中进行覆盖=》initC7nUiConfig
如何覆盖UI的样式
需要在global.module.less或者自定义的样式文件中进行操作，需要注意的是外层需要包裹:global
如果只是操作当前页面的央视覆盖，建议覆盖时定义一个父类类名，并在父类名限制下进行操作
如何新增环境变量
一般在环境配置文件内进行操作，并且需要在docke脚本中同步新增变量替换执行语句。当然服务器上也得同步新增对应环境变量配置
商家入驻部分
使用public路由，该路由类似审批表单的内嵌页面，会自动隐藏菜单部分以及导航栏部分
卡片开发
平台配置对应卡片，code关联本地code编码
参考packages\o2-bbc-business\src\customize\customizeCards.js
本地通过setCard方法设置卡片对应组件
其余部分跟常规react开发一致
某些组件使用注意事项
https://www.yuque.com/zhuangxp/glz/xcsg78
思维导图模板大纲
相关思维导图模板
树图思维导图提供 流程迁移项目交接 在线思维导图免费制作，点击“编辑”按钮，可对 流程迁移项目交接 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：d8a3ac87ce9234047184d41522a4f91d
树图思维导图提供 中台化与微服务治理的关系 在线思维导图免费制作，点击“编辑”按钮，可对 中台化与微服务治理的关系 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：e4d08815590a74fc3eff63bbbb93ef6c
沪公网安备 31011502019485号
上海工商