feat: scan canvas scanConfig support, aspect ratio fix, param panel layout

- 画布支持 scanConfig 坐标范围，修改 X/Y 范围后画布随之更新
- 修复 Y 轴标签位数超过 3 位时溢出画布边框
- 画布按扫描区域宽高比等比例显示
- 相机参数改为纵向排列，画布占比提升至 85%

package.json

@@ -1,7 +1,7 @@
 {
   "name": "happa-mission-plan",
   "private": true,
-  "version": "0.0.8",
+  "version": "0.0.9",
   "type": "module",
   "scripts": {
     "dev": "vite",

src-tauri/Cargo.lock

@@ -3180,7 +3180,7 @@ dependencies = [
 
 [[package]]
 name = "spectral-insight-mission-plan"
-version = "0.0.7"
+version = "0.0.8"
 dependencies = [
  "byteorder",
  "chrono",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "spectral-insight-mission-plan"
-version = "0.0.8"
+version = "0.0.9"
 description = "Spectral Insight Mission Plan"
 authors = ["you"]
 edition = "2021"

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Spectral Insight Mission Plan",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "identifier": "com.spectral-insight.mission-plan",
   "build": {
     "beforeDevCommand": "npm run dev",

src/components/planner/ScanCanvas.vue

@@ -11,10 +11,11 @@ import { ref, onMounted, watch } from 'vue';
 import type { ScanRegion, ScanMode, ScanShape } from '../../types/path-plan';
 import type { PathLineRecord } from '../../types/path-line';
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   records: PathLineRecord[]; mode: ScanMode; backgroundImage?: string;
   drawingMode: boolean; drawingShape?: ScanShape; selectedIndex?: number;
-}>();
+  xMin?: number; xMax?: number; yMin?: number; yMax?: number;
+}>(), { xMin: 0, xMax: 100, yMin: 0, yMax: 100 });
 const regions = defineModel<ScanRegion[]>('regions', { required: true });
 const emit = defineEmits<{ 'add-region': [region: ScanRegion]; 'select-region': [index: number]; 'deselect': [] }>();
 
@@ -23,13 +24,13 @@ const isDrawing = ref(false); const isDragging = ref(false); const isResizing =
 const resizeCorner = ref(''); const dragTarget = ref(-1);
 const dragStart = ref({ x: 0, y: 0 }); const regionStart = ref<ScanRegion | null>(null);
 const drawingRect = ref<ScanRegion | null>(null); const bgImage = ref<HTMLImageElement | null>(null);
-const padding = 40;
+let padding = 40;
 const COLORS = ['#2080f0', '#f0a020', '#18a058', '#d03050', '#a060e0', '#e06080'];
 
 function gs() { const r = canvasContainer.value?.getBoundingClientRect(); return { w: r?.width || 600, h: r?.height || 400 }; }
 function tc(cx: number, cy: number) { const r = canvas.value!.getBoundingClientRect(); return { x: cx - r.left, y: cy - r.top }; }
-function tw(cx: number, cy: number) { const { w, h } = gs(); const dw = w - padding * 2, dh = h - padding * 2; return { x: Math.max(0, Math.min(100, (cx - padding) / dw * 100)), y: Math.max(0, Math.min(100, 100 - (cy - padding) / dh * 100)) }; }
-function w2c(wx: number, wy: number) { const { w, h } = gs(); const dw = w - padding * 2, dh = h - padding * 2; return { x: padding + (wx / 100) * dw, y: padding + ((100 - wy) / 100) * dh }; }
+function tw(cx: number, cy: number) { const { w, h } = gs(); const dw = w - padding * 2, dh = h - padding * 2, rx = props.xMax - props.xMin, ry = props.yMax - props.yMin; const da = rx / ry, ca = dw / dh, drawW = da > ca ? dw : dh * da, drawH = da > ca ? dw / da : dh, offX = da > ca ? 0 : (dw - drawW) / 2, offY = da > ca ? (dh - drawH) / 2 : 0; return { x: Math.max(props.xMin, Math.min(props.xMax, props.xMin + (cx - padding - offX) / drawW * rx)), y: Math.max(props.yMin, Math.min(props.yMax, props.yMax - (cy - padding - offY) / drawH * ry)) }; }
+function w2c(wx: number, wy: number) { const { w, h } = gs(); const dw = w - padding * 2, dh = h - padding * 2, rx = props.xMax - props.xMin, ry = props.yMax - props.yMin; const da = rx / ry, ca = dw / dh, drawW = da > ca ? dw : dh * da, drawH = da > ca ? dw / da : dh, offX = da > ca ? 0 : (dw - drawW) / 2, offY = da > ca ? (dh - drawH) / 2 : 0; return { x: padding + offX + ((wx - props.xMin) / rx) * drawW, y: padding + offY + ((props.yMax - wy) / ry) * drawH }; }
 function findR(p: { x: number; y: number }): number { const r = regions.value; for (let i = r.length - 1; i >= 0; i--) { if (p.x >= r[i].xMin && p.x <= r[i].xMax && p.y >= r[i].yMin && p.y <= r[i].yMax) return i; } return -1; }
 function findC(p: { x: number; y: number }): { i: number; c: string } | null { const th = 3; for (let i = 0; i < regions.value.length; i++) { const r = regions.value[i]; for (const [c, cx, cy] of [['tl', r.xMin, r.yMax] as const, ['tr', r.xMax, r.yMax] as const, ['bl', r.xMin, r.yMin] as const, ['br', r.xMax, r.yMin] as const]) { if (Math.abs(p.x - cx) < th && Math.abs(p.y - cy) < th) return { i, c }; } } return null; }
 
@@ -45,22 +46,31 @@ function draw() {
   canvas.value!.style.width = w + 'px'; canvas.value!.style.height = h + 'px';
   ctx.scale(dpr, dpr); ctx.fillStyle = '#f8f8f8'; ctx.fillRect(0, 0, w, h);
   if (bgImage.value) { ctx.globalAlpha = 0.5; ctx.drawImage(bgImage.value, 0, 0, w, h); ctx.globalAlpha = 1.0; }
+  ctx.font = '10px sans-serif';
+  const maxYLabel = Math.max(
+    ctx.measureText(props.yMin.toFixed(1)).width,
+    ctx.measureText(props.yMax.toFixed(1)).width
+  );
+  padding = Math.max(40, Math.ceil(24 + 4 + maxYLabel + 4 + 16 + 2));
   const dw = w - padding * 2, dh = h - padding * 2, ax = 16;
+  const rx = props.xMax - props.xMin, ry = props.yMax - props.yMin;
+  const da = rx / ry, ca = dw / dh;
+  const drawW = da > ca ? dw : dh * da, drawH = da > ca ? dw / da : dh;
+  const offX = da > ca ? 0 : (dw - drawW) / 2, offY = da > ca ? (dh - drawH) / 2 : 0;
 
   ctx.strokeStyle = '#e8e8e8'; ctx.lineWidth = 1;
-  for (let i = 0; i <= 10; i++) { const x = padding + (i / 10) * dw; ctx.beginPath(); ctx.moveTo(x, padding); ctx.lineTo(x, padding + dh); ctx.stroke(); }
-  for (let i = 0; i <= 10; i++) { const y = padding + (i / 10) * dh; ctx.beginPath(); ctx.moveTo(padding, y); ctx.lineTo(padding + dw, y); ctx.stroke(); }
+  for (let i = 0; i <= 10; i++) { const x = padding + offX + (i / 10) * drawW; ctx.beginPath(); ctx.moveTo(x, padding + offY); ctx.lineTo(x, padding + offY + drawH); ctx.stroke(); }
+  for (let i = 0; i <= 10; i++) { const y = padding + offY + (i / 10) * drawH; ctx.beginPath(); ctx.moveTo(padding + offX, y); ctx.lineTo(padding + offX + drawW, y); ctx.stroke(); }
   ctx.strokeStyle = '#666'; ctx.lineWidth = 1.5;
-  ctx.beginPath(); ctx.moveTo(padding - ax, padding + dh); ctx.lineTo(padding + dw + ax, padding + dh); ctx.stroke();
-  ctx.beginPath(); ctx.moveTo(padding, padding + dh + ax); ctx.lineTo(padding, padding - ax); ctx.stroke();
+  ctx.beginPath(); ctx.moveTo(padding + offX - ax, padding + offY + drawH); ctx.lineTo(padding + offX + drawW + ax, padding + offY + drawH); ctx.stroke();
+  ctx.beginPath(); ctx.moveTo(padding + offX, padding + offY + drawH + ax); ctx.lineTo(padding + offX, padding + offY - ax); ctx.stroke();
   ctx.fillStyle = '#888'; ctx.font = '10px sans-serif'; ctx.textAlign = 'center';
-  for (let i = 0; i <= 10; i++) { const x = padding + (i / 10) * dw; ctx.fillText(String(i * 10), x, padding + dh + ax + 12); ctx.beginPath(); ctx.moveTo(x, padding + dh + ax - 3); ctx.lineTo(x, padding + dh + ax + 3); ctx.stroke(); }
+  for (let i = 0; i <= 10; i++) { const x = padding + offX + (i / 10) * drawW; ctx.fillText((props.xMin + (i / 10) * rx).toFixed(1), x, padding + offY + drawH + ax + 12); ctx.beginPath(); ctx.moveTo(x, padding + offY + drawH + ax - 3); ctx.lineTo(x, padding + offY + drawH + ax + 3); ctx.stroke(); }
   ctx.textAlign = 'right';
-  for (let i = 0; i <= 10; i++) { const y = padding + (i / 10) * dh; ctx.fillText(String((10 - i) * 10), padding - ax - 4, y + 4); ctx.beginPath(); ctx.moveTo(padding - ax - 3, y); ctx.lineTo(padding - ax + 3, y); ctx.stroke(); }
+  for (let i = 0; i <= 10; i++) { const y = padding + offY + (i / 10) * drawH; ctx.fillText((props.yMin + (1 - i / 10) * ry).toFixed(1), padding + offX - ax - 4, y + 4); ctx.beginPath(); ctx.moveTo(padding + offX - ax - 3, y); ctx.lineTo(padding + offX - ax + 3, y); ctx.stroke(); }
   ctx.textAlign = 'start'; ctx.font = '11px sans-serif';
-  ctx.fillText('X (cm)', padding + dw + ax - 10, padding + dh + ax + 24);
-  ctx.save(); ctx.translate(padding - ax - 24, 10); ctx.rotate(-Math.PI / 2); ctx.fillText('Y (cm)', 0, 0); ctx.restore();
-  ctx.strokeStyle = '#f0a020'; ctx.lineWidth = 1; ctx.setLineDash([4, 4]); const z1 = w2c(0, 0), z2 = w2c(100, 100); ctx.strokeRect(z1.x, z1.y, z2.x - z1.x, z2.y - z1.y); ctx.setLineDash([]);
+  ctx.fillText('X (cm)', padding + offX + drawW + ax - 10, padding + offY + drawH + ax + 24);
+  ctx.save(); ctx.translate(padding + offX - ax - 24, 10); ctx.rotate(-Math.PI / 2); ctx.fillText('Y (cm)', 0, 0); ctx.restore();
 
   for (let i = 0; i < regions.value.length; i++) {
     const r = regions.value[i]; const p1 = w2c(r.xMin, r.yMin), p2 = w2c(r.xMax, r.yMax);
@@ -102,8 +112,8 @@ function onMouseDown(e: MouseEvent) {
 function onMouseMove(e: MouseEvent) {
   const cp = tc(e.clientX, e.clientY);
   if (isDrawing.value && props.drawingMode) { const p1 = tw(dragStart.value.x, dragStart.value.y), p2 = tw(cp.x, cp.y); drawingRect.value = { shape: props.drawingShape || 'Rect', xMin: Math.min(p1.x, p2.x), xMax: Math.max(p1.x, p2.x), yMin: Math.min(p1.y, p2.y), yMax: Math.max(p1.y, p2.y) }; draw(); return; }
-  if (isDragging.value && dragTarget.value >= 0 && regionStart.value) { const dx = (cp.x - dragStart.value.x) / (gs().w - padding * 2) * 100, dy = -(cp.y - dragStart.value.y) / (gs().h - padding * 2) * 100; const rs = regionStart.value, rw = rs.xMax - rs.xMin, rh = rs.yMax - rs.yMin; const arr = [...regions.value]; arr[dragTarget.value] = { ...arr[dragTarget.value], xMin: Math.max(0, Math.min(100 - rw, rs.xMin + dx)), xMax: Math.max(rs.xMin + dx + 1, Math.min(100, rs.xMax + dx)), yMin: Math.max(0, Math.min(100 - rh, rs.yMin + dy)), yMax: Math.max(rs.yMin + dy + 1, Math.min(100, rs.yMax + dy)) }; regions.value = arr; draw(); return; }
-  if (isResizing.value && dragTarget.value >= 0 && regionStart.value) { const p1 = tw(dragStart.value.x, dragStart.value.y), p2 = tw(cp.x, cp.y); const dx = p2.x - p1.x, dy = p2.y - p1.y, rs = regionStart.value; let xMin = rs.xMin, xMax = rs.xMax, yMin = rs.yMin, yMax = rs.yMax; const c = resizeCorner.value; if (c.includes('l')) xMin = Math.min(rs.xMin + dx, rs.xMax - 1); if (c.includes('r')) xMax = Math.max(rs.xMax + dx, rs.xMin + 1); if (c.includes('b')) yMin = Math.min(rs.yMin + dy, rs.yMax - 1); if (c.includes('t')) yMax = Math.max(rs.yMax + dy, rs.yMin + 1); xMin = Math.max(0, xMin); xMax = Math.min(100, xMax); yMin = Math.max(0, yMin); yMax = Math.min(100, yMax); if (xMax - xMin > 1 && yMax - yMin > 1) { const arr = [...regions.value]; arr[dragTarget.value] = { ...arr[dragTarget.value], xMin, xMax, yMin, yMax }; regions.value = arr; draw(); } }
+  if (isDragging.value && dragTarget.value >= 0 && regionStart.value) { const rx = props.xMax - props.xMin, ry = props.yMax - props.yMin; const dw = gs().w - padding * 2, dh = gs().h - padding * 2, da = rx / ry, ca = dw / dh; const drawW = da > ca ? dw : dh * da, drawH = da > ca ? dw / da : dh; const dx = (cp.x - dragStart.value.x) / drawW * rx, dy = -(cp.y - dragStart.value.y) / drawH * ry; const rs = regionStart.value, rw = rs.xMax - rs.xMin, rh = rs.yMax - rs.yMin; const arr = [...regions.value]; arr[dragTarget.value] = { ...arr[dragTarget.value], xMin: Math.max(props.xMin, Math.min(props.xMax - rw, rs.xMin + dx)), xMax: Math.max(rs.xMin + dx + 1, Math.min(props.xMax, rs.xMax + dx)), yMin: Math.max(props.yMin, Math.min(props.yMax - rh, rs.yMin + dy)), yMax: Math.max(rs.yMin + dy + 1, Math.min(props.yMax, rs.yMax + dy)) }; regions.value = arr; draw(); return; }
+  if (isResizing.value && dragTarget.value >= 0 && regionStart.value) { const p1 = tw(dragStart.value.x, dragStart.value.y), p2 = tw(cp.x, cp.y); const dx = p2.x - p1.x, dy = p2.y - p1.y, rs = regionStart.value; let xMin = rs.xMin, xMax = rs.xMax, yMin = rs.yMin, yMax = rs.yMax; const c = resizeCorner.value; if (c.includes('l')) xMin = Math.min(rs.xMin + dx, rs.xMax - 1); if (c.includes('r')) xMax = Math.max(rs.xMax + dx, rs.xMin + 1); if (c.includes('b')) yMin = Math.min(rs.yMin + dy, rs.yMax - 1); if (c.includes('t')) yMax = Math.max(rs.yMax + dy, rs.yMin + 1); xMin = Math.max(props.xMin, xMin); xMax = Math.min(props.xMax, xMax); yMin = Math.max(props.yMin, yMin); yMax = Math.min(props.yMax, yMax); if (xMax - xMin > 1 && yMax - yMin > 1) { const arr = [...regions.value]; arr[dragTarget.value] = { ...arr[dragTarget.value], xMin, xMax, yMin, yMax }; regions.value = arr; draw(); } }
 }
 
 function onMouseUp() {
@@ -112,7 +122,7 @@ function onMouseUp() {
 }
 
 onMounted(() => { loadBG(props.backgroundImage); window.addEventListener('resize', draw); });
-watch(() => [regions.value, props.records, props.mode, props.drawingMode, props.drawingShape, props.selectedIndex], () => { draw(); });
+watch(() => [regions.value, props.records, props.mode, props.drawingMode, props.drawingShape, props.selectedIndex, props.xMin, props.xMax, props.yMin, props.yMax], () => { draw(); });
 watch(() => props.backgroundImage, (v) => { loadBG(v); });
 </script>
 

src/components/planner/ScanParamPanel.vue

@@ -2,20 +2,14 @@
   <div class="param-panel">
     <n-form size="small" label-placement="top" label-width="auto">
       <n-card title="相机参数" size="small">
-        <n-grid :cols="2" :x-gap="8">
-          <n-gi>
-            <n-form-item>
-              <template #label>FOV (°) <HelpIcon helpKey="planner.fov" /></template>
-              <n-input-number v-model:value="localCamera.fovDegrees" :min="1" :max="180" />
-            </n-form-item>
-          </n-gi>
-          <n-gi>
-            <n-form-item>
-              <template #label>高度 (cm) <HelpIcon helpKey="planner.height" /></template>
-              <n-input-number v-model:value="localCamera.heightCm" :min="1" />
-            </n-form-item>
-          </n-gi>
-        </n-grid>
+        <n-form-item>
+          <template #label>FOV (°) <HelpIcon helpKey="planner.fov" /></template>
+          <n-input-number v-model:value="localCamera.fovDegrees" :min="1" :max="180" />
+        </n-form-item>
+        <n-form-item>
+          <template #label>高度 (cm) <HelpIcon helpKey="planner.height" /></template>
+          <n-input-number v-model:value="localCamera.heightCm" :min="1" />
+        </n-form-item>
         <n-form-item>
           <template #label>覆盖率 (%) <HelpIcon helpKey="planner.coverage" /></template>
           <n-slider v-model:value="localCoverageRate" :min="0" :max="100" :step="1" />

src/views/MissionEditorView.vue

@@ -421,7 +421,8 @@ async function drawPathPreview() {
   const ctx = canvas.getContext('2d');
   if (!ctx) return; ctx.scale(dpr, dpr);
   ctx.fillStyle = '#f8f8f8'; ctx.fillRect(0, 0, w, h);
-  let xMin = Infinity, xMax = -Infinity, yMin = Infinity, yMax = -Infinity;
+  const sc = missionStore.mission.scanConfig;
+  let xMin = sc.xMin, xMax = sc.xMax, yMin = sc.yMin, yMax = sc.yMax;
   for (const r of records) { xMin = Math.min(xMin, r.targetXMinPosition, r.targetXMaxPosition); xMax = Math.max(xMax, r.targetXMinPosition, r.targetXMaxPosition); yMin = Math.min(yMin, r.targetYPosition); yMax = Math.max(yMax, r.targetYPosition); }
   const rangeX = xMax - xMin || 1, rangeY = yMax - yMin || 1, pad = 30, drawW = w - pad * 2, drawH = h - pad * 2;
   const toCanvas = (wx: number, wy: number) => ({ x: pad + ((wx - xMin) / rangeX) * drawW, y: pad + ((yMax - wy) / rangeY) * drawH });

src/views/PathPlannerView.vue

@@ -31,7 +31,7 @@
       </n-button>
     </n-space>
 
-    <n-split direction="horizontal" :default-size="0.6">
+    <n-split direction="horizontal" :default-size="0.85">
       <template #1>
         <ScanCanvas
           v-model:regions="regions"
@@ -41,6 +41,10 @@
           :drawing-mode="drawingMode"
           :drawing-shape="currentShape"
           :selected-index="selectedIndex"
+          :x-min="missionStore.mission.scanConfig.xMin"
+          :x-max="missionStore.mission.scanConfig.xMax"
+          :y-min="missionStore.mission.scanConfig.yMin"
+          :y-max="missionStore.mission.scanConfig.yMax"
           @select-region="selectedIndex = $event"
           @deselect="selectedIndex = -1"
           @add-region="onAddRegion"

update.md

@@ -1,5 +1,13 @@
 # Spectral Insight Mission Plan - 更新日志
 
+## v0.0.9 (2026-06-25)
+
+- 航线生成画布支持 scanConfig 坐标范围（修改 X/Y 范围后画布随之更新）
+- 修复 Y 轴标签位数超过 3 位时溢出画布边框的问题
+- 画布按扫描区域宽高比等比例显示（x:y 不再强制 1:1）
+- 相机参数（FOV / 高度）改为纵向排列，右侧参数面板更窄
+- 画布占比提升至 85%
+
 ## v0.0.8 (2026-06-22)
 
 - 子任务按设备类型显示不同背景色和左侧色条（Pika L 绿 / Pika NIR 蓝 / 单反 橙 / 深度相机 红）