English | [Chinese](/docs/zh/develop/3-0-how-to-develop.md)

# Develop a new resource list page

- Step 1: Confirm the code location and directory structure
  - Place it under Containers according to the expected position in the menu item
  - Take the instance as an example, the corresponding menu item is `Compute-Instance`, then create the folder `src/pages/compute/containers/Instance`, create the file `src/pages/compute/containers/Instance/index.jsx `
- Step 2: Write the Store code
  - Refer to [3-5-BaseStore-introduction](3-5-BaseStore-introduction.md), copy the corresponding function
- Step 3: Code the list page
  - Refer to [3-1-BaseList-introduction](3-1-BaseList-introduction.md), copy the corresponding function
- Step 4: Configure routing
  - Refer to [3-13-Route-introduction](3-13-Route-introduction.md)
  - In the `routes/index.js` file of the parent directory in step 1, configure routing
  - If it is a brand new module, you also need to import it in `src/pages/storage/routes/index.js`
- Step 5: Configure menu
  - Refer to [3-12-Menu-introduction](3-12-Menu-introduction.md)
  - Configure the menu items of the console, which are configured in `src/layouts/menu.jsx`
  - Configure the menu items of the management platform, configured in `src/layouts/admin-menu.jsx`
- Step 6: i18n
  - Refer to [3-14-I18n-introduction](3-14-I18n-introduction.md), Complete the corresponding translation
- If the product requirement list page is a page containing `Tab`, please refer to [3-2-BaseTabList-introduction](3-2-BaseTabList-introduction.md), usually `Tab` is configured in `index.jsx` , Please refer to the mirror page code `src/pages/compute/containers/Image/index.jsx`

# Develop a new resource details page

- Step 1: Confirm the code location and directory structure
  - Place it under Containers according to the expected position in the menu item
  -  Take the instance as an example, the corresponding menu item is `Compute-Instance`, then create the folder `src/pages/compute/containers/Instance/Detail/index.jsx`，`src/pages/compute/containers/Instance/Detail/BaseDetail.jsx`
- Step 2: Write the Store code
  - Refer to [3-5-BaseStore-introduction](3-5-BaseStore-introduction.md), copy the corresponding function
- Step 3: Write the code of the detail page
  - Refer to [3-3-BaseDetail-introduction](3-3-BaseDetail-introduction.md), copy the corresponding function
- Step 4：Write detail page-details Tab code
  - Refer to [3-4-BaseDetailInfo-introduction](3-4-BaseDetailInfo-introduction.md), copy the corresponding function
- Step 5: Configure routing
  - Refer to [3-13-Route-introduction](3-13-Route-introduction.md)
  - In the `routes/index.js` file of the parent directory in step 1, configure routing
  - If it is a brand new module, you also need to import it in `src/pages/storage/routes/index.js`
- Step 6: Configure menu
  - Refer to [3-12-Menu-introduction](3-12-Menu-introduction.md)
  - Configure the menu items of the console, which are configured in `src/layouts/menu.jsx`
  - Configure the menu items of the management platform, configured in `src/layouts/admin-menu.jsx`
- Step 7: i18n
  - Refer to [3-14-I18n-introduction](3-14-I18n-introduction.md), Complete the corresponding translation

# Develop a new operation

## Develop a page-level operation

- Step 1: Confirm the code location and directory structure
  - Place it under Containers according to the expected position in the menu item
  - Take the instance as an example, the corresponding menu item is `Storage-Volume-Create Volume`, then create the folder `src/pages/storage/containers/Volume/actions/Create/index.jsx`
- Step 2: Write the Store code
  - Refer to [3-5-BaseStore-introduction](3-5-BaseStore-introduction.md), Copy or add the corresponding function
- Step 3: Write the FormAction code
  - Refer to [3-6-FormAction-introduction](3-6-FormAction-introduction.md), copy the corresponding function
- Step 4: Configure Action
  - Refer to [3-11-Action-introduction](3-11-Action-introduction.md), Configure to the corresponding position
- Step 5: Configure routing
  - Refer to [3-13-Route-introduction](3-13-Route-introduction.md), Configure the corresponding route
- Step 6: Configure the menu
  - Refer to [3-12-Menu-introduction](3-12-Menu-introduction.md)
  - Configure the menu items of the console, which are configured in `src/layouts/menu.jsx`
  - Configure the menu items of the management platform, configured in `src/layouts/admin-menu.jsx`
- Step 7: i18n
  - Refer to [3-14-I18n-introduction](3-14-I18n-introduction.md)，Complete the corresponding translation

## Develop a confirmation operation

- Step 1: Confirm the code location and directory structure
  - Place it under Containers according to the expected position in the menu item
  - Take the instance as an example, the corresponding menu item is `Storage-Volume-Delete Volume`, then create the folder `src/pages/storage/containers/Volume/actions/Delete.jsx`
- Step 2: Write the Store code
  - Refer to [3-5-BaseStore-introduction](3-5-BaseStore-introduction.md),  Copy or add the corresponding function
- Step 3: Write ConfirmAction code
  - Refer to [3-8-ConfirmAction-introduction](3-8-ConfirmAction-introduction.md)，copy the corresponding function
- Step 4: Configure Action
  - Refer to [3-11-Action-introduction](3-11-Action-introduction.md), Configure to the corresponding position
- Step 5: i18n
  - Refer to [3-14-I18n-introduction](3-14-I18n-introduction.md)，Complete the corresponding translation

## Develop a pop-up operation

- Step 1: Confirm the code location and directory structure
  - Place it under Containers according to the expected position in the menu item
  - Take the instance as an example, the corresponding menu item is `Storage-Volume-Edit Volume`, then create the folder `src/pages/storage/containers/Volume/actions/Edit.jsx`
- Step 2: Write the Store code
  - Refer to [3-5-BaseStore-introduction](3-5-BaseStore-introduction.md),  Copy or add the corresponding function
- Step 3: Write ModalAction code
  - Refer to [3-7-ModalAction-introduction](3-7-ModalAction-introduction.md)，copy the corresponding function
- Step 4: Configure Action
  - Refer to [3-11-Action-introduction](3-11-Action-introduction.md), Configure to the corresponding position
- Step 5: i18n
  - Refer to [3-14-I18n-introduction](3-14-I18n-introduction.md)，Complete the corresponding translation

## Develop a step-by-step page-level operation

- Step 1: Confirm the code location and directory structure
  - Place it under Containers according to the expected position in the menu item
  - Take the instance as an example, the corresponding menu item is `Compute-Instance-Create Instance`, then create the folder `src/pages/compute/containers/Instance/actions/StepCreate/index.jsx`
- Step 2: Write the Store code
  - Refer to [3-5-BaseStore-introduction](3-5-BaseStore-introduction.md),  Copy or add the corresponding function
- Step 3: Write StepAction code
  - Refer to [3-9-StepAction-introduction](3-9-StepAction-introduction.md)，copy the corresponding function
- Step 4: Configure Action
  - Refer to [3-11-Action-introduction](3-11-Action-introduction.md), Configure to the corresponding position
- Step 5: Configure routing
  - Refer to [3-13-Route-introduction](3-13-Route-introduction.md), Configure the corresponding route
- Step 6: Configure the menu
  - Refer to [3-12-Menu-introduction](3-12-Menu-introduction.md)
  - Configure the menu items of the console, which are configured in `src/layouts/menu.jsx`
  - Configure the menu items of the management platform, configured in `src/layouts/admin-menu.jsx`
- Step 7: i18n
  - Refer to [3-14-I18n-introduction](3-14-I18n-introduction.md)，Complete the corresponding translation
