React + Vite + Less + Antd

前端组件库

组件库目录结构

packages/
├─ index.js                 # 组件库入口，导出 AoiGlobal、aoiInit 等初始化能力
├─ assets/                  # 静态资源与枚举配置
│  ├─ enum/                 # 全局枚举、默认配置常量
│  ├─ images/               # 图片资源
│  └─ svgs/                 # SVG 图标资源，按图标类型分类
│     ├─ colo/              # 彩色图标
│     ├─ fill/              # 填充图标
│     │  └─ status/         # 状态类填充图标
│     └─ line/              # 线性图标
│        └─ tool/           # 工具类线性图标
├─ components/              # 组件源码
│  ├─ index.jsx             # 组件统一导出入口
│  ├─ base/                 # 基础组件
│  │  ├─ AoiApp/            # 应用外层容器，注入全局状态、消息、权限等上下文
│  │  ├─ AoiEllipsis/       # 文本省略组件
│  │  ├─ AoiErr/            # 错误展示组件
│  │  ├─ AoiIcon/           # 图标组件
│  │  └─ AoiSwitch/         # 开关组件
│  ├─ data/                 # 数据展示组件
│  │  ├─ AoiList/           # 列表组件
│  │  ├─ AoiModal/          # 弹窗组件
│  │  ├─ AoiNews/           # 消息/通知组件
│  │  ├─ AoiTable/          # 表格组件
│  │  └─ AoiView/           # PixiJS 图像与缺陷数据绘制视图
│  └─ form/                 # 表单输入组件
│     ├─ AoiColor/          # 颜色选择组件
│     ├─ AoiDate/           # 日期选择组件
│     ├─ AoiInput/          # 输入框组件
│     ├─ AoiNumber/         # 数字输入组件
│     └─ AoiSelect/         # 下拉选择组件
├─ hooks/                   # 公共 React Hooks
│  ├─ index.js              # 对外导出的 hooks
│  └─ privatize.js          # 内部使用的私有 hooks
├─ locales/                 # 国际化资源
│  ├─ index.js              # i18n 初始化与导出
│  ├─ zh.json               # 中文语言包
│  └─ en.json               # 英文语言包
├─ styles/                  # 全局样式与公共 Less 资源
├─ themes/                  # 主题 token 与主题变量
└─ utils/                   # 工具模块
   ├─ mount.js              # 预处理
   ├─ config.js             # 配置初始化与文件路径配置
   ├─ defect.js             # 缺陷类型配置管理
   ├─ event.js              # 全局事件定义与发布订阅
   ├─ index.js              # 工具统一导出入口
   ├─ msgs.js               # 消息提示封装
   ├─ queue.js              # 队列工具
   ├─ sqldb.js              # 数据库访问封装
   └─ util.js               # 通用工具函数

组件目录通常遵循以下约定：

• 每个组件以独立文件夹维护，入口文件为 index.jsx。
• 组件私有样式放在同级 index.less 中，并由组件入口按需引入。
• packages/components/index.jsx 负责统一导出所有对外组件。
• packages/index.js 负责组件库全局初始化能力，例如主题、国际化、数据库、事件与配置初始化。

组件图标

• 简约图标库 1
• 全能图标库 1

组件使用步骤

1. 安装依赖

组件库安装：

pnpm install aoi-comp

2. 引入全局样式

在应用入口文件中引入组件库样式：

import 'aoi-comp/style.css';

3. 初始化组件库

在渲染 React 应用前调用 aoiInit，用于初始化主题、国际化、数据库、事件、配置等全局能力：

import { aoiInit } from 'aoi-comp';

const config = {
  exe: window._executer,
  cv: window._cv,
  resource: {
    zh: { welcome: '欢迎使用 Aoi Comp' },
    en: { welcome: 'Welcome to Aoi Comp' },
  },
  sqls: [],
  config: {},
};

aoiInit(config);

常用初始化参数：

• exe：宿主环境注入的执行对象，用于数据库、文件等能力。
• cv：宿主环境注入的图像处理对象。
• resource：业务侧追加的国际化语言包。
• lang：默认语言，默认为 zh。
• sqls：数据库表结构与 SQL 配置。
• level：权限配置。
• config：业务配置项。
• dev：是否开启开发模式。

4. 挂载 AoiApp

使用 AoiApp 包裹业务应用，注入 Ant Design 配置、主题、语言包、全局消息和组件库上下文：

import { createRoot } from 'react-dom/client';
import { AoiApp } from 'aoi-comp/comps';
import zhCN from 'antd/locale/zh_CN';
import App from './App';

createRoot(document.getElementById('root')).render(
  <AoiApp lang="zh" locale={zhCN}>
    <App />
  </AoiApp>
);

5. 使用组件

从 aoi-comp/comps 按需导入组件：

import { AoiInput, AoiTable, AoiView } from 'aoi-comp/comps';

示例：

import { AoiInput, AoiNumber, AoiTable } from 'aoi-comp/comps';

const Demo = () => (
  <>
    <AoiInput value="test" />
    <AoiNumber value={8} max={10} />
    <AoiTable rowKey="id" columns={[]} data={[]} />
  </>
);

6. 使用 Hooks 和工具函数

Hooks 从 aoi-comp/hooks 导入：

import { useMessage, useStore, usePagination, useVastState } from 'aoi-comp/hooks';

工具函数从 aoi-comp/utils 导入：

import { Msg, uid, emit, on, off } from 'aoi-comp/utils';

7. 本地开发验证

当前仓库可通过以下命令启动和构建：

pnpm dev
pnpm build

本地测试入口参考：

• test/main.jsx：组件库初始化与 AoiApp 挂载示例。
• test/config.js：aoiInit 配置示例。
• test/App.jsx：组件使用示例。