English | Chinese

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, copy the corresponding function
Step 3: Code the list page
- Refer to 3-1-BaseList-introduction, copy the corresponding function
Step 4: Configure routing
- Refer to 3-13-Route-introduction
- 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
- 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, Complete the corresponding translation
If the product requirement list page is a page containing Tab, please refer to 3-2-BaseTabList-introduction, 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, copy the corresponding function
Step 3: Write the code of the detail page
- Refer to 3-3-BaseDetail-introduction, copy the corresponding function
Step 4：Write detail page-details Tab code
- Refer to 3-4-BaseDetailInfo-introduction, copy the corresponding function
Step 5: Configure routing
- Refer to 3-13-Route-introduction
- 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
- 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, Complete the corresponding translation

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, Copy or add the corresponding function
Step 3: Write the FormAction code
- Refer to 3-6-FormAction-introduction, copy the corresponding function
Step 4: Configure Action
- Refer to 3-11-Action-introduction, Configure to the corresponding position
Step 5: Configure routing
- Refer to 3-13-Route-introduction, Configure the corresponding route
Step 6: Configure the menu
- Refer to 3-12-Menu-introduction
- 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，Complete the corresponding translation

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, Copy or add the corresponding function
Step 3: Write ConfirmAction code
- Refer to 3-8-ConfirmAction-introduction，copy the corresponding function
Step 4: Configure Action
- Refer to 3-11-Action-introduction, Configure to the corresponding position
Step 5: i18n
- Refer to 3-14-I18n-introduction，Complete the corresponding translation

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, Copy or add the corresponding function
Step 3: Write ModalAction code
- Refer to 3-7-ModalAction-introduction，copy the corresponding function
Step 4: Configure Action
- Refer to 3-11-Action-introduction, Configure to the corresponding position
Step 5: i18n
- Refer to 3-14-I18n-introduction，Complete the corresponding translation

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, Copy or add the corresponding function
Step 3: Write StepAction code
- Refer to 3-9-StepAction-introduction，copy the corresponding function
Step 4: Configure Action
- Refer to 3-11-Action-introduction, Configure to the corresponding position
Step 5: Configure routing
- Refer to 3-13-Route-introduction, Configure the corresponding route
Step 6: Configure the menu
- Refer to 3-12-Menu-introduction
- 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，Complete the corresponding translation