# elecsign

**Repository Path**: DC2014/elecsign

## Basic Information

- **Project Name**: elecsign
- **Description**: 电子签章系统
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-31
- **Last Updated**: 2026-08-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 电子签章系统 (ElecSign)

基于 Vue3 + TypeScript + Vite 构建的电子签章系统，支持 PDF 文档上传、电子签章、数字指纹生成和签章验证等功能。

## 功能特性

### 1. PDF 文档上传与预览
- 支持拖拽上传和点击选择 PDF 文件
- 实时上传进度反馈
- 基于 pdfjs-dist 的高质量 PDF 渲染
- 支持多页文档浏览、缩放和翻页
- 清晰的文档信息展示（文件名、大小、页数、上传时间）

### 2. 电子签章功能
- **可拖拽签章组件**：支持在 PDF 文档任意位置放置签章
- **签章类型**：支持公章（圆形印章）和手写签名两种类型
- **位置调整**：通过鼠标拖拽自由调整签章位置
- **大小缩放**：8 方向缩放手柄，自由调整签章大小
- **旋转操作**：圆形旋转手柄，支持任意角度旋转
- **多签章支持**：同一文档可添加多个签章，支持在不同页面签章
- **实时预览**：签章配置时实时预览效果
- **丰富配置**：支持自定义签章文字、颜色、签名人姓名

### 3. 数字指纹生成
- 对 PDF 文档生成唯一哈希值
- 支持两种哈希算法：
  - **SHA-256**：国际通用哈希算法（使用 Web Crypto API）
  - **SM3**：中国国密哈希算法（使用 sm-crypto 库）
- 哈希值一键复制
- 展示哈希值长度和算法信息

### 4. 签章验证
- 单签章验证和批量验证
- 验证内容：
  - 哈希完整性校验（文档是否被篡改）
  - 签章位置有效性检查
  - 整体文档完整性验证
- 清晰的验证结果反馈
- 验证历史记录查看

## 技术栈

| 技术 | 版本 | 用途 |
|------|------|------|
| Vue | 3.x | 前端框架 |
| TypeScript | 5.x | 类型安全 |
| Vite | 8.x | 构建工具 |
| Pinia | 2.x | 状态管理 |
| Element Plus | 2.x | UI 组件库 |
| pdfjs-dist | 6.x | PDF 渲染 |
| sm-crypto | 0.5.x | SM3 国密哈希 |

## 项目结构

```
elecsign/
├── src/
│   ├── assets/              # 静态资源
│   ├── components/          # Vue 组件
│   │   ├── UploadArea.vue      # PDF 上传组件
│   │   ├── PdfViewer.vue       # PDF 预览组件
│   │   ├── SignaturePanel.vue  # 签章配置面板
│   │   ├── SignatureOverlay.vue # 签章覆盖层
│   │   ├── SignatureItem.vue   # 单个签章组件
│   │   ├── HashPanel.vue       # 哈希生成面板
│   │   └── VerifyPanel.vue     # 验证面板
│   ├── composables/         # 组合式函数
│   │   ├── usePdf.ts           # PDF 处理逻辑
│   │   ├── useSignature.ts     # 签章管理逻辑
│   │   ├── useHash.ts          # 哈希生成逻辑
│   │   └── useVerification.ts  # 验证逻辑
│   ├── stores/              # Pinia 状态管理
│   │   ├── document.ts         # 文档状态
│   │   └── signature.ts        # 签章状态
│   ├── utils/               # 工具函数
│   │   ├── coordinateTransform.ts # 坐标转换
│   │   └── hashHelper.ts        # 哈希工具
│   ├── views/               # 页面视图
│   │   └── SignatureWorkspace.vue # 主工作区
│   ├── App.vue              # 根组件
│   ├── main.ts              # 应用入口
│   ├── env.d.ts             # 类型声明
│   └── style.css            # 全局样式
├── index.html
├── vite.config.ts
├── tsconfig.json
└── package.json
```

## 快速开始

### 环境要求

- Node.js >= 18.x
- npm >= 9.x

### 安装与运行

```bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览生产版本
npm run preview
```

启动后访问 `http://localhost:5173` 即可使用。

## 使用指南

### 步骤 1：上传 PDF 文档
1. 在左侧面板点击上传区域，或将 PDF 文件拖拽到上传区域
2. 等待文档解析完成
3. 上传完成后，文档信息将显示在面板中

### 步骤 2：生成数字指纹（可选）
1. 在中间面板的"数字指纹生成"区域
2. 选择哈希算法（SHA-256 或 SM3）
3. 点击"生成数字指纹"按钮
4. 哈希值生成后可复制保存

### 步骤 3：添加签章
1. 在右侧"签章配置"面板中：
   - 选择签章类型（公章/手写签名）
   - 输入签名人姓名
   - 公章类型可设置印章文字
   - 选择签章颜色
   - 选择哈希算法
2. 点击"添加签章到文档"按钮
3. 签章将出现在文档当前页的中心位置

### 步骤 4：调整签章
1. 点击签章选中（显示蓝色虚线边框和调整手柄）
2. **移动**：拖拽签章主体到任意位置
3. **缩放**：拖拽边缘蓝色手柄调整大小
4. **旋转**：拖拽顶部绿色圆形手柄旋转角度
5. **删除**：点击右上角红色删除按钮

### 步骤 5：验证签章
1. 在"签章验证"面板点击对应签章的"验证"按钮
2. 或点击"一键验证所有签章"批量验证
3. 查看验证结果和历史记录

## 核心实现说明

### 坐标系统转换
PDF 坐标原点在左下角，而屏幕坐标原点在左上角。系统通过 `coordinateTransform.ts` 工具函数实现双向转换：
- `pdfToScreen()`: PDF 坐标 → 屏幕坐标
- `screenToPdf()`: 屏幕坐标 → PDF 坐标

### 签章数据结构
```typescript
interface SignatureData {
  id: string                    // 唯一标识符
  type: 'stamp' | 'signature'  // 签章类型
  content: string               // 签章内容
  position: {
    pageNumber: number          // 页码
    x: number                   // PDF 坐标 X
    y: number                   // PDF 坐标 Y
    width: number               // 宽度
    height: number              // 高度
    rotation: number            // 旋转角度
  }
  createdAt: Date               // 创建时间
  hashValue: string             // 文档哈希值
  hashAlgorithm: 'SHA256' | 'SM3'
  signerName: string            // 签名人姓名
  color: string                 // 签章颜色
}
```

### 安全机制
- **文档哈希**：基于 SHA-256 或 SM3 算法对文档内容生成唯一哈希
- **完整性验证**：通过比对当前哈希与签章时哈希，检测文档是否被篡改
- **签章绑定**：每个签章与文档哈希绑定，确保签章无法被非法转移到其他文档
- **错误处理**：完善的异常捕获和友好的错误提示

## 浏览器兼容性

支持主流现代浏览器：
- Chrome >= 90
- Firefox >= 90
- Safari >= 15
- Edge >= 90

## License

MIT