基础 UI 组件库

安装

要求项目使用 React ^19.2.5、ReactDOM ^19.2.5 和 Ant Design ^6.5.1。

普通组件项目安装主包：

npm install @chenhui996/gg-ui

项目使用 Table 或 @chenhui996/gg-ui/gz-table 时，还要安装表格相关的 peer dependencies：

npm install [email protected] [email protected] [email protected]

使用

1. 根组件包裹（main.tsx）

import '@chenhui996/gg-ui/gg-ui.css';
import { createRoot } from 'react-dom/client';
import { RouterProvider } from 'react-router-dom';
import { ConfigProvider, type GZThemeMode } from '@chenhui996/gg-ui';
import { router } from '@/router';

const themeMode: GZThemeMode = 'gold-dark';

createRoot(document.getElementById('root')!).render(
  <ConfigProvider themeMode={themeMode}>
    <RouterProvider router={router} />
  </ConfigProvider>,
);

2. 组件使用

• 以 Button 组件为例

import { Button } from '@chenhui996/gg-ui';

const App = () => {
  return (
    <div>
      <Button>默认按钮</Button>
    </div>
  );
};

3. Table 和 AG Grid API

Table 从主包导入；AG Grid 类型、底层 API 和 gz-ui 生成的 Grid Token 从 gz-table 子入口导入：

import { Table } from '@chenhui996/gg-ui';
import {
  goldDarkAgGridTokens,
  type ColDef,
} from '@chenhui996/gg-ui/gz-table';

Table 在 Gold 主题下会自动使用对应的 AG Grid Token。详见 Table 文档 和 AG Grid Token 文档。

项目图表技术栈统一使用 ECharts，不单独维护图表 Token。图表颜色、文字和背景直接通过 getDesignTokens({ themeMode }).globalToken 获取，完整示例见 全局 Tokens。