npm package: @frameui/fui-plugin-vitebar
Description: 一个功能强大的 Vite 构建进度条插件，提供实时进度显示、性能监控和智能缓存管理
Author: liuzhaolei
Latest version: 2.1.0

# Fui Plugin Vitebar 2.0

一个功能强大的 Vite 构建进度条插件，提供实时进度显示、性能监控和智能缓存管理。

## ✨ 特性

- 🚀 **实时进度条** - 显示构建转换和块处理的实时进度
- 📊 **性能监控** - 监控构建各阶段的性能指标
- 💾 **智能缓存** - 自动缓存构建数据，提升重复构建速度
- 🎨 **美观界面** - 彩色进度条和状态指示器
- 🔧 **灵活配置** - 丰富的配置选项和自定义功能
- 🛡️ **错误处理** - 完善的错误处理和日志记录
- 📱 **环境适配** - 自动检测环境并优化显示

## 📦 安装

```bash
npm install @frameui/fui-plugin-vitebar
# 或
yarn add @frameui/fui-plugin-vitebar
# 或
pnpm add @frameui/fui-plugin-vitebar
```

## 🚀 使用方法

### 基本用法

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import viteProgressBar from '@frameui/fui-plugin-vitebar'

export default defineConfig({
  plugins: [
    viteProgressBar()
  ]
})
```

### 高级配置

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import viteProgressBar from '@frameui/fui-plugin-vitebar'

export default defineConfig({
  plugins: [
    viteProgressBar({
      // 进度条配置
      width: 50,
      complete: '█',
      incomplete: '░',
      projectName: 'My Awesome Project',
      
      // 性能监控
      enablePerformanceMonitoring: true,
      showDetailedStats: true,
      
      // 缓存配置
      cacheTTL: 24 * 60 * 60 * 1000, // 24小时
      clearCacheAfterBuild: false,
      
      // 源代码目录
      srcDir: 'src',
      
      // 自定义格式
      format: '⚡ :projectName Building :bar :percent | :elapseds'
    })
  ]
})
```

## ⚙️ 配置选项

| 选项 | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| `width` | `number` | `40` | 进度条宽度 |
| `complete` | `string` | `█` | 完成字符 |
| `incomplete` | `string` | `░` | 未完成字符 |
| `projectName` | `string` | `'Frameui Plus'` | 项目名称 |
| `stream` | `NodeJS.WriteStream` | `process.stderr` | 输出流 |
| `total` | `number` | `100` | 总进度 |
| `format` | `string` | `''` | 自定义格式 |
| `srcDir` | `string` | `'src'` | 源代码目录 |
| `enablePerformanceMonitoring` | `boolean` | `false` | 启用性能监控 |
| `showDetailedStats` | `boolean` | `false` | 显示详细统计 |
| `cacheTTL` | `number` | `86400000` | 缓存过期时间（毫秒） |
| `clearCacheAfterBuild` | `boolean` | `false` | 构建后清除缓存 |

## 🎯 进度条格式

进度条支持以下占位符：

- `:bar` - 进度条
- `:percent` - 百分比
- `:elapseds` - 已用时间
- `:transformCur` - 当前转换数
- `:transformTotal` - 转换总数
- `:chunkCur` - 当前块数
- `:chunkTotal` - 块总数

## 📊 性能监控

启用性能监控后，插件会收集以下指标：

- 转换阶段耗时
- 块处理阶段耗时
- 总构建耗时
- 平均转换速度（文件/秒）
- 平均块处理速度（块/秒）

```typescript
viteProgressBar({
  enablePerformanceMonitoring: true,
  showDetailedStats: true
})
```

## 💾 缓存管理

插件自动管理构建缓存，提升重复构建性能：

```typescript
import { cacheManager } from '@frameui/fui-plugin-vitebar'

// 获取缓存统计
const stats = cacheManager.getCacheStats()
console.log('缓存大小:', stats.size, '字节')
console.log('最后修改:', stats.lastModified)
console.log('是否有效:', stats.isValid)

// 清除缓存
cacheManager.clearCache()

// 刷新缓存
cacheManager.refreshCache()
```

## 🛠️ 工具类

### 配置验证器

```typescript
import { ConfigValidator } from '@frameui/fui-plugin-vitebar'

const validation = ConfigValidator.validateOptions({
  width: 50,
  projectName: 'My Project'
})

if (!validation.isValid) {
  console.error('配置错误:', validation.errors)
}
```

### 环境检测器

```typescript
import { EnvironmentDetector } from '@frameui/fui-plugin-vitebar'

console.log('操作系统:', EnvironmentDetector.getOS())
console.log('Node.js 版本:', EnvironmentDetector.getNodeVersion())
console.log('是否支持彩色:', EnvironmentDetector.supportsColors())
```

### 版本检查器

```typescript
import { VersionChecker } from '@frameui/fui-plugin-vitebar'

const check = VersionChecker.checkViteVersion('5.0.0')
console.log(check.message) // "Vite 版本 5.0.0 兼容"

const info = VersionChecker.getPluginInfo()
console.log('插件信息:', info)
```

## 🔧 开发

### 构建

```bash
npm run build
```

### 开发模式

```bash
npm run dev
```

### 类型检查

```bash
npm run type-check
```

## 📝 更新日志

### 2.0.9

- ✨ 新增性能监控功能
- ✨ 新增配置验证器
- ✨ 新增环境检测器
- ✨ 新增版本兼容性检查
- ✨ 新增智能缓存管理
- ✨ 新增详细日志系统
- 🐛 修复进度条显示问题
- 🐛 修复缓存数据处理逻辑
- 🚀 优化构建性能
- 📚 完善类型定义

### 2.0.0

- 🎉 重构为模块化架构
- ✨ 新增延迟初始化
- ✨ 新增错误处理
- ✨ 新增缓存管理
- 📚 完善 TypeScript 支持

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📄 许可证

MIT License

## 🔗 相关链接

- [Vite](https://vitejs.dev/)
- [Frameui Plus](https://frameui.com/)
- [Progress](https://github.com/tj/node-progress)