Application Shell

Developer Beginner

The EZApp component provides the application shell with layout, navigation, and authentication.

The full public props type is EZAppProps (exported from 'ez-console' as an alias of AppProps in the framework source). Commonly used fields:

Prop	Type	Purpose
basePath	string	Router basename (e.g. '/' or '/app').
transformRouter	(routes: IRoute[]) => IRoute[]	Adjust built-in private/public route trees.
transformSettingTabs	Ant Design TabsProps['items'] transformer	System settings tabs.
transformLangConfig	(langs: LanguageConfig[]) => LanguageConfig[]	Languages shown in LanguageSwitch.
extraPrivateRoutes	IRoute[]	Routes rendered inside the authenticated layout.
extraPublicRoutes	IRoute[]	Public routes (login, callbacks, …).
menuStyle	'dark' | 'light'	Sidebar menu theme.
transformHeaderItems	(items: React.ReactNode[]) => React.ReactNode[]	Header action area.
renderLayout	Custom layout render	Replace default AppLayout composition when needed.
aiChatProps	AIChatProps	Pass-through to embedded AIChat / shell AI hosts.

See also the export checklist Package exports (index.ts).

Basic Usage

import { EZApp } from 'ez-console';

export default function App() {
  return <EZApp basePath='/' />;
}

Adding Custom Routes

import { EZApp, withSuspense } from 'ez-console';
import { lazy } from 'react';

const ProductPage = lazy(() => import('@/pages/ProductPage'));
const OrderPage = lazy(() => import('@/pages/OrderPage'));

export default function App() {
  return (
    <EZApp
      basePath='/'
      extraPrivateRoutes={[
        {
          path: '/products',
          element: withSuspense(ProductPage),
          name: 'products',
        },
        {
          path: '/orders',
          element: withSuspense(OrderPage),
          name: 'orders',
        },
      ]}
    />
  );
}

Theming

import { ConfigProvider } from 'antd';
import { EZApp } from 'ez-console';

export default function App() {
  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: '#1890ff',
          borderRadius: 4,
        }
      }}
    >
      <EZApp basePath='/' />
    </ConfigProvider>
  );
}

Built-in Features

The EZApp provides:

• ✅ Layout (header, sidebar, content)
• ✅ Navigation menu
• ✅ Authentication flow
• ✅ Route protection
• ✅ User profile dropdown
• ✅ Language switcher
• ✅ Dark mode toggle (optional)

Next Steps

• Learn about routing
• Make API calls
• Use built-in components