feat: K线点位标注工具完整实现与Ubuntu PM2部署

纯前端 Canvas 画线、拖拽、导出；Python venv + PM2 静态服务；含部署脚本与使用/部署文档。 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-27 14:20:03 +08:00
parent 59f2471940
commit 62bd58d2c4
10 changed files with 1109 additions and 0 deletions
@@ -0,0 +1,275 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --bg: #1a1a1a;
+  --bg-panel: #252525;
+  --bg-hover: #333;
+  --border: #3a3a3a;
+  --text: #f0f0f0;
+  --text-muted: #999;
+  --accent: #4a9eff;
+  --entry: #00ff00;
+  --exit: #0099ff;
+  --stop: #ff3333;
+  --line-width: 3px;
+  --hit-tolerance: 8px;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
+    "Microsoft YaHei", sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.toolbar {
+  background: var(--bg-panel);
+  border-bottom: 1px solid var(--border);
+  padding: 12px 20px;
+  flex-shrink: 0;
+}
+
+.toolbar-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin-bottom: 10px;
+  letter-spacing: 0.02em;
+}
+
+.toolbar-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.toolbar-hint {
+  margin-top: 8px;
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 7px 14px;
+  font-size: 0.875rem;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--bg-hover);
+  color: var(--text);
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.btn:hover:not(:disabled) {
+  background: #404040;
+  border-color: #555;
+}
+
+.btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background: #2d4a3e;
+  border-color: #3d6b55;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: #3a5c4a;
+}
+
+.btn-accent {
+  background: #1e3a5f;
+  border-color: var(--accent);
+}
+
+.btn-accent:hover:not(:disabled) {
+  background: #264d7a;
+}
+
+.mode-group {
+  display: inline-flex;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.mode-btn {
+  border: none;
+  border-radius: 0;
+  border-right: 1px solid var(--border);
+  background: transparent;
+}
+
+.mode-btn:last-child {
+  border-right: none;
+}
+
+.mode-btn.active[data-mode="entry"] {
+  background: rgba(0, 255, 0, 0.15);
+  color: var(--entry);
+  box-shadow: inset 0 -2px 0 var(--entry);
+}
+
+.mode-btn.active[data-mode="exit"] {
+  background: rgba(0, 153, 255, 0.15);
+  color: var(--exit);
+  box-shadow: inset 0 -2px 0 var(--exit);
+}
+
+.mode-btn.active[data-mode="stop"] {
+  background: rgba(255, 51, 51, 0.15);
+  color: var(--stop);
+  box-shadow: inset 0 -2px 0 var(--stop);
+}
+
+.workspace {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  overflow: auto;
+  min-height: 0;
+}
+
+.drop-zone {
+  width: 100%;
+  max-width: 1400px;
+  min-height: 400px;
+  border: 2px dashed var(--border);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color 0.2s, background 0.2s;
+}
+
+.drop-zone.drag-over {
+  border-color: var(--accent);
+  background: rgba(74, 158, 255, 0.06);
+}
+
+.drop-placeholder {
+  text-align: center;
+  padding: 40px 20px;
+  color: var(--text-muted);
+}
+
+.drop-icon {
+  font-size: 3rem;
+  display: block;
+  margin-bottom: 12px;
+}
+
+.drop-sub {
+  margin-top: 8px;
+  font-size: 0.8rem;
+}
+
+.canvas-wrap {
+  position: relative;
+  line-height: 0;
+  max-width: 100%;
+}
+
+.hidden {
+  display: none !important;
+}
+
+.canvas-wrap.hidden {
+  display: none;
+}
+
+#chart-image {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  pointer-events: none;
+  user-select: none;
+}
+
+#overlay-canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  cursor: crosshair;
+}
+
+#overlay-canvas.can-drag {
+  cursor: ns-resize;
+}
+
+.footer {
+  flex-shrink: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 16px;
+  padding: 10px 20px;
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  border-top: 1px solid var(--border);
+  background: var(--bg-panel);
+}
+
+.legend {
+  display: inline-block;
+  width: 24px;
+  height: 3px;
+  vertical-align: middle;
+  margin-left: 4px;
+  border-radius: 1px;
+}
+
+.legend.entry {
+  background: var(--entry);
+}
+
+.legend.exit {
+  background: var(--exit);
+}
+
+.legend.stop {
+  background: var(--stop);
+}
+
+.footer-note {
+  margin-left: auto;
+}
+
+@media (max-width: 640px) {
+  .toolbar-actions {
+    gap: 6px;
+  }
+
+  .btn {
+    padding: 6px 10px;
+    font-size: 0.8rem;
+  }
+
+  .footer-note {
+    width: 100%;
+    margin-left: 0;
+  }
+}
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>K线点位标注工具</title>
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+  <header class="toolbar">
+    <h1 class="toolbar-title">K线点位标注工具</h1>
+    <div class="toolbar-actions">
+      <label class="btn btn-primary" for="file-input" title="支持 JPG / PNG">
+        上传图片
+        <input type="file" id="file-input" accept="image/jpeg,image/png,.jpg,.jpeg,.png" hidden>
+      </label>
+      <div class="mode-group" role="group" aria-label="标注模式">
+        <button type="button" class="btn mode-btn active" data-mode="entry">入场线</button>
+        <button type="button" class="btn mode-btn" data-mode="exit">出场线</button>
+        <button type="button" class="btn mode-btn" data-mode="stop">止损线</button>
+      </div>
+      <button type="button" class="btn" id="btn-undo" disabled>撤销</button>
+      <button type="button" class="btn" id="btn-clear" disabled>清空全部</button>
+      <button type="button" class="btn btn-accent" id="btn-download" disabled>下载标注图</button>
+    </div>
+    <p class="toolbar-hint" id="status-hint">请上传 K 线截图（JPG / PNG），支持点击或拖拽</p>
+  </header>
+
+  <main class="workspace">
+    <div class="drop-zone" id="drop-zone">
+      <div class="drop-placeholder" id="drop-placeholder">
+        <span class="drop-icon">📈</span>
+        <p>将 K 线截图拖拽到此处，或点击顶部「上传图片」</p>
+        <p class="drop-sub">支持 JPG、PNG，数据仅在浏览器本地处理</p>
+      </div>
+      <div class="canvas-wrap hidden" id="canvas-wrap">
+        <img id="chart-image" alt="K线图" draggable="false">
+        <canvas id="overlay-canvas"></canvas>
+      </div>
+    </div>
+  </main>
+
+  <footer class="footer">
+    <span>入场 <i class="legend entry"></i></span>
+    <span>出场 <i class="legend exit"></i></span>
+    <span>止损 <i class="legend stop"></i></span>
+    <span class="footer-note">单击添加水平线 · 拖拽调整位置</span>
+  </footer>
+
+  <script src="js/app.js"></script>
+</body>
+</html>
@@ -0,0 +1,327 @@
+(function () {
+  "use strict";
+
+  const LINE_TYPES = {
+    entry: { label: "入场线", color: "#00ff00" },
+    exit: { label: "出场线", color: "#0099ff" },
+    stop: { label: "止损线", color: "#ff3333" },
+  };
+
+  const LINE_WIDTH = 3;
+  const HIT_TOLERANCE = 8;
+
+  const fileInput = document.getElementById("file-input");
+  const dropZone = document.getElementById("drop-zone");
+  const dropPlaceholder = document.getElementById("drop-placeholder");
+  const canvasWrap = document.getElementById("canvas-wrap");
+  const chartImage = document.getElementById("chart-image");
+  const canvas = document.getElementById("overlay-canvas");
+  const ctx = canvas.getContext("2d");
+  const btnUndo = document.getElementById("btn-undo");
+  const btnClear = document.getElementById("btn-clear");
+  const btnDownload = document.getElementById("btn-download");
+  const statusHint = document.getElementById("status-hint");
+  const modeButtons = document.querySelectorAll(".mode-btn");
+
+  let currentMode = "entry";
+  let lines = [];
+  let displayWidth = 0;
+  let displayHeight = 0;
+  let imageLoaded = false;
+  let dragIndex = -1;
+  let isDragging = false;
+  let didDragMove = false;
+
+  function setHint(text) {
+    statusHint.textContent = text;
+  }
+
+  function updateButtons() {
+    const hasImage = imageLoaded;
+    const hasLines = lines.length > 0;
+    btnUndo.disabled = !hasImage || !hasLines;
+    btnClear.disabled = !hasImage || !hasLines;
+    btnDownload.disabled = !hasImage;
+  }
+
+  function getCanvasPoint(event) {
+    const rect = canvas.getBoundingClientRect();
+    const scaleX = canvas.width / rect.width;
+    const scaleY = canvas.height / rect.height;
+    return {
+      x: (event.clientX - rect.left) * scaleX,
+      y: (event.clientY - rect.top) * scaleY,
+    };
+  }
+
+  function findLineAtY(y) {
+    for (let i = lines.length - 1; i >= 0; i--) {
+      if (Math.abs(lines[i].y - y) <= HIT_TOLERANCE) {
+        return i;
+      }
+    }
+    return -1;
+  }
+
+  function redraw() {
+    if (!imageLoaded) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    for (const line of lines) {
+      ctx.beginPath();
+      ctx.strokeStyle = line.color;
+      ctx.lineWidth = LINE_WIDTH;
+      ctx.moveTo(0, line.y);
+      ctx.lineTo(canvas.width, line.y);
+      ctx.stroke();
+    }
+  }
+
+  function syncCanvasSize() {
+    displayWidth = chartImage.offsetWidth;
+    displayHeight = chartImage.offsetHeight;
+    canvas.width = Math.round(displayWidth);
+    canvas.height = Math.round(displayHeight);
+    canvas.style.width = displayWidth + "px";
+    canvas.style.height = displayHeight + "px";
+    redraw();
+  }
+
+  function clearAnnotations() {
+    lines = [];
+    dragIndex = -1;
+    isDragging = false;
+    redraw();
+    updateButtons();
+  }
+
+  function loadImageFile(file) {
+    if (!file) return;
+    const validTypes = ["image/jpeg", "image/png"];
+    const ext = file.name.split(".").pop().toLowerCase();
+    const validExt = ["jpg", "jpeg", "png"].includes(ext);
+    if (!validTypes.includes(file.type) && !validExt) {
+      setHint("仅支持 JPG / PNG 格式");
+      return;
+    }
+
+    const reader = new FileReader();
+    reader.onload = function (e) {
+      chartImage.onload = function () {
+        imageLoaded = true;
+        dropPlaceholder.classList.add("hidden");
+        canvasWrap.classList.remove("hidden");
+        dropZone.classList.remove("drag-over");
+        clearAnnotations();
+        requestAnimationFrame(function () {
+          syncCanvasSize();
+          setHint(
+            "当前模式：" +
+              LINE_TYPES[currentMode].label +
+              " — 在图上单击添加水平线，可拖拽调整"
+          );
+          updateButtons();
+        });
+      };
+      chartImage.onerror = function () {
+        setHint("图片加载失败，请换一张重试");
+        imageLoaded = false;
+        updateButtons();
+      };
+      chartImage.src = e.target.result;
+    };
+    reader.onerror = function () {
+      setHint("文件读取失败");
+    };
+    reader.readAsDataURL(file);
+  }
+
+  function addLine(y) {
+    const type = currentMode;
+    const info = LINE_TYPES[type];
+    lines.push({ y: y, type: type, color: info.color });
+    redraw();
+    updateButtons();
+    setHint(
+      "已添加 " +
+        info.label +
+        "（共 " +
+        lines.length +
+        " 条）— 当前模式：" +
+        info.label
+    );
+  }
+
+  function exportImage() {
+    if (!imageLoaded) return;
+
+    const natW = chartImage.naturalWidth;
+    const natH = chartImage.naturalHeight;
+    const scaleY = natH / displayHeight;
+
+    const exportCanvas = document.createElement("canvas");
+    exportCanvas.width = natW;
+    exportCanvas.height = natH;
+    const exCtx = exportCanvas.getContext("2d");
+
+    exCtx.drawImage(chartImage, 0, 0, natW, natH);
+
+    for (const line of lines) {
+      const y = line.y * scaleY;
+      exCtx.beginPath();
+      exCtx.strokeStyle = line.color;
+      exCtx.lineWidth = LINE_WIDTH;
+      exCtx.moveTo(0, y);
+      exCtx.lineTo(natW, y);
+      exCtx.stroke();
+    }
+
+    exportCanvas.toBlob(function (blob) {
+      if (!blob) {
+        setHint("导出失败，请重试");
+        return;
+      }
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      const ts = new Date();
+      const pad = (n) => String(n).padStart(2, "0");
+      const name =
+        "kline-label-" +
+        ts.getFullYear() +
+        pad(ts.getMonth() + 1) +
+        pad(ts.getDate()) +
+        "-" +
+        pad(ts.getHours()) +
+        pad(ts.getMinutes()) +
+        pad(ts.getSeconds()) +
+        ".png";
+      a.href = url;
+      a.download = name;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+      setHint("标注图已下载：" + name);
+    }, "image/png");
+  }
+
+  function updateCursor(y) {
+    const idx = findLineAtY(y);
+    if (idx >= 0) {
+      canvas.classList.add("can-drag");
+    } else {
+      canvas.classList.remove("can-drag");
+    }
+  }
+
+  modeButtons.forEach(function (btn) {
+    btn.addEventListener("click", function () {
+      modeButtons.forEach(function (b) {
+        b.classList.remove("active");
+      });
+      btn.classList.add("active");
+      currentMode = btn.dataset.mode;
+      if (imageLoaded) {
+        setHint("当前模式：" + LINE_TYPES[currentMode].label + " — 单击添加水平线");
+      }
+    });
+  });
+
+  fileInput.addEventListener("change", function () {
+    const file = fileInput.files[0];
+    loadImageFile(file);
+    fileInput.value = "";
+  });
+
+  dropZone.addEventListener("dragover", function (e) {
+    e.preventDefault();
+    dropZone.classList.add("drag-over");
+  });
+
+  dropZone.addEventListener("dragleave", function (e) {
+    if (!dropZone.contains(e.relatedTarget)) {
+      dropZone.classList.remove("drag-over");
+    }
+  });
+
+  dropZone.addEventListener("drop", function (e) {
+    e.preventDefault();
+    dropZone.classList.remove("drag-over");
+    const file = e.dataTransfer.files[0];
+    loadImageFile(file);
+  });
+
+  canvas.addEventListener("mousedown", function (e) {
+    if (!imageLoaded) return;
+    e.preventDefault();
+    const pt = getCanvasPoint(e);
+    const idx = findLineAtY(pt.y);
+    if (idx >= 0) {
+      dragIndex = idx;
+      isDragging = true;
+      didDragMove = false;
+      canvas.classList.add("can-drag");
+    }
+  });
+
+  canvas.addEventListener("mousemove", function (e) {
+    if (!imageLoaded) return;
+    const pt = getCanvasPoint(e);
+
+    if (isDragging && dragIndex >= 0) {
+      didDragMove = true;
+      lines[dragIndex].y = Math.max(0, Math.min(canvas.height, pt.y));
+      redraw();
+      return;
+    }
+
+    updateCursor(pt.y);
+  });
+
+  canvas.addEventListener("mouseup", function () {
+    isDragging = false;
+    dragIndex = -1;
+  });
+
+  canvas.addEventListener("mouseleave", function () {
+    isDragging = false;
+    dragIndex = -1;
+    canvas.classList.remove("can-drag");
+  });
+
+  canvas.addEventListener("click", function (e) {
+    if (!imageLoaded || didDragMove) return;
+    const pt = getCanvasPoint(e);
+    if (findLineAtY(pt.y) >= 0) return;
+    addLine(pt.y);
+  });
+
+  btnUndo.addEventListener("click", function () {
+    if (lines.length === 0) return;
+    lines.pop();
+    redraw();
+    updateButtons();
+    setHint(
+      lines.length
+        ? "已撤销最后一条，剩余 " + lines.length + " 条"
+        : "已撤销全部线条"
+    );
+  });
+
+  btnClear.addEventListener("click", function () {
+    if (lines.length === 0) return;
+    if (!confirm("确定清空所有标注线条？")) return;
+    clearAnnotations();
+    setHint("已清空全部标注");
+  });
+
+  btnDownload.addEventListener("click", exportImage);
+
+  window.addEventListener("resize", function () {
+    if (imageLoaded) {
+      syncCanvasSize();
+    }
+  });
+
+  dropPlaceholder.classList.remove("hidden");
+  updateButtons();
+})();