PHM Components - React Components Library

一个完整的 React 组件库，包含强大的截图工具和其他可复用组件。

📦 项目结构

phm-components/
├── packages/
│   └── ScreenCut/              # 截图组件包
│       ├── index.tsx           # 主组件
│       ├── components/         # 子组件
│       ├── ScreenCut.module.css
│       ├── vite.config.js
│       ├── package.json
│       └── README.md
├── demo/                       # 演示应用
│   ├── App.tsx
│   ├── App.css
│   └── main.tsx
├── src/                        # 根目录入口
│   └── index.ts
├── dist/                       # 构建输出
├── pnpm-workspace.yaml         # PNPM 工作空间配置
├── package.json                # 根包配置
├── tsconfig.json               # TypeScript 配置
├── vite.config.js              # Vite 构建配置
└── README.md                   # 项目文档

🎯 核心组件：ScreenCut

功能特性

✨ 完整的截图解决方案

• 🎯 屏幕截图 - 使用 html2canvas 实时捕获页面内容
• 📦 区域选择 - 灵活的矩形选择框，支持拖拽和自由调整
• 🎨 绘制工具 - 多种标注工具（矩形、圆形、线条、箭头、笔刷等）
• 📝 文本编辑 - 在截图上添加文本进行标注
• ⬇️ 导出下载 - 支持 PNG 格式一键导出
• ⌨️ 快捷键支持 - Ctrl+Z 撤销、ESC 取消、Enter 确认

快速开始

1. 安装依赖

cd phm-components
pnpm install

2. 构建项目

pnpm build

3. 开发模式

pnpm dev

使用示例

import React, { useState } from "react";
import { ScreenCut } from "@my-org/screen-cut";

export function App() {
  const [showScreenCut, setShowScreenCut] = useState(false);

  const handleCapture = (canvas) => {
    // 处理截图结果
    const imageUrl = canvas.toDataURL("image/png");
    console.log("截图完成:", imageUrl);

    // 发送给服务器或本地保存
    // ...
  };

  return (
    <>
      <button onClick={() => setShowScreenCut(true)}>🎯 开始截图</button>

      {showScreenCut && (
        <ScreenCut
          onCapture={handleCapture}
          onClose={() => setShowScreenCut(false)}
          fullScreen={true}
        />
      )}
    </>
  );
}

📚 API 文档

ScreenCut 组件

Props

| 属性 | 类型 | 默认值 | 说明 | | ------------ | ------------------------------------- | ------ | -------------------------------------------- | | onCapture | (canvas: HTMLCanvasElement) => void | - | 截图完成回调，接收包含截图数据的 Canvas 元素 | | onClose | () => void | - | 关闭截图时的回调 | | fullScreen | boolean | true | 是否全屏截图模式 |

使用回调函数

const handleCapture = (canvas) => {
  // 方式1: 获取 DataURL
  const imageUrl = canvas.toDataURL("image/png");

  // 方式2: 获取 Blob（更小的文件大小）
  canvas.toBlob((blob) => {
    const formData = new FormData();
    formData.append("image", blob);
    // 上传到服务器
  });

  // 方式3: 创建下载链接
  const link = document.createElement("a");
  link.href = imageUrl;
  link.download = `screenshot-${Date.now()}.png`;
  link.click();
};

工具类型

支持的绘制工具：

type Tool =
  | "rect" // 矩形
  | "circle" // 圆形
  | "line" // 线条
  | "arrow" // 箭头
  | "brush" // 笔刷
  | "text" // 文字
  | "marker" // 标记
  | "undo" // 撤销
  | "download" // 下载
  | "cancel" // 取消
  | "confirm"; // 确认

⌨️ 键盘快捷键

| 快捷键 | 功能 | | ------------------ | -------------- | | Ctrl+Z / Cmd+Z | 撤销上一步操作 | | Esc | 取消截图 | | Enter | 确认截图 |

🎨 自定义样式

所有组件都使用 CSS Modules，你可以根据需要自定义样式：

// 自定义颜色
// ScreenCut.module.css
.container {
  --primary-color: #your-color;
  --border-color: #your-color;
}

🚀 性能优化

• ✅ 使用 React.memo 避免不必要的重新渲染
• ✅ 使用 useCallback 优化事件处理
• ✅ 懒加载 html2canvas 库
• ✅ 支持高分辨率屏幕（DPI 感知）

🌍 浏览器兼容性

| 浏览器 | 版本 | | ------- | ---------------------------------- | | Chrome | ≥ 60 | | Firefox | ≥ 55 | | Safari | ≥ 11 | | Edge | ≥ 79 | | 移动端 | iOS Safari 11+, Android Chrome 60+ |

📦 发布 NPM 包

1. 更新版本号

# 编辑 package.json 中的 version 字段
npm version patch  # 或 minor, major

2. 构建项目

pnpm build

3. 发布到 NPM

npm login
npm publish

🛠 开发指南

添加新功能

1. 在对应的包目录中创建新组件
2. 在 index.ts 中导出
3. 添加类型定义和文档
4. 编写测试用例
5. 提交 PR

代码规范

• 使用 TypeScript 编写组件
• 遵循 ESLint 规则
• 使用 CSS Modules 管理样式
• 编写清晰的 JSDoc 注释

📝 变更日志

v1.0.0 (2024-10-23)

• ✨ 初始版本发布
• ✨ 完整的截图功能
• ✨ 支持多种绘制工具
• ✨ 区域选择和调整
• ✨ 导出和下载功能

🤝 贡献指南

欢迎贡献代码！请遵循以下步骤：

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启 Pull Request

📄 许可证

MIT License - 详见 LICENSE 文件

💬 支持

• 📖 完整文档
• 🐛 报告 Bug
• 💡 功能建议
• 📧 联系我们

🙏 致谢

感谢所有贡献者和使用者的支持！

Made with ❤️ by PHM Team