feat(P4): precompute移植+app.js sources双向回填+回归1003/1003+验收体积/文件/data.json

2026-09-12 14:18:41 +08:00
parent 16f365a045
commit c65a69c34e
401 changed files with 22932 additions and 140 deletions
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Aurora Admin · SignaturePad</title>
+  <link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css" />
+  <link rel="stylesheet" href="./SignaturePad.css" />
+</head>
+<body>
+  <div class="aa-page">
+    <h2 class="aa-h2">SignaturePad 签名板</h2>
+    <p class="aa-desc">手写签名区域，支持鼠标与触屏，可撤销、清除、导出图片。</p>
+
+    <div class="aa-demo">
+      <div class="aa-sign" id="sign">
+        <div class="aa-sign-pad">
+          <canvas class="aa-sign-canvas" id="canvas"></canvas>
+          <div class="aa-sign-placeholder" id="ph">请在此处签名</div>
+        </div>
+        <div class="aa-sign-actions">
+          <button class="aa-btn" id="undo">撤销</button>
+          <button class="aa-btn" id="clear">清除</button>
+          <button class="aa-btn aa-btn--primary" id="save">保存</button>
+          <span class="aa-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>
@@ -0,0 +1,92 @@
+import React, { useRef, useState, useEffect } from 'react';
+import './SignaturePad.css';
+
+export default function SignaturePad() {
+  const pad = useRef(null);
+  const canvas = useRef(null);
+  const drawing = useRef(false);
+  const last = useRef(null);
+  const strokes = useRef([]);
+  const cur = useRef([]);
+  const [hasInk, setHasInk] = useState(false);
+  const [saved, setSaved] = useState('');
+
+  const ctx = () => canvas.current.getContext('2d');
+  const fit = () => {
+    const r = pad.current.getBoundingClientRect();
+    canvas.current.width = r.width;
+    canvas.current.height = r.height;
+    redraw();
+  };
+  const pos = (e) => {
+    const r = canvas.current.getBoundingClientRect();
+    const t = e.touches && e.touches[0];
+    return { x: (t ? t.clientX : e.clientX) - r.left, y: (t ? t.clientY : e.clientY) - r.top };
+  };
+  const down = (e) => {
+    e.preventDefault();
+    drawing.current = true;
+    last.current = pos(e);
+    cur.current = [last.current];
+    strokes.current.push(cur.current);
+    setHasInk(true);
+  };
+  const move = (e) => {
+    if (!drawing.current) return;
+    e.preventDefault();
+    const p = pos(e);
+    ctx().lineTo(p.x, p.y);
+    ctx().stroke();
+    cur.current.push(p);
+  };
+  const up = () => { drawing.current = false; last.current = null; };
+  const undo = () => { strokes.current.pop(); redraw(); if (!strokes.current.length) setHasInk(false); };
+  const clear = () => { strokes.current = []; redraw(); setHasInk(false); setSaved(''); };
+  const save = () => setSaved('已导出（' + canvas.current.width + '×' + canvas.current.height + '）');
+
+  const redraw = () => {
+    const c = canvas.current;
+    const x = c.getContext('2d');
+    x.clearRect(0, 0, c.width, c.height);
+    x.strokeStyle = '#1F2329';
+    x.lineWidth = 2;
+    x.lineCap = 'round';
+    x.lineJoin = 'round';
+    strokes.current.forEach((s) => {
+      x.beginPath();
+      s.forEach((p, i) => (i ? x.lineTo(p.x, p.y) : x.moveTo(p.x, p.y)));
+      x.stroke();
+    });
+  };
+
+  useEffect(() => {
+    fit();
+    window.addEventListener('resize', fit);
+    return () => window.removeEventListener('resize', fit);
+    // eslint-disable-next-line
+  }, []);
+
+  return (
+    <div className="aa-sign">
+      <div className="aa-sign-pad" ref={pad}>
+        <canvas
+          ref={canvas}
+          className="aa-sign-canvas"
+          onMouseDown={down}
+          onMouseMove={move}
+          onMouseUp={up}
+          onTouchStart={down}
+          onTouchMove={move}
+          onTouchEnd={up}
+        />
+        {!hasInk && <div className="aa-sign-placeholder">请在此处签名</div>}
+      </div>
+      <div className="aa-sign-actions">
+        <button className="aa-btn" onClick={undo}>撤销</button>
+        <button className="aa-btn" onClick={clear}>清除</button>
+        <button className="aa-btn aa-btn--primary" onClick={save}>保存</button>
+        {saved && <span className="aa-sign-preview">{saved}</span>}
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,47 @@
+<template>
+  <div class="aa-sign">
+    <div class="aa-sign-pad" ref="pad">
+      <canvas ref="canvas" class="aa-sign-canvas" @mousedown="down" @mousemove="move" @mouseup="up" @touchstart="down" @touchmove="move" @touchend="up"></canvas>
+      <div class="aa-sign-placeholder" v-show="!hasInk">请在此处签名</div>
+    </div>
+    <div class="aa-sign-actions">
+      <button class="aa-btn" @click="undo">撤销</button>
+      <button class="aa-btn" @click="clear">清除</button>
+      <button class="aa-btn aa-btn--primary" @click="save">保存</button>
+      <span class="aa-sign-preview" v-if="saved">{{ saved }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AaSignaturePad',
+  data() {
+    return { drawing: false, last: null, strokes: [], cur: [], hasInk: false, saved: '' };
+  },
+  mounted() { this.fit(); window.addEventListener('resize', this.fit); this.$once('hook:beforeDestroy', () => window.removeEventListener('resize', this.fit)); },
+  methods: {
+    fit() { var r = this.$refs.pad.getBoundingClientRect(); this.$refs.canvas.width = r.width; this.$refs.canvas.height = r.height; this.redraw(); },
+    pos(e) { var r = this.$refs.canvas.getBoundingClientRect(); var t = e.touches && e.touches[0]; return { x: (t ? t.clientX : e.clientX) - r.left, y: (t ? t.clientY : e.clientY) - r.top }; },
+    down(e) { e.preventDefault(); this.drawing = true; this.last = this.pos(e); this.cur = [this.last]; this.strokes.push(this.cur); this.hasInk = true; },
+    move(e) { if (!this.drawing) return; e.preventDefault(); var p = this.pos(e); this.ctx().lineTo(p.x, p.y); this.ctx().stroke(); this.cur.push(p); },
+    up() { this.drawing = false; this.last = null; },
+    ctx() { return this.$refs.canvas.getContext('2d'); },
+    undo() { this.strokes.pop(); this.redraw(); if (!this.strokes.length) this.hasInk = false; },
+    clear() { this.strokes = []; this.redraw(); this.hasInk = false; this.saved = ''; },
+    save() { this.saved = '已导出（' + this.$refs.canvas.width + '×' + this.$refs.canvas.height + '）'; },
+    redraw() {
+      var c = this.$refs.canvas, x = c.getContext('2d');
+      x.clearRect(0, 0, c.width, c.height);
+      x.strokeStyle = '#1F2329'; x.lineWidth = 2; x.lineCap = 'round'; x.lineJoin = 'round';
+      this.strokes.forEach(function (s) {
+        x.beginPath();
+        s.forEach(function (p, i) { i ? x.lineTo(p.x, p.y) : x.moveTo(p.x, p.y); });
+        x.stroke();
+      });
+    }
+  }
+};
+</script>
+
+<style src="./SignaturePad.css"></style>
@@ -0,0 +1,48 @@
+<template>
+  <div class="aa-sign">
+    <div class="aa-sign-pad" ref="pad">
+      <canvas ref="canvas" class="aa-sign-canvas" @mousedown="down" @mousemove="move" @mouseup="up" @touchstart="down" @touchmove="move" @touchend="up"></canvas>
+      <div class="aa-sign-placeholder" v-show="!hasInk">请在此处签名</div>
+    </div>
+    <div class="aa-sign-actions">
+      <button class="aa-btn" @click="undo">撤销</button>
+      <button class="aa-btn" @click="clear">清除</button>
+      <button class="aa-btn aa-btn--primary" @click="save">保存</button>
+      <span class="aa-sign-preview" v-if="saved">{{ saved }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+
+const pad = ref(null);
+const canvas = ref(null);
+const drawing = ref(false);
+const last = ref(null);
+const strokes = ref([]);
+const cur = ref([]);
+const hasInk = ref(false);
+const saved = ref('');
+
+function ctx() { return canvas.value.getContext('2d'); }
+function fit() { var r = pad.value.getBoundingClientRect(); canvas.value.width = r.width; canvas.value.height = r.height; redraw(); }
+function pos(e) { var r = canvas.value.getBoundingClientRect(); var t = e.touches && e.touches[0]; return { x: (t ? t.clientX : e.clientX) - r.left, y: (t ? t.clientY : e.clientY) - r.top }; }
+function down(e) { e.preventDefault(); drawing.value = true; last.value = pos(e); cur.value = [last.value]; strokes.value.push(cur.value); hasInk.value = true; }
+function move(e) { if (!drawing.value) return; e.preventDefault(); var p = pos(e); ctx().lineTo(p.x, p.y); ctx().stroke(); cur.value.push(p); }
+function up() { drawing.value = false; last.value = null; }
+function undo() { strokes.value.pop(); redraw(); if (!strokes.value.length) hasInk.value = false; }
+function clear() { strokes.value = []; redraw(); hasInk.value = false; saved.value = ''; }
+function save() { saved.value = '已导出（' + canvas.value.width + '×' + canvas.value.height + '）'; }
+function redraw() {
+  var c = canvas.value, x = c.getContext('2d');
+  x.clearRect(0, 0, c.width, c.height);
+  x.strokeStyle = '#1F2329'; x.lineWidth = 2; x.lineCap = 'round'; x.lineJoin = 'round';
+  strokes.value.forEach(function (s) { x.beginPath(); s.forEach(function (p, i) { i ? x.lineTo(p.x, p.y) : x.moveTo(p.x, p.y); }); x.stroke(); });
+}
+
+onMounted(() => { fit(); window.addEventListener('resize', fit); });
+onBeforeUnmount(() => window.removeEventListener('resize', fit));
+</script>
+
+<style src="./SignaturePad.css"></style>