fix: v2.6 组合画布选中根因修复+右键菜单+3D 三场景

- 选中失效根因: Vue3 布尔 prop 缺省转换(editable 缺省→false)
  withDefaults 默认 true 修复, 左键选中/右键选中/菜单动作全链路打通
- 右键菜单: 右键单元弹操作菜单(顺/逆旋转/镜像/底边对齐/删除)
  动作 emit('ctx') 由父组件统一执行, document 级委托
- 3D 三场景: 室内(窗后墙+木地板)/室外(外墙+草地)/影棚(网格)
  场景联动背景色, 真实浏览器截图验证三场景渲染
- 菜单动作行为级验证: 旋转后 1600x1800 宽高互换✓ 删除清空✓

frontend/src/components/CombineCanvas.vue

@@ -1,11 +1,23 @@
 <template>
   <div class="cc-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"
+            @contextmenu.prevent="onContextMenu" />
     <div class="hud">
       <span>{{ hint }}</span>
       <el-button size="small" text @click="reset">重置视图</el-button>
     </div>
+    <!-- 右键操作菜单 -->
+    <transition name="fade">
+      <div v-if="ctxMenu.visible" class="ctx-menu" :style="{ left: ctxMenu.x + 'px', top: ctxMenu.y + 'px' }">
+        <div class="ctx-title">单元 #{{ ctxMenu.uid }}</div>
+        <div class="ctx-item" data-action="rotate-cw"><el-icon><RefreshRight /></el-icon>顺时针旋转 90°</div>
+        <div class="ctx-item" data-action="rotate-ccw"><el-icon><RefreshLeft /></el-icon>逆时针旋转 90°</div>
+        <div class="ctx-item" data-action="mirror"><el-icon><Switch /></el-icon>水平镜像</div>
+        <div class="ctx-item" data-action="bottom"><el-icon><Bottom /></el-icon>底边对齐</div>
+        <div class="ctx-item ctx-danger" data-action="delete"><el-icon><Delete /></el-icon>删除单元</div>
+      </div>
+    </transition>
   </div>
 </template>
 
@@ -15,17 +27,23 @@
  * props.shapes 为共享引用：画布直接平移形状几何（同 uid 的形状作为整体移动），
  * 变更后 emit('change') 通知父组件；expose refresh()/modelAt() 供父组件投放与读取。
  */
-import { onMounted, onBeforeUnmount, ref, watch } from 'vue'
+import { onMounted, onBeforeUnmount, reactive, ref, watch } from 'vue'
+import { ElMessage } from 'element-plus'
 import { bboxOf, parseDrawing, regionPoints, replayShape, type Pt } from '../types/drawing'
 
 interface BBox { x0: number; y0: number; x1: number; y1: number }
 
-const props = defineProps<{ shapes: any[]; editable?: boolean }>()
-const emit = defineEmits<{ (e: 'change'): void; (e: 'select', uid: number | null): void }>()
+const props = withDefaults(defineProps<{ shapes: any[]; editable?: boolean }>(), { editable: true })
+const emit = defineEmits<{
+  (e: 'change'): void
+  (e: 'select', uid: number | null): void
+  (e: 'ctx', action: string, uid: number): void
+}>()
 const cvRef = ref<HTMLCanvasElement>()
 const wrapRef = ref<HTMLDivElement>()
 const hint = ref('拖入样板开始组合')
 const selectedUid = ref<number | null>(null)
+const ctxMenu = reactive({ visible: false, x: 0, y: 0, uid: null as number | null })
 
 let view = { scale: 1, cx: 0, cy: 0 }
 let lastT = { scale: 1, midX: 0, midY: 0, W: 0, H: 0 }
