# frontend-packages

**Repository Path**: lhuabil/frontend-packages

## Basic Information

- **Project Name**: frontend-packages
- **Description**: 私有包构建仓库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-15
- **Last Updated**: 2026-06-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# @hdtd/frontend-packages

本项目是一个基于 [pnpm workspaces](https://pnpm.io/workspaces) 管理的 Monorepo 仓库，包含 HDTD 生态系统中使用的前端包、工具库和开发工具。

## 📂 项目结构

项目主要分为两个主要的包目录：

### 📦 核心包 (`packages/`)

这些是应用程序中使用的主要库。

| 包名                      | 描述                                                                                                                                                               |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **`@hdtd/components`**    | 基于 Ant Design 的可复用 React UI 组件库。包含 `AreaContainer`（区域容器）、`MainModal`（主模态框）、`QueryTable`（查询表格）、`RegisterChart`（图表注册）等组件。 |
| **`@hdtd/utils`**         | 通用工具函数、API 辅助方法以及跨项目共享的公共逻辑。                                                                                                               |
| **`@hdtd/nodejs-utils`**  | Node.js 专用工具函数，主要用于文件系统操作和构建脚本。                                                                                                             |
| **`@hdtd/create-upload`** | 专注于上传功能的模块，包含特定的 HTML 和脚本配置。                                                                                                                 |
| **`@hdtd/docs`**          | 基于 dumi 的组件库文档站点。                                                                                                                                       |

### 🛠 开发包 (`dev-packages/`)

这些包用于构建流程、工具链和代码规范强制执行。

| 包名                                   | 描述                                                                                                      |
| -------------------------------------- | --------------------------------------------------------------------------------------------------------- |
| **`@hdtd/coding-style`**               | 集中化的代码规范配置。包含 **ESLint**、**Stylelint** 和 **TypeScript** 的共享设置，以确保跨项目的一致性。 |
| **`@hdtd/vite-plugin-build-version`**  | 自定义 Vite 插件，用于注入或管理构建版本信息。                                                            |
| **`@hdtd/vite-plugin-output-archive`** | 自定义 Vite 插件，用于处理或归档构建产物（例如压缩制品）。                                                |

## 💻 技术栈

- **语言:** TypeScript
- **框架:** React
- **UI 库:** Ant Design (antd)
- **数据可视化:** ECharts (via echarts-for-react)
- **打包工具:** Rollup (用于库打包)
- **包管理器:** pnpm
- **Linting & 格式化:** ESLint, Prettier, Stylelint

## 🚀 快速开始

### 前置要求

- **Node.js**: 确保安装了兼容的 Node.js 版本。
- **pnpm**: 本项目强制使用 pnpm。根目录 `package.json` 指定版本为 `pnpm@10.6.5`。

### 安装

在工作空间中安装所有依赖：

```bash
pnpm install
```

### 配置

项目配置使用私有仓库。请确保你的环境或 `.npmrc` 已配置为访问：
`http://192.168.8.12:10050/`

## 🏗 脚本与构建

大多数包使用 **Rollup** 进行构建。你可以使用 pnpm 的过滤功能构建特定包。

**构建特定包:**

```bash
# 示例: 构建 components 包
pnpm --filter @hdtd/components build

# 示例: 构建 coding-style 包
pnpm --filter @hdtd/coding-style build
```

**构建所有包:**
你可以尝试递归运行构建：

```bash
pnpm -r run build
```

## 📚 文档站点

本项目包含一个基于 [dumi](https://d.umijs.org/) 的组件库文档站点，位于 `@hdtd/docs` 包中。文档站点支持热更新，可实时预览组件效果。

### 启动文档

```bash
# 启动文档站点开发服务器
pnpm --filter @hdtd/docs start
```

启动后，访问 `http://localhost:8000` 即可查看。

### 构建文档

```bash
# 构建静态文档站点
pnpm --filter @hdtd/docs build
```

### 已收录组件文档

文档站点目前已包含以下核心组件的详细使用指南和示例：

- **AreaContainer** (区域容器)
- **MainModal** (全局模态框)
- **QueryTable** (查询表格)
- **RecursionMenu** (递归菜单)
- **RegisterChart** (图表组件)
- **If** (条件渲染)

## 🧩 核心组件

`@hdtd/components` 包提供了一些关键组件：

- **`QueryTable`**: 一个集成了搜索查询功能的复杂表格组件。
- **`MainModal`**: 标准化的模态框封装。
- **`RegisterChart`**: ECharts 注册封装组件。
- **`RecursionMenu`**: 用于动态导航结构的递归菜单组件。
- **`AreaContainer`**: 布局容器组件。
- **`If`**: 用于条件渲染的工具组件。

## 📝 编码规范

代码质量通过 `@hdtd/coding-style` 强制执行。该包导出的配置被其他包引用，以保持统一的：

- **Linting 规则** (ESLint)
- **样式规则** (Stylelint)
- **TypeScript 配置**

---

_文档基于项目分析生成。_