@lincyaw / aegis-ui

为AegisLab前端设计系统和多应用程序外壳：设计令牌； 表示性React组件； PageWrapper，路由器感知 AegisShell，以及遵循相同标记的Ant Design主题。

该包不包含API客户端、业务状态或页面。应用程序 提供自己的数据并通过插件插入到shell中 AegisApp 合同。

安装

pnpm add @lincyaw/aegis-ui

同行依赖性: react 18， react-dom 18， react-router-dom 6， antd 5.25或以后； @ant-design/icons 5.

字体没有捆绑。安装 @fontsource-variable/geist， @fontsource-variable/hanken-grotesk， @fontsource-variable/noto-sans-sc 和 @fontsource/google-sans-code，并在应用程序入口中导入它们 (谷歌Sans Code 400.css 和 500.css 重量)。

使用

import {
  type AegisApp,
  AegisShell,
  ThemeProvider,
  getAegisTheme,
  useTheme,
} from '@lincyaw/aegis-ui';
import '@lincyaw/aegis-ui/style.css';
import { ConfigProvider } from 'antd';
import { BrowserRouter } from 'react-router-dom';

const containersApp: AegisApp = {
  id: 'containers',
  label: 'Containers',
  icon: <HddOutlined />,
  basePath: '/containers',
  sidebar: [{ items: [{ to: '', label: 'List', end: true }] }],
  routes: [{ path: '', element: <ContainerList /> }],
};

function Root() {
  const { resolved } = useTheme();
  return (
    <ConfigProvider theme={getAegisTheme(resolved)}>
      <BrowserRouter>
        <AegisShell
          brand={{ name: 'AegisLab', href: '/' }}
          apps={[containersApp]}
          fallbackPath="/containers"
        />
      </BrowserRouter>
    </ConfigProvider>
  );
}

export function App() {
  return (
    <ThemeProvider>
      <Root />
    </ThemeProvider>
  );
}

外壳将每条路线包裹起来 PageWrapper，因此页面只呈现内容：

import { DataTable, PageHeader, Panel } from '@lincyaw/aegis-ui';

export function ContainerList() {
  return (
    <>
      <PageHeader title="Containers" />
      <Panel>
        <DataTable columns={columns} data={rows} rowKey={(row) => row.id} />
      </Panel>
    </>
  );
}

文档

这个 库的自述 涵盖了 包的全部内容、开发工作流程和发布版本 的过程。这个 组件库 显示每个组件及其变体，在光明和黑暗的主题。