feat(landing): slide showcase carousel horizontally

app.go

@@ -3,10 +3,12 @@
 package main
 
 import (
+	"bytes"
 	"context"
 	"encoding/json"
 	"fmt"
 	"image"
+	"image/png"
 	"log/slog"
 	"os"
 	"path/filepath"
@@ -23,6 +25,7 @@ import (
 	"github.com/mmmy/snapgo/internal/infrastructure/display"
 	"github.com/mmmy/snapgo/internal/infrastructure/hotkey"
 	llmpkg "github.com/mmmy/snapgo/internal/infrastructure/llm"
+	ocrpkg "github.com/mmmy/snapgo/internal/infrastructure/ocr"
 	"github.com/mmmy/snapgo/internal/infrastructure/oss"
 	"github.com/mmmy/snapgo/internal/infrastructure/screencapture"
 	sshpkg "github.com/mmmy/snapgo/internal/infrastructure/ssh"
@@ -499,6 +502,48 @@ func (a *App) finishSummary(svc *application.CaptureSummaryService, summary stri
 	return nil
 }
 
+func (a *App) runOCRPipeline(pngBytes []byte) error {
+	a.mu.RLock()
+	cfg := a.cfg
+	a.mu.RUnlock()
+
+	if !cfg.IsOCRConfigured() {
+		err := fmt.Errorf("请先在文字提取配置页填写 OCR Provider 的 AccessKey ID 和 AccessKey Secret")
+		a.emitOperationStatus("ocr", "需要配置 OCR", err.Error(), "error")
+		wruntime.EventsEmit(a.ctx, "upload:failure", err.Error())
+		return err
+	}
+
+	providerID, ocrCfg, _ := cfg.ActiveOCRProvider()
+	recognizer, err := ocrpkg.NewClient(providerID, ocrCfg)
+	if err != nil {
+		a.emitOperationStatus("ocr", "OCR 配置错误", err.Error(), "error")
+		wruntime.EventsEmit(a.ctx, "upload:failure", err.Error())
+		return err
+	}
+
+	svc := &application.CaptureOCRService{
+		Recognizer: recognizer,
+		Clipboard:  a.clip,
+	}
+
+	a.emitOperationStatus("ocr", "识别中", "正在提取截图文字", "running")
+	text, err := svc.Recognize(a.ctx, pngBytes)
+	if err != nil {
+		a.emitOperationStatus("ocr", "识别失败", err.Error(), "error")
+		wruntime.EventsEmit(a.ctx, "upload:failure", err.Error())
+		return err
+	}
+	if err := svc.CopyText(a.ctx, text); err != nil {
+		a.emitOperationStatus("ocr", "复制失败", err.Error(), "error")
+		wruntime.EventsEmit(a.ctx, "upload:failure", err.Error())
+		return err
+	}
+	a.emitOperationStatus("ocr", "提取完成", "文字已复制到剪贴板", "success")
+	wruntime.EventsEmit(a.ctx, "upload:success", "ocr text copied to clipboard")
+	return nil
+}
+
 func (a *App) consumePendingCapture() (*pendingCapture, error) {
 	a.pendingMu.Lock()
 	pc := a.pending
@@ -519,7 +564,8 @@ func (a *App) captureSelectedPNG(result CaptureResult, pc *pendingCapture) ([]by
 		return nil, err
 	}
 	if len(result.Annotations) > 0 {
-		cropped, err = application.ApplyAnnotations(cropped, result.Annotations, pc.Display.Scale)
+		scaleX, scaleY := annotationScalesForCapture(cropped, rect, pc.Display.Scale)
+		cropped, err = application.ApplyAnnotationsWithScale(cropped, result.Annotations, scaleX, scaleY)
 		if err != nil {
 			return nil, err
 		}
@@ -527,6 +573,33 @@ func (a *App) captureSelectedPNG(result CaptureResult, pc *pendingCapture) ([]by
 	return cropped, nil
 }
 
+func annotationScalesForCapture(pngBytes []byte, rect RegionRect, fallback float64) (float64, float64) {
+	if fallback <= 0 {
+		fallback = 1
+	}
+	scaleX := fallback
+	scaleY := fallback
+
+	cfg, err := png.DecodeConfig(bytes.NewReader(pngBytes))
+	if err != nil {
+		return scaleX, scaleY
+	}
+	if rect.W > 0 && cfg.Width > 0 {
+		scaleX = saneAnnotationScale(float64(cfg.Width)/float64(rect.W), fallback)
+	}
+	if rect.H > 0 && cfg.Height > 0 {
+		scaleY = saneAnnotationScale(float64(cfg.Height)/float64(rect.H), fallback)
+	}
+	return scaleX, scaleY
+}
+
+func saneAnnotationScale(scale, fallback float64) float64 {
+	if scale >= 0.25 && scale <= 8 {
+		return scale
+	}
+	return fallback
+}
+
 func (a *App) chooseSaveDirectory() (string, error) {
 	return wruntime.OpenDirectoryDialog(a.ctx, wruntime.OpenDialogOptions{
 		Title:                "Save screenshot to folder",
@@ -876,6 +949,35 @@ func (a *App) SummarizeRegion(result CaptureResult) error {
 	return a.runSummaryPipeline(cropped)
 }
 
+// ExtractTextRegion sends the selected screenshot to the configured OCR
+// provider and copies the extracted text to the clipboard.
+func (a *App) ExtractTextRegion(result CaptureResult) error {
+	pc, err := a.consumePendingCapture()
+	if err != nil {
+		slog.Warn("ExtractTextRegion: no pending capture", "err", err)
+		return err
+	}
+	defer func() {
+		a.capturing.Store(false)
+		a.dismissOverlay()
+	}()
+
+	a.dismissOverlay()
+	flushFrame()
+
+	slog.Info("ExtractTextRegion: capturing region",
+		"x", result.Rect.X, "y", result.Rect.Y,
+		"w", result.Rect.W, "h", result.Rect.H,
+		"annotations", len(result.Annotations))
+	cropped, err := a.captureSelectedPNG(result, pc)
+	if err != nil {
+		slog.Error("ExtractTextRegion: capture failed", "err", err)
+		wruntime.EventsEmit(a.ctx, "upload:failure", err.Error())
+		return err
+	}
+	return a.runOCRPipeline(cropped)
+}
+
 // SaveNativeRegionToRemote is the macOS-native overlay equivalent of
 // SaveRegionToRemote. The AppKit panel is already closed by the time this
 // runs (see saveRemoteSelection in native_overlay_darwin.go), so we only
@@ -933,6 +1035,33 @@ func (a *App) SummarizeNativeRegion(result CaptureResult) error {
 	return a.runSummaryPipeline(cropped)
 }
 
+// ExtractTextNativeRegion is the macOS-native overlay equivalent of
+// ExtractTextRegion. The AppKit panel is already closed before this runs.
+func (a *App) ExtractTextNativeRegion(result CaptureResult) error {
+	pc, err := a.consumePendingCapture()
+	if err != nil {
+		slog.Warn("ExtractTextNativeRegion: no pending capture", "err", err)
+		return err
+	}
+	defer func() {
+		a.capturing.Store(false)
+		hideDockIcon()
+	}()
+
+	flushFrame()
+	slog.Info("ExtractTextNativeRegion: capturing region",
+		"x", result.Rect.X, "y", result.Rect.Y,
+		"w", result.Rect.W, "h", result.Rect.H,
+		"annotations", len(result.Annotations))
+	cropped, err := a.captureSelectedPNG(result, pc)
+	if err != nil {
+		slog.Error("ExtractTextNativeRegion: capture failed", "err", err)
+		wruntime.EventsEmit(a.ctx, "upload:failure", err.Error())
+		return err
+	}
+	return a.runOCRPipeline(cropped)
+}
+
 func parseNativeAnnotations(raw string) []application.Annotation {
 	if raw == "" {
 		return nil

frontend/src/App.vue

@@ -23,6 +23,7 @@ import {
   SaveRegionImage,
   SaveRegionToRemote,
   SummarizeRegion,
+  ExtractTextRegion,
   CancelRegion,
   GetConfig,
 } from '../wailsjs/go/main/App'
@@ -58,7 +59,7 @@ async function loadThemePreference() {
 // `SettingsTab` is hoisted to the App shell so the sidebar (which lives
 // here) and the inner SettingsView (which renders the matching card) can
 // share a single source of truth without an event bus.
-type SettingsTab = 'general' | 's3' | 'ssh' | 'llm'
+type SettingsTab = 'general' | 's3' | 'ssh' | 'llm' | 'ocr'
 const activeTab = ref<SettingsTab>('general')
 
 // Sidebar entries are declarative so adding a destination type later is
@@ -68,6 +69,7 @@ const sidebarItems: Array<{ id: SettingsTab; label: string }> = [
   { id: 's3', label: '对象存储' },
   { id: 'ssh', label: '远程主机' },
   { id: 'llm', label: '智能识图' },
+  { id: 'ocr', label: '文字提取' },
 ]
 
 interface OverlayPayload {
@@ -77,6 +79,25 @@ interface OverlayPayload {
 }
 const overlayPayload = ref<OverlayPayload | null>(null)
 
+interface OverlayAnnotation {
+  tool: string
+  color: string
+  points: Array<{ x: number; y: number }>
+  text?: string
+  strokeWidth?: number
+  fontSize?: number
+}
+
+interface OverlayResult {
+  rect: {
+    x: number
+    y: number
+    w: number
+    h: number
+  }
+  annotations: OverlayAnnotation[]
+}
+
 const capturing = ref(false)
 
 const toast = ref<{ kind: 'success' | 'error'; text: string } | null>(null)
@@ -121,19 +142,7 @@ async function retryHotkey() {
   }
 }
 
-async function onOverlayConfirm(rect: {
+async function onOverlayConfirm(rect: OverlayResult) {
-  rect: {
-    x: number
-    y: number
-    w: number
-    h: number
-  }
-  annotations: Array<{
-    tool: string
-    color: string
-    points: Array<{ x: number; y: number }>
-  }>
-}) {
   // Optimistically swap back so the window does not visually lag the
   // Go-side hide. If upload fails, the toast surfaces the reason.
   mode.value = 'settings'
@@ -145,19 +154,7 @@ async function onOverlayConfirm(rect: {
   }
 }
 
-async function onOverlayCopy(rect: {
+async function onOverlayCopy(rect: OverlayResult) {
-  rect: {
-    x: number
-    y: number
-    w: number
-    h: number
-  }
-  annotations: Array<{
-    tool: string
-    color: string
-    points: Array<{ x: number; y: number }>
-  }>
-}) {
   mode.value = 'settings'
   overlayPayload.value = null
   try {
@@ -167,19 +164,7 @@ async function onOverlayCopy(rect: {
   }
 }
 
-async function onOverlaySave(rect: {
+async function onOverlaySave(rect: OverlayResult) {
-  rect: {
-    x: number
-    y: number
-    w: number
-    h: number
-  }
-  annotations: Array<{
-    tool: string
-    color: string
-    points: Array<{ x: number; y: number }>
-  }>
-}) {
   mode.value = 'settings'
   overlayPayload.value = null
   try {
@@ -189,19 +174,7 @@ async function onOverlaySave(rect: {
   }
 }
 
-async function onOverlaySaveRemote(rect: {
+async function onOverlaySaveRemote(rect: OverlayResult) {
-  rect: {
-    x: number
-    y: number
-    w: number
-    h: number
-  }
-  annotations: Array<{
-    tool: string
-    color: string
-    points: Array<{ x: number; y: number }>
-  }>
-}) {
   mode.value = 'settings'
   overlayPayload.value = null
   try {
@@ -211,19 +184,7 @@ async function onOverlaySaveRemote(rect: {
   }
 }
 
-async function onOverlaySummarize(rect: {
+async function onOverlaySummarize(rect: OverlayResult) {
-  rect: {
-    x: number
-    y: number
-    w: number
-    h: number
-  }
-  annotations: Array<{
-    tool: string
-    color: string
-    points: Array<{ x: number; y: number }>
-  }>
-}) {
   mode.value = 'settings'
   overlayPayload.value = null
   try {
@@ -233,6 +194,16 @@ async function onOverlaySummarize(rect: {
   }
 }
 
+async function onOverlayOCR(rect: OverlayResult) {
+  mode.value = 'settings'
+  overlayPayload.value = null
+  try {
+    await ExtractTextRegion(rect as any)
+  } catch {
+    /* Surfaced via upload:failure */
+  }
+}
+
 async function onOverlayCancel() {
   mode.value = 'settings'
   overlayPayload.value = null
@@ -264,6 +235,8 @@ onMounted(() => {
       'success',
       url === 'summary copied to clipboard'
         ? 'Summary copied to clipboard'
+        : url === 'ocr text copied to clipboard'
+          ? 'OCR text copied to clipboard'
         : `Copied: ${url}`
     )
   })
@@ -303,6 +276,7 @@ onUnmounted(() => {
     @save="onOverlaySave"
     @save-remote="onOverlaySaveRemote"
     @summarize="onOverlaySummarize"
+    @ocr="onOverlayOCR"
     @cancel="onOverlayCancel"
   />
 

frontend/src/views/CaptureOverlay.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
 // Inline SVG markup imported as raw strings via Vite's `?raw` suffix.
 // Rationale: rendering through v-html lets the icon inherit `currentColor`
 // from the toolbar button, so styling stays in CSS without bundling extra
@@ -23,7 +23,7 @@ interface Rect {
   h: number
 }
 
-type Tool = 'pen' | 'rect' | 'ellipse'
+type Tool = 'pen' | 'rect' | 'ellipse' | 'text'
 interface Point {
   x: number
   y: number
@@ -32,6 +32,9 @@ interface Annotation {
   tool: Tool
   color: string
   points: Point[]
+  text?: string
+  strokeWidth?: number
+  fontSize?: number
 }
 
 const emit = defineEmits<{
@@ -55,6 +58,10 @@ const emit = defineEmits<{
     e: 'summarize',
     payload: { rect: Rect; annotations: Annotation[] }
   ): void
+  (
+    e: 'ocr',
+    payload: { rect: Rect; annotations: Annotation[] }
+  ): void
   (e: 'cancel'): void
 }>()
 
@@ -63,26 +70,45 @@ const annotations = ref<Annotation[]>([])
 const draftAnnotation = ref<Annotation | null>(null)
 const activeTool = ref<Tool>('pen')
 const activeColor = ref('#ef4444')
-const paletteOpen = ref(false)
+const activeStrokeWidth = ref(3)
+const activeFontSize = ref(20)
+const textDraft = ref<{
+  point: Point
+  value: string
+  color: string
+  fontSize: number
+  index: number | null
+} | null>(null)
+const textInputRef = ref<HTMLInputElement | null>(null)
+const selectedTextIndex = ref<number | null>(null)
 
 type ResizeHandle = 'n' | 's' | 'e' | 'w' | 'nw' | 'ne' | 'sw' | 'se'
-type DragMode = 'idle' | 'creating' | 'moving' | 'resizing' | 'annotating'
+type DragMode =
+  | 'idle'
+  | 'creating'
+  | 'moving'
+  | 'resizing'
+  | 'annotating'
+  | 'moving-text'
 const dragMode = ref<DragMode>('idle')
 const resizeHandle = ref<ResizeHandle | null>(null)
 const dragAnchor = ref({ x: 0, y: 0 })
 const startRect = ref<Rect | null>(null)
+const textDragStartPoint = ref<Point | null>(null)
+const textDragOriginalPoint = ref<Point | null>(null)
+
+const DEFAULT_TEXT_FONT_SIZE = 20
+const STROKE_WIDTHS = [2, 4, 6]
+const FONT_SIZES = [16, 20, 28, 36]
 
 const colors = [
   '#ef4444',
-  '#f97316',
   '#facc15',
   '#22c55e',
-  '#06b6d4',
   '#3b82f6',
-  '#8b5cf6',
-  '#ec4899',
-  '#ffffff',
   '#111827',
+  '#9ca3af',
+  '#ffffff',
 ]
 
 const maskPath = computed(() => {
@@ -115,10 +141,32 @@ const sizeLabel = computed(() => {
   return `${Math.round(rect.value.w)} × ${Math.round(rect.value.h)}`
 })
 
-const MARK_TOOLBAR_W = 190
+const MARK_TOOLBAR_W = 178
-const ACTION_TOOLBAR_W = 216
+const ACTION_TOOLBAR_W = 252
 const TOOLBAR_GROUP_GAP = 8
 
+const toolOrder: Tool[] = ['pen', 'rect', 'ellipse', 'text']
+
+const toolSettingsPos = computed(() => {
+  if (!leftToolbarPos.value || !rect.value || !activeTool.value) return null
+  const menuW = activeTool.value === 'text' ? 462 : 398
+  const menuH = 58
+  const buttonIndex = toolOrder.indexOf(activeTool.value)
+  const buttonCenter = 4 + buttonIndex * 34 + 14
+  let x = leftToolbarPos.value.x
+  let y = leftToolbarPos.value.y + 44
+  if (y + menuH > props.height) {
+    y = leftToolbarPos.value.y - menuH - 8
+  }
+  x = clamp(x, 8, Math.max(8, props.width - menuW - 8))
+  return {
+    x,
+    y,
+    w: menuW,
+    arrowX: clamp(leftToolbarPos.value.x + buttonCenter - x, 18, menuW - 18),
+  }
+})
+
 const rightToolbarPos = computed(() => {
   if (!rect.value) return null
   return placeToolbar(rect.value, ACTION_TOOLBAR_W, 40, 'right')
@@ -204,6 +252,89 @@ function insideRect(p: Point, r: Rect | null) {
   return p.x >= r.x && p.x <= r.x + r.w && p.y >= r.y && p.y <= r.y + r.h
 }
 
+let measureCanvas: HTMLCanvasElement | null = null
+
+function textFont(fontSize = DEFAULT_TEXT_FONT_SIZE) {
+  return `600 ${fontSize}px -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif`
+}
+
+function textSize(annotation: Pick<Annotation, 'text' | 'fontSize'>) {
+  const fontSize = annotation.fontSize || DEFAULT_TEXT_FONT_SIZE
+  const lines = (annotation.text || ' ').split('\n')
+  if (typeof document === 'undefined') {
+    return {
+      w: Math.max(1, ...lines.map((line) => line.length * fontSize)),
+      h: Math.max(fontSize * 1.2, lines.length * fontSize * 1.2),
+    }
+  }
+  measureCanvas ||= document.createElement('canvas')
+  const ctx = measureCanvas.getContext('2d')
+  if (!ctx) {
+    return {
+      w: Math.max(1, ...lines.map((line) => line.length * fontSize)),
+      h: Math.max(fontSize * 1.2, lines.length * fontSize * 1.2),
+    }
+  }
+  ctx.font = textFont(fontSize)
+  return {
+    w: Math.ceil(Math.max(1, ...lines.map((line) => ctx.measureText(line || ' ').width))),
+    h: Math.ceil(Math.max(fontSize * 1.2, lines.length * fontSize * 1.2)),
+  }
+}
+
+function textEditorSize(draft: { value: string; fontSize: number }) {
+  const size = textSize({
+    text: draft.value || ' ',
+    fontSize: draft.fontSize,
+  })
+  return {
+    width: Math.max(180, Math.min(420, size.w + 28)),
+    height: Math.max(30, Math.ceil(draft.fontSize * 1.6)),
+    lineHeight: Math.ceil(draft.fontSize * 1.25),
+  }
+}
+
+function textRenderBox(annotation: Annotation) {
+  const point = annotation.points[0] || { x: 0, y: 0 }
+  const size = textSize(annotation)
+  return {
+    x: point.x - 4,
+    y: point.y - 3,
+    w: size.w + 8,
+    h: size.h + 6,
+  }
+}
+
+function textAnnotationIndexAtPoint(p: Point) {
+  if (!rect.value) return null
+  for (let i = annotations.value.length - 1; i >= 0; i--) {
+    const annotation = annotations.value[i]
+    if (annotation.tool !== 'text' || annotation.points.length === 0) continue
+    const point = annotation.points[0]
+    const size = textSize(annotation)
+    const x = rect.value.x + point.x
+    const y = rect.value.y + point.y
+    if (
+      p.x >= x - 6 &&
+      p.x <= x + size.w + 6 &&
+      p.y >= y - 6 &&
+      p.y <= y + size.h + 6
+    ) {
+      return i
+    }
+  }
+  return null
+}
+
+function clampTextLocalPoint(point: Point, annotation: Pick<Annotation, 'text' | 'fontSize'>) {
+  if (!rect.value) return point
+  const size = textSize(annotation)
+  return {
+    x: clamp(point.x, 0, Math.max(0, rect.value.w - size.w)),
+    y: clamp(point.y, 0, Math.max(0, rect.value.h - size.h)),
+  }
+}
+
 function hitHandle(p: Point): ResizeHandle | null {
   if (!rect.value) return null
   const tolerance = 9
@@ -227,7 +358,9 @@ function hitHandle(p: Point): ResizeHandle | null {
 
 function onMouseDown(e: MouseEvent) {
   if (e.button !== 0) return
-  paletteOpen.value = false
+  commitTextDraft()
+  textDragStartPoint.value = null
+  textDragOriginalPoint.value = null
   const p = pointFromEvent(e)
   const handle = hitHandle(p)
   if (handle && rect.value) {
@@ -246,19 +379,41 @@ function onMouseDown(e: MouseEvent) {
   dragAnchor.value = p
   rect.value = { x: p.x, y: p.y, w: 0, h: 0 }
   annotations.value = []
+  selectedTextIndex.value = null
   draftAnnotation.value = null
 }
 
 function onSelectionMouseDown(e: MouseEvent) {
   if (e.button !== 0 || !rect.value) return
   e.stopPropagation()
-  paletteOpen.value = false
+  commitTextDraft()
+  const p = pointFromEvent(e)
+  const hitTextIndex = textAnnotationIndexAtPoint(p)
+  if (hitTextIndex !== null) {
+    selectedTextIndex.value = hitTextIndex
+    const annotation = annotations.value[hitTextIndex]
+    activeTool.value = 'text'
+    activeColor.value = annotation.color
+    activeFontSize.value = annotation.fontSize || DEFAULT_TEXT_FONT_SIZE
+    if (e.detail >= 2) {
+      beginTextAnnotation(annotation.points[0], hitTextIndex)
+      return
+    }
+    dragMode.value = 'moving-text'
+    textDragStartPoint.value = localPoint(p)
+    textDragOriginalPoint.value = { ...annotation.points[0] }
+    return
+  }
+  selectedTextIndex.value = null
+  if (activeTool.value === 'text') {
+    beginTextAnnotation(localPoint(p))
+    return
+  }
   if (e.detail >= 2) {
     removeSinglePointAnnotation()
     onCopy()
     return
   }
-  const p = pointFromEvent(e)
   const handle = hitHandle(p)
   if (handle) {
     dragMode.value = 'resizing'
@@ -272,6 +427,7 @@ function onSelectionMouseDown(e: MouseEvent) {
   draftAnnotation.value = {
     tool: activeTool.value,
     color: activeColor.value,
+    strokeWidth: activeStrokeWidth.value,
     points: [local],
   }
 }
@@ -289,6 +445,21 @@ function onMouseMove(e: MouseEvent) {
     }
   } else if (dragMode.value === 'resizing') {
     resizeSelection(p)
+  } else if (
+    dragMode.value === 'moving-text' &&
+    selectedTextIndex.value !== null &&
+    textDragStartPoint.value &&
+    textDragOriginalPoint.value
+  ) {
+    const annotation = annotations.value[selectedTextIndex.value]
+    if (annotation?.tool === 'text') {
+      const local = localPoint(p)
+      const next = {
+        x: textDragOriginalPoint.value.x + local.x - textDragStartPoint.value.x,
+        y: textDragOriginalPoint.value.y + local.y - textDragStartPoint.value.y,
+      }
+      annotation.points[0] = clampTextLocalPoint(next, annotation)
+    }
   } else if (dragMode.value === 'annotating' && draftAnnotation.value) {
     if (activeTool.value === 'pen') {
       draftAnnotation.value.points.push(localPoint(p))
@@ -316,6 +487,8 @@ function onMouseUp() {
   dragMode.value = 'idle'
   resizeHandle.value = null
   startRect.value = null
+  textDragStartPoint.value = null
+  textDragOriginalPoint.value = null
 }
 
 function resizeSelection(p: Point) {
@@ -348,7 +521,38 @@ function selectTool(tool: Tool) {
 
 function chooseColor(color: string) {
   activeColor.value = color
-  paletteOpen.value = false
+  if (textDraft.value) {
+    textDraft.value.color = color
+  } else if (
+    activeTool.value === 'text' &&
+    selectedTextIndex.value !== null &&
+    annotations.value[selectedTextIndex.value]?.tool === 'text'
+  ) {
+    annotations.value[selectedTextIndex.value].color = color
+  }
+}
+
+function chooseStrokeWidth(width: number) {
+  activeStrokeWidth.value = width
+}
+
+function chooseFontSize(size: number) {
+  activeFontSize.value = size
+  if (textDraft.value) {
+    textDraft.value.fontSize = size
+    textDraft.value.point = clampTextLocalPoint(textDraft.value.point, {
+      text: textDraft.value.value,
+      fontSize: size,
+    })
+  } else if (
+    activeTool.value === 'text' &&
+    selectedTextIndex.value !== null &&
+    annotations.value[selectedTextIndex.value]?.tool === 'text'
+  ) {
+    const annotation = annotations.value[selectedTextIndex.value]
+    annotation.fontSize = size
+    annotation.points[0] = clampTextLocalPoint(annotation.points[0], annotation)
+  }
 }
 
 function onConfirm() {
@@ -371,8 +575,13 @@ function onSummarize() {
   emitAction('summarize')
 }
 
-function emitAction(action: 'confirm' | 'copy' | 'save' | 'save-remote' | 'summarize') {
+function onOCR() {
+  emitAction('ocr')
+}
+
+function emitAction(action: 'confirm' | 'copy' | 'save' | 'save-remote' | 'summarize' | 'ocr') {
   if (!rect.value) return
+  commitTextDraft()
   const payload = {
     rect: { ...rect.value },
     annotations: annotations.value,
@@ -382,6 +591,7 @@ function emitAction(action: 'confirm' | 'copy' | 'save' | 'save-remote' | 'summa
   if (action === 'save') emit('save', payload)
   if (action === 'save-remote') emit('save-remote', payload)
   if (action === 'summarize') emit('summarize', payload)
+  if (action === 'ocr') emit('ocr', payload)
 }
 
 function onCancel() {
@@ -389,6 +599,13 @@ function onCancel() {
 }
 
 function onKeydown(e: KeyboardEvent) {
+  if (textDraft.value) {
+    if (e.key === 'Escape') {
+      e.preventDefault()
+      cancelTextDraft()
+    }
+    return
+  }
   if (e.key === 'Escape') {
     e.preventDefault()
     onCancel()
@@ -399,7 +616,16 @@ function onKeydown(e: KeyboardEvent) {
 }
 
 function undoAnnotation() {
+  if (!textDraft.value && annotations.value.length === 0) return
+  cancelTextDraft()
+  if (annotations.value.length === 0) return
   annotations.value.pop()
+  if (
+    selectedTextIndex.value !== null &&
+    selectedTextIndex.value >= annotations.value.length
+  ) {
+    selectedTextIndex.value = null
+  }
 }
 
 function removeSinglePointAnnotation() {
@@ -409,6 +635,76 @@ function removeSinglePointAnnotation() {
   }
 }
 
+function beginTextAnnotation(point: Point, index: number | null = null) {
+  commitTextDraft()
+  dragMode.value = 'idle'
+  draftAnnotation.value = null
+  const existing = index !== null ? annotations.value[index] : null
+  const color = existing?.color || activeColor.value
+  const fontSize = existing?.fontSize || activeFontSize.value
+  if (existing) {
+    activeColor.value = color
+    activeFontSize.value = fontSize
+  }
+  textDraft.value = {
+    point: clampTextLocalPoint(point, existing || { text: '', fontSize }),
+    value: existing?.text || '',
+    color,
+    fontSize,
+    index,
+  }
+  void nextTick(() => {
+    textInputRef.value?.focus()
+    textInputRef.value?.select()
+  })
+}
+
+function commitTextDraft() {
+  if (!textDraft.value) return
+  const text = textDraft.value.value.trim()
+  const draft = textDraft.value
+  if (draft.index !== null) {
+    const target = annotations.value[draft.index]
+    if (target?.tool === 'text') {
+      if (text !== '') {
+        target.points = [clampTextLocalPoint(draft.point, { text, fontSize: draft.fontSize })]
+        target.text = text
+        target.color = draft.color
+        target.fontSize = draft.fontSize
+        selectedTextIndex.value = draft.index
+      } else {
+        annotations.value.splice(draft.index, 1)
+        selectedTextIndex.value = null
+      }
+    }
+  } else if (text !== '') {
+    const point = clampTextLocalPoint(draft.point, { text, fontSize: draft.fontSize })
+    annotations.value.push({
+      tool: 'text',
+      color: draft.color,
+      points: [point],
+      text,
+      fontSize: draft.fontSize,
+    })
+    selectedTextIndex.value = annotations.value.length - 1
+  }
+  textDraft.value = null
+}
+
+function cancelTextDraft() {
+  textDraft.value = null
+}
+
+function onTextDraftKeydown(e: KeyboardEvent) {
+  if (e.key === 'Enter') {
+    e.preventDefault()
+    commitTextDraft()
+  } else if (e.key === 'Escape') {
+    e.preventDefault()
+    cancelTextDraft()
+  }
+}
+
 onMounted(() => {
   window.addEventListener('keydown', onKeydown)
 })
@@ -450,7 +746,7 @@ onUnmounted(() => {
           v-if="annotation.tool === 'pen'"
           :points="annotation.points.map((p) => `${p.x},${p.y}`).join(' ')"
           :stroke="annotation.color"
-          stroke-width="3"
+          :stroke-width="annotation.strokeWidth || 3"
           stroke-linecap="round"
           stroke-linejoin="round"
           fill="none"
@@ -462,7 +758,7 @@ onUnmounted(() => {
           :width="Math.abs(annotation.points[1].x - annotation.points[0].x)"
           :height="Math.abs(annotation.points[1].y - annotation.points[0].y)"
           :stroke="annotation.color"
-          stroke-width="3"
+          :stroke-width="annotation.strokeWidth || 3"
           fill="none"
         />
         <ellipse
@@ -472,9 +768,30 @@ onUnmounted(() => {
           :rx="Math.abs(annotation.points[1].x - annotation.points[0].x) / 2"
           :ry="Math.abs(annotation.points[1].y - annotation.points[0].y) / 2"
           :stroke="annotation.color"
-          stroke-width="3"
+          :stroke-width="annotation.strokeWidth || 3"
           fill="none"
         />
+        <template v-else-if="annotation.tool === 'text' && annotation.points.length >= 1">
+          <rect
+            v-if="selectedTextIndex === index && index < annotations.length"
+            class="text-selection-box"
+            :x="textRenderBox(annotation).x"
+            :y="textRenderBox(annotation).y"
+            :width="textRenderBox(annotation).w"
+            :height="textRenderBox(annotation).h"
+          />
+          <text
+            class="annotation-text"
+            :x="annotation.points[0].x"
+            :y="annotation.points[0].y"
+            :fill="annotation.color"
+            :font-size="annotation.fontSize || DEFAULT_TEXT_FONT_SIZE"
+            font-weight="600"
+            dominant-baseline="hanging"
+          >
+            {{ annotation.text }}
+          </text>
+        </template>
       </g>
     </svg>
 
@@ -490,6 +807,26 @@ onUnmounted(() => {
       @mousedown="onSelectionMouseDown"
     />
 
+    <input
+      v-if="rect && textDraft"
+      ref="textInputRef"
+      v-model="textDraft.value"
+      class="text-editor"
+      :style="{
+        left: rect.x + textDraft.point.x + 'px',
+        top: rect.y + textDraft.point.y + 'px',
+        color: textDraft.color,
+        fontSize: textDraft.fontSize + 'px',
+        width: textEditorSize(textDraft).width + 'px',
+        height: textEditorSize(textDraft).height + 'px',
+        lineHeight: textEditorSize(textDraft).lineHeight + 'px',
+      }"
+      spellcheck="false"
+      @mousedown.stop
+      @keydown.stop="onTextDraftKeydown"
+      @blur="commitTextDraft"
+    />
+
     <div
       v-for="handle in handles"
       :key="handle.name"
@@ -554,15 +891,69 @@ onUnmounted(() => {
           <circle cx="12" cy="12" r="7" />
         </svg>
       </button>
-      <div class="color-wrap">
       <button
-          class="icon-btn color-btn"
+        class="icon-btn"
-          title="选择标记颜色"
+        :class="{ active: activeTool === 'text' }"
-          @click="paletteOpen = !paletteOpen"
+        title="文字标记"
+        @click="selectTool('text')"
       >
-          <span :style="{ background: activeColor }" />
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M5 5h14" />
+          <path d="M12 5v14" />
+          <path d="M9 19h6" />
+        </svg>
       </button>
-        <div v-if="paletteOpen" class="palette">
+      <button
+        class="icon-btn"
+        :class="{ muted: annotations.length === 0 }"
+        :aria-disabled="annotations.length === 0"
+        title="撤销上一处标记"
+        @click="undoAnnotation"
+      >
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M9 7H4v5" />
+          <path d="M4 7c3-3 8-4 12-1 4 3 4 9 0 12-2 1-4 2-7 1" />
+        </svg>
+      </button>
+    </div>
+
+    <div
+      v-if="toolSettingsPos && rect && rect.w >= 4 && rect.h >= 4"
+      class="tool-settings-menu"
+      :style="{
+        left: toolSettingsPos.x + 'px',
+        top: toolSettingsPos.y + 'px',
+        width: toolSettingsPos.w + 'px',
+        '--arrow-x': toolSettingsPos.arrowX + 'px',
+      }"
+      @mousedown.stop
+    >
+      <div v-if="activeTool !== 'text'" class="setting-group stroke-group">
+        <button
+          v-for="widthValue in STROKE_WIDTHS"
+          :key="widthValue"
+          class="stroke-choice"
+          :class="{ active: activeStrokeWidth === widthValue }"
+          :title="`${widthValue}px`"
+          @click="chooseStrokeWidth(widthValue)"
+        >
+          <span :style="{ width: widthValue * 4 + 'px', height: widthValue * 4 + 'px' }" />
+        </button>
+      </div>
+      <div v-else class="setting-group font-group">
+        <button
+          v-for="size in FONT_SIZES"
+          :key="size"
+          class="font-choice"
+          :class="{ active: activeFontSize === size }"
+          :title="`${size}px`"
+          @click="chooseFontSize(size)"
+        >
+          {{ size }}
+        </button>
+      </div>
+      <div class="settings-divider" />
+      <div class="setting-group color-group">
         <button
           v-for="color in colors"
           :key="color"
@@ -574,18 +965,6 @@ onUnmounted(() => {
         />
       </div>
     </div>
-      <button
-        class="icon-btn"
-        :disabled="annotations.length === 0"
-        title="撤销上一处标记"
-        @click="undoAnnotation"
-      >
-        <svg viewBox="0 0 24 24" aria-hidden="true">
-          <path d="M9 7H4v5" />
-          <path d="M4 7c3-3 8-4 12-1 4 3 4 9 0 12-2 1-4 2-7 1" />
-        </svg>
-      </button>
-    </div>
 
     <div
       v-if="rightToolbarPos && rect && rect.w >= 4 && rect.h >= 4"
@@ -621,6 +1000,21 @@ onUnmounted(() => {
         @click="onSaveRemote"
         v-html="saveRemoteIcon"
       />
+      <button
+        class="action-btn"
+        data-tip="提取文字"
+        aria-label="提取文字"
+        @click="onOCR"
+      >
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M5 8V5h3" />
+          <path d="M16 5h3v3" />
+          <path d="M19 16v3h-3" />
+          <path d="M8 19H5v-3" />
+          <path d="M9 15l3-7 3 7" />
+          <path d="M10 13h4" />
+        </svg>
+      </button>
       <button
         class="action-btn"
         data-tip="复制总结"
@@ -666,11 +1060,37 @@ onUnmounted(() => {
   pointer-events: none;
 }
 
+.annotation-text {
+  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+}
+
+.text-selection-box {
+  fill: transparent;
+  stroke: #3b82f6;
+  stroke-width: 1.5;
+  stroke-dasharray: 4 3;
+}
+
 .selection-hit-area {
   position: absolute;
   cursor: crosshair;
 }
 
+.text-editor {
+  position: absolute;
+  z-index: 6;
+  box-sizing: border-box;
+  min-width: 120px;
+  max-width: 420px;
+  padding: 0 10px;
+  border: 1px solid currentColor;
+  border-radius: 4px;
+  outline: none;
+  background: rgba(15, 23, 42, 0.72);
+  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
+  font: 600 20px/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+}
+
 .resize-handle {
   position: absolute;
   width: 10px;
@@ -725,15 +1145,17 @@ onUnmounted(() => {
 }
 
 .mark-toolbar {
-  width: 190px;
+  width: 178px;
 }
 .action-toolbar {
-  width: 216px;
+  width: 252px;
 }
 
 .icon-btn,
 .action-btn,
-.swatch {
+.swatch,
+.stroke-choice,
+.font-choice {
   font-family: inherit;
 }
 
@@ -826,14 +1248,14 @@ onUnmounted(() => {
   background: transparent;
   cursor: pointer;
 }
-.icon-btn:hover:not(:disabled),
+.icon-btn:hover:not(.muted),
 .icon-btn.active {
   color: #fff;
   background: rgba(255, 255, 255, 0.12);
 }
-.icon-btn:disabled {
+.icon-btn.muted {
   opacity: 0.35;
-  cursor: not-allowed;
+  cursor: default;
 }
 .icon-btn svg {
   width: 18px;
@@ -845,36 +1267,88 @@ onUnmounted(() => {
   stroke-linejoin: round;
 }
 
-.color-wrap {
+.tool-settings-menu {
-  position: relative;
+  position: absolute;
+  z-index: 5;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 42px;
+  padding: 8px 14px;
+  color: #1f2937;
+  background: rgba(255, 255, 255, 0.96);
+  border-radius: 8px;
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.26);
+  cursor: default;
 }
-.color-btn span {
+.tool-settings-menu::before {
+  content: '';
+  position: absolute;
+  left: var(--arrow-x);
+  top: -8px;
+  transform: translateX(-50%) rotate(45deg);
   width: 16px;
   height: 16px;
-  border: 1px solid rgba(255, 255, 255, 0.7);
+  background: rgba(255, 255, 255, 0.96);
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
+  border-radius: 3px;
 }
-.palette {
+.setting-group {
-  position: absolute;
+  position: relative;
-  left: 0;
+  z-index: 1;
-  bottom: 36px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.stroke-choice,
+.font-choice {
   display: grid;
-  grid-template-columns: repeat(5, 22px);
+  place-items: center;
-  gap: 6px;
+  width: 32px;
-  padding: 8px;
+  height: 32px;
-  background: rgba(28, 28, 32, 0.96);
+  padding: 0;
-  border-radius: 8px;
+  border: 0;
-  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
+  border-radius: 6px;
+  color: #1f2937;
+  background: transparent;
+  cursor: pointer;
+}
+.stroke-choice:hover,
+.stroke-choice.active,
+.font-choice:hover,
+.font-choice.active {
+  color: #2563eb;
+  background: #eaf1ff;
+}
+.stroke-choice span {
+  display: block;
+  border-radius: 999px;
+  background: currentColor;
+}
+.font-choice {
+  min-width: 40px;
+  width: auto;
+  padding: 0 8px;
+  font-size: 14px;
+  font-weight: 700;
+}
+.settings-divider {
+  position: relative;
+  z-index: 1;
+  width: 1px;
+  height: 26px;
+  background: #d1d5db;
 }
 .swatch {
   width: 22px;
   height: 22px;
-  border: 1px solid rgba(255, 255, 255, 0.55);
+  padding: 0;
+  border: 1px solid rgba(17, 24, 39, 0.18);
   border-radius: 4px;
   cursor: pointer;
 }
 .swatch.selected {
-  outline: 2px solid #fff;
+  outline: 2px solid #2563eb;
   outline-offset: 2px;
 }
 

frontend/src/views/SettingsView.vue

@@ -9,6 +9,7 @@
  *   • "s3"      — S3-compatible object-storage credentials.
  *   • "ssh"     — SSH/SCP destination for the "save remote" button.
  *   • "llm"     — multimodal screenshot summary provider settings.
+ *   • "ocr"     — cloud OCR provider settings for text extraction.
  *
  * State flow: load() pulls config from Go on mount, save() pushes back.
  */
@@ -23,7 +24,7 @@ import {
 
 // Tab discriminator shared with the App shell. Kept as a string union so
 // the parent can pass the value without importing a type from this view.
-type TabId = 'general' | 's3' | 'ssh' | 'llm'
+type TabId = 'general' | 's3' | 'ssh' | 'llm' | 'ocr'
 type ThemeMode = 'auto' | 'light' | 'dark'
 
 const props = defineProps<{
@@ -74,12 +75,30 @@ interface LLMConfig {
   providers: Record<string, LLMProviderConfig>
 }
 
+interface OCRProviderConfig {
+  label: string
+  endpoint: string
+  accessKeyId: string
+  accessKeySecret: string
+  region: string
+  service: string
+  action: string
+  version: string
+  timeoutSecs: number
+}
+
+interface OCRConfig {
+  activeProvider: string
+  providers: Record<string, OCRProviderConfig>
+}
+
 interface AppConfig {
   hotkey: string
   theme: ThemeMode
   s3: S3Config
   ssh: SSHConfig
   llm: LLMConfig
+  ocr: OCRConfig
 }
 
 const llmProviderOptions = [
@@ -88,6 +107,11 @@ const llmProviderOptions = [
   { id: 'openai', label: 'ChatGPT / OpenAI-compatible' },
 ]
 
+const ocrProviderOptions = [
+  { id: 'aliyun', label: '阿里云文字识别' },
+  { id: 'volcengine', label: '火山引擎文字识别' },
+]
+
 const themeOptions: Array<{ id: ThemeMode; label: string }> = [
   { id: 'light', label: '浅色' },
   { id: 'dark', label: '深色' },
@@ -165,6 +189,33 @@ function defaultConfig(): AppConfig {
         },
       },
     },
+    ocr: {
+      activeProvider: 'aliyun',
+      providers: {
+        aliyun: {
+          label: '阿里云文字识别',
+          endpoint: 'https://ocr-api.cn-hangzhou.aliyuncs.com',
+          accessKeyId: '',
+          accessKeySecret: '',
+          region: '',
+          service: '',
+          action: 'RecognizeGeneral',
+          version: '2021-07-07',
+          timeoutSecs: 30,
+        },
+        volcengine: {
+          label: '火山引擎文字识别',
+          endpoint: 'https://visual.volcengineapi.com',
+          accessKeyId: '',
+          accessKeySecret: '',
+          region: 'cn-north-1',
+          service: 'cv',
+          action: 'OCRNormal',
+          version: '2020-08-26',
+          timeoutSecs: 30,
+        },
+      },
+    },
   }
 }
 
@@ -198,6 +249,15 @@ const activeLLMProvider = computed(() => {
   return config.value.llm.providers[id]
 })
 
+const activeOCRProvider = computed(() => {
+  const id = config.value.ocr.activeProvider || 'aliyun'
+  if (!config.value.ocr.providers[id]) {
+    config.value.ocr.activeProvider = 'aliyun'
+    return config.value.ocr.providers.aliyun
+  }
+  return config.value.ocr.providers[id]
+})
+
 function normalizeTheme(theme: unknown): ThemeMode {
   return theme === 'light' || theme === 'dark' || theme === 'auto'
     ? theme
@@ -225,6 +285,11 @@ async function load() {
       ...defaultConfig().llm.providers,
       ...((cfg as any).llm?.providers ?? {}),
     }
+    merged.ocr = { ...merged.ocr, ...(cfg as any).ocr }
+    merged.ocr.providers = {
+      ...defaultConfig().ocr.providers,
+      ...((cfg as any).ocr?.providers ?? {}),
+    }
     merged.theme = normalizeTheme((cfg as any).theme)
     config.value = merged
     emit('theme-change', config.value.theme)
@@ -586,6 +651,103 @@ onMounted(load)
       </div>
     </section>
 
+    <!-- OCR tab — cloud OCR provider settings for screenshot text extraction. -->
+    <section v-if="props.tab === 'ocr'" class="card">
+      <h2>文字提取</h2>
+      <div class="grid">
+        <label class="field full">
+          <span>Provider</span>
+          <select v-model="config.ocr.activeProvider">
+            <option
+              v-for="provider in ocrProviderOptions"
+              :key="provider.id"
+              :value="provider.id"
+            >
+              {{ provider.label }}
+            </option>
+          </select>
+        </label>
+        <label class="field full">
+          <span>Endpoint *</span>
+          <input
+            v-model="activeOCRProvider.endpoint"
+            placeholder="https://ocr-api.cn-hangzhou.aliyuncs.com"
+            spellcheck="false"
+          />
+        </label>
+        <label class="field">
+          <span>AccessKey ID *</span>
+          <input v-model="activeOCRProvider.accessKeyId" spellcheck="false" />
+        </label>
+        <label class="field">
+          <span>AccessKey Secret *</span>
+          <input v-model="activeOCRProvider.accessKeySecret" type="password" />
+        </label>
+        <label
+          v-if="config.ocr.activeProvider === 'volcengine'"
+          class="field"
+        >
+          <span>Region *</span>
+          <input
+            v-model="activeOCRProvider.region"
+            placeholder="cn-north-1"
+            spellcheck="false"
+          />
+        </label>
+        <label
+          v-if="config.ocr.activeProvider === 'volcengine'"
+          class="field"
+        >
+          <span>Service *</span>
+          <input
+            v-model="activeOCRProvider.service"
+            placeholder="cv"
+            spellcheck="false"
+          />
+        </label>
+        <label class="field">
+          <span>Action *</span>
+          <input
+            v-model="activeOCRProvider.action"
+            placeholder="RecognizeGeneral / OCRNormal"
+            spellcheck="false"
+          />
+        </label>
+        <label class="field">
+          <span>Version *</span>
+          <input
+            v-model="activeOCRProvider.version"
+            placeholder="2021-07-07 / 2020-08-26"
+            spellcheck="false"
+          />
+        </label>
+        <label class="field">
+          <span>Timeout (sec)</span>
+          <input
+            v-model.number="activeOCRProvider.timeoutSecs"
+            type="number"
+            min="5"
+            max="120"
+            placeholder="30"
+          />
+        </label>
+      </div>
+      <p v-if="config.ocr.activeProvider === 'aliyun'" class="hint">
+        阿里云默认使用 OCR API 的 <code>RecognizeGeneral</code>，请求体为截图
+        PNG 原始数据，并使用 ACS3-HMAC-SHA256 签名。
+      </p>
+      <p v-else class="hint">
+        火山引擎默认使用视觉智能的 <code>OCRNormal</code>，截图以
+        <code>image_base64</code> 发送，并使用 Region/Service 参与签名。
+      </p>
+
+      <div class="actions">
+        <button class="btn primary" :disabled="saving" @click="save">
+          {{ saving ? 'Saving…' : 'Save' }}
+        </button>
+      </div>
+    </section>
+
     <transition name="fade">
       <div
         v-if="message"

frontend/wailsjs/go/main/App.d.ts

@@ -17,6 +17,10 @@ export function CopyNativeRegionImage(arg1:main.CaptureResult):Promise<void>;
 
 export function CopyRegionImage(arg1:main.CaptureResult):Promise<void>;
 
+export function ExtractTextNativeRegion(arg1:main.CaptureResult):Promise<void>;
+
+export function ExtractTextRegion(arg1:main.CaptureResult):Promise<void>;
+
 export function GetConfig():Promise<domain.AppConfig>;
 
 export function QuitApp():Promise<void>;

frontend/wailsjs/go/main/App.js

@@ -30,6 +30,14 @@ export function CopyRegionImage(arg1) {
   return window['go']['main']['App']['CopyRegionImage'](arg1);
 }
 
+export function ExtractTextNativeRegion(arg1) {
+  return window['go']['main']['App']['ExtractTextNativeRegion'](arg1);
+}
+
+export function ExtractTextRegion(arg1) {
+  return window['go']['main']['App']['ExtractTextRegion'](arg1);
+}
+
 export function GetConfig() {
   return window['go']['main']['App']['GetConfig']();
 }

frontend/wailsjs/go/models.ts

@@ -18,6 +18,9 @@ export namespace application {
 	    tool: string;
 	    color: string;
 	    points: Point[];
+	    text?: string;
+	    strokeWidth?: number;
+	    fontSize?: number;
 	
 	    static createFrom(source: any = {}) {
 	        return new Annotation(source);
@@ -28,6 +31,9 @@ export namespace application {
 	        this.tool = source["tool"];
 	        this.color = source["color"];
 	        this.points = this.convertValues(source["points"], Point);
+	        this.text = source["text"];
+	        this.strokeWidth = source["strokeWidth"];
+	        this.fontSize = source["fontSize"];
 	    }
 	
 		convertValues(a: any, classs: any, asMap: boolean = false): any {
@@ -53,6 +59,66 @@ export namespace application {
 
 export namespace domain {
 	
+	export class OCRProviderConfig {
+	    label: string;
+	    endpoint: string;
+	    accessKeyId: string;
+	    accessKeySecret: string;
+	    region: string;
+	    service: string;
+	    action: string;
+	    version: string;
+	    timeoutSecs: number;
+	
+	    static createFrom(source: any = {}) {
+	        return new OCRProviderConfig(source);
+	    }
+	
+	    constructor(source: any = {}) {
+	        if ('string' === typeof source) source = JSON.parse(source);
+	        this.label = source["label"];
+	        this.endpoint = source["endpoint"];
+	        this.accessKeyId = source["accessKeyId"];
+	        this.accessKeySecret = source["accessKeySecret"];
+	        this.region = source["region"];
+	        this.service = source["service"];
+	        this.action = source["action"];
+	        this.version = source["version"];
+	        this.timeoutSecs = source["timeoutSecs"];
+	    }
+	}
+	export class OCRConfig {
+	    activeProvider: string;
+	    providers: Record<string, OCRProviderConfig>;
+	
+	    static createFrom(source: any = {}) {
+	        return new OCRConfig(source);
+	    }
+	
+	    constructor(source: any = {}) {
+	        if ('string' === typeof source) source = JSON.parse(source);
+	        this.activeProvider = source["activeProvider"];
+	        this.providers = this.convertValues(source["providers"], OCRProviderConfig, true);
+	    }
+	
+		convertValues(a: any, classs: any, asMap: boolean = false): any {
+		    if (!a) {
+		        return a;
+		    }
+		    if (a.slice && a.map) {
+		        return (a as any[]).map(elem => this.convertValues(elem, classs));
+		    } else if ("object" === typeof a) {
+		        if (asMap) {
+		            for (const key of Object.keys(a)) {
+		                a[key] = new classs(a[key]);
+		            }
+		            return a;
+		        }
+		        return new classs(a);
+		    }
+		    return a;
+		}
+	}
 	export class LLMProviderConfig {
 	    label: string;
 	    baseUrl: string;
@@ -173,6 +239,7 @@ export namespace domain {
 	    s3: S3Config;
 	    ssh: SSHConfig;
 	    llm: LLMConfig;
+	    ocr: OCRConfig;
 	
 	    static createFrom(source: any = {}) {
 	        return new AppConfig(source);
@@ -185,6 +252,7 @@ export namespace domain {
 	        this.s3 = this.convertValues(source["s3"], S3Config);
 	        this.ssh = this.convertValues(source["ssh"], SSHConfig);
 	        this.llm = this.convertValues(source["llm"], LLMConfig);
+	        this.ocr = this.convertValues(source["ocr"], OCRConfig);
 	    }
 	
 		convertValues(a: any, classs: any, asMap: boolean = false): any {
@@ -209,6 +277,8 @@ export namespace domain {
 	
 	
 	
+	
+
 }
 
 export namespace main {

go.mod

@@ -12,6 +12,7 @@ require (
 	golang.design/x/clipboard v0.7.0
 	golang.design/x/hotkey v0.4.1
 	golang.org/x/crypto v0.33.0
+	golang.org/x/image v0.12.0
 )
 
 require (
@@ -52,7 +53,6 @@ require (
 	github.com/wailsapp/go-webview2 v1.0.22 // indirect
 	github.com/wailsapp/mimetype v1.4.1 // indirect
 	golang.org/x/exp v0.0.0-20190731235908-ec7cb31e5a56 // indirect
-	golang.org/x/image v0.12.0 // indirect
 	golang.org/x/mobile v0.0.0-20230301163155-e0f57694e12c // indirect
 	golang.org/x/net v0.35.0 // indirect
 	golang.org/x/sys v0.30.0 // indirect

internal/application/annotation.go

@@ -8,8 +8,15 @@ import (
 	"image/draw"
 	"image/png"
 	"math"
+	"os"
 	"strconv"
 	"strings"
+	"sync"
+
+	xfont "golang.org/x/image/font"
+	"golang.org/x/image/font/basicfont"
+	"golang.org/x/image/font/opentype"
+	"golang.org/x/image/math/fixed"
 )
 
 // Annotation describes a user-drawn mark relative to the selected screenshot.
@@ -18,6 +25,9 @@ type Annotation struct {
 	Tool        string  `json:"tool"`
 	Color       string  `json:"color"`
 	Points      []Point `json:"points"`
+	Text        string  `json:"text,omitempty"`
+	StrokeWidth float64 `json:"strokeWidth,omitempty"`
+	FontSize    float64 `json:"fontSize,omitempty"`
 }
 
 type Point struct {
@@ -27,12 +37,22 @@ type Point struct {
 
 // ApplyAnnotations decodes a PNG, draws all annotations, and re-encodes it.
 func ApplyAnnotations(pngBytes []byte, annotations []Annotation, scale float64) ([]byte, error) {
+	return ApplyAnnotationsWithScale(pngBytes, annotations, scale, scale)
+}
+
+// ApplyAnnotationsWithScale decodes a PNG, draws all annotations using the
+// actual device-pixel scale of the captured image, and re-encodes it.
+func ApplyAnnotationsWithScale(pngBytes []byte, annotations []Annotation, scaleX, scaleY float64) ([]byte, error) {
 	if len(annotations) == 0 {
 		return pngBytes, nil
 	}
-	if scale <= 0 {
+	if scaleX <= 0 {
-		scale = 1
+		scaleX = 1
 	}
+	if scaleY <= 0 {
+		scaleY = scaleX
+	}
+	strokeScale := math.Max(scaleX, scaleY)
 
 	src, err := png.Decode(bytes.NewReader(pngBytes))
 	if err != nil {
@@ -47,14 +67,20 @@ func ApplyAnnotations(pngBytes []byte, annotations []Annotation, scale float64)
 		if err != nil {
 			c = color.RGBA{R: 59, G: 130, B: 246, A: 255}
 		}
-		width := int(math.Max(2, math.Round(3*scale)))
+		strokeWidth := ann.StrokeWidth
+		if strokeWidth <= 0 {
+			strokeWidth = 3
+		}
+		width := int(math.Max(1, math.Round(strokeWidth*strokeScale)))
 		switch ann.Tool {
 		case "pen":
-			drawPolyline(dst, ann.Points, scale, width, c)
+			drawPolyline(dst, ann.Points, scaleX, scaleY, width, c)
 		case "rect":
-			drawRectOutline(dst, ann.Points, scale, width, c)
+			drawRectOutline(dst, ann.Points, scaleX, scaleY, width, c)
 		case "ellipse":
-			drawEllipseOutline(dst, ann.Points, scale, width, c)
+			drawEllipseOutline(dst, ann.Points, scaleX, scaleY, width, c)
+		case "text":
+			drawTextAnnotation(dst, ann, scaleX, scaleY, c)
 		}
 	}
 
@@ -82,22 +108,22 @@ func parseHexColor(hex string) (color.RGBA, error) {
 	}, nil
 }
 
-func drawPolyline(img *image.RGBA, points []Point, scale float64, width int, c color.RGBA) {
+func drawPolyline(img *image.RGBA, points []Point, scaleX, scaleY float64, width int, c color.RGBA) {
 	if len(points) == 1 {
-		drawDot(img, scalePoint(points[0], scale), width, c)
+		drawDot(img, scalePoint(points[0], scaleX, scaleY), width, c)
 		return
 	}
 	for i := 1; i < len(points); i++ {
-		drawLine(img, scalePoint(points[i-1], scale), scalePoint(points[i], scale), width, c)
+		drawLine(img, scalePoint(points[i-1], scaleX, scaleY), scalePoint(points[i], scaleX, scaleY), width, c)
 	}
 }
 
-func drawRectOutline(img *image.RGBA, points []Point, scale float64, width int, c color.RGBA) {
+func drawRectOutline(img *image.RGBA, points []Point, scaleX, scaleY float64, width int, c color.RGBA) {
 	if len(points) < 2 {
 		return
 	}
-	a := scalePoint(points[0], scale)
+	a := scalePoint(points[0], scaleX, scaleY)
-	b := scalePoint(points[len(points)-1], scale)
+	b := scalePoint(points[len(points)-1], scaleX, scaleY)
 	x1, x2 := ordered(a.X, b.X)
 	y1, y2 := ordered(a.Y, b.Y)
 	drawLine(img, Point{X: x1, Y: y1}, Point{X: x2, Y: y1}, width, c)
@@ -106,12 +132,12 @@ func drawRectOutline(img *image.RGBA, points []Point, scale float64, width int,
 	drawLine(img, Point{X: x1, Y: y2}, Point{X: x1, Y: y1}, width, c)
 }
 
-func drawEllipseOutline(img *image.RGBA, points []Point, scale float64, width int, c color.RGBA) {
+func drawEllipseOutline(img *image.RGBA, points []Point, scaleX, scaleY float64, width int, c color.RGBA) {
 	if len(points) < 2 {
 		return
 	}
-	a := scalePoint(points[0], scale)
+	a := scalePoint(points[0], scaleX, scaleY)
-	b := scalePoint(points[len(points)-1], scale)
+	b := scalePoint(points[len(points)-1], scaleX, scaleY)
 	x1, x2 := ordered(a.X, b.X)
 	y1, y2 := ordered(a.Y, b.Y)
 	rx := (x2 - x1) / 2
@@ -170,8 +196,8 @@ func drawDot(img *image.RGBA, p Point, width int, c color.RGBA) {
 	}
 }
 
-func scalePoint(p Point, scale float64) Point {
+func scalePoint(p Point, scaleX, scaleY float64) Point {
-	return Point{X: p.X * scale, Y: p.Y * scale}
+	return Point{X: p.X * scaleX, Y: p.Y * scaleY}
 }
 
 func ordered(a, b float64) (float64, float64) {
@@ -180,3 +206,94 @@ func ordered(a, b float64) (float64, float64) {
 	}
 	return b, a
 }
+
+func drawTextAnnotation(img *image.RGBA, ann Annotation, scaleX, scaleY float64, c color.RGBA) {
+	if len(ann.Points) == 0 {
+		return
+	}
+	text := strings.TrimSpace(ann.Text)
+	if text == "" {
+		return
+	}
+	fontSize := ann.FontSize
+	if fontSize <= 0 {
+		fontSize = 20
+	}
+	face := annotationFontFace(fontSize * scaleY)
+	if face == nil {
+		face = basicfont.Face7x13
+	}
+
+	origin := scalePoint(ann.Points[0], scaleX, scaleY)
+	metrics := face.Metrics()
+	lineHeight := metrics.Height
+	if lineHeight <= 0 {
+		lineHeight = fixed.I(int(math.Ceil(fontSize * 1.2 * scaleY)))
+	}
+	d := &xfont.Drawer{
+		Dst:  img,
+		Src:  image.NewUniform(c),
+		Face: face,
+	}
+	baselineY := fixed.I(int(math.Round(origin.Y))) + metrics.Ascent
+	x := fixed.I(int(math.Round(origin.X)))
+	for _, line := range strings.Split(text, "\n") {
+		line = strings.TrimRight(line, "\r")
+		if line != "" {
+			d.Dot = fixed.Point26_6{X: x, Y: baselineY}
+			d.DrawString(line)
+		}
+		baselineY += lineHeight
+	}
+}
+
+var (
+	annotationFontOnce sync.Once
+	annotationFont     *opentype.Font
+)
+
+func annotationFontFace(size float64) xfont.Face {
+	if size <= 0 {
+		size = 20
+	}
+	annotationFontOnce.Do(func() {
+		annotationFont = loadAnnotationFont()
+	})
+	if annotationFont == nil {
+		return basicfont.Face7x13
+	}
+	face, err := opentype.NewFace(annotationFont, &opentype.FaceOptions{
+		Size:    size,
+		DPI:     72,
+		Hinting: xfont.HintingFull,
+	})
+	if err != nil {
+		return basicfont.Face7x13
+	}
+	return face
+}
+
+func loadAnnotationFont() *opentype.Font {
+	paths := []string{
+		"/System/Library/Fonts/Supplemental/Arial Unicode.ttf",
+		"/Library/Fonts/Arial Unicode.ttf",
+		"/System/Library/Fonts/Hiragino Sans GB.ttc",
+		"/System/Library/Fonts/PingFang.ttc",
+		"/System/Library/Fonts/Helvetica.ttc",
+	}
+	for _, path := range paths {
+		data, err := os.ReadFile(path)
+		if err != nil {
+			continue
+		}
+		if collection, err := opentype.ParseCollection(data); err == nil && collection.NumFonts() > 0 {
+			if font, err := collection.Font(0); err == nil {
+				return font
+			}
+		}
+		if font, err := opentype.Parse(data); err == nil {
+			return font
+		}
+	}
+	return nil
+}

internal/application/annotation_test.go

@@ -51,3 +51,123 @@ func TestApplyAnnotationsNoAnnotationsReturnsOriginalBytes(t *testing.T) {
 		t.Fatalf("expected original bytes")
 	}
 }
+
+func TestApplyAnnotationsDrawsTextIntoPNG(t *testing.T) {
+	src := image.NewRGBA(image.Rect(0, 0, 120, 80))
+	draw.Draw(src, src.Bounds(), &image.Uniform{C: color.White}, image.Point{}, draw.Src)
+
+	var buf bytes.Buffer
+	if err := png.Encode(&buf, src); err != nil {
+		t.Fatalf("encode source: %v", err)
+	}
+
+	out, err := ApplyAnnotations(buf.Bytes(), []Annotation{
+		{
+			Tool:  "text",
+			Color: "#ef4444",
+			Points: []Point{
+				{X: 10, Y: 10},
+			},
+			Text: "T",
+		},
+	}, 1)
+	if err != nil {
+		t.Fatalf("apply annotations: %v", err)
+	}
+
+	img, err := png.Decode(bytes.NewReader(out))
+	if err != nil {
+		t.Fatalf("decode output: %v", err)
+	}
+	found := false
+	for y := 8; y < 40 && !found; y++ {
+		for x := 8; x < 40; x++ {
+			got := color.RGBAModel.Convert(img.At(x, y)).(color.RGBA)
+			if got.R > 180 && got.G < 180 && got.B < 180 {
+				found = true
+				break
+			}
+		}
+	}
+	if !found {
+		t.Fatalf("expected red text pixels near annotation point")
+	}
+}
+
+func TestApplyAnnotationsWithScaleDrawsTextAtDevicePosition(t *testing.T) {
+	src := image.NewRGBA(image.Rect(0, 0, 220, 120))
+	draw.Draw(src, src.Bounds(), &image.Uniform{C: color.White}, image.Point{}, draw.Src)
+
+	var buf bytes.Buffer
+	if err := png.Encode(&buf, src); err != nil {
+		t.Fatalf("encode source: %v", err)
+	}
+
+	out, err := ApplyAnnotationsWithScale(buf.Bytes(), []Annotation{
+		{
+			Tool:     "text",
+			Color:    "#ef4444",
+			Points:   []Point{{X: 50, Y: 20}},
+			Text:     "T",
+			FontSize: 20,
+		},
+	}, 2, 2)
+	if err != nil {
+		t.Fatalf("apply annotations: %v", err)
+	}
+
+	img, err := png.Decode(bytes.NewReader(out))
+	if err != nil {
+		t.Fatalf("decode output: %v", err)
+	}
+	minX := 999
+	found := false
+	for y := 0; y < img.Bounds().Dy(); y++ {
+		for x := 0; x < img.Bounds().Dx(); x++ {
+			got := color.RGBAModel.Convert(img.At(x, y)).(color.RGBA)
+			if got.R > 180 && got.G < 180 && got.B < 180 {
+				found = true
+				if x < minX {
+					minX = x
+				}
+			}
+		}
+	}
+	if !found {
+		t.Fatalf("expected red text pixels")
+	}
+	if minX < 90 {
+		t.Fatalf("expected text to be drawn near scaled x=100, min red x=%d", minX)
+	}
+}
+
+func TestApplyAnnotationsUsesStrokeWidth(t *testing.T) {
+	src := image.NewRGBA(image.Rect(0, 0, 80, 80))
+	draw.Draw(src, src.Bounds(), &image.Uniform{C: color.White}, image.Point{}, draw.Src)
+
+	var buf bytes.Buffer
+	if err := png.Encode(&buf, src); err != nil {
+		t.Fatalf("encode source: %v", err)
+	}
+
+	out, err := ApplyAnnotations(buf.Bytes(), []Annotation{
+		{
+			Tool:        "rect",
+			Color:       "#ef4444",
+			Points:      []Point{{X: 20, Y: 20}, {X: 60, Y: 60}},
+			StrokeWidth: 8,
+		},
+	}, 1)
+	if err != nil {
+		t.Fatalf("apply annotations: %v", err)
+	}
+
+	img, err := png.Decode(bytes.NewReader(out))
+	if err != nil {
+		t.Fatalf("decode output: %v", err)
+	}
+	got := color.RGBAModel.Convert(img.At(20, 24)).(color.RGBA)
+	if got.R < 180 || got.G > 180 || got.B > 180 {
+		t.Fatalf("expected thick rectangle stroke to cover y=24, got %#v", got)
+	}
+}

internal/application/capture_ocr.go

@@ -0,0 +1,57 @@
+package application
+
+import (
+	"context"
+	"fmt"
+	"strings"
+
+	"github.com/mmmy/snapgo/internal/infrastructure/clipboard"
+)
+
+// OCRRecognizer describes a provider capable of extracting text from a PNG
+// screenshot.
+type OCRRecognizer interface {
+	RecognizeText(ctx context.Context, pngBytes []byte) (string, error)
+}
+
+// CaptureOCRService wires screenshot bytes -> OCR provider -> clipboard. It
+// leaves progress reporting to the caller so native and web overlays can share
+// the same status HUD.
+type CaptureOCRService struct {
+	Recognizer OCRRecognizer
+	Clipboard  clipboard.Writer
+}
+
+// Recognize asks the configured OCR provider to extract text from the PNG.
+func (s *CaptureOCRService) Recognize(ctx context.Context, pngBytes []byte) (string, error) {
+	if s.Recognizer == nil {
+		return "", fmt.Errorf("ocr is not configured")
+	}
+	if len(pngBytes) == 0 {
+		return "", fmt.Errorf("empty screenshot")
+	}
+	text, err := s.Recognizer.RecognizeText(ctx, pngBytes)
+	if err != nil {
+		return "", err
+	}
+	text = strings.TrimSpace(text)
+	if text == "" {
+		return "", fmt.Errorf("ocr result is empty")
+	}
+	return text, nil
+}
+
+// CopyText writes the extracted text to the clipboard.
+func (s *CaptureOCRService) CopyText(_ context.Context, text string) error {
+	text = strings.TrimSpace(text)
+	if text == "" {
+		return fmt.Errorf("empty ocr text")
+	}
+	if s.Clipboard == nil {
+		return fmt.Errorf("clipboard is not configured")
+	}
+	if err := s.Clipboard.WriteText(text); err != nil {
+		return fmt.Errorf("clipboard write failed: %w", err)
+	}
+	return nil
+}

internal/application/capture_ocr_test.go

@@ -0,0 +1,50 @@
+package application
+
+import (
+	"context"
+	"testing"
+)
+
+type fakeOCRRecognizer struct {
+	image []byte
+	text  string
+}
+
+func (f *fakeOCRRecognizer) RecognizeText(_ context.Context, pngBytes []byte) (string, error) {
+	f.image = append([]byte(nil), pngBytes...)
+	if f.text == "" {
+		return "extracted text", nil
+	}
+	return f.text, nil
+}
+
+func TestCaptureOCRServiceRecognizesAndCopies(t *testing.T) {
+	ctx := context.Background()
+	recognizer := &fakeOCRRecognizer{}
+	clip := &fakeClipboard{}
+	svc := &CaptureOCRService{Recognizer: recognizer, Clipboard: clip}
+
+	text, err := svc.Recognize(ctx, []byte("png"))
+	if err != nil {
+		t.Fatalf("recognize: %v", err)
+	}
+	if string(recognizer.image) != "png" {
+		t.Fatalf("expected screenshot bytes forwarded, got %q", string(recognizer.image))
+	}
+	if text != "extracted text" {
+		t.Fatalf("expected extracted text, got %q", text)
+	}
+	if err := svc.CopyText(ctx, text); err != nil {
+		t.Fatalf("copy text: %v", err)
+	}
+	if clip.text != "extracted text" {
+		t.Fatalf("expected ocr text copied, got %q", clip.text)
+	}
+}
+
+func TestCaptureOCRServiceRejectsEmptyResult(t *testing.T) {
+	svc := &CaptureOCRService{Recognizer: &fakeOCRRecognizer{text: " \n "}}
+	if _, err := svc.Recognize(context.Background(), []byte("png")); err == nil {
+		t.Fatalf("expected empty OCR result to fail")
+	}
+}

internal/domain/config.go

@@ -107,6 +107,29 @@ type LLMConfig struct {
 	Providers      map[string]LLMProviderConfig `json:"providers"`
 }
 
+// OCRProviderConfig stores one cloud OCR endpoint that accepts a screenshot
+// image and returns extracted text. Aliyun and Volcengine both authenticate
+// with an AccessKey pair, but their signing schemes use slightly different
+// endpoint metadata; keeping Region/Service/Action/Version configurable lets
+// the presets track official API changes without a schema rewrite.
+type OCRProviderConfig struct {
+	Label           string `json:"label"`
+	Endpoint        string `json:"endpoint"`
+	AccessKeyID     string `json:"accessKeyId"`
+	AccessKeySecret string `json:"accessKeySecret"`
+	Region          string `json:"region"`
+	Service         string `json:"service"`
+	Action          string `json:"action"`
+	Version         string `json:"version"`
+	TimeoutSecs     int    `json:"timeoutSecs"`
+}
+
+// OCRConfig controls screenshot text extraction.
+type OCRConfig struct {
+	ActiveProvider string                       `json:"activeProvider"`
+	Providers      map[string]OCRProviderConfig `json:"providers"`
+}
+
 // SSH authentication method identifiers stored in SSHConfig.AuthMethod.
 const (
 	// SSHAuthBuiltin is the legacy combined method (password → agent → key
@@ -129,6 +152,12 @@ const (
 	LLMProviderOpenAI = "openai"
 )
 
+// Built-in OCR provider identifiers.
+const (
+	OCRProviderAliyun     = "aliyun"
+	OCRProviderVolcengine = "volcengine"
+)
+
 // Theme preference identifiers stored in AppConfig.Theme.
 const (
 	ThemeAuto  = "auto"
@@ -172,6 +201,9 @@ type AppConfig struct {
 
 	// LLM holds provider settings for the "copy summary" screenshot action.
 	LLM LLMConfig `json:"llm"`
+
+	// OCR holds provider settings for the "extract text" screenshot action.
+	OCR OCRConfig `json:"ocr"`
 }
 
 // DefaultAppConfig returns sane zero-value defaults used on first launch.
@@ -190,6 +222,7 @@ func DefaultAppConfig() AppConfig {
 			StrictHostKey:      false,
 		},
 		LLM: DefaultLLMConfig(),
+		OCR: DefaultOCRConfig(),
 	}
 	cfg.Normalize()
 	return cfg
@@ -234,6 +267,33 @@ func DefaultLLMConfig() LLMConfig {
 	}
 }
 
+// DefaultOCRConfig returns the built-in OCR provider presets. Users only need
+// to fill AccessKey credentials for the common regions/actions, while advanced
+// accounts can still override endpoint metadata from the settings UI.
+func DefaultOCRConfig() OCRConfig {
+	return OCRConfig{
+		ActiveProvider: OCRProviderAliyun,
+		Providers: map[string]OCRProviderConfig{
+			OCRProviderAliyun: {
+				Label:       "阿里云文字识别",
+				Endpoint:    "https://ocr-api.cn-hangzhou.aliyuncs.com",
+				Action:      "RecognizeGeneral",
+				Version:     "2021-07-07",
+				TimeoutSecs: 30,
+			},
+			OCRProviderVolcengine: {
+				Label:       "火山引擎文字识别",
+				Endpoint:    "https://visual.volcengineapi.com",
+				Region:      "cn-north-1",
+				Service:     "cv",
+				Action:      "OCRNormal",
+				Version:     "2020-08-26",
+				TimeoutSecs: 30,
+			},
+		},
+	}
+}
+
 // Normalize fills defaults into configs written by older app versions while
 // preserving any user-provided provider fields.
 func (c *AppConfig) Normalize() {
@@ -295,6 +355,43 @@ func (c *AppConfig) Normalize() {
 		}
 		c.LLM.Providers[id] = current
 	}
+
+	defaultOCR := DefaultOCRConfig()
+	if c.OCR.ActiveProvider == "" {
+		c.OCR.ActiveProvider = defaultOCR.ActiveProvider
+	}
+	if c.OCR.Providers == nil {
+		c.OCR.Providers = map[string]OCRProviderConfig{}
+	}
+	for id, def := range defaultOCR.Providers {
+		current, ok := c.OCR.Providers[id]
+		if !ok {
+			c.OCR.Providers[id] = def
+			continue
+		}
+		if current.Label == "" {
+			current.Label = def.Label
+		}
+		if current.Endpoint == "" {
+			current.Endpoint = def.Endpoint
+		}
+		if current.Region == "" {
+			current.Region = def.Region
+		}
+		if current.Service == "" {
+			current.Service = def.Service
+		}
+		if current.Action == "" {
+			current.Action = def.Action
+		}
+		if current.Version == "" {
+			current.Version = def.Version
+		}
+		if current.TimeoutSecs == 0 {
+			current.TimeoutSecs = def.TimeoutSecs
+		}
+		c.OCR.Providers[id] = current
+	}
 }
 
 // IsS3Configured reports whether the user has filled the mandatory S3 fields.
@@ -329,3 +426,32 @@ func (c AppConfig) IsLLMConfigured() bool {
 	_, provider, ok := c.ActiveLLMProvider()
 	return ok && provider.BaseURL != "" && provider.APIKey != "" && provider.Model != ""
 }
+
+// ActiveOCRProvider returns the selected OCR provider config plus a boolean
+// indicating whether the selection exists.
+func (c AppConfig) ActiveOCRProvider() (string, OCRProviderConfig, bool) {
+	id := c.OCR.ActiveProvider
+	if id == "" {
+		id = OCRProviderAliyun
+	}
+	provider, ok := c.OCR.Providers[id]
+	return id, provider, ok
+}
+
+// IsOCRConfigured reports whether the selected OCR provider has the fields
+// required to sign and send a request.
+func (c AppConfig) IsOCRConfigured() bool {
+	id, provider, ok := c.ActiveOCRProvider()
+	if !ok ||
+		provider.Endpoint == "" ||
+		provider.AccessKeyID == "" ||
+		provider.AccessKeySecret == "" ||
+		provider.Action == "" ||
+		provider.Version == "" {
+		return false
+	}
+	if id == OCRProviderVolcengine && (provider.Region == "" || provider.Service == "") {
+		return false
+	}
+	return true
+}

internal/infrastructure/ocr/client.go

@@ -0,0 +1,701 @@
+// Package ocr contains cloud OCR adapters.
+package ocr
+
+import (
+	"bytes"
+	"context"
+	"crypto/hmac"
+	"crypto/rand"
+	"crypto/sha256"
+	"encoding/base64"
+	"encoding/hex"
+	"encoding/json"
+	"errors"
+	"fmt"
+	"io"
+	"net/http"
+	"net/url"
+	"sort"
+	"strings"
+	"time"
+
+	"github.com/mmmy/snapgo/internal/application"
+	"github.com/mmmy/snapgo/internal/domain"
+)
+
+// Client calls one configured OCR provider.
+type Client struct {
+	providerID string
+	cfg        domain.OCRProviderConfig
+	httpClient *http.Client
+	now        func() time.Time
+	nonce      func() string
+}
+
+var _ application.OCRRecognizer = (*Client)(nil)
+
+// NewClient validates cfg and returns a reusable OCR client.
+func NewClient(providerID string, cfg domain.OCRProviderConfig) (*Client, error) {
+	if strings.TrimSpace(cfg.Endpoint) == "" {
+		return nil, fmt.Errorf("ocr endpoint is required")
+	}
+	if strings.TrimSpace(cfg.AccessKeyID) == "" {
+		return nil, fmt.Errorf("ocr access key id is required")
+	}
+	if strings.TrimSpace(cfg.AccessKeySecret) == "" {
+		return nil, fmt.Errorf("ocr access key secret is required")
+	}
+	if strings.TrimSpace(cfg.Action) == "" {
+		return nil, fmt.Errorf("ocr action is required")
+	}
+	if strings.TrimSpace(cfg.Version) == "" {
+		return nil, fmt.Errorf("ocr version is required")
+	}
+	switch providerID {
+	case domain.OCRProviderAliyun:
+	case domain.OCRProviderVolcengine:
+		if strings.TrimSpace(cfg.Region) == "" {
+			return nil, fmt.Errorf("volcengine ocr region is required")
+		}
+		if strings.TrimSpace(cfg.Service) == "" {
+			return nil, fmt.Errorf("volcengine ocr service is required")
+		}
+	default:
+		return nil, fmt.Errorf("unsupported ocr provider %q", providerID)
+	}
+	timeout := cfg.TimeoutSecs
+	if timeout <= 0 {
+		timeout = 30
+	}
+	return &Client{
+		providerID: providerID,
+		cfg:        cfg,
+		httpClient: &http.Client{Timeout: time.Duration(timeout) * time.Second},
+		now:        time.Now,
+		nonce:      randomNonce,
+	}, nil
+}
+
+// RecognizeText extracts visible text from a PNG screenshot.
+func (c *Client) RecognizeText(ctx context.Context, pngBytes []byte) (string, error) {
+	if len(pngBytes) == 0 {
+		return "", fmt.Errorf("empty screenshot")
+	}
+	switch c.providerID {
+	case domain.OCRProviderAliyun:
+		return c.recognizeAliyun(ctx, pngBytes)
+	case domain.OCRProviderVolcengine:
+		return c.recognizeVolcengine(ctx, pngBytes)
+	default:
+		return "", fmt.Errorf("unsupported ocr provider %q", c.providerID)
+	}
+}
+
+func (c *Client) recognizeAliyun(ctx context.Context, pngBytes []byte) (string, error) {
+	endpoint, err := parseEndpoint(c.cfg.Endpoint)
+	if err != nil {
+		return "", err
+	}
+	req, err := http.NewRequestWithContext(ctx, http.MethodPost, endpoint.String(), bytes.NewReader(pngBytes))
+	if err != nil {
+		return "", fmt.Errorf("build aliyun ocr request: %w", err)
+	}
+	req.Header.Set("Accept", "application/json")
+	req.Header.Set("Content-Type", "application/octet-stream")
+	c.signAliyun(req, pngBytes)
+	return c.doOCRRequest(req, "aliyun ocr")
+}
+
+func (c *Client) recognizeVolcengine(ctx context.Context, pngBytes []byte) (string, error) {
+	endpoint, err := parseEndpoint(c.cfg.Endpoint)
+	if err != nil {
+		return "", err
+	}
+	query := endpoint.Query()
+	query.Set("Action", c.cfg.Action)
+	query.Set("Version", c.cfg.Version)
+	endpoint.RawQuery = query.Encode()
+
+	body := map[string]string{
+		"image_base64": base64.StdEncoding.EncodeToString(pngBytes),
+	}
+	payload, err := json.Marshal(body)
+	if err != nil {
+		return "", fmt.Errorf("marshal volcengine ocr request: %w", err)
+	}
+	req, err := http.NewRequestWithContext(ctx, http.MethodPost, endpoint.String(), bytes.NewReader(payload))
+	if err != nil {
+		return "", fmt.Errorf("build volcengine ocr request: %w", err)
+	}
+	req.Header.Set("Accept", "application/json")
+	req.Header.Set("Content-Type", "application/json")
+	c.signVolcengine(req, payload)
+	return c.doOCRRequest(req, "volcengine ocr")
+}
+
+func (c *Client) doOCRRequest(req *http.Request, label string) (string, error) {
+	resp, err := c.httpClient.Do(req)
+	if err != nil {
+		return "", fmt.Errorf("%s request: %w", label, err)
+	}
+	defer resp.Body.Close()
+	data, _ := io.ReadAll(io.LimitReader(resp.Body, 8<<20))
+	if resp.StatusCode < 200 || resp.StatusCode >= 300 {
+		return "", fmt.Errorf("%s status %d: %s", label, resp.StatusCode, compactBody(data))
+	}
+	text, err := parseOCRText(data)
+	if err != nil {
+		return "", fmt.Errorf("%s response: %w", label, err)
+	}
+	return text, nil
+}
+
+func (c *Client) signAliyun(req *http.Request, payload []byte) {
+	now := c.now().UTC()
+	payloadHash := sha256Hex(payload)
+	nonce := c.nonce()
+
+	req.Header.Set("x-acs-action", c.cfg.Action)
+	req.Header.Set("x-acs-version", c.cfg.Version)
+	req.Header.Set("x-acs-date", now.Format("2006-01-02T15:04:05Z"))
+	req.Header.Set("x-acs-signature-nonce", nonce)
+	req.Header.Set("x-acs-content-sha256", payloadHash)
+
+	signedHeaders := []string{
+		"content-type",
+		"host",
+		"x-acs-action",
+		"x-acs-content-sha256",
+		"x-acs-date",
+		"x-acs-signature-nonce",
+		"x-acs-version",
+	}
+	canonicalHeaders := canonicalHeaders(req, signedHeaders)
+	canonicalRequest := strings.Join([]string{
+		req.Method,
+		canonicalURI(req.URL),
+		canonicalQuery(req.URL),
+		canonicalHeaders,
+		strings.Join(signedHeaders, ";"),
+		payloadHash,
+	}, "\n")
+	stringToSign := "ACS3-HMAC-SHA256\n" + sha256Hex([]byte(canonicalRequest))
+	signature := hmacSHA256Hex([]byte(c.cfg.AccessKeySecret), []byte(stringToSign))
+	req.Header.Set(
+		"Authorization",
+		fmt.Sprintf("ACS3-HMAC-SHA256 Credential=%s,SignedHeaders=%s,Signature=%s",
+			c.cfg.AccessKeyID,
+			strings.Join(signedHeaders, ";"),
+			signature,
+		),
+	)
+}
+
+func (c *Client) signVolcengine(req *http.Request, payload []byte) {
+	now := c.now().UTC()
+	xDate := now.Format("20060102T150405Z")
+	shortDate := now.Format("20060102")
+	payloadHash := sha256Hex(payload)
+
+	req.Header.Set("X-Date", xDate)
+	req.Header.Set("X-Content-Sha256", payloadHash)
+
+	signedHeaders := []string{
+		"content-type",
+		"host",
+		"x-content-sha256",
+		"x-date",
+	}
+	canonicalHeaders := canonicalHeaders(req, signedHeaders)
+	canonicalRequest := strings.Join([]string{
+		req.Method,
+		canonicalURI(req.URL),
+		canonicalQuery(req.URL),
+		canonicalHeaders,
+		strings.Join(signedHeaders, ";"),
+		payloadHash,
+	}, "\n")
+	scope := strings.Join([]string{shortDate, c.cfg.Region, c.cfg.Service, "request"}, "/")
+	stringToSign := strings.Join([]string{
+		"HMAC-SHA256",
+		xDate,
+		scope,
+		sha256Hex([]byte(canonicalRequest)),
+	}, "\n")
+	signingKey := volcengineSigningKey(c.cfg.AccessKeySecret, shortDate, c.cfg.Region, c.cfg.Service)
+	signature := hmacSHA256Hex(signingKey, []byte(stringToSign))
+	req.Header.Set(
+		"Authorization",
+		fmt.Sprintf("HMAC-SHA256 Credential=%s/%s, SignedHeaders=%s, Signature=%s",
+			c.cfg.AccessKeyID,
+			scope,
+			strings.Join(signedHeaders, ";"),
+			signature,
+		),
+	)
+}
+
+func parseEndpoint(raw string) (*url.URL, error) {
+	endpoint := strings.TrimSpace(raw)
+	if endpoint == "" {
+		return nil, fmt.Errorf("ocr endpoint is required")
+	}
+	if !strings.Contains(endpoint, "://") {
+		endpoint = "https://" + endpoint
+	}
+	parsed, err := url.Parse(endpoint)
+	if err != nil {
+		return nil, fmt.Errorf("parse ocr endpoint: %w", err)
+	}
+	if parsed.Scheme == "" || parsed.Host == "" {
+		return nil, fmt.Errorf("invalid ocr endpoint %q", raw)
+	}
+	if parsed.Path == "" {
+		parsed.Path = "/"
+	}
+	return parsed, nil
+}
+
+func parseOCRText(data []byte) (string, error) {
+	var root any
+	if err := json.Unmarshal(data, &root); err != nil {
+		return "", fmt.Errorf("decode json: %w", err)
+	}
+	if msg := responseError(root); msg != "" {
+		return "", errors.New(msg)
+	}
+	if text := normalizeOCRText(extractOverallOCRText(root, "")); text != "" {
+		return text, nil
+	}
+	parts := collectOCRParts(root, "")
+	if len(parts) == 0 {
+		return "", fmt.Errorf("no text found")
+	}
+	return strings.Join(dedupeNonEmpty(parts), "\n"), nil
+}
+
+func responseError(v any) string {
+	obj, ok := v.(map[string]any)
+	if !ok {
+		return ""
+	}
+	if meta, ok := obj["ResponseMetadata"].(map[string]any); ok {
+		if errObj, ok := meta["Error"].(map[string]any); ok {
+			if msg := stringValue(errObj["Message"]); msg != "" {
+				return msg
+			}
+			if code := stringValue(errObj["Code"]); code != "" {
+				return code
+			}
+		}
+	}
+	if errObj, ok := obj["Error"].(map[string]any); ok {
+		if msg := stringValue(errObj["Message"]); msg != "" {
+			return msg
+		}
+		if msg := stringValue(errObj["message"]); msg != "" {
+			return msg
+		}
+	}
+	if code, ok := numericCode(obj["code"]); ok && code != 0 && code != 10000 {
+		if msg := stringValue(obj["message"]); msg != "" {
+			return msg
+		}
+		if msg := stringValue(obj["msg"]); msg != "" {
+			return msg
+		}
+		return fmt.Sprintf("provider code %.0f", code)
+	}
+	if code := stringValue(obj["Code"]); code != "" && !isSuccessCode(code) {
+		if msg := stringValue(obj["Message"]); msg != "" {
+			return msg
+		}
+		return code
+	}
+	return ""
+}
+
+func extractOverallOCRText(v any, parentKey string) string {
+	switch value := v.(type) {
+	case string:
+		text := strings.TrimSpace(value)
+		if text == "" {
+			return ""
+		}
+		if looksLikeJSON(text) {
+			var nested any
+			if err := json.Unmarshal([]byte(text), &nested); err == nil {
+				if nestedText := extractOverallOCRText(nested, parentKey); nestedText != "" {
+					return nestedText
+				}
+			}
+		}
+		if isAggregateContainerKey(parentKey) {
+			return text
+		}
+		return ""
+	case map[string]any:
+		for _, key := range aggregateTextKeys() {
+			if child, ok := value[key]; ok {
+				if text := extractOverallOCRText(child, key); text != "" {
+					return text
+				}
+			}
+		}
+		for _, key := range responseContainerKeys() {
+			if child, ok := value[key]; ok {
+				if text := extractOverallOCRText(child, key); text != "" {
+					return text
+				}
+			}
+		}
+		keys := make([]string, 0, len(value))
+		for key := range value {
+			keys = append(keys, key)
+		}
+		sort.Strings(keys)
+		for _, key := range keys {
+			if isAggregateTextKey(key) ||
+				isResponseContainerKey(key) ||
+				isBlockContainerKey(key) ||
+				isMetadataKey(key) {
+				continue
+			}
+			if text := extractOverallOCRText(value[key], key); text != "" {
+				return text
+			}
+		}
+		return ""
+	default:
+		return ""
+	}
+}
+
+func collectOCRParts(v any, parentKey string) []string {
+	switch value := v.(type) {
+	case string:
+		text := strings.TrimSpace(value)
+		if text == "" {
+			return nil
+		}
+		if looksLikeJSON(text) {
+			var nested any
+			if err := json.Unmarshal([]byte(text), &nested); err == nil {
+				return collectOCRParts(nested, parentKey)
+			}
+		}
+		if isTextKey(parentKey) || isContainerTextKey(parentKey) {
+			return []string{text}
+		}
+		return nil
+	case []any:
+		parts := make([]string, 0, len(value))
+		for _, item := range value {
+			parts = append(parts, collectOCRParts(item, parentKey)...)
+		}
+		return parts
+	case map[string]any:
+		parts := make([]string, 0)
+		for _, key := range priorityOCRKeys() {
+			if child, ok := value[key]; ok {
+				parts = append(parts, collectOCRParts(child, key)...)
+			}
+		}
+		keys := make([]string, 0, len(value))
+		for key := range value {
+			keys = append(keys, key)
+		}
+		sort.Strings(keys)
+		for _, key := range keys {
+			if isPriorityOCRKey(key) || isMetadataKey(key) {
+				continue
+			}
+			parts = append(parts, collectOCRParts(value[key], key)...)
+		}
+		return parts
+	default:
+		return nil
+	}
+}
+
+func aggregateTextKeys() []string {
+	return []string{
+		"content",
+		"Content",
+		"text",
+		"Text",
+		"full_text",
+		"FullText",
+		"fullText",
+		"plain_text",
+		"PlainText",
+		"plainText",
+		"recognized_text",
+		"RecognizedText",
+		"recognizedText",
+		"ocr_text",
+		"OCRText",
+		"ocrText",
+	}
+}
+
+func responseContainerKeys() []string {
+	return []string{
+		"Data",
+		"data",
+		"Result",
+		"result",
+	}
+}
+
+func priorityOCRKeys() []string {
+	return []string{
+		"Data",
+		"data",
+		"Result",
+		"result",
+		"content",
+		"Content",
+		"text",
+		"Text",
+		"DetectedText",
+		"detected_text",
+		"line_text",
+		"LineText",
+		"line_texts",
+		"LineTexts",
+		"word",
+		"Word",
+		"words",
+		"Words",
+		"words_result",
+		"WordsResult",
+		"prism_wordsInfo",
+		"prism_words_info",
+		"ocr_infos",
+		"OCRInfos",
+		"items",
+		"Items",
+		"blocks",
+		"Blocks",
+		"regions",
+		"Regions",
+	}
+}
+
+func isAggregateTextKey(key string) bool {
+	for _, item := range aggregateTextKeys() {
+		if item == key {
+			return true
+		}
+	}
+	return false
+}
+
+func isAggregateContainerKey(key string) bool {
+	return isAggregateTextKey(key) || isResponseContainerKey(key)
+}
+
+func isResponseContainerKey(key string) bool {
+	for _, item := range responseContainerKeys() {
+		if item == key {
+			return true
+		}
+	}
+	return false
+}
+
+func isBlockContainerKey(key string) bool {
+	switch normalizeKey(key) {
+	case "wordsresult", "prismwordsinfo", "prismwords", "ocrinfos", "items",
+		"blocks", "regions", "words", "linetexts", "lines", "cells":
+		return true
+	default:
+		return false
+	}
+}
+
+func isPriorityOCRKey(key string) bool {
+	for _, item := range priorityOCRKeys() {
+		if item == key {
+			return true
+		}
+	}
+	return false
+}
+
+func isTextKey(key string) bool {
+	switch normalizeKey(key) {
+	case "content", "text", "detectedtext", "linetext", "word", "words", "value":
+		return true
+	default:
+		return false
+	}
+}
+
+func isContainerTextKey(key string) bool {
+	switch normalizeKey(key) {
+	case "data", "result", "linetexts", "texts":
+		return true
+	default:
+		return false
+	}
+}
+
+func isMetadataKey(key string) bool {
+	switch normalizeKey(key) {
+	case "requestid", "request", "code", "status", "statuscode", "success",
+		"error", "errors", "message", "msg", "cost", "angle", "probability",
+		"confidence", "height", "width", "left", "top", "right", "bottom",
+		"x", "y", "responsemetadata":
+		return true
+	default:
+		return false
+	}
+}
+
+func normalizeKey(key string) string {
+	key = strings.ToLower(key)
+	key = strings.ReplaceAll(key, "_", "")
+	key = strings.ReplaceAll(key, "-", "")
+	return key
+}
+
+func dedupeNonEmpty(parts []string) []string {
+	seen := map[string]struct{}{}
+	out := make([]string, 0, len(parts))
+	for _, part := range parts {
+		for _, line := range strings.Split(part, "\n") {
+			line = strings.TrimSpace(line)
+			if line == "" {
+				continue
+			}
+			if _, ok := seen[line]; ok {
+				continue
+			}
+			seen[line] = struct{}{}
+			out = append(out, line)
+		}
+	}
+	return out
+}
+
+func normalizeOCRText(text string) string {
+	lines := strings.Split(strings.TrimSpace(text), "\n")
+	out := make([]string, 0, len(lines))
+	for _, line := range lines {
+		line = strings.TrimSpace(line)
+		if line != "" {
+			out = append(out, line)
+		}
+	}
+	return strings.Join(out, "\n")
+}
+
+func looksLikeJSON(text string) bool {
+	return strings.HasPrefix(text, "{") || strings.HasPrefix(text, "[")
+}
+
+func stringValue(v any) string {
+	if s, ok := v.(string); ok {
+		return strings.TrimSpace(s)
+	}
+	return ""
+}
+
+func numericCode(v any) (float64, bool) {
+	switch n := v.(type) {
+	case float64:
+		return n, true
+	case int:
+		return float64(n), true
+	case json.Number:
+		f, err := n.Float64()
+		return f, err == nil
+	default:
+		return 0, false
+	}
+}
+
+func isSuccessCode(code string) bool {
+	switch strings.ToLower(strings.TrimSpace(code)) {
+	case "", "ok", "success", "200", "10000":
+		return true
+	default:
+		return false
+	}
+}
+
+func canonicalURI(u *url.URL) string {
+	if u == nil || u.EscapedPath() == "" {
+		return "/"
+	}
+	return u.EscapedPath()
+}
+
+func canonicalQuery(u *url.URL) string {
+	if u == nil || u.RawQuery == "" {
+		return ""
+	}
+	values, _ := url.ParseQuery(u.RawQuery)
+	return values.Encode()
+}
+
+func canonicalHeaders(req *http.Request, signedHeaders []string) string {
+	lines := make([]string, 0, len(signedHeaders))
+	for _, key := range signedHeaders {
+		var value string
+		if key == "host" {
+			value = req.URL.Host
+		} else {
+			value = req.Header.Get(key)
+		}
+		lines = append(lines, key+":"+normalizeHeaderValue(value)+"\n")
+	}
+	return strings.Join(lines, "")
+}
+
+func normalizeHeaderValue(value string) string {
+	return strings.Join(strings.Fields(strings.TrimSpace(value)), " ")
+}
+
+func volcengineSigningKey(secret, date, region, service string) []byte {
+	kDate := hmacSHA256([]byte(secret), []byte(date))
+	kRegion := hmacSHA256(kDate, []byte(region))
+	kService := hmacSHA256(kRegion, []byte(service))
+	return hmacSHA256(kService, []byte("request"))
+}
+
+func hmacSHA256(key, data []byte) []byte {
+	mac := hmac.New(sha256.New, key)
+	mac.Write(data)
+	return mac.Sum(nil)
+}
+
+func hmacSHA256Hex(key, data []byte) string {
+	return hex.EncodeToString(hmacSHA256(key, data))
+}
+
+func sha256Hex(data []byte) string {
+	sum := sha256.Sum256(data)
+	return hex.EncodeToString(sum[:])
+}
+
+func randomNonce() string {
+	buf := make([]byte, 16)
+	if _, err := rand.Read(buf); err != nil {
+		return fmt.Sprintf("%d", time.Now().UnixNano())
+	}
+	return hex.EncodeToString(buf)
+}
+
+func compactBody(data []byte) string {
+	text := strings.TrimSpace(string(data))
+	if text == "" {
+		return "<empty body>"
+	}
+	if len(text) > 800 {
+		return text[:800] + "..."
+	}
+	return text
+}

internal/infrastructure/ocr/client_test.go

@@ -0,0 +1,177 @@
+package ocr
+
+import (
+	"bytes"
+	"context"
+	"encoding/base64"
+	"encoding/json"
+	"io"
+	"net/http"
+	"strings"
+	"testing"
+	"time"
+
+	"github.com/mmmy/snapgo/internal/domain"
+)
+
+type roundTripFunc func(*http.Request) (*http.Response, error)
+
+func (f roundTripFunc) RoundTrip(req *http.Request) (*http.Response, error) {
+	return f(req)
+}
+
+func TestAliyunRecognizeTextSignsRawPNGRequest(t *testing.T) {
+	var requestBody []byte
+	transport := roundTripFunc(func(r *http.Request) (*http.Response, error) {
+		if r.URL.Host != "ocr-api.cn-hangzhou.aliyuncs.com" {
+			t.Fatalf("unexpected host %s", r.URL.Host)
+		}
+		if got := r.Header.Get("x-acs-action"); got != "RecognizeGeneral" {
+			t.Fatalf("unexpected action %q", got)
+		}
+		if got := r.Header.Get("x-acs-version"); got != "2021-07-07" {
+			t.Fatalf("unexpected version %q", got)
+		}
+		if got := r.Header.Get("x-acs-date"); got != "2026-07-08T01:02:03Z" {
+			t.Fatalf("unexpected date %q", got)
+		}
+		if got := r.Header.Get("Authorization"); !strings.Contains(got, "ACS3-HMAC-SHA256 Credential=ak") {
+			t.Fatalf("unexpected auth header %q", got)
+		}
+		var err error
+		requestBody, err = io.ReadAll(r.Body)
+		if err != nil {
+			t.Fatalf("read body: %v", err)
+		}
+		return &http.Response{
+			StatusCode: http.StatusOK,
+			Header:     http.Header{"Content-Type": []string{"application/json"}},
+			Body: io.NopCloser(bytes.NewBufferString(
+				`{"Data":"{\"content\":\"第一行\\n第二行\"}"}`,
+			)),
+		}, nil
+	})
+
+	client, err := NewClient(domain.OCRProviderAliyun, domain.OCRProviderConfig{
+		Endpoint:        "https://ocr-api.cn-hangzhou.aliyuncs.com",
+		AccessKeyID:     "ak",
+		AccessKeySecret: "sk",
+		Action:          "RecognizeGeneral",
+		Version:         "2021-07-07",
+	})
+	if err != nil {
+		t.Fatalf("new client: %v", err)
+	}
+	client.httpClient.Transport = transport
+	client.now = func() time.Time { return time.Date(2026, 7, 8, 1, 2, 3, 0, time.UTC) }
+	client.nonce = func() string { return "nonce" }
+
+	text, err := client.RecognizeText(context.Background(), []byte("png"))
+	if err != nil {
+		t.Fatalf("recognize text: %v", err)
+	}
+	if string(requestBody) != "png" {
+		t.Fatalf("expected raw png body, got %q", string(requestBody))
+	}
+	if text != "第一行\n第二行" {
+		t.Fatalf("unexpected OCR text %q", text)
+	}
+}
+
+func TestVolcengineRecognizeTextSignsBase64JSONRequest(t *testing.T) {
+	var requestBody map[string]string
+	transport := roundTripFunc(func(r *http.Request) (*http.Response, error) {
+		if got := r.URL.Query().Get("Action"); got != "OCRNormal" {
+			t.Fatalf("unexpected action %q", got)
+		}
+		if got := r.URL.Query().Get("Version"); got != "2020-08-26" {
+			t.Fatalf("unexpected version %q", got)
+		}
+		if got := r.Header.Get("X-Date"); got != "20260708T010203Z" {
+			t.Fatalf("unexpected x-date %q", got)
+		}
+		if got := r.Header.Get("Authorization"); !strings.Contains(got, "HMAC-SHA256 Credential=ak/20260708/cn-north-1/cv/request") {
+			t.Fatalf("unexpected auth header %q", got)
+		}
+		if err := json.NewDecoder(r.Body).Decode(&requestBody); err != nil {
+			t.Fatalf("decode request: %v", err)
+		}
+		return &http.Response{
+			StatusCode: http.StatusOK,
+			Header:     http.Header{"Content-Type": []string{"application/json"}},
+			Body: io.NopCloser(bytes.NewBufferString(
+				`{"ResponseMetadata":{"RequestId":"r"},"Result":{"LineTexts":["你好","世界"]}}`,
+			)),
+		}, nil
+	})
+
+	client, err := NewClient(domain.OCRProviderVolcengine, domain.OCRProviderConfig{
+		Endpoint:        "https://visual.volcengineapi.com",
+		AccessKeyID:     "ak",
+		AccessKeySecret: "sk",
+		Region:          "cn-north-1",
+		Service:         "cv",
+		Action:          "OCRNormal",
+		Version:         "2020-08-26",
+	})
+	if err != nil {
+		t.Fatalf("new client: %v", err)
+	}
+	client.httpClient.Transport = transport
+	client.now = func() time.Time { return time.Date(2026, 7, 8, 1, 2, 3, 0, time.UTC) }
+
+	text, err := client.RecognizeText(context.Background(), []byte("png"))
+	if err != nil {
+		t.Fatalf("recognize text: %v", err)
+	}
+	if requestBody["image_base64"] != base64.StdEncoding.EncodeToString([]byte("png")) {
+		t.Fatalf("expected base64 image body, got %#v", requestBody)
+	}
+	if text != "你好\n世界" {
+		t.Fatalf("unexpected OCR text %q", text)
+	}
+}
+
+func TestParseOCRTextSupportsWordsResult(t *testing.T) {
+	text, err := parseOCRText([]byte(`{"data":{"words_result":[{"words":"foo"},{"words":"bar"}]}}`))
+	if err != nil {
+		t.Fatalf("parse ocr text: %v", err)
+	}
+	if text != "foo\nbar" {
+		t.Fatalf("unexpected OCR text %q", text)
+	}
+}
+
+func TestParseOCRTextPrefersOverallContentOverBlocks(t *testing.T) {
+	text, err := parseOCRText([]byte(`{
+		"Data": "{\"content\":\"整体识别文本\",\"prism_wordsInfo\":[{\"word\":\"整体\"},{\"word\":\"识别\"},{\"word\":\"文本\"}]}"
+	}`))
+	if err != nil {
+		t.Fatalf("parse ocr text: %v", err)
+	}
+	if text != "整体识别文本" {
+		t.Fatalf("expected overall content only, got %q", text)
+	}
+}
+
+func TestParseOCRTextPrefersResultTextOverWordsResult(t *testing.T) {
+	text, err := parseOCRText([]byte(`{
+		"Result": {
+			"text": "hello world",
+			"words_result": [{"words":"hello"},{"words":"world"}]
+		}
+	}`))
+	if err != nil {
+		t.Fatalf("parse ocr text: %v", err)
+	}
+	if text != "hello world" {
+		t.Fatalf("expected result text only, got %q", text)
+	}
+}
+
+func TestParseOCRTextReturnsProviderError(t *testing.T) {
+	_, err := parseOCRText([]byte(`{"ResponseMetadata":{"Error":{"Code":"BadRequest","Message":"bad image"}}}`))
+	if err == nil || !strings.Contains(err.Error(), "bad image") {
+		t.Fatalf("expected provider error, got %v", err)
+	}
+}

native_overlay_callbacks_darwin.go

@@ -86,6 +86,18 @@ func nativeOverlaySummarize(x, y, w, h C.int, annotationsJSON *C.char) {
 	}()
 }
 
+//export nativeOverlayOCR
+func nativeOverlayOCR(x, y, w, h C.int, annotationsJSON *C.char) {
+	app := consumeNativeOverlayApp()
+	if app == nil {
+		return
+	}
+	result := nativeCaptureResult(x, y, w, h, annotationsJSON)
+	go func() {
+		_ = app.ExtractTextNativeRegion(result)
+	}()
+}
+
 //export nativeOverlayCancel
 func nativeOverlayCancel() {
 	app := consumeNativeOverlayApp()

promo/landing/.env.example

@@ -0,0 +1 @@
+VITE_BASE_PATH=/

promo/landing/.gitignore

@@ -0,0 +1,10 @@
+node_modules
+dist
+dist-ssr
+.vite
+.DS_Store
+*.log
+
+tsconfig.node.tsbuildinfo
+tsconfig.app.tsbuildinfo
+upload_koodo.py

promo/landing/index.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" sizes="64x64" href="%BASE_URL%favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="SnapGo — 截完图，链接已经在你剪贴板里。常驻菜单栏的轻量截图工具，一键上传到你自己的 S3 兼容对象存储。"
+    />
+    <meta property="og:title" content="SnapGo — 截完图，链接已经在剪贴板里" />
+    <meta
+      property="og:description"
+      content="常驻菜单栏的轻量截图工具，一键上传到你自己的 S3 兼容对象存储。"
+    />
+    <title>SnapGo — 截完图，链接已经在剪贴板里</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

promo/landing/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "snapgo-landing",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc -b --noEmit"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.0.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.11"
+  }
+}

promo/landing/src/App.tsx

@@ -0,0 +1,268 @@
+import { useMemo, useRef, useState, type AnimationEvent } from "react";
+import logoUrl from "./assets/logo-universal.png";
+import ShowcaseVisual from "./ShowcaseVisual";
+
+const slides = [
+  {
+    eyebrow: "UPLOAD",
+    title: "直达云端",
+    body: "截图可直接保存至对象存储、远端服务器等，并将地址直接复制到剪切板。",
+    metric: "OBS / SSH / FTP",
+    feature: "支持多种远端存储配置",
+  },
+  {
+    eyebrow: "IDENTIFICATION",
+    title: "智能识别",
+    body: "截图可按你配置进行 AI 识别与总结，直接将你所需要的答案复制到剪切板。",
+    metric: "AI",
+    feature: "支持自定义 prompt 与多 provider",
+  },
+  {
+    eyebrow: "OCR",
+    title: "文字提取",
+    body: "截图可自动识别其中的文本文字，并将文字直接复制到剪切板。",
+    metric: "TEXT",
+    feature: "兼容多个主流的 OCR 服务",
+  },
+  {
+    eyebrow: "CAPTURE",
+    title: "功能完备",
+    body: "完善的截图功能，支持各类标注、打码，直接复制与本机保存。",
+    metric: "⌘⇧S",
+    feature: "全局快捷键唤起",
+  },
+];
+
+type SlideDirection = -1 | 1;
+
+type SlideTransition = {
+  from: number;
+  direction: SlideDirection;
+};
+
+function Logo() {
+  return (
+    <div className="brand" aria-label="SnapGo logo">
+      <div className="brand-main">
+        <span className="logo-mark">
+          <img src={logoUrl} alt="SnapGo" />
+        </span>
+        <span className="brand-name">SnapGo</span>
+      </div>
+      <p className="brand-overline">AI SCREENSHOT UTILITY</p>
+    </div>
+  );
+}
+
+export default function App() {
+  const [activeSlide, setActiveSlide] = useState(0);
+  const [slideTransition, setSlideTransition] = useState<SlideTransition | null>(null);
+  const dragStartX = useRef<number | null>(null);
+  const active = slides[activeSlide];
+
+  function getTransitionClass(role: "entering" | "exiting") {
+    if (!slideTransition) {
+      return "";
+    }
+
+    const edge = slideTransition.direction === 1 ? "right" : "left";
+    return `is-${role}-from-${edge}`;
+  }
+
+  function finishSlideTransition(event: AnimationEvent<HTMLElement>) {
+    if (event.target === event.currentTarget) {
+      setSlideTransition(null);
+    }
+  }
+
+  function selectSlide(nextSlide: number, direction: SlideDirection) {
+    if (slideTransition || nextSlide === activeSlide) {
+      return;
+    }
+
+    setSlideTransition({ from: activeSlide, direction });
+    setActiveSlide(nextSlide);
+  }
+
+  function selectDotSlide(nextSlide: number) {
+    const forwardDistance = (nextSlide - activeSlide + slides.length) % slides.length;
+    const backwardDistance = (activeSlide - nextSlide + slides.length) % slides.length;
+    selectSlide(nextSlide, forwardDistance <= backwardDistance ? 1 : -1);
+  }
+
+  const accentDots = useMemo(
+    () =>
+      slides.map((slide, index) => (
+        <button
+          key={slide.eyebrow}
+          className={`dot ${index === activeSlide ? "is-active" : ""}`}
+          type="button"
+          aria-label={`查看 ${slide.title}`}
+          onClick={() => selectDotSlide(index)}
+        />
+      )),
+    [activeSlide, slideTransition],
+  );
+
+  function moveSlide(direction: SlideDirection) {
+    const nextSlide = (activeSlide + direction + slides.length) % slides.length;
+    selectSlide(nextSlide, direction);
+  }
+
+  function handlePointerEnd(clientX: number) {
+    if (dragStartX.current === null) {
+      return;
+    }
+
+    const delta = clientX - dragStartX.current;
+    dragStartX.current = null;
+    if (Math.abs(delta) < 42) {
+      return;
+    }
+
+    moveSlide(delta > 0 ? -1 : 1);
+  }
+
+  return (
+    <main className="landing-shell">
+      <div className="ambient ambient-one" aria-hidden="true" />
+      <div className="ambient ambient-two" aria-hidden="true" />
+      <Logo />
+
+      <section className="hero-copy" aria-labelledby="landing-title">
+        <h1 id="landing-title">AI 时代的截图工具</h1>
+        <p className="subtitle">高效、便捷、专为 AI 交互设计</p>
+        <p className="intro">
+          智能识图，发布链接，提取文本..
+          <br />
+          你能想到的都能一键解决
+        </p>
+
+        <div className="cta-row" aria-label="下载与项目链接">
+          <div className="download-cta-group">
+            <a className="primary-cta" href="https://gitea.mamamiyear.site/mamamiyear/SnapGo">
+              <span className="apple-logo" aria-hidden="true"></span>
+              下载 Mac 应用
+              <svg viewBox="0 0 20 20" aria-hidden="true">
+                <path d="M5 10h9M10.5 6.5 14 10l-3.5 3.5" />
+              </svg>
+            </a>
+            <span className="platform-note">Windows/Linux 版本紧锣密鼓开发中</span>
+          </div>
+          <a
+            className="github-cta"
+            href="https://gitea.mamamiyear.site/mamamiyear/SnapGo"
+            aria-label="查看源码"
+            title="查看源码"
+          >
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M12 2C6.48 2 2 6.58 2 12.23c0 4.52 2.87 8.35 6.84 9.7.5.09.68-.22.68-.49 0-.24-.01-.88-.01-1.73-2.78.62-3.37-1.37-3.37-1.37-.45-1.18-1.11-1.5-1.11-1.5-.91-.64.07-.63.07-.63 1 .07 1.53 1.06 1.53 1.06.9 1.57 2.34 1.12 2.91.86.09-.67.35-1.12.64-1.38-2.22-.26-4.56-1.14-4.56-5.06 0-1.12.39-2.03 1.03-2.74-.1-.26-.45-1.3.1-2.7 0 0 .84-.28 2.75 1.05A9.32 9.32 0 0 1 12 6.96c.85 0 1.7.12 2.5.34 1.91-1.33 2.75-1.05 2.75-1.05.55 1.4.2 2.44.1 2.7.64.71 1.03 1.62 1.03 2.74 0 3.93-2.34 4.8-4.57 5.05.36.32.68.94.68 1.9 0 1.38-.01 2.49-.01 2.83 0 .27.18.59.69.49A10.1 10.1 0 0 0 22 12.23C22 6.58 17.52 2 12 2Z"
+              />
+            </svg>
+          </a>
+        </div>
+      </section>
+
+      <section className="product-showcase" aria-label="SnapGo 功能效果展示">
+        <div
+          className="device-card"
+          onPointerDown={(event) => {
+            dragStartX.current = event.clientX;
+          }}
+          onPointerUp={(event) => handlePointerEnd(event.clientX)}
+          onPointerCancel={() => {
+            dragStartX.current = null;
+          }}
+          onPointerLeave={() => {
+            dragStartX.current = null;
+          }}
+        >
+          <div className="window-chrome" aria-hidden="true">
+            <span />
+            <span />
+            <span />
+          </div>
+
+          <div className="preview-stage">
+            {slideTransition && (
+              <div
+                key={`visual-${slideTransition.from}`}
+                className={`carousel-slide is-exiting ${getTransitionClass("exiting")}`}
+                aria-hidden="true"
+              >
+                <ShowcaseVisual activeIndex={slideTransition.from} />
+              </div>
+            )}
+            <div
+              key={`visual-${activeSlide}`}
+              className={`carousel-slide ${slideTransition ? `is-entering ${getTransitionClass("entering")}` : ""}`}
+              onAnimationEnd={finishSlideTransition}
+            >
+              <ShowcaseVisual activeIndex={activeSlide} />
+            </div>
+          </div>
+
+          <div className="slide-panel-viewport">
+            {slideTransition && (
+              <div
+                key={`copy-${slideTransition.from}`}
+                className={`slide-panel is-exiting ${getTransitionClass("exiting")}`}
+                aria-hidden="true"
+              >
+                <p>{slides[slideTransition.from].eyebrow}</p>
+                <h2>{slides[slideTransition.from].title}</h2>
+                <span>{slides[slideTransition.from].body}</span>
+              </div>
+            )}
+            <div
+              key={`copy-${activeSlide}`}
+              className={`slide-panel ${slideTransition ? `is-entering ${getTransitionClass("entering")}` : ""}`}
+            >
+              <p>{active.eyebrow}</p>
+              <h2>{active.title}</h2>
+              <span>{active.body}</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="carousel-bar">
+          <button type="button" className="nav-btn" aria-label="上一项" onClick={() => moveSlide(-1)}>
+            <svg viewBox="0 0 20 20" aria-hidden="true">
+              <path d="m12 5-5 5 5 5" />
+            </svg>
+          </button>
+          <div className="slide-meta-viewport" aria-live="polite">
+            {slideTransition && (
+              <div
+                key={`meta-${slideTransition.from}`}
+                className={`slide-meta is-exiting ${getTransitionClass("exiting")}`}
+                aria-hidden="true"
+              >
+                <strong>{slides[slideTransition.from].metric}</strong>
+                <span>{slides[slideTransition.from].feature}</span>
+              </div>
+            )}
+            <div
+              key={`meta-${activeSlide}`}
+              className={`slide-meta ${slideTransition ? `is-entering ${getTransitionClass("entering")}` : ""}`}
+            >
+              <strong>{active.metric}</strong>
+              <span>{active.feature}</span>
+            </div>
+          </div>
+          <div className="dots" aria-label="轮播分页">
+            {accentDots}
+          </div>
+          <button type="button" className="nav-btn" aria-label="下一项" onClick={() => moveSlide(1)}>
+            <svg viewBox="0 0 20 20" aria-hidden="true">
+              <path d="m8 5 5 5-5 5" />
+            </svg>
+          </button>
+        </div>
+      </section>
+    </main>
+  );
+}

promo/landing/src/ShowcaseVisual.tsx

@@ -0,0 +1,435 @@
+import { useState, type PointerEvent } from "react";
+
+type ShowcaseVisualProps = {
+  activeIndex: number;
+};
+
+type CaptureTool = "rect" | "arrow" | "pen" | "mosaic";
+type OcrLanguage = "zh" | "en" | "auto";
+type UploadDestination = {
+  id: "obs" | "ssh" | "ftp";
+  label: string;
+  detail: string;
+};
+
+const destinations: UploadDestination[] = [
+  { id: "obs", label: "OBS", detail: "Bucket" },
+  { id: "ssh", label: "SSH", detail: "Server" },
+  { id: "ftp", label: "FTP", detail: "Remote" },
+];
+
+const uploadRoutes: Record<UploadDestination["id"], string> = {
+  obs: "M 50 30 C 59 30 61 17 71 17",
+  ssh: "M 50 30 C 58 30 63 30 71 30",
+  ftp: "M 50 30 C 59 30 61 43 71 43",
+};
+
+const ocrModes: Array<{
+  id: OcrLanguage;
+  label: string;
+  name: string;
+  lines: string[];
+  characters: number;
+  confidence: string;
+}> = [
+  {
+    id: "zh",
+    label: "中",
+    name: "中文",
+    lines: ["让每一次截图直接进入下一步。"],
+    characters: 15,
+    confidence: "99.5%",
+  },
+  {
+    id: "en",
+    label: "EN",
+    name: "English",
+    lines: ["Capture, understand, share."],
+    characters: 27,
+    confidence: "99.1%",
+  },
+  {
+    id: "auto",
+    label: "AUTO",
+    name: "中英混排",
+    lines: ["Capture, understand, share.", "让每一次截图直接进入下一步。"],
+    characters: 42,
+    confidence: "99.2%",
+  },
+];
+
+const aiModes = [
+  {
+    id: "vision",
+    label: "识图",
+    result: "检测到系统权限弹窗，截图权限尚未开启。",
+    score: "96%",
+  },
+  {
+    id: "summary",
+    label: "总结",
+    result: "当前页面包含 3 个设置项，建议先开启屏幕录制权限。",
+    score: "93%",
+  },
+  {
+    id: "question",
+    label: "问答",
+    result: "前往系统设置中的隐私与安全性即可完成授权。",
+    score: "98%",
+  },
+];
+
+const captureTools: Array<{ id: CaptureTool; label: string }> = [
+  { id: "rect", label: "矩形" },
+  { id: "arrow", label: "箭头" },
+  { id: "pen", label: "画笔" },
+  { id: "mosaic", label: "马赛克" },
+];
+
+function stopSceneDrag(event: PointerEvent<HTMLElement>) {
+  event.stopPropagation();
+}
+
+function UploadScene() {
+  const [selected, setSelected] = useState<UploadDestination>(destinations[0]);
+  const routePath = uploadRoutes[selected.id];
+
+  return (
+    <div className={`visual-scene upload-scene target-${selected.id}`}>
+      <div className="upload-file-card">
+        <div className="upload-file-preview" aria-hidden="true">
+          <div className="screenshot-window-bar">
+            <span><i /><i /><i /></span>
+            <b className="screenshot-address-bar" />
+          </div>
+          <div className="screenshot-window-body">
+            <div className="screenshot-sidebar"><i /><i /><i /><i /></div>
+            <div className="screenshot-main">
+              <span className="screenshot-heading" />
+              <span className="screenshot-row row-long" />
+              <span className="screenshot-row row-medium" />
+              <div className="screenshot-card-grid">
+                <i /><i /><i />
+              </div>
+              <div className="screenshot-copy-lines">
+                <i /><i /><i />
+              </div>
+            </div>
+          </div>
+          <div className="upload-capture-frame">
+            <i className="upload-capture-corner corner-nw" />
+            <i className="upload-capture-corner corner-ne" />
+            <i className="upload-capture-corner corner-sw" />
+            <i className="upload-capture-corner corner-se" />
+          </div>
+        </div>
+        <div className="upload-file-copy">
+          <span>SCREENSHOT-1428.PNG</span>
+        </div>
+      </div>
+
+      <svg
+        className="upload-route"
+        viewBox="0 0 100 60"
+        preserveAspectRatio="none"
+        aria-hidden="true"
+      >
+        <path
+          key={`route-${selected.id}`}
+          className="upload-route-line"
+          d={routePath}
+          vectorEffect="non-scaling-stroke"
+        />
+        <path
+          key={`shimmer-${selected.id}`}
+          className="upload-route-shimmer"
+          d={routePath}
+          pathLength="100"
+          strokeDasharray="16 84"
+          vectorEffect="non-scaling-stroke"
+        />
+      </svg>
+
+      <span key={`packet-${selected.id}`} className={`upload-packet packet-${selected.id}`} aria-hidden="true">
+        <svg viewBox="0 0 20 20">
+          <path d="M 5 10 H 14 M 10.5 6.5 L 14 10 L 10.5 13.5" />
+        </svg>
+      </span>
+
+      <div className="upload-destinations" role="group" aria-label="上传目标">
+        {destinations.map((destination) => (
+          <button
+            key={destination.id}
+            type="button"
+            className={destination.id === selected.id ? "is-selected" : ""}
+            aria-pressed={destination.id === selected.id}
+            aria-label={`选择 ${destination.label} 上传目标`}
+            onPointerDown={stopSceneDrag}
+            onClick={() => setSelected(destination)}
+          >
+            <span className="destination-status" />
+            <strong>{destination.label}</strong>
+            <small>{destination.detail}</small>
+          </button>
+        ))}
+      </div>
+
+      <div className="upload-result scene-float-delayed" aria-live="polite">
+        <span className="result-check" aria-hidden="true">✓</span>
+        <div>
+          <small>LINK COPIED</small>
+          <strong>cdn.snapgo.dev/{selected.id}/...</strong>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function IdentificationScene() {
+  const [mode, setMode] = useState(aiModes[0]);
+
+  return (
+    <div className="visual-scene identification-scene">
+      <div className="ai-source-card">
+        <div className="mini-window-bar" aria-hidden="true">
+          <span />
+          <span />
+          <span />
+        </div>
+        <div className="ai-source-content">
+          <span className="source-sidebar" />
+          <div className="source-settings">
+            <i />
+            <i />
+            <i />
+          </div>
+          <div className="source-dialog">
+            <span className="dialog-icon">!</span>
+            <div>
+              <strong>Permission required</strong>
+              <small>Screen Recording</small>
+            </div>
+          </div>
+        </div>
+        <span className="ai-scan-line" aria-hidden="true" />
+      </div>
+
+      <div className="ai-core" aria-hidden="true">
+        <span>AI</span>
+        <i className="ai-orbit orbit-one" />
+        <i className="ai-orbit orbit-two" />
+      </div>
+
+      <div className="ai-result-card scene-float-soft" aria-live="polite">
+        <div className="ai-result-heading">
+          <span className="ai-spark" aria-hidden="true">✦</span>
+          <strong>SnapGo Vision</strong>
+          <i />
+        </div>
+        <p>{mode.result}</p>
+        <div className="confidence-row">
+          <span><i /></span>
+          <small>{mode.score} confidence</small>
+        </div>
+      </div>
+
+      <div className="ai-mode-switch" role="group" aria-label="AI 处理模式">
+        {aiModes.map((item) => (
+          <button
+            key={item.id}
+            type="button"
+            className={item.id === mode.id ? "is-selected" : ""}
+            aria-pressed={item.id === mode.id}
+            onPointerDown={stopSceneDrag}
+            onClick={() => setMode(item)}
+          >
+            {item.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function OcrScene() {
+  const [copied, setCopied] = useState(false);
+  const [language, setLanguage] = useState<OcrLanguage>("auto");
+  const activeMode = ocrModes.find((mode) => mode.id === language) ?? ocrModes[2];
+
+  function selectLanguage(mode: OcrLanguage) {
+    setLanguage(mode);
+    setCopied(false);
+  }
+
+  return (
+    <div className="visual-scene ocr-scene">
+      <div className="ocr-document">
+        <div className="document-header">
+          <span />
+          <div><i /><i /><i /></div>
+        </div>
+        <div className="document-copy">
+          <strong>Release notes</strong>
+          <span className="text-line line-long" />
+          <span className="text-line line-medium" />
+          <span className="text-line line-highlight"><i>Capture, understand, share.</i></span>
+          <span className="text-line line-long" />
+          <span className="text-line line-short" />
+          <span className="text-line line-highlight secondary"><i>让每一次截图直接进入下一步。</i></span>
+        </div>
+        <span className="ocr-scan-bar" aria-hidden="true" />
+      </div>
+
+      <div className="ocr-selection-card scene-float-delayed">
+        <div className="selection-heading">
+          <span>OCR</span>
+          <small>{activeMode.name}</small>
+        </div>
+        <p>
+          {activeMode.lines.map((line) => <span key={line}>{line}</span>)}
+        </p>
+        <div className="selection-meta">
+          <span>{activeMode.characters} characters</span>
+          <strong>{activeMode.confidence}</strong>
+        </div>
+        <button
+          type="button"
+          className={copied ? "is-copied" : ""}
+          aria-pressed={copied}
+          onPointerDown={stopSceneDrag}
+          onClick={() => setCopied((current) => !current)}
+        >
+          <span aria-hidden="true">{copied ? "✓" : "⌘C"}</span>
+          {copied ? "已复制" : "复制文本"}
+        </button>
+      </div>
+
+      <div className="ocr-language-pills" role="group" aria-label="OCR 识别语言">
+        {ocrModes.map((mode) => (
+          <button
+            key={mode.id}
+            type="button"
+            className={mode.id === language ? "is-selected" : ""}
+            aria-pressed={mode.id === language}
+            onPointerDown={stopSceneDrag}
+            onClick={() => selectLanguage(mode.id)}
+          >
+            {mode.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ToolGlyph({ tool }: { tool: CaptureTool }) {
+  if (tool === "rect") {
+    return <svg viewBox="0 0 20 20" aria-hidden="true"><rect x="4" y="4" width="12" height="12" rx="2" /></svg>;
+  }
+
+  if (tool === "arrow") {
+    return <svg viewBox="0 0 20 20" aria-hidden="true"><path d="M4 15 15 4M9 4h6v6" /></svg>;
+  }
+
+  if (tool === "pen") {
+    return <svg viewBox="0 0 20 20" aria-hidden="true"><path d="m5 15 2.2-4.7L13.8 3.7l2.5 2.5-6.6 6.6L5 15Z" /><path d="m11.8 5.7 2.5 2.5" /></svg>;
+  }
+
+  return (
+    <svg viewBox="0 0 20 20" aria-hidden="true">
+      <rect x="3" y="3" width="5" height="5" />
+      <rect x="12" y="3" width="5" height="5" />
+      <rect x="3" y="12" width="5" height="5" />
+      <rect x="12" y="12" width="5" height="5" />
+    </svg>
+  );
+}
+
+function AnnotationPreview({ tool }: { tool: CaptureTool }) {
+  if (tool === "arrow") {
+    return (
+      <svg className="annotation-arrow" viewBox="0 0 180 110" aria-hidden="true">
+        <path d="M28 84C66 78 91 56 139 31" />
+        <path d="m121 27 20 3-8 18" />
+      </svg>
+    );
+  }
+
+  if (tool === "pen") {
+    return (
+      <svg className="annotation-pen" viewBox="0 0 180 110" aria-hidden="true">
+        <path d="M24 76c20-42 36 25 57-6s33-33 48-4c9 18 21 13 29-7" />
+      </svg>
+    );
+  }
+
+  if (tool === "mosaic") {
+    return <div className="annotation-mosaic" aria-hidden="true">{Array.from({ length: 20 }, (_, index) => <span key={index} />)}</div>;
+  }
+
+  return <div className="annotation-rect" aria-hidden="true"><span /><span /><span /><span /></div>;
+}
+
+function CaptureScene() {
+  const [tool, setTool] = useState<CaptureTool>("rect");
+
+  return (
+    <div className="visual-scene capture-scene">
+      <div className="capture-canvas">
+        <div className="canvas-app-bar">
+          <span />
+          <strong>Project overview</strong>
+          <i />
+        </div>
+        <div className="canvas-layout" aria-hidden="true">
+          <span className="canvas-sidebar" />
+          <div className="canvas-content">
+            <i className="canvas-heading" />
+            <i className="canvas-line" />
+            <i className="canvas-line short" />
+            <div className="canvas-chart"><span /><span /><span /><span /><span /></div>
+          </div>
+        </div>
+        <div className="capture-selection">
+          <span className="selection-size">1280 × 720</span>
+          <i className="selection-handle handle-nw" />
+          <i className="selection-handle handle-ne" />
+          <i className="selection-handle handle-sw" />
+          <i className="selection-handle handle-se" />
+          <AnnotationPreview tool={tool} />
+        </div>
+      </div>
+
+      <div className="capture-toolbar" role="toolbar" aria-label="截图标注工具">
+        {captureTools.map((item) => (
+          <button
+            key={item.id}
+            type="button"
+            className={item.id === tool ? "is-selected" : ""}
+            aria-label={item.label}
+            aria-pressed={item.id === tool}
+            title={item.label}
+            onPointerDown={stopSceneDrag}
+            onClick={() => setTool(item.id)}
+          >
+            <ToolGlyph tool={item.id} />
+          </button>
+        ))}
+        <span className="toolbar-divider" />
+        <span className="toolbar-color" aria-hidden="true" />
+      </div>
+    </div>
+  );
+}
+
+const scenes = [UploadScene, IdentificationScene, OcrScene, CaptureScene];
+
+export default function ShowcaseVisual({ activeIndex }: ShowcaseVisualProps) {
+  const Scene = scenes[activeIndex] ?? UploadScene;
+
+  return (
+    <div className="scene-parallax" data-testid="showcase-visual">
+      <Scene />
+    </div>
+  );
+}

promo/landing/src/main.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

promo/landing/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

promo/landing/tsconfig.app.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "useDefineForClassFields": true,
+    "allowImportingTsExtensions": false,
+    "noEmit": true
+  },
+  "include": ["src"]
+}

promo/landing/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

promo/landing/tsconfig.node.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": ["vite.config.ts"]
+}

promo/landing/vite.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig, loadEnv } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, ".", "");
+
+  return {
+    base: env.VITE_BASE_PATH || "/",
+    plugins: [react(), tailwindcss()],
+    server: {
+      port: 5273,
+      open: true,
+    },
+  };
+});