简体中文 | English
- 步骤 1:确认代码位置及目录结构
- 按照预想的在菜单项中的位置,放置在 Containers 下
- 以云主机为例,对应的菜单项为
计算-云主机
,那么创建文件夹src/pages/compute/containers/Instance
,创建文件src/pages/compute/containers/Instance/index.jsx
- 步骤 2:编写 Store 代码
- 参考3-5-BaseStore-introduction,复写相应的函数
- 步骤 3:编写列表页代码
- 参考3-1-BaseList-introduction,复写相应的函数
- 步骤 4:配置路由
- 参考3-13-Route-introduction
- 在步骤 1 中的父级目录的
routes/index.js
文件中,配置路由 - 如果是全新的模块,还需要在
src/pages/storage/routes/index.js
中导入
- 步骤 5:配置菜单
- 参考3-12-Menu-introduction
- 配置控制台的菜单项,在
src/layouts/menu.jsx
中配置 - 配置管理平台的菜单项,在
src/layouts/admin-menu.jsx
中配置
- 步骤 6:国际化
- 参考3-14-I18n-introduction,完成相应翻译
- 如果,产品需求的列表页面是含有
Tab
的页面,则可参考3-2-BaseTabList-introduction,通常index.jsx
内配置Tab
,可参考镜像页面代码src/pages/compute/containers/Image/index.jsx
- 步骤 1:确认代码位置及目录结构
- 按照预想的在菜单项中的位置,放置在 Containers 下
- 以云主机为例,对应的菜单项为
计算-云主机
,创建文件src/pages/compute/containers/Instance/Detail/index.jsx
,src/pages/compute/containers/Instance/Detail/BaseDetail.jsx
- 步骤 2:编写 Store 代码
- 参考3-5-BaseStore-introduction,复写相应的函数
- 步骤 3:编写详情页代码
- 参考3-3-BaseDetail-introduction,复写相应的函数
- 步骤 4:编写详情页-详情 Tab 代码
- 参考3-4-BaseDetailInfo-introduction,复写相应的函数
- 步骤 5:配置路由
- 参考3-13-Route-introduction
- 在步骤 1 中的父级目录的
routes/index.js
文件中,配置路由 - 如果是全新的模块,还需要在
src/pages/storage/routes/index.js
中导入
- 步骤 6:配置菜单
- 参考3-12-Menu-introduction
- 配置控制台的菜单项,在
src/layouts/menu.jsx
中配置 - 配置管理平台的菜单项,在
src/layouts/admin-menu.jsx
中配置
- 步骤 7:国际化
- 参考3-14-I18n-introduction,完成相应翻译
- 步骤 1:确认代码位置及目录结构
- 按照预想的在菜单项中的位置,放置在 Containers 下
- 以云硬盘为例,对应的菜单项为
存储-云硬盘-云硬盘创建
,创建文件src/pages/storage/containers/Volume/actions/Create/index.jsx
- 步骤 2:编写 Store 代码
- 参考3-5-BaseStore-introduction,复写或新增相应的函数
- 步骤 3:编写 FormAction 代码
- 参考3-6-FormAction-introduction,复写相应的函数
- 步骤 4:配置 Action
- 参考3-11-Action-introduction,配置到相应为位置
- 步骤 5:配置路由
- 参考3-13-Route-introduction,配置对应的路由
- 步骤 6:配置菜单
- 参考3-12-Menu-introduction
- 配置控制台的菜单项,在
src/layouts/menu.jsx
中配置 - 配置管理平台的菜单项,在
src/layouts/admin-menu.jsx
中配置
- 步骤 7:国际化
- 参考3-14-I18n-introduction,完成相应翻译
- 步骤 1:确认代码位置及目录结构
- 按照预想的在菜单项中的位置,放置在 Containers 下
- 以云硬盘为例,对应的菜单项为
存储-云硬盘-删除云硬盘
,创建文件src/pages/storage/containers/Volume/actions/Delete.jsx
- 步骤 2:编写 Store 代码
- 参考3-5-BaseStore-introduction,复写或新增相应的函数
- 步骤 3:编写 ConfirmAction 代码
- 参考3-8-ConfirmAction-introduction,复写相应的函数
- 步骤 4:配置 Action
- 参考3-11-Action-introduction,配置到相应为位置
- 步骤 5:国际化
- 参考3-14-I18n-introduction,完成相应翻译
- 步骤 1:确认代码位置及目录结构
- 按照预想的在菜单项中的位置,放置在 Containers 下
- 以云硬盘为例,对应的菜单项为
存储-云硬盘-编辑
,创建文件src/pages/storage/containers/Volume/actions/Edit.jsx
- 步骤 2:编写 Store 代码
- 参考3-5-BaseStore-introduction,复写或新增相应的函数
- 步骤 3:编写 ModalAction 代码
- 参考3-7-ModalAction-introduction,复写相应的函数
- 步骤 4:配置 Action
- 参考3-11-Action-introduction,配置到相应为位置
- 步骤 5:国际化
- 参考3-14-I18n-introduction,完成相应翻译
- 步骤 1:确认代码位置及目录结构
- 按照预想的在菜单项中的位置,放置在 Containers 下
- 以云硬盘为例,对应的菜单项为
计算-云主机-创建
,创建文件src/pages/compute/containers/Instance/actions/StepCreate/index.jsx
- 步骤 2:编写 Store 代码
- 参考3-5-BaseStore-introduction,复写或新增相应的函数
- 步骤 3:编写 StepAction 代码
- 参考3-9-StepAction-introduction,复写相应的函数
- 步骤 4:配置 Action
- 参考3-11-Action-introduction,配置到相应为位置
- 步骤 5:配置路由
- 参考3-13-Route-introduction,配置对应的路由
- 步骤 6:配置菜单
- 参考3-12-Menu-introduction
- 配置控制台的菜单项,在
src/layouts/menu.jsx
中配置 - 配置管理平台的菜单项,在
src/layouts/admin-menu.jsx
中配置
- 步骤 7:国际化
- 参考3-14-I18n-introduction,完成相应翻译