# fakb

**Repository Path**: xfnotes/fakb

## Basic Information

- **Project Name**: fakb
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-25
- **Last Updated**: 2025-03-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# PDF 标注系统

一个用于 PDF 文件标注的 Web 应用，支持在 PDF 上进行矩形标注、编辑和删除操作。

## 当前功能

- PDF 文件上传和预览
- 矩形标注工具
- 橡皮擦工具
- 多页 PDF 导航
- 页面缩放控制
- 标注框大小调整
- 标注框拖动
- 标注选择和高亮
- 标注变换控件

## 待优化功能

1. PDF 查看优化
   - [x] 修复放大缩小功能，优化缩放体验
   - [x] 添加 PDF 旋转功能
   - [x] 优化页面滚动，分离左右面板滚动行为
   - [x] 修复双滚动条问题

2. 标注功能优化
   - [x] 修复矩形工具选中状态下的鼠标占用问题
   - [ ] 添加标注颜色选择
   - [ ] 添加标注列表视图
   - [ ] 添加标注的保存和加载功能
   - [ ] 添加撤销/重做功能

3. 界面优化
   - [x] 优化工具栏布局
   - [ ] 添加标注属性编辑面板
   - [ ] 优化空状态提示
   - [ ] 添加加载状态提示

## 最新更新

- 修复了标注删除时的 undefined 错误
- 添加了标注框大小调整功能
- 优化了标注框的拖动体验
- 添加了标注框最小尺寸限制
- 优化了页面渲染性能
- 添加了标注选择和高亮功能
- 改进了标注变换控件的交互体验
- 添加了点击空白处取消选择的功能

## 技术栈

- React
- react-pdf
- react-konva
- CSS Modules

## 开发环境设置

1. 安装依赖
```bash
npm install
```

2. 启动开发服务器
```bash
npm start
```

3. 构建生产版本
```bash
npm run build
```

## 前端页面结构

### 整体布局
- 左侧面板 (25% 宽度)
  - 标注工具栏区域
    - 方框标注工具
    - 选择工具（用于标注框大小调整、拖动和选择）
    - 橡皮擦工具（用于删除标注框）
  - 文件上传区域
    - PDF 文件上传框
    - 文件选择提示

- 右侧面板 (75% 宽度)
  - PDF 查看区域
    - 顶部工具栏
      - 页面导航控制
        - 上一屏按钮
        - 页码信息
        - 下一屏按钮
      - 缩放控制
        - 缩小按钮
        - 缩放比例显示
        - 放大按钮
        - 旋转按钮
    - PDF 文档显示区域
      - 多页 PDF 预览
      - 标注层
        - 矩形标注
        - 标注变换控件

### 交互功能
- PDF 文件上传和预览
- 页面导航（每屏显示 4 页）
- 缩放控制（50% - 300%）
- 页面旋转（90° 旋转）
- 标注工具
  - 矩形标注
    - 绘制
    - 调整大小
    - 拖动位置
    - 选中高亮
  - 橡皮擦工具
    - 删除标注

### 样式特点
- 响应式布局
- 现代化 UI 设计
- 清晰的视觉层次
- 流畅的交互体验
- 合理的空间利用 

## 测试

### 单元测试
项目使用 Jest 和 React Testing Library 进行单元测试。测试文件位于 `src/components/__tests__` 目录下。

运行测试：
```bash
# 运行所有测试
npm test

# 运行测试并生成覆盖率报告
npm run test:coverage
```

### 测试覆盖范围
- 组件渲染测试
- 用户交互测试
- 可访问性测试
- 属性验证测试

### 测试规范
- 使用 Jest 作为测试框架
- 使用 React Testing Library 进行组件测试
- 遵循 AAA (Arrange-Act-Assert) 模式
- 测试文件命名规范：`ComponentName.test.jsx`