fix+feat: 修复工作台接口不存在 + 3D 区域分配制重建

- 补齐公告后端: Announcement 模型 + /api/announcements + 种子公告 (修复工作台/布局页调用不存在接口报'接口不存在') - 修复 seed init_db 前置模型导入(announcements 表未建) - WindoorThreed 区域分配制: 每个重放区域唯一归属 (扇认领重叠最大区域, 其余静态玻璃), 杜绝扇面板与玻璃重叠混乱 - 全区域薄框线还原真实窗格, 扇面板含玻璃+四边扇框
2026-09-21 02:34:53 -07:00
parent 4b52767654
commit 94c9bfe103
6 changed files with 133 additions and 62 deletions
@@ -17,17 +17,20 @@
 <script setup lang="ts">
 /**
 * 3D 窗型查看器 + 门窗开合动画（自研 Three.js 实现）
- * - 玻璃区域/中梃/外框静态重建（分割树重放）
- * - 扇面板独立成组: 平开扇绕铰链旋转(门开角更大), 推拉扇沿轨道平移, 双向门两向开
- * - 开合度滑杆 / 自动演示; 组合画布的多形状直接支持
+ * 构建原则（区域分配制）: 分割树重放后的每个区域唯一归属——
+ *   被扇引用的区域 → 生成可开合扇面板（平开绕铰链旋转/推拉沿轨道平移）
+ *   其余区域 → 静态玻璃
+ *   全部区域绘制薄框线还原真实窗格；组合画布的多形状直接支持。
 */
-import { onMounted, onBeforeUnmount, ref, watch, computed } from 'vue'
+import { onMounted, onBeforeUnmount, ref, watch } from 'vue'
 import * as THREE from 'three'
 import {
  bboxOf, inferSashGlyphs, parseDrawing, regionPoints, replayShape,
  type DrawingData, type Pt,
 } from '../types/drawing'

+interface BBox { x0: number; y0: number; x1: number; y1: number }
+
 const props = withDefaults(defineProps<{ drawingData: string | object; controls?: boolean }>(), { controls: true })
 const cvRef = ref<HTMLCanvasElement>()
 const wrapRef = ref<HTMLDivElement>()
@@ -66,6 +69,12 @@ function dispose() {
  }
 }

+function overlapArea(a: BBox, b: BBox): number {
+  const w = Math.min(a.x1, b.x1) - Math.max(a.x0, b.x0)
+  const h = Math.min(a.y1, b.y1) - Math.max(a.y0, b.y0)
+  return w > 0 && h > 0 ? w * h : 0
+}
+
 function build(drawing: DrawingData) {
  dispose()
  scene = new THREE.Scene()
@@ -95,7 +104,8 @@ function build(drawing: DrawingData) {
  const DEPTH = Math.max(0.04, (drawing.s?.cs ?? 60) * S * 1.2)

  const frameMat = new THREE.MeshStandardMaterial({ color: 0x636568, roughness: 0.55, metalness: 0.35 })
-  const sashMat = new THREE.MeshStandardMaterial({ color: 0x777c82, roughness: 0.5, metalness: 0.35 })
+  const mullionMat = new THREE.MeshStandardMaterial({ color: 0x777c82, roughness: 0.5, metalness: 0.35 })
+  const sashMat = new THREE.MeshStandardMaterial({ color: 0x83888f, roughness: 0.5, metalness: 0.35 })
  const glassMat = new THREE.MeshPhysicalMaterial({
    color: 0xdfeef5, transparent: true, opacity: 0.42, roughness: 0.08,
    metalness: 0.05, side: THREE.DoubleSide,
@@ -110,6 +120,13 @@ function build(drawing: DrawingData) {
    const ew = shape.fm?.ew ?? [60, 60, 60, 60]
    return Math.max(0.02, (ew.reduce((a: number, b: number) => a + b, 0) / ew.length) * S)
  }
+  const bar = (parent: THREE.Group, mat: THREE.Material, bw: number, bh: number,
+               ox: number, oy: number, oz: number, depth: number) => {
+    const m = new THREE.Mesh(new THREE.BoxGeometry(bw, bh, depth), mat)
+    m.position.set(ox, oy, oz)
+    parent.add(m)
+    return m
+  }

  for (const shape of drawing.sm) {
    const { regions, sashes } = inferSashGlyphs(shape)
@@ -126,87 +143,89 @@ function build(drawing: DrawingData) {
      : glassMat
    const fw = fwOf(shape)

-    // 判断每个区域是否属于某扇（区域中心在扇矩形内 → 由扇面板渲染）
-    const sashRects = sashes.map(s => ({ ...s, cx: (s.x0 + s.x1) / 2, cy: (s.y0 + s.y1) / 2 }))
+    const regionBBs: BBox[] = regions.map(r => bboxOf(regionPoints(r)))
+    const regionMids = regionBBs.map(b => ({ x: (b.x0 + b.x1) / 2, y: (b.y0 + b.y1) / 2 }))

-    for (const region of regions) {
-      const rpts = regionPoints(region)
-      if (rpts.length < 3) continue
-      const bb = bboxOf(rpts)
-      const w = (bb.x1 - bb.x0) * S, h = (bb.y1 - bb.y0) * S
-      const mx = ((bb.x0 + bb.x1) / 2 - cx) * S
-      const my = ((bb.y0 + bb.y1) / 2 - cy) * S
-      if (![w, h, mx, my].every(Number.isFinite) || w <= 0 || h <= 0) continue
-      const inSash = sashRects.some(r => {
-        const cxr = (r.x0 + r.x1) / 2, cyr = (r.y0 + r.y1) / 2
-        return Math.abs(cxr - (bb.x0 + bb.x1) / 2) < w / 2 && Math.abs(cyr - (bb.y0 + bb.y1) / 2) < h / 2
+    // ---- 区域分配: 每个扇认领重叠最大的未占用区域 ----
+    const used = new Set<number>()
+    const panels: { rect: BBox; sash: (typeof sashes)[number] }[] = []
+    for (const s of sashes) {
+      const sb: BBox = { x0: s.x0, y0: s.y0, x1: s.x1, y1: s.y1 }
+      let best = -1, bestA = 0
+      regionBBs.forEach((rb, ri) => {
+        if (used.has(ri)) return
+        const a = overlapArea(sb, rb)
+        if (a > bestA) { bestA = a; best = ri }
      })
-      if (inSash) continue
+      if (best >= 0 && bestA > 0) { used.add(best); panels.push({ rect: regionBBs[best], sash: s }) }
+    }
+
+    // ---- 静态玻璃（未被扇认领的区域）----
+    regionBBs.forEach((bb, ri) => {
+      if (used.has(ri)) return
+      const w = (bb.x1 - bb.x0) * S, h = (bb.y1 - bb.y0) * S
+      const mx = (regionMids[ri].x - cx) * S, my = (regionMids[ri].y - cy) * S
+      if (![w, h, mx, my].every(Number.isFinite) || w <= 0 || h <= 0) return
      const glass = new THREE.Mesh(new THREE.BoxGeometry(w, h, 0.008), gm)
      glass.position.set(mx, my, 0)
      frameGroup.add(glass)
-    }
+      // 区域薄框线（窗格还原）
+      const t = Math.max(0.008, fw * 0.35)
+      bar(frameGroup, mullionMat, w, t, mx, my + h / 2 - t / 2, 0, DEPTH * 0.5)
+      bar(frameGroup, mullionMat, w, t, mx, my - h / 2 + t / 2, 0, DEPTH * 0.5)
+      bar(frameGroup, mullionMat, t, h, mx - w / 2 + t / 2, my, 0, DEPTH * 0.5)
+      bar(frameGroup, mullionMat, t, h, mx + w / 2 - t / 2, my, 0, DEPTH * 0.5)
+    })

-    // 扇面板（可开合）：玻璃 + 四周扇框，装入铰链/滑动组
-    sashes.forEach((s, k) => {
-      const w = (s.x1 - s.x0) * S, h = (s.y1 - s.y0) * S
-      const cxr = ((s.x0 + s.x1) / 2 - cx) * S
-      const cyr = ((s.y0 + s.y1) / 2 - cy) * S
+    // ---- 扇面板（可开合）----
+    panels.forEach(({ rect, s }, k) => {
+      const w = (rect.x1 - rect.x0) * S, h = (rect.y1 - rect.y0) * S
+      const cxr = ((rect.x0 + rect.x1) / 2 - cx) * S
+      const cyr = ((rect.y0 + rect.y1) / 2 - cy) * S
      if (![w, h, cxr, cyr].every(Number.isFinite) || w < 0.02 || h < 0.02) return
      const group = new THREE.Group()
-      const panel = new THREE.Group()
      const glass = new THREE.Mesh(new THREE.BoxGeometry(w, h, 0.006), gm)
-      panel.add(glass)
-      const t = Math.max(0.018, fw)
-      const mkBar = (bw: number, bh: number, ox: number, oy: number) => {
-        const bar = new THREE.Mesh(new THREE.BoxGeometry(bw, bh, DEPTH * 0.8), sashMat)
-        bar.position.set(ox, oy, 0)
-        panel.add(bar)
-      }
-      mkBar(w, t, 0, h / 2 - t / 2)
-      mkBar(w, t, 0, -h / 2 + t / 2)
-      mkBar(t, h, -w / 2 + t / 2, 0)
-      mkBar(t, h, w / 2 - t / 2, 0)
-      group.add(panel)
+      group.add(glass)
+      const t = Math.max(0.016, fw)
+      bar(group, sashMat, w, t, 0, h / 2 - t / 2, 0, DEPTH * 0.7)
+      bar(group, sashMat, w, t, 0, -h / 2 + t / 2, 0, DEPTH * 0.7)
+      bar(group, sashMat, t, h, -w / 2 + t / 2, 0, DEPTH * 0.7)
+      bar(group, sashMat, t, h, w / 2 - t / 2, 0, DEPTH * 0.7)
+      group.position.set(cxr, cyr, 0)
      sashRoot.add(group)

      if (s.kind === 'sliding') {
-        // 推拉: 双扇前后轨交替, 沿 X 平移
-        group.position.set(cxr, cyr, k % 2 === 0 ? 0.012 : -0.012)
-        sashAnims.push({ group, kind: 'sliding', baseX: cxr, slideDir: k % 2 === 0 ? 1 : -1, hingeSign: 1, maxAng: 0, w })
+        group.position.z = k % 2 === 0 ? 0.012 : -0.012
+        sashAnims.push({ group, kind: 'sliding', baseX: cxr, slideDir: k % 2 === 0 ? 1 : -1,
+                         hingeSign: 1, maxAng: 0, w })
      } else {
-        // 平开/门: 铰链在 od 指向的对侧(箭头指向开启方向), 绕 Y 轴旋转
        const odRad = ((s.od ?? 90) * Math.PI) / 180
-        const hingeLeft = Math.cos(odRad) >= 0 ? false : true // 箭头偏右→铰链在左
+        const hingeLeft = Math.cos(odRad) < 0
        const hingeX = hingeLeft ? cxr - w / 2 : cxr + w / 2
        group.position.set(hingeX, cyr, 0)
-        panel.position.set(cxr - hingeX, 0, 0)
+        group.children.forEach(child => { child.position.x -= (cxr - hingeX) })
        const maxAng = (s.isDoor ? 75 : s.wtf ? 40 : 32) * Math.PI / 180
        const dirSign = s.openToward === 'inward' ? 1 : -1
-        sashAnims.push({ group, kind: 'casement', baseX: hingeX, slideDir: 0, hingeSign: dirSign, maxAng, w })
+        sashAnims.push({ group, kind: 'casement', baseX: hingeX, slideDir: 0,
+                         hingeSign: dirSign, maxAng, w })
      }
    })

-    // 静态外框（整体）
-    if (regions.length) {
-      const all = regions.map(r => regionPoints(r).length ? r : r).flat()
-      const bb = bboxOf(all.flatMap(seg => [seg.ps, seg.pe]))
-      const x0 = ((bb.x0) - cx) * S, x1 = ((bb.x1) - cx) * S
-      const y0 = ((bb.y0) - cy) * S, y1 = ((bb.y1) - cy) * S
+    // ---- 整体外框 ----
+    const all = regions.map(r => regionPoints(r)).flat()
+    if (all.length) {
+      const bb = bboxOf(all)
+      const x0 = (bb.x0 - cx) * S, x1 = (bb.x1 - cx) * S
+      const y0 = (bb.y0 - cy) * S, y1 = (bb.y1 - cy) * S
      const w = x1 - x0, h = y1 - y0
-      const mk = (bw: number, bh: number, ox: number, oy: number) => {
-        const bar = new THREE.Mesh(new THREE.BoxGeometry(bw, bh, DEPTH), frameMat)
-        bar.position.set((x0 + x1) / 2 + ox, (y0 + y1) / 2 + oy, 0)
-        frameGroup.add(bar)
-      }
-      mk(w + fw * 2, fw, 0, y1 + fw / 2)
-      mk(w + fw * 2, fw, 0, y0 - fw / 2)
-      mk(fw, h, x0 - fw / 2, 0)
-      mk(fw, h, x1 + fw / 2, 0)
+      bar(frameGroup, frameMat, w + fw * 2, fw, 0, y1 + fw / 2, 0, DEPTH)
+      bar(frameGroup, frameMat, w + fw * 2, fw, 0, y0 - fw / 2, 0, DEPTH)
+      bar(frameGroup, frameMat, fw, h, x0 - fw / 2, 0, DEPTH)
+      bar(frameGroup, frameMat, fw, h, x1 + fw / 2, 0, DEPTH)
    }
  }

-  hasOpenable.value = sashAnims.some(a => a.kind === 'sliding' || a.maxAng > 0)
+  hasOpenable.value = sashAnims.length > 0
  const grid = new THREE.GridHelper(2, 10, 0xc8cdd2, 0xdfe3e8)
  grid.position.y = -gh * S / 2 - DEPTH
  scene.add(grid)
@@ -233,7 +252,6 @@ function applyOpen(t: number) {
 function loop() {
  raf = requestAnimationFrame(loop)
  if (!renderer || !scene || !camera) return
-  // 自动演示: 开合度按正弦摆动
  const target = (autoPlay.value ? 50 + 50 * Math.sin(Date.now() / 1200) : openPct.value) / 100
  applyOpen(curT + (target - curT) * 0.12)
  camera.position.set(