| | |
|---|
| | | # admin2-components |
|---|
| | | |
|---|
| | | 基于 React + TypeScript + Vite 的组件库项目 |
|---|
| | | PC 端管理系统公共组件库，基于 React + TypeScript + Ant Design 构建。 |
|---|
| | | |
|---|
| | | ## 项目定位 |
|---|
| | | |
|---|
| | | 本项目是一套 PC 端管理系统的公共组件库，提供： |
|---|
| | | - **框架组件** - 管理系统页面主结构（侧边栏、顶部栏、多页签等） |
|---|
| | | - **表单组件** - 处理用户输入（日期选择、级联选择、文件上传等） |
|---|
| | | - **高级组件** - 复杂功能（表格、图表、弹窗、编辑器等） |
|---|
| | | |
|---|
| | | ## 技术栈 |
|---|
| | | |
|---|
| | | - React 19 |
|---|
| | | - TypeScript 5.9 |
|---|
| | | - Vite 8 |
|---|
| | | - Ant Design 6.3.5 |
|---|
| | | - ESLint 9 (Flat Config) |
|---|
| | | |
|---|
| | | ## 引用方式 |
|---|
| | | |
|---|
| | | 作为 git 子模块挂载到业务项目根目录： |
|---|
| | | |
|---|
| | | ```bash |
|---|
| | | # 添加子模块到项目根目录 |
|---|
| | | git submodule add <repository-url> components |
|---|
| | | |
|---|
| | | # 更新子模块 |
|---|
| | | git submodule update --init --recursive |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | 业务项目需配置别名 `@components` 指向 `components/src` 目录。组件引用示例： |
|---|
| | | |
|---|
| | | ```tsx |
|---|
| | | import { CSideMenu } from '@components/framework/sideMenu/CSideMenu'; |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ## 组件分类 |
|---|
| | | |
|---|
| | | | 分类 | 说明 | |
|---|
| | | |------|------| |
|---|
| | | | `framework` | 框架组件 - 页面主结构 | |
|---|
| | | | `forms` | 表单组件 - 用户输入 | |
|---|
| | | | `fragments` | 页面片段 - 布局元素 | |
|---|
| | | | `plugins` | 高级组件 - 复杂功能 | |
|---|
| | | | `bases` | 业务组件 - 领域特定 | |
|---|
| | | |
|---|
| | | 详细目录结构说明见 [STRUCTURE.md](./STRUCTURE.md) |
|---|
| | | |
|---|
| | | ## 可用脚本 |
|---|
| | | |
|---|
| | | ```bash |
|---|
| | | pnpm dev # 启动开发服务器 |
|---|
| | | pnpm build # 构建生产版本 |
|---|
| | | pnpm preview # 预览生产版本 |
|---|
| | | pnpm lint # 运行 ESLint |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ## 开发规范 |
|---|
| | | |
|---|
| | | - 使用 TypeScript 严格模式 |
|---|
| | | - ESLint 配置了类型检查规则，提交前需通过 lint |
|---|
| | | - 组件开发遵循函数式组件 + Hooks 模式 |
|---|
| | | - 组件文件以 `C` 开头（如 `CButton.tsx`） |
|---|
| | | - 样式文件与组件同目录，使用 `c` 开头（如 `cButton.scss`） |
|---|
