# 使用说明

## 访问地址

- **局域网部署**：`http://<服务器IP>:8010`
- **本机调试**：`http://localhost:8010`

推荐使用 **Chrome** 或 **Edge** 浏览器。

## 界面布局

```
┌─────────────────────────────────────────────┐
│  顶部工具栏：上传 | 模式 | 撤销 | 清空 | 下载   │
├─────────────────────────────────────────────┤
│                                             │
│           K 线截图 + 标注画布区域              │
│                                             │
├─────────────────────────────────────────────┤
│  底部图例：入场 / 出场 / 止损 颜色说明          │
└─────────────────────────────────────────────┘
```

## 操作步骤

### 1. 上传 K 线截图

两种方式任选：

- 点击顶部 **「上传图片」**，选择本地 JPG / PNG 文件
- 将图片 **拖拽** 到中间虚线框区域

上传后图片会按比例适应显示区域，**不会拉伸变形**。

> **注意**：上传新图片会自动 **清空上一轮所有标注线条**。

### 2. 选择标注模式

顶部三个模式按钮：

| 按钮 | 线条颜色 | 用途示例 |
|------|----------|----------|
| 入场线 | 绿色 `#00ff00` | 标记买入/开仓价位 |
| 出场线 | 蓝色 `#0099ff` | 标记卖出/平仓价位 |
| 止损线 | 红色 `#ff3333` | 标记止损价位 |

当前选中的模式会高亮显示。

### 3. 绘制水平线

1. 先选中一种标注模式（如「入场线」）
2. 在 K 线图对应价位处 **单击鼠标左键**
3. 系统会在该高度绘制一条 **贯穿整张图的水平线**（线宽 3px）

可重复切换模式并单击，添加多条不同颜色的线。

### 4. 拖拽调整线条

- 将鼠标移到已有线条附近，光标变为 **上下箭头**（`ns-resize`），表示可拖拽
- **按住左键** 上下拖动，即可调整该线价位
- 松开鼠标完成调整

### 5. 撤销与清空

| 按钮 | 作用 |
|------|------|
| 撤销 | 删除 **最后绘制** 的一条线 |
| 清空全部 | 删除当前图片上的 **所有** 标注线（需确认） |

无线条时这两个按钮为灰色不可用。

### 6. 下载标注图

点击 **「下载标注图」**，浏览器会将 **原始分辨率图片 + 所有标注线** 合并为一张 PNG 并保存到本地。

文件名示例：`kline-label-20260527-143052.png`

> 导出使用原图像素尺寸，保证清晰度；线条位置会按显示比例自动换算到原图坐标。

## 隐私说明

- 所有图片与标注均在 **本机浏览器** 内处理
- **不会上传到互联网或服务器**（服务器仅提供页面静态文件）
- 关闭或刷新页面后，未导出的标注将丢失，请及时下载保存

## 常见问题

**Q：为什么单击没有画线？**  
A：请先上传图片，并确认已选中一种标注模式（入场/出场/止损）。

**Q：画线位置不准？**  
A：请确保在图片区域内单击；导出时会按原图比例校正坐标。

**Q：拖拽时误加了新线？**  
A：从线条上按下并拖动即可；仅在空白处单击才会新增线条。

**Q：支持哪些图片格式？**  
A：JPG、JPEG、PNG。

**Q：换了一张图，之前的线还在吗？**  
A：上传新图会自动清空所有旧标注。

## 快捷键

当前版本未定义键盘快捷键，全部通过鼠标与顶部按钮操作。