skyline-console/docs/en/develop/3-0-how-to-develop.md

7.6 KiB
Raw Permalink Blame History

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
  • Step 3: Code the list page
  • 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
  • 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.jsxsrc/pages/compute/containers/Instance/Detail/BaseDetail.jsx
  • Step 2: Write the Store code
  • Step 3: Write the code of the detail page
  • Step 4Write detail page-details Tab code
  • 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

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
  • Step 3: Write the FormAction code
  • Step 4: Configure Action
  • Step 5: Configure routing
  • 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

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
  • Step 3: Write ConfirmAction code
  • Step 4: Configure Action
  • Step 5: i18n

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
  • Step 3: Write ModalAction code
  • Step 4: Configure Action
  • Step 5: i18n

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
  • Step 3: Write StepAction code
  • Step 4: Configure Action
  • Step 5: Configure routing
  • 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