115 lines
7.6 KiB
Markdown
115 lines
7.6 KiB
Markdown
English | [Chinese](../../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
|