Development Must-Read Documentation

API Integration

The default response format is as follows. To modify it, please go to the src/typings/http.d.ts file

/** Base Response */
interface BaseResponse<T = unknown> {
  // Status code
  code: number;
  // Message
  msg: string;
  // Data
  data: T;
}

Network Requests

By default, returns the data from the data field rather than the entire response body

try {
  const { token, refreshToken } = await fetchLogin({
    userName: username,
    password,
  });
} catch (error) {
  if (error instanceof HttpError) {
    // Different handling can be done here based on status codes
    // console.log(error.code)
  }
}

Menu Data (asyncRoutes.ts)

RoutesAlias.Layout points to the layout container. In the menu data returned by the backend, the component field should point to /index/index

The roles field is used for frontend control mode. It filters menus by comparing the roles returned from the user info API with the roles in the menu data asyncRoutes (only users with these roles can access)

In backend mode, simply return the menu for the corresponding role through the API without needing to return the roles field

{
    name: 'Dashboard',
    path: '/dashboard',
    component: RoutesAlias.Layout,
    meta: {
      title: 'menus.dashboard.title',
      icon: '',
      roles: ['R_SUPER', 'R_ADMIN']
    },
    children: [
      {
        path: 'console',
        name: 'Console',
        component: RoutesAlias.Dashboard,
        meta: {
          title: 'menus.dashboard.console',
          keepAlive: false,
          fixedTab: true
        }
      },
    ]
  }

Bundle Size Information

• Full version project: approximately 10MB

• Lite version project: approximately 5MB

The project has gzip compression enabled by default, which generates additional .gz files:

When gzip is disabled, the actual bundle size is approximately 4.5MB

When gzip is enabled, the bundle size is smaller (browsers will prioritize loading .gz files)

viteCompression({
  verbose: false,
  disable: false,
  algorithm: 'gzip',
  ext: '.gz',
  threshold: 10240,
  deleteOriginFile: false,
})

Further Optimization Solutions

If you have higher requirements for bundle size, you can optimize through the following methods to easily reduce it to around 3.5MB:

• Streamline or replace icon libraries

• Remove unnecessary image resources

• Reduce third-party library dependencies, or replace them with lighter alternatives