feat: v0.4 画布编辑器——拖拽布置分格v1

- WindoorCanvas editable模式: 加竖梃/横梃点击玻璃区域实时分割
- 多边形两次交叉点法分割, mm.sp分割线记录同步, 撤销栈
- 订单详情: 编辑分格后保存图纸(PUT orders/{id})
- 样板库: 另存为我的样板(POST windoor/templates, 企业隔离)
- 10个API端点回归全部通过

frontend/src/components/WindoorCanvas.vue

@@ -1,9 +1,14 @@
 <template>
   <div class="canvas-wrap" ref="wrapRef">
     <canvas ref="cvRef" @wheel.prevent="onWheel" @mousedown="onDown" @mousemove="onMove"
-            @mouseup="onUp" @mouseleave="onUp" @dblclick="reset" />
+            @mouseup="onUp" @mouseleave="onUp" @dblclick="reset" @click="onClick" />
     <div class="hud">
       <span v-if="info">{{ info }}</span>
+      <template v-if="editable">
+        <el-button size="small" :type="tool === 'v' ? 'primary' : ''" @click="arm('v')">＋竖梃</el-button>
+        <el-button size="small" :type="tool === 'h' ? 'primary' : ''" @click="arm('h')">＋横梃</el-button>
+        <el-button size="small" :disabled="!undoStack.length" @click="undo">撤销</el-button>
+      </template>
       <el-button size="small" text @click="reset">重置视图</el-button>
     </div>
   </div>
@@ -11,25 +16,38 @@
 
 <script setup lang="ts">
 /**
- * 二维窗型画布渲染器（自研实现）
- * 读取 shapeManager 序列化的 drawing_data：Frame→玻璃区域多边形 + 扇开向 + 尺寸标注
- * 支持滚轮缩放、拖拽平移、双击复位
+ * 二维窗型画布（自研实现）
+ * 查看模式：渲染玻璃区域/外框/扇开向/尺寸标注，滚轮缩放、拖拽平移、双击复位
+ * 编辑模式（传入 editable）：点击区域添加竖梃/横梃（多边形实时分割），支持撤销；
+ * 通过 expose 的 exportDrawing() 取回修改后的 drawing_data
  */
 import { onMounted, ref, watch } from 'vue'
+import { ElMessage } from 'element-plus'
 import {
   bboxOf, parseDrawing, regionPoints,
-  type DrawingData, type FrameShape, type Pt, type SashShape,
+  type DrawingData, type FrameShape, type Pt, type Segment, type SashShape,
 } from '../types/drawing'
 
-const props = defineProps<{ drawingData: string | object }>()
+const props = defineProps<{ drawingData: string | object; editable?: boolean }>()
 const cvRef = ref<HTMLCanvasElement>()
 const wrapRef = ref<HTMLDivElement>()
 const info = ref('')
+const emit = defineEmits<{ (e: 'change'): void }>()
 
-let view = { scale: 1, cx: 0, cy: 0 }   // cx/cy=模型坐标中心
+let view = { scale: 1, cx: 0, cy: 0 }
 let drag: { x: number; y: number } | null = null
 let dd: DrawingData | null = null
 let modelBox = { x0: 0, y0: 0, x1: 100, y1: 100 }
+const undoStack: string[] = []
+const tool = ref<'' | 'v' | 'h'>('')
+
+// 几何转换缓存（render 时更新，点击命中用）
+let lastTransform = { scale: 1, midX: 0, midY: 0, W: 0, H: 0 }
+
+function toModel(sx: number, sy: number): Pt {
+  const { scale, midX, midY, W, H } = lastTransform
+  return { x: (sx - W / 2 - view.cx) / scale + midX, y: (H / 2 + view.cy - sy) / scale + midY }
+}
 
 function render() {
   const cv = cvRef.value, wrap = wrapRef.value
@@ -43,22 +61,20 @@ function render() {
   if (!dd) return
 
   const W = wrap.clientWidth, H = wrap.clientHeight
-  // 自适应：模型坐标 → 屏幕（Y 轴翻转）
   const pad = 48
   const bw = modelBox.x1 - modelBox.x0, bh = modelBox.y1 - modelBox.y0
   const fit = Math.min((W - pad * 2) / (bw || 1), (H - pad * 2) / (bh || 1))
   const scale = fit * view.scale
   const midX = (modelBox.x0 + modelBox.x1) / 2, midY = (modelBox.y0 + modelBox.y1) / 2
+  lastTransform = { scale, midX, midY, W, H }
   const tx = (x: number) => W / 2 + (x - midX) * scale + view.cx
   const ty = (y: number) => H / 2 - (y - midY) * scale + view.cy
 
-  // 全局样式
   const glass = '#d3ddda', glassAlpha = 'rgba(211,221,218,0.6)'
   const profile = '#5c6166'
   ctx.lineJoin = 'round'
 
   for (const shape of dd.sm) drawFrame(ctx, shape, tx, ty, { glass, glassAlpha, profile })
-
   info.value = dd.sm.length > 1 ? `窗型 · ${dd.sm.length} 个窗体组合` : '窗型'
 }
 
@@ -71,7 +87,6 @@ function drawFrame(
   const regions = regionsRaw.map(regionPoints).filter(pts => pts.length >= 3)
   const cm = shape.cm ?? {}
 
-  // ---- 玻璃区域 ----
   for (const pts of regions) {
     ctx.beginPath()
     pts.forEach((p, i) => (i ? ctx.lineTo(tx(p.x), ty(p.y)) : ctx.moveTo(tx(p.x), ty(p.y))))
@@ -81,16 +96,13 @@ function drawFrame(
     ctx.strokeStyle = cm.bn ?? color.profile
     ctx.lineWidth = 1.6
     ctx.stroke()
-    // 内描边示意型材厚度
     ctx.strokeStyle = 'rgba(255,255,255,0.65)'
     ctx.lineWidth = 0.8
     ctx.stroke()
   }
 
-  // ---- 外框（全部区域的联合包围盒，逐段加粗）----
   if (regions.length) {
-    const all = regions.flat()
-    const bb = bboxOf(all)
+    const bb = bboxOf(regions.flat())
     const x0 = tx(bb.x0), y0 = ty(bb.y1), x1 = tx(bb.x1), y1 = ty(bb.y0)
     const ew = shape.fm?.ew ?? [60, 60, 60, 60]
     const avg = ew.reduce((a, b) => a + b, 0) / ew.length
@@ -101,10 +113,8 @@ function drawFrame(
     ctx.lineWidth = 1
     const inset = Math.max(2.5, avg * 0.018)
     ctx.strokeRect(x0 + inset, y0 + inset, (x1 - x0) - inset * 2, (y1 - y0) - inset * 2)
-    void glass // 保留引用
   }
 
-  // ---- 扇（开向标记）----
   for (const sub of (shape.sm ?? []) as SashShape[]) {
     const bd = sub.bd
     if (!bd || bd.hidden) continue
@@ -113,18 +123,15 @@ function drawFrame(
     const w = bx1 - bx0, h = by1 - by0
     if (w < 4 || h < 4) continue
     ctx.save()
-    // 扇框（虚线内框）
     ctx.setLineDash([5, 4])
     ctx.strokeStyle = 'rgba(70,76,82,0.9)'
     ctx.lineWidth = 1.3
     ctx.strokeRect(bx0 + 2, by0 + 2, w - 4, h - 4)
     ctx.setLineDash([])
-    // 开向三角：od 为角度(度)，屏幕系 y 翻转
     const ang = ((sub.od ?? 0) * Math.PI) / 180
     const cx = (bx0 + bx1) / 2, cy = (by0 + by1) / 2
     const L = Math.min(w, h) * 0.32
     const ax = cx + Math.cos(ang) * L, ay = cy - Math.sin(ang) * L
-    // 垂直方向的两翼
     const wx = Math.cos(ang + Math.PI / 2) * L * 0.38
     const wy = -Math.sin(ang + Math.PI / 2) * L * 0.38
     ctx.beginPath()
@@ -145,10 +152,8 @@ function drawFrame(
     ctx.restore()
   }
 
-  // ---- 总尺寸标注（宽/高）----
   if (regions.length) {
-    const all = regions.flat()
-    const bb = bboxOf(all)
+    const bb = bboxOf(regions.flat())
     const x0 = tx(bb.x0), x1 = tx(bb.x1), y0 = ty(bb.y1), y1 = ty(bb.y0)
     const wmm = Math.round(bb.x1 - bb.x0), hmm = Math.round(bb.y1 - bb.y0)
     ctx.fillStyle = '#7a8087'
@@ -162,7 +167,6 @@ function drawFrame(
     ctx.restore()
     ctx.strokeStyle = 'rgba(122,128,135,0.6)'
     ctx.lineWidth = 1
-    // 尺寸线
     ctx.beginPath()
     ctx.moveTo(x0, y1 + 6); ctx.lineTo(x1, y1 + 6)
     ctx.moveTo(x0 - 6, y0); ctx.lineTo(x0 - 6, y1)
@@ -170,6 +174,121 @@ function drawFrame(
   }
 }
 
+// ================= 编辑：区域分割 =================
+
+function pointInPoly(p: Pt, poly: Pt[]): boolean {
+  let inside = false
+  for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) {
+    const [xi, yi] = [poly[i].x, poly[i].y]
+    const [xj, yj] = [poly[j].x, poly[j].y]
+    if ((yi > p.y) !== (yj > p.y) && p.x < ((xj - xi) * (p.y - yi)) / (yj - yi) + xi) inside = !inside
+  }
+  return inside
+}
+
+/** 按垂直/水平线分割简单多边形（两次交叉点法，适用于矩形/凸区域——样板库区域均为此类） */
+function splitPoly(region: Segment[], axis: 'v' | 'h', pos: number):
+  { a: Segment[]; b: Segment[] } | null {
+  const pts = regionPoints(region)
+  const n = pts.length
+  const get = (p: Pt) => (axis === 'v' ? p.x : p.y)
+  const crossings: { i: number; p: Pt }[] = []
+  for (let i = 0; i < n; i++) {
+    const a = pts[i], b = pts[(i + 1) % n]
+    const da = get(a) - pos, db = get(b) - pos
+    if ((da < 0 && db > 0) || (da > 0 && db < 0)) {
+      const t = da / (da - db)
+      crossings.push({
+        i,
+        p: axis === 'v'
+          ? { x: pos, y: a.y + (b.y - a.y) * t }
+          : { x: a.x + (b.x - a.x) * t, y: pos },
+      })
+    }
+  }
+  if (crossings.length !== 2) return null          // 0或多次穿越：不支持（非凸/贴边）
+  const [c1, c2] = crossings
+  if (c1.i === c2.i) return null                   // 同一条边穿越两次，退化
+
+  // 沿边界收集两侧点列
+  const collect = (from: typeof c1, to: typeof c2): Pt[] => {
+    const ps: Pt[] = [from.p]
+    for (let k = (from.i + 1) % n; ; k = (k + 1) % n) {
+      ps.push(pts[k])
+      if (k === to.i) break
+    }
+    ps.push(to.p)
+    return ps.filter((p, i) => i === 0 || Math.abs(p.x - ps[i - 1].x) > 0.01 || Math.abs(p.y - ps[i - 1].y) > 0.01)
+  }
+  const toSegs = (ps: Pt[]): Segment[] => {
+    const segs: Segment[] = []
+    for (let i = 0; i < ps.length; i++) segs.push(mkSeg(ps[i], ps[(i + 1) % ps.length]))
+    return segs
+  }
+  const polyA = collect(c1, c2)
+  const polyB = collect(c2, c1)
+  if (polyA.length < 3 || polyB.length < 3) return null
+  return { a: toSegs(polyA), b: toSegs(polyB) }
+}
+
+function onClick(e: MouseEvent) {
+  if (!editable() || !tool.value || !dd) return
+  const rect = cvRef.value!.getBoundingClientRect()
+  const click = toModel(e.clientX - rect.left, e.clientY - rect.top)
+  undoStack.push(JSON.stringify(dd))
+  const axis = tool.value
+  for (const shape of dd.sm) {
+    const polyWrap = shape.polygon
+    const regions = polyWrap?.polygon ?? []
+    for (let ri = 0; ri < regions.length; ri++) {
+      const pts = regionPoints(regions[ri])
+      if (!pointInPoly(click, pts)) continue
+      const pos = axis === 'v' ? click.x : click.y
+      const split = splitPoly(regions[ri], axis, pos)
+      if (!split) { undoStack.pop(); ElMessage.warning('分割位置太靠近边缘'); return }
+      // 生成两段新区域的闭合段链
+      const chain = (segs: Segment[]): Segment[] => {
+        // 简单闭合：在首尾间补一段
+        const first = segs[0].ps, last = segs[segs.length - 1].pe
+        if (Math.abs(first.x - last.x) > 0.01 || Math.abs(first.y - last.y) > 0.01) segs.push(mkSeg(last, first))
+        return segs
+      }
+      const newRegions = [chain(split.a), chain(split.b)]
+      regions.splice(ri, 1, ...newRegions)
+      // 追加分割线记录（与目标站 mm.sp 同构）
+      const mid = axis === 'v' ? { x: pos, y: (pts.reduce((s, p) => s + p.y, 0) / pts.length) } : { x: (pts.reduce((s, p) => s + p.x, 0) / pts.length), y: pos }
+      const norm = axis === 'v' ? { x: 1, y: 0 } : { x: 0, y: -1 }
+      ;(shape.mm ??= { sp: [] }).sp.push({
+        line: { pt: mid, norm, name: 'line' },
+        polyId: { idx: ri, pos: -1 },
+        alignType: 0, equalSplit: 0, kw: axis === 'v', ws: false, reinforced: false, db: false,
+      } as any)
+      computeModelBox()
+      render()
+      emit('change')
+      return
+    }
+  }
+}
+
+function mkSeg(a: Pt, b: Pt): Segment { return { ps: a, pe: b, name: 'segment' } }
+
+function editable() { return !!props.editable }
+function arm(t: 'v' | 'h') { tool.value = tool.value === t ? '' : t; info.value = tool.value ? '点击玻璃区域完成分割' : '' }
+function undo() {
+  if (!undoStack.length || !dd) return
+  const snap = undoStack.pop()!
+  dd = JSON.parse(snap)
+  computeModelBox()
+  render()
+  emit('change')
+}
+
+function exportDrawing(): string | null {
+  return dd ? JSON.stringify(dd) : null
+}
+defineExpose({ exportDrawing })
+
 function computeModelBox() {
   if (!dd) return
   const pts: Pt[] = []
@@ -177,7 +296,6 @@ function computeModelBox() {
     for (const r of (s.polygon?.polygon ?? [])) {
       for (const seg of r) { pts.push(seg.ps); pts.push(seg.pe) }
     }
-    // 扇包围盒也计入
     for (const sub of (s.sm ?? []) as SashShape[]) {
       if (sub.bd) { pts.push(sub.bd.from, sub.bd.to) }
     }
@@ -196,7 +314,7 @@ function onWheel(e: WheelEvent) {
   view.scale = Math.min(40, Math.max(0.2, view.scale * factor))
   render()
 }
-function onDown(e: MouseEvent) { drag = { x: e.clientX, y: e.clientY } }
+function onDown(e: MouseEvent) { if (!tool.value) drag = { x: e.clientX, y: e.clientY } }
 function onMove(e: MouseEvent) {
   if (!drag) return
   view.cx += e.clientX - drag.x
@@ -210,9 +328,10 @@ onMounted(() => {
   watch(() => props.drawingData, () => {
     try {
       dd = props.drawingData ? parseDrawing(props.drawingData) : null
+      undoStack.length = 0
       computeModelBox()
       reset()
-    } catch (e) {
+    } catch {
       info.value = '数据解析失败'
       dd = null
       render()
@@ -228,5 +347,5 @@ onMounted(() => {
 canvas { width: 100%; height: 100%; display: block; cursor: grab; }
 canvas:active { cursor: grabbing; }
 .hud { position: absolute; right: 10px; top: 10px; display: flex; gap: 8px; align-items: center;
-  background: rgba(255,255,255,0.85); border-radius: 6px; padding: 2px 8px; font-size: 12px; color: #606266; }
+  background: rgba(255,255,255,0.9); border-radius: 6px; padding: 2px 8px; font-size: 12px; color: #606266; }
 </style>