bd501ba416
fix for docs link address Change-Id: I8539ba5a546621e543b2c4c83066489b98e308c5
7.6 KiB
7.6 KiB
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 foldersrc/pages/compute/containers/Instance
, create the filesrc/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, usuallyTab
is configured inindex.jsx
, Please refer to the mirror page codesrc/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 foldersrc/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
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 foldersrc/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
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 foldersrc/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
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 foldersrc/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
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 foldersrc/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