<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Kole UI · SignaturePad</title>
  <link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css" />
  <link rel="stylesheet" href="./SignaturePad.css" />
</head>
<body>
  <div class="kole-page">
    <h2 class="kole-h2">SignaturePad 签名板</h2>
    <p class="kole-desc">手写签名区域，支持鼠标与触屏，可撤销、清除、导出图片。</p>

    <div class="kole-demo">
      <div class="kole-sign" id="sign">
        <div class="kole-sign-pad">
          <canvas class="kole-sign-canvas" id="canvas"></canvas>
          <div class="kole-sign-placeholder" id="ph">请在此处签名</div>
        </div>
        <div class="kole-sign-actions">
          <button class="kole-btn" id="undo">撤销</button>
          <button class="kole-btn" id="clear">清除</button>
          <button class="kole-btn kole-btn--primary" id="save">保存</button>
          <span class="kole-sign-preview" id="preview"></span>
        </div>
      </div>
    </div>
  </div>

  <script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var ph = document.getElementById('ph');
    var preview = document.getElementById('preview');
    function fit() {
      var r = canvas.parentElement.getBoundingClientRect();
      canvas.width = r.width; canvas.height = r.height;
    }
    fit();
    window.addEventListener('resize', fit);

    var drawing = false, last = null, strokes = [], cur = [];

    function pos(e) {
      var r = canvas.getBoundingClientRect();
      return { x: (e.touches ? e.touches[0].clientX : e.clientX) - r.left, y: (e.touches ? e.touches[0].clientY : e.clientY) - r.top };
    }
    function start(e) { e.preventDefault(); drawing = true; last = pos(e); cur = [last]; strokes.push(cur); ph.style.display = 'none'; }
    function move(e) {
      if (!drawing) return; e.preventDefault();
      var p = pos(e); ctx.lineTo(p.x, p.y); ctx.stroke();
      cur.push(p);
    }
    function end() { drawing = false; last = null; }

    canvas.addEventListener('mousedown', start);
    canvas.addEventListener('mousemove', move);
    window.addEventListener('mouseup', end);
    canvas.addEventListener('touchstart', start, { passive: false });
    canvas.addEventListener('touchmove', move, { passive: false });
    window.addEventListener('touchend', end);

    document.getElementById('undo').onclick = function () {
      strokes.pop();
      redraw();
      if (!strokes.length) ph.style.display = 'flex';
    };
    document.getElementById('clear').onclick = function () { strokes = []; redraw(); ph.style.display = 'flex'; preview.textContent = ''; };
    document.getElementById('save').onclick = function () { preview.textContent = '已导出（' + canvas.width + '×' + canvas.height + '）'; };

    function redraw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.strokeStyle = '#1F2329'; ctx.lineWidth = 2; ctx.lineCap = 'round'; ctx.lineJoin = 'round';
      strokes.forEach(function (s) {
        ctx.beginPath();
        s.forEach(function (p, i) { i ? ctx.lineTo(p.x, p.y) : ctx.moveTo(p.x, p.y); });
        ctx.stroke();
      });
    }
    redraw();
  </script>
</body>
</html>
