feat(sessions): 图文会话列表徽标与详情空态 + 坐标换算纯函数测试

Author: Aparencia

app/src/components/ScreenSelectOverlay.tsx

@@ -9,6 +9,7 @@
  *              不经 window.devicePixelRatio（显示缩放已含在 letterbox scale）。
  */
 import { useRef, useState } from "react";
+import { normToPixels } from "../utils/photoCrop";
 
 interface Props {
   /** 全屏快照 data URL（JPEG；capture_screen_snapshot 的 base64 拼前缀） */
@@ -84,21 +85,18 @@ export default function ScreenSelectOverlay({ src, imageWidth, imageHeight, savi
     setConfirm(box);
   };
 
-  /** canvas 物理像素裁剪 → PNG base64（OCR 无损输入） */
+  /** canvas 物理像素裁剪 → PNG base64（OCR 无损输入；坐标换算走 photoCrop 纯函数） */
   const cropAndConfirm = () => {
     if (!confirm) return;
     const img = new Image();
     img.onload = () => {
-      const sx = Math.round(confirm.x * imageWidth);
-      const sy = Math.round(confirm.y * imageHeight);
-      const sw = Math.max(1, Math.round(confirm.w * imageWidth));
-      const sh = Math.max(1, Math.round(confirm.h * imageHeight));
+      const r = normToPixels(confirm.x, confirm.y, confirm.w, confirm.h, imageWidth, imageHeight);
       const canvas = document.createElement("canvas");
-      canvas.width = sw;
-      canvas.height = sh;
+      canvas.width = r.w;
+      canvas.height = r.h;
       const ctx = canvas.getContext("2d");
       if (!ctx) { onCancel(); return; }
-      ctx.drawImage(img, sx, sy, sw, sh, 0, 0, sw, sh);
+      ctx.drawImage(img, r.x, r.y, r.w, r.h, 0, 0, r.w, r.h);
       onConfirm(canvas.toDataURL("image/png").split(",")[1] ?? "");
     };
     img.src = src;

app/src/components/SessionDetailPanel.tsx

@@ -329,7 +329,12 @@ export default function SessionDetailPanel({ detail, fusing, degradedBanner, onT
           {/* 转写时间轴（字幕为主，语音/融合弱化；段 id 锚点供大纲/搜索跳转） */}
           <h3 style={{ fontSize: 13, margin: "12px 0 6px" }}>转写时间轴</h3>
           <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
-            {detail.segments.length === 0 && <p style={{ fontSize: 12, color: "#9ca3af" }}>本会话无转写段</p>}
+            {/* v0.11.7：图文会话空态语义区分（无讲述内容）；其余会话维持原文案 */}
+            {detail.segments.length === 0 && (
+              <p style={{ fontSize: 12, color: "#9ca3af" }}>
+                {detail.session.kind === "photo" ? "本会话无讲述内容（图文采集）" : "本会话无转写段"}
+              </p>
+            )}
             {detail.segments.map((seg) => (
               <div key={seg.id} id={`seg-${sessionId}-${seg.id}`} style={{ display: "flex", gap: 8, alignItems: "baseline" }}>
                 <span style={{ fontSize: 11, color: "#9ca3af", width: 70, flexShrink: 0, fontVariantNumeric: "tabular-nums" }}>

app/src/components/SessionListPanel.tsx

@@ -247,6 +247,8 @@ export default function SessionListPanel({
           <span style={{ fontVariantNumeric: "tabular-nums" }}>
             #{item.displayNo} · {fmtDate(s.started_at)}
           </span>
+          {/* v0.11.7：会话类型徽标（图文会话标识；视频类不显示零回归） */}
+          {s.kind === "photo" && <span style={{ fontWeight: 600 }}>📷 图文</span>}
           <span>{s.status === "recording" ? "进行中" : fmtDuration(durationMs)}</span>
           {s.source_window && (
             <span style={{ maxWidth: 130, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>

app/src/utils/photoCrop.test.ts

@@ -0,0 +1,38 @@
+/**
+ * photoCrop 坐标换算测试（v0.11.7 图文截屏）。
+ *
+ * @ai-context: DPI 关键路径——归一化坐标 × 物理像素；覆盖边界（0/1）、
+ *              越界（clamp）、非整数（取整）、零宽（防御 1px）。
+ */
+import { describe, expect, it } from "vitest";
+import { normToPixels } from "./photoCrop";
+
+describe("normToPixels", () => {
+  it("标准区域按物理像素换算", () => {
+    // 1920×1080 全屏截图，框选左上 1/4
+    const r = normToPixels(0, 0, 0.5, 0.5, 1920, 1080);
+    expect(r).toEqual({ x: 0, y: 0, w: 960, h: 540 });
+  });
+
+  it("DPI 150% 缩放下仍按物理像素（不经 devicePixelRatio）", () => {
+    // 逻辑窗口 1280×720 → 物理 1920×1080；归一化坐标不变
+    const r = normToPixels(0.25, 0.25, 0.5, 0.5, 1920, 1080);
+    expect(r).toEqual({ x: 480, y: 270, w: 960, h: 540 });
+  });
+
+  it("越界输入 clamp 到图像内", () => {
+    const r = normToPixels(-0.5, 1.5, 2, 2, 100, 100);
+    expect(r).toEqual({ x: 0, y: 100, w: 100, h: 100 });
+  });
+
+  it("非整数坐标取整（含四舍五入）", () => {
+    const r = normToPixels(0.333, 0.333, 0.333, 0.333, 1000, 1000);
+    expect(r).toEqual({ x: 333, y: 333, w: 333, h: 333 });
+  });
+
+  it("零宽/负宽防御为至少 1 像素", () => {
+    const r = normToPixels(0, 0, 0, 0, 800, 600);
+    expect(r.w).toBe(1);
+    expect(r.h).toBe(1);
+  });
+});

app/src/utils/photoCrop.ts

@@ -0,0 +1,27 @@
+/**
+ * photoCrop — 图文截屏坐标换算纯函数（v0.11.7）。
+ *
+ * @ai-context: 归一化坐标（0-1，框选层相对图像）→ 物理像素（GDI 捕获尺寸）。
+ *              DPI 换算基准：图像物理像素 × 归一化，不经 window.devicePixelRatio
+ *              （显示缩放已由 letterbox 层消化）。clamp 到图像内、宽高取整。
+ */
+export function normToPixels(
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  imageW: number,
+  imageH: number,
+): { x: number; y: number; w: number; h: number } {
+  const cx = Math.min(1, Math.max(0, x));
+  const cy = Math.min(1, Math.max(0, y));
+  const cw = Math.min(1, Math.max(0, w));
+  const ch = Math.min(1, Math.max(0, h));
+  return {
+    x: Math.round(cx * imageW),
+    y: Math.round(cy * imageH),
+    // 越界/零宽防御：至少 1 物理像素（canvas 拒绝 0 尺寸）
+    w: Math.max(1, Math.round(cw * imageW)),
+    h: Math.max(1, Math.round(ch * imageH)),
+  };
+}