Skip to content

Latest commit

 

History

History
114 lines (101 loc) · 6.67 KB

3-0-how-to-develop.md

File metadata and controls

114 lines (101 loc) · 6.67 KB

简体中文 | English

开发一个新的资源列表页

  • 步骤 1:确认代码位置及目录结构
    • 按照预想的在菜单项中的位置,放置在 Containers 下
    • 以云主机为例,对应的菜单项为计算-云主机,那么创建文件夹src/pages/compute/containers/Instance,创建文件src/pages/compute/containers/Instance/index.jsx
  • 步骤 2:编写 Store 代码
  • 步骤 3:编写列表页代码
  • 步骤 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:国际化
  • 如果,产品需求的列表页面是含有Tab的页面,则可参考3-2-BaseTabList-introduction,通常index.jsx内配置Tab,可参考镜像页面代码src/pages/compute/containers/Image/index.jsx

开发一个新的资源详情页

  • 步骤 1:确认代码位置及目录结构
    • 按照预想的在菜单项中的位置,放置在 Containers 下
    • 以云主机为例,对应的菜单项为计算-云主机,创建文件src/pages/compute/containers/Instance/Detail/index.jsxsrc/pages/compute/containers/Instance/Detail/BaseDetail.jsx
  • 步骤 2:编写 Store 代码
  • 步骤 3:编写详情页代码
  • 步骤 4:编写详情页-详情 Tab 代码
  • 步骤 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:国际化

开发一个新的操作

开发一个页面级的操作

  • 步骤 1:确认代码位置及目录结构
    • 按照预想的在菜单项中的位置,放置在 Containers 下
    • 以云硬盘为例,对应的菜单项为存储-云硬盘-云硬盘创建,创建文件src/pages/storage/containers/Volume/actions/Create/index.jsx
  • 步骤 2:编写 Store 代码
  • 步骤 3:编写 FormAction 代码
  • 步骤 4:配置 Action
  • 步骤 5:配置路由
  • 步骤 6:配置菜单
    • 参考3-12-Menu-introduction
    • 配置控制台的菜单项,在src/layouts/menu.jsx中配置
    • 配置管理平台的菜单项,在src/layouts/admin-menu.jsx中配置
  • 步骤 7:国际化

开发一个确认型的操作

  • 步骤 1:确认代码位置及目录结构
    • 按照预想的在菜单项中的位置,放置在 Containers 下
    • 以云硬盘为例,对应的菜单项为存储-云硬盘-删除云硬盘,创建文件src/pages/storage/containers/Volume/actions/Delete.jsx
  • 步骤 2:编写 Store 代码
  • 步骤 3:编写 ConfirmAction 代码
  • 步骤 4:配置 Action
  • 步骤 5:国际化

开发一个弹窗型的操作

  • 步骤 1:确认代码位置及目录结构
    • 按照预想的在菜单项中的位置,放置在 Containers 下
    • 以云硬盘为例,对应的菜单项为存储-云硬盘-编辑,创建文件src/pages/storage/containers/Volume/actions/Edit.jsx
  • 步骤 2:编写 Store 代码
  • 步骤 3:编写 ModalAction 代码
  • 步骤 4:配置 Action
  • 步骤 5:国际化

开发一个分步骤的页面级的操作

  • 步骤 1:确认代码位置及目录结构
    • 按照预想的在菜单项中的位置,放置在 Containers 下
    • 以云硬盘为例,对应的菜单项为计算-云主机-创建,创建文件src/pages/compute/containers/Instance/actions/StepCreate/index.jsx
  • 步骤 2:编写 Store 代码
  • 步骤 3:编写 StepAction 代码
  • 步骤 4:配置 Action
  • 步骤 5:配置路由
  • 步骤 6:配置菜单
    • 参考3-12-Menu-introduction
    • 配置控制台的菜单项,在src/layouts/menu.jsx中配置
    • 配置管理平台的菜单项,在src/layouts/admin-menu.jsx中配置
  • 步骤 7:国际化