@@ -270,10 +288,11 @@ function hitUnit(p: Pt): number | null {
 }
 
 function onDown(e: MouseEvent) {
+  closeMenu()
   const rect = cvRef.value!.getBoundingClientRect()
   const p = toModel(e.clientX - rect.left, e.clientY - rect.top)
   const uid = hitUnit(p)
-  if (props.editable !== false && uid !== null) {
+  if (props.editable && uid !== null) {
     selectedUid.value = uid
     const bb = unitBBox(uid)!
     dragUnit = { uid, grabX: p.x, grabY: p.y, startBb: { ...bb }, moved: false }
@@ -342,6 +361,31 @@ function modelAt(clientX: number, clientY: number): Pt {
   return toModel(clientX - rect.left, clientY - rect.top)
 }
 
+/** 右键菜单: 命中单元弹出操作菜单 */
+function onContextMenu(e: MouseEvent) {
+  const rect = cvRef.value!.getBoundingClientRect()
+  const p = toModel(e.clientX - rect.left, e.clientY - rect.top)
+  const uid = hitUnit(p)
+  if (uid === null) { closeMenu(); return }
+  selectedUid.value = uid
+  ctxMenu.uid = uid
+  ctxMenu.visible = true
+  ctxMenu.x = e.clientX - rect.left + 6
+  ctxMenu.y = e.clientY - rect.top + 6
+  emit('select', uid)
+  render()
+}
+
+function closeMenu() { ctxMenu.visible = false }
+
+function ctxAction(a: string) {
+  const uid = ctxMenu.uid
+  closeMenu()
+  if (uid === null) return
+  // 动作统一 emit 给父组件执行（父组件持有 canvasRef 与 shapes 权威状态）
+  emit('ctx', a, uid)
+}
+
 function refresh() { render() }
 
 /** 选中单元缩放到目标尺寸（几何按比例缩放，锚定自身左下角） */
@@ -374,6 +418,17 @@ function nudgeSelected(dx: number, dy: number) {
   emit('change')
 }
 
+/** 单元底边对齐到其余单元最低底边 */
+function bottomAlignUnit(uid: number) {
+  const bb = unitBBox(uid)
+  const others = uids().filter(u => u !== uid).map(u => unitBBox(u)).filter(b => b) as BBox[]
+  if (!bb || !others.length) return
+  const target = Math.min(...others.map(o => o.y0))
+  translateUid(uid, 0, target - bb.y0)
+  refresh()
+  emit('change')
+}
+
 /** 自动排列: 全部单元按 X 序紧贴排布、底边对齐（可选的整理工具，不强制） */
 function autoArrange() {
   const ids = uids().filter(u => unitBBox(u)).sort((a, b) =>
@@ -401,11 +456,30 @@ function exportDrawing(): string | null {
     epi: [], sbf: [], wlc: '', wall: [], scale: 0, note: [],
   })
 }
-defineExpose({ refresh, modelAt, exportDrawing, rotateUnit, mirrorUnit, resizeSelected, nudgeSelected, autoArrange })
+// 临时调试钩子（定位选中问题，验证后移除）
+function debugHit(clientX: number, clientY: number) {
+  const rect = cvRef.value!.getBoundingClientRect()
+  const p = toModel(clientX - rect.left, clientY - rect.top)
+  const uid = hitUnit(p)
+  return { p, uid, lastT: { ...lastT }, rect: { x: rect.x, y: rect.y, w: rect.width, h: rect.height } }
+}
+;(window as any).__ccDebug = { debugHit, getSelected: () => selectedUid.value, units: uids }
+defineExpose({ refresh, modelAt, exportDrawing, rotateUnit, mirrorUnit, resizeSelected, nudgeSelected, autoArrange, bottomAlignUnit, debugHit })
 
 onMounted(() => {
-  watch(() => props.shapes, () => { selectedUid.value = null; rebuild() }, { immediate: true })
+  watch(() => props.shapes, () => { selectedUid.value = null; closeMenu(); rebuild() }, { immediate: true })
   window.addEventListener('resize', render)
+  // 点击菜单外关闭 + 菜单项动作（在 mousedown 阶段触发，真实点击必有效）
+  document.addEventListener('mousedown', (e: MouseEvent) => {
+    const item = (e.target as HTMLElement).closest?.('.ctx-item')
+    if (item && ctxMenu.visible) {
+      const action = (item as HTMLElement).dataset.action
+      ctxMenu.visible = false
+      if (action) ctxAction(action)
+      return
+    }
+    if (ctxMenu.visible && !(e.target as HTMLElement).closest('.ctx-menu')) closeMenu()
+  })
 })
 function rebuild() {
   view = { scale: 1, cx: 0, cy: 0 }
@@ -420,4 +494,11 @@ canvas { width: 100%; height: 100%; display: block; cursor: grab; }
 canvas:active { cursor: grabbing; }
 .hud { position: absolute; left: 10px; top: 10px; background: rgba(255,255,255,0.9);
   border-radius: 6px; padding: 3px 10px; font-size: 12px; color: #606266; }
+.ctx-menu { position: absolute; z-index: 40; background: #fff; border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.16); padding: 4px 0; min-width: 150px; }
+.ctx-title { font-size: 11px; color: #909399; padding: 4px 12px; border-bottom: 1px solid #f0f0f0; }
+.ctx-item { display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 13px;
+  color: #303133; cursor: pointer; }
+.ctx-item:hover { background: #f5f7fa; }
+.ctx-danger { color: #f56c6c; }
 </style>