DOCSEARCHbyAlgolia
Submit Docs

Arco Design Pro Documentation

repository·main·Indexed 20 days ago

https://github.com/arco-design/arco-design-pro

An out-of-the-box solution for building enterprise-level applications using the Arco Design React component library. Version 2.8.1 features a multi-architecture approach supporting Next.js, Vite, and Create React App (CRA). It includes over 16 page templates, TypeScript support, built-in i18n, dark mode integration via DesignLab, and API mocking. The toolkit provides specialized components for permission-based access control, application settings management, and global state handling via GlobalContext.

Tokens
39.8K
Snippets
114
Records
131
Agent score
70%

What's inside Arco Design Pro

  1. Overview of Arco Design Pro features

    main

    Arco Design Pro is an enterprise-level application solution built on top of the Arco Design component library. Key features include:

    • TypeScript: Full TypeScript support for type safety.
    • Templates: Over 16 page templates including dashboards, tables, lists, forms, and visualizations.
    • Themes & Dark Mode: Integration with DesignLab for custom themes and one-click dark mode switching.
    • Mocking: Built-in API simulation for development.
    • Multi-architecture: Support for multiple development frameworks like next.js, vite, and cra.
    • I18n: Built-in internationalization support.
    • Configurability: Flexible configuration for layouts and page colors.

  2. How the multi-architecture solution works

    main
    Unlike traditional Pro projects that use a fixed structure, Arco Design Pro v2 uses a multi-architecture approach designed to maximize code reuse. It provides a set of templates that can be outputted into different development environments (e.g., Next.js, Vite, or Create React App), allowing users to choose their preferred framework without high modification costs.

  6. Initialize a new Arco Design Pro project

    main

    To start a new project using Arco Design Pro, you must first install the @arco-design/arco-cli globally and then use the arco init command to scaffold your project. This allows you to create projects based on various architectures (such as Next.js, Vite, or CRA) while benefiting from the pre-built templates and features of Arco Design Pro.

    $ npm i @arco-design/arco-cli@latest yarn -g

$ arco init my-project

  8. Modify pages and API routes

    main

    This project follows the Next.js file-system routing convention:

    • React Pages: Edit pages/index.tsx to modify the main landing page. Changes will trigger an auto-update in the browser.
    • API Routes: Files located in the pages/api directory are treated as API endpoints rather than React pages. For example, the endpoint http://localhost:3000/api/hello is defined in pages/api/hello.ts.

  9. Manage application theme and language

    main

    In the CRA template, theme and language are persisted using a custom useStorage hook.

    • Language: The key arco-lang is used to store the selected locale (e.g., en-US or zh-CN).
    • Theme: The key arco-theme is used to store the theme preference (e.g., light). Changing the theme triggers the changeTheme utility to update the application's visual style.

    These values are made available throughout the application via GlobalContext.

  10. Configure Arco Design global settings and providers

    main

    The Vite architecture template uses a nested provider pattern to manage global state, localization, and component defaults. To replicate this setup, you should wrap your application in the following providers:

    1. BrowserRouter: Handles client-side routing.
    2. ConfigProvider (from @arco-design/web-react): Configures the Arco Design component library. You can set the locale and componentConfig to define global component behaviors (e.g., removing borders from Card, List, or Table).
    3. Provider (from react-redux): Provides the Redux store for global state management.
    4. GlobalContext.Provider: A custom context used to share application-level settings like lang and theme across the component tree.

    Global styles should be imported at the entry point (e.g., import './style/global.less';).

    <BrowserRouter>
  <ConfigProvider
    locale={getArcoLocale()}
    componentConfig={{
      Card: { bordered: false },
      List: { bordered: false },
      Table: { border: false },
    }}
  >
    <Provider store={store}>
      <GlobalContext.Provider value={contextValue}>
        <Switch>
          <Route path="/login" component={Login} />
          <Route path="/" component={PageLayout} />
        </Switch>
      </GlobalContext.Provider>
    </Provider>
  </ConfigProvider>
</BrowserRouter>

  11. Configure Arco Design Pro global settings

    main

    The Vite-based Arco Design Pro template uses a centralized Index component to manage global application state, including localization, theme, and component-level configurations.

    Key configuration areas include:

    1. Localization: Managed via ConfigProvider using the locale prop. Supported locales in this template are zh-CN and en-US.
    2. Component Defaults: Global component styles (like removing borders from Card, List, and Table) are configured via the componentConfig prop on ConfigProvider.
    3. State Management: The application uses react-redux for global state (via rootReducer) and a custom GlobalContext to provide lang and theme settings to the component tree.
    4. Routing: Uses react-router-dom with a Switch to handle top-level routes like /login and the main PageLayout at /.
    <ConfigProvider
  locale={getArcoLocale()}
  componentConfig={{
    Card: { bordered: false },
    List: { bordered: false },
    Table: { border: false },
  }}
>
  <Provider store={store}>
    <GlobalContext.Provider value={contextValue}>
      <Switch>
        <Route path="/login" component={Login} />
        <Route path="/" component={PageLayout} />
      </Switch>
    </GlobalContext.Provider>
  </Provider>
</ConfigProvider>

  12. Configure route permissions with `requiredPermissions` and `oneOfPerm`

    main

    Permissions are attached to IRoute objects to control access.

    • requiredPermissions: An array of permission objects specifying the resource and the allowed actions (e.g., ['read', 'write']).
    • oneOfPerm: A boolean flag. When true, the user only needs to satisfy one of the conditions in the requiredPermissions array to gain access. When false (default), the user must satisfy all conditions.
    {
  name: 'menu.visualization.multiDimensionDataAnalysis',
  key: 'visualization/multi-dimension-data-analysis',
  requiredPermissions: [
    {
      resource: 'menu.visualization.dataAnalysis',
      actions: ['read', 'write'],
    },
    {
      resource: 'menu.visualization.multiDimensionDataAnalysis',
      actions: ['write'],
    },
  ],
  oneOfPerm: true,
}