Initial commit: 包装审核 POC、Docker 与前后端

Made-with: Cursor

frontend/src/App.tsx

@@ -0,0 +1,710 @@
+import { useCallback, useMemo, useRef, useState } from 'react'
+import type { FormEvent, KeyboardEvent } from 'react'
+import './App.css'
+import { LogSidebar } from './components/LogSidebar'
+import { PdfPreview } from './components/PdfPreview'
+import type { BarcodeResult, FieldResult, ProcessResponse, ValidationStatus } from './types'
+import { MOCK_RESULT } from './mockData'
+
+
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL ?? ''
+const DEFAULT_AI_FILENAME = '【2026-04-09】端午 - 背标 - 天问.ai'
+const DEFAULT_WORD_FILENAME = '天问礼品粽【260331】.docx'
+
+
+/**
+ * 表格渲染组件：
+ * - 优先使用 MinerU 原始 HTML（保留 colspan/rowspan，适合营养成分表等复杂表格）
+ * - 回退到 ｜ 分隔文本解析（简单表格）
+ */
+function FieldTable({ text, tableHtml }: { text: string; tableHtml?: string | null }) {
+  if (tableHtml) {
+    return (
+      <div
+        className="field-table-wrap field-table-html"
+        // HTML 来自自有 MinerU 解析结果，非用户输入，风险可控
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{ __html: tableHtml }}
+      />
+    )
+  }
+
+  // 回退：｜ 分隔文本 → React 表格
+  const rows = text
+    .split('\n')
+    .map((r) => r.trim())
+    .filter(Boolean)
+    .map((r) => r.split('｜'))
+  if (rows.length === 0) return null
+  const [header, ...body] = rows
+  return (
+    <div className="field-table-wrap">
+      <table className="field-table">
+        <thead>
+          <tr>
+            {header.map((cell, i) => (
+              <th key={i}>{cell}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {body.map((row, ri) => (
+            <tr key={ri}>
+              {row.map((cell, ci) => (
+                <td key={ci}>{cell}</td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+/**
+ * 检测依据渲染：
+ * - GFM pipe 表格行（`| 能量 | 1004千焦 | ...`）→ HTML 表格
+ * - 全角 ｜ 分隔行 → HTML 表格
+ * - block_type==='table' 且无法识别为表格结构时 → 回退到 tableHtml 渲染
+ * - 普通文本 → <p>
+ */
+function ExcerptView({
+  excerpt,
+  reason,
+  blockType,
+  tableHtml,
+}: {
+  excerpt: string | null
+  reason: string
+  blockType?: string
+  tableHtml?: string | null
+}) {
+  if (excerpt) {
+    // ① GFM 半角 pipe 表格（pandoc Markdown 输出）
+    const halfPipeRows = excerpt
+      .split('\n')
+      .map((r) => r.trim())
+      .filter((r) => r.startsWith('|'))
+      .filter((r) => !/^\|[\s\-:|\s]+\|$/.test(r))
+      .map((r) =>
+        r
+          .replace(/^\|/, '')
+          .replace(/\|$/, '')
+          .split('|')
+          .map((c) => c.trim()),
+      )
+      .filter((row) => row.length > 0 && row.some(Boolean))
+
+    if (halfPipeRows.length > 0) {
+      return (
+        <div className="field-table-wrap field-excerpt-table">
+          <table className="field-table">
+            <tbody>
+              {halfPipeRows.map((row, ri) => (
+                <tr key={ri}>
+                  {row.map((cell, ci) => (
+                    <td key={ci}>{cell || '—'}</td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )
+    }
+
+    // ② 全角 ｜ 分隔（python-docx 回退 / MinerU 表格文本）
+    const fullPipeRows = excerpt
+      .split('\n')
+      .map((r) => r.trim())
+      .filter((r) => r.includes('｜'))
+      .map((r) => r.split('｜').map((c) => c.trim()))
+      .filter((row) => row.length > 1 && row.some(Boolean))
+
+    if (fullPipeRows.length > 0) {
+      return (
+        <div className="field-table-wrap field-excerpt-table">
+          <table className="field-table">
+            <tbody>
+              {fullPipeRows.map((row, ri) => (
+                <tr key={ri}>
+                  {row.map((cell, ci) => (
+                    <td key={ci}>{cell || '—'}</td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )
+    }
+
+    // ③ 表格字段但摘要是纯文本 → 回退用字段自身的 tableHtml 作为参考
+    if (blockType === 'table' && tableHtml) {
+      return (
+        <div
+          className="field-table-wrap field-table-html field-excerpt-table"
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{ __html: tableHtml }}
+        />
+      )
+    }
+
+    return <p className="field-reason">{excerpt}</p>
+  }
+
+  // 无摘要但有 tableHtml
+  if (blockType === 'table' && tableHtml) {
+    return (
+      <div
+        className="field-table-wrap field-table-html field-excerpt-table"
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{ __html: tableHtml }}
+      />
+    )
+  }
+
+  return <p className="field-reason">{reason || '—'}</p>
+}
+
+function statusLabel(status: FieldResult['validation_status']): string {
+  if (status === 'matched') return '校验成功'
+  if (status === 'empty_or_garbled') return '文本异常'
+  return '校验失败'
+}
+
+function statusIcon(status: FieldResult['validation_status']): string {
+  if (status === 'matched') return '✓'
+  if (status === 'empty_or_garbled') return '!'
+  return '✗'
+}
+
+function statusTone(status: FieldResult['validation_status']): string {
+  if (status === 'matched') return '通过'
+  if (status === 'empty_or_garbled') return '异常'
+  return '失败'
+}
+
+
+function App() {
+  const [aiFile, setAiFile] = useState<File | null>(null)
+  const [wordFile, setWordFile] = useState<File | null>(null)
+  const [result, setResult] = useState<ProcessResponse | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [hoveredFieldId, setHoveredFieldId] = useState<string | null>(null)
+  const [selectedFieldId, setSelectedFieldId] = useState<string | null>(null)
+  const [selectedBarcodeIndex, setSelectedBarcodeIndex] = useState<number | null>(null)
+  const [sidebarTab, setSidebarTab] = useState<'fields' | 'word' | 'barcode'>('fields')
+  const [sidebarWidth, setSidebarWidth] = useState(360)
+  const isResizing = useRef(false)
+  const fieldCardRefs = useRef<Map<string, HTMLDivElement>>(new Map())
+  const barcodeCardRefs = useRef<Map<number, HTMLDivElement>>(new Map())
+
+  /** 点击统计卡片 → 跳到该类型第一个字段 */
+  function jumpToFirstOfStatus(status: ValidationStatus | 'all') {
+    if (!result) return
+    const target =
+      status === 'all'
+        ? result.fields[0]
+        : result.fields.find((f) => f.validation_status === status)
+    if (!target) return
+
+    setSidebarTab('fields')
+    setSelectedFieldId(target.id)
+
+    requestAnimationFrame(() => {
+      fieldCardRefs.current.get(target.id)?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+      })
+    })
+  }
+
+  /**
+   * 右侧预览点击字段 overlay → 左侧切到字段 tab 并滚动到对应卡片。
+   */
+  const handlePreviewFieldSelect = useCallback((fieldId: string) => {
+    setSelectedFieldId(fieldId)
+    setSidebarTab('fields')
+    requestAnimationFrame(() => {
+      fieldCardRefs.current.get(fieldId)?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+      })
+    })
+  }, [])
+
+  /**
+   * 右侧预览点击条码 overlay → 切到条码 tab 并滚动到对应卡片。
+   */
+  const handlePreviewBarcodeSelect = useCallback((index: number) => {
+    setSelectedBarcodeIndex(index)
+    setSidebarTab('barcode')
+    requestAnimationFrame(() => {
+      barcodeCardRefs.current.get(index)?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+      })
+    })
+  }, [])
+
+  const handleResizeStart = useCallback((e: React.MouseEvent) => {
+    e.preventDefault()
+    isResizing.current = true
+    const startX = e.clientX
+    const startWidth = sidebarWidth
+
+    function onMove(ev: MouseEvent) {
+      if (!isResizing.current) return
+      const next = Math.max(220, Math.min(640, startWidth + ev.clientX - startX))
+      setSidebarWidth(next)
+    }
+
+    function onUp() {
+      isResizing.current = false
+      document.body.style.cursor = ''
+      document.body.style.userSelect = ''
+      document.removeEventListener('mousemove', onMove)
+      document.removeEventListener('mouseup', onUp)
+    }
+
+    document.body.style.cursor = 'col-resize'
+    document.body.style.userSelect = 'none'
+    document.addEventListener('mousemove', onMove)
+    document.addEventListener('mouseup', onUp)
+  }, [sidebarWidth])
+
+  const summary = useMemo(() => {
+    const fields = result?.fields ?? []
+    return {
+      total: fields.length,
+      matched: fields.filter((f) => f.validation_status === 'matched').length,
+      unmatched: fields.filter((f) => f.validation_status === 'unmatched').length,
+      garbled: fields.filter((f) => f.validation_status === 'empty_or_garbled').length,
+    }
+  }, [result])
+
+  function handleFieldCardKeyDown(event: KeyboardEvent<HTMLDivElement>, fieldId: string) {
+    if (event.key !== 'Enter' && event.key !== ' ') {
+      return
+    }
+
+    event.preventDefault()
+    setSelectedFieldId(fieldId)
+  }
+
+  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+
+    setLoading(true)
+    setError(null)
+
+    try {
+      const requestInit: RequestInit = { method: 'POST' }
+
+      if (aiFile || wordFile) {
+        const formData = new FormData()
+        if (aiFile) {
+          formData.append('ai_file', aiFile)
+        }
+        if (wordFile) {
+          formData.append('word_file', wordFile)
+        }
+        requestInit.body = formData
+      }
+
+      const response = await fetch(`${API_BASE_URL}/api/process`, requestInit)
+
+      const payload = await response.json()
+      if (!response.ok) {
+        throw new Error(payload.detail ?? '处理失败，请稍后重试。')
+      }
+
+      setResult(payload)
+      setSelectedFieldId(payload.fields[0]?.id ?? null)
+      setHoveredFieldId(null)
+    } catch (caughtError) {
+      setResult(null)
+      setSelectedFieldId(null)
+      setHoveredFieldId(null)
+      setError(caughtError instanceof Error ? caughtError.message : '发生未知错误')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <>
+      <LogSidebar apiBaseUrl={API_BASE_URL} />
+    <main className="app-shell">
+      {/* ── 顶部区（向下滚动后被 workspace 覆盖） ── */}
+      <section className="top-panel">
+        <div className="top-panel-intro">
+          <div className="brand-icon" aria-hidden="true">🔍</div>
+          <div>
+            <p className="eyebrow">诸老大包装审核</p>
+            <h1>智能合规审核系统</h1>
+            <p className="hero-copy">
+              上传 Illustrator 源文件与 Word 校对稿，系统会将设计文件转换为 PDF 后交给 MinerU 解析，
+              再把识别出的版面文字与 Word 内容逐块比对，并在右侧预览中同步高亮定位。
+            </p>
+          </div>
+        </div>
+
+        <form className="upload-panel" onSubmit={handleSubmit}>
+          <label className="upload-field">
+            <span>AI 设计文件</span>
+            <div className={`upload-dropzone ${(aiFile ?? DEFAULT_AI_FILENAME) ? 'has-file' : ''}`}>
+              <span className="upload-dropzone-icon">{aiFile ? '📄' : '🧪'}</span>
+              <span className="upload-dropzone-text">
+                {aiFile?.name ?? DEFAULT_AI_FILENAME}
+              </span>
+              <input
+                type="file"
+                accept=".ai,.pdf"
+                onChange={(e) => setAiFile(e.target.files?.[0] ?? null)}
+              />
+            </div>
+          </label>
+
+          <label className="upload-field">
+            <span>Word 校对稿</span>
+            <div className={`upload-dropzone ${(wordFile ?? DEFAULT_WORD_FILENAME) ? 'has-file' : ''}`}>
+              <span className="upload-dropzone-icon">{wordFile ? '📝' : '🧪'}</span>
+              <span className="upload-dropzone-text">
+                {wordFile?.name ?? DEFAULT_WORD_FILENAME}
+              </span>
+              <input
+                type="file"
+                accept=".docx"
+                onChange={(e) => setWordFile(e.target.files?.[0] ?? null)}
+              />
+            </div>
+          </label>
+
+          <button className="primary-button" type="submit" disabled={loading}>
+            {loading ? '解析中…' : '开始解析'}
+          </button>
+        </form>
+
+        {/* 仅开发环境显示：快速载入写死测试数据 */}
+        {import.meta.env.DEV && (
+          <button
+            className="mock-button"
+            type="button"
+            onClick={() => {
+              setResult(MOCK_RESULT)
+              setSelectedFieldId(MOCK_RESULT.fields[0]?.id ?? null)
+              setHoveredFieldId(null)
+              setError(null)
+            }}
+          >
+            🧪 载入测试数据
+          </button>
+        )}
+
+        {error ? <p className="error-banner">{error}</p> : null}
+      </section>
+
+      {/* ── 工作区（sticky，滚动后固定为全屏） ── */}
+      <section
+        className="workspace"
+        style={{ gridTemplateColumns: `${sidebarWidth}px 20px minmax(0, 1fr)` }}
+      >
+        <aside className="sidebar">
+          <div className="sidebar-header">
+            <div>
+              <p className="section-kicker">字段列表</p>
+              <h2>解析结果</h2>
+            </div>
+            {result ? (
+              <div className="stats-grid">
+                <div
+                  className="stat-card stat-card-clickable"
+                  role="button"
+                  tabIndex={0}
+                  title="跳到第一个字段"
+                  onClick={() => jumpToFirstOfStatus('all')}
+                  onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && jumpToFirstOfStatus('all')}
+                >
+                  <span>总数</span>
+                  <strong>{summary.total}</strong>
+                </div>
+                <div
+                  className={`stat-card matched${summary.matched > 0 ? ' stat-card-clickable' : ''}`}
+                  role={summary.matched > 0 ? 'button' : undefined}
+                  tabIndex={summary.matched > 0 ? 0 : undefined}
+                  title={summary.matched > 0 ? '跳到第一个通过项' : undefined}
+                  onClick={() => summary.matched > 0 && jumpToFirstOfStatus('matched')}
+                  onKeyDown={(e) => summary.matched > 0 && (e.key === 'Enter' || e.key === ' ') && jumpToFirstOfStatus('matched')}
+                >
+                  <span>成功</span>
+                  <strong>{summary.matched}</strong>
+                </div>
+                <div
+                  className={`stat-card unmatched${summary.unmatched > 0 ? ' stat-card-clickable' : ''}`}
+                  role={summary.unmatched > 0 ? 'button' : undefined}
+                  tabIndex={summary.unmatched > 0 ? 0 : undefined}
+                  title={summary.unmatched > 0 ? '跳到第一个失败项' : undefined}
+                  onClick={() => summary.unmatched > 0 && jumpToFirstOfStatus('unmatched')}
+                  onKeyDown={(e) => summary.unmatched > 0 && (e.key === 'Enter' || e.key === ' ') && jumpToFirstOfStatus('unmatched')}
+                >
+                  <span>失败</span>
+                  <strong>{summary.unmatched}</strong>
+                </div>
+                <div
+                  className={`stat-card garbled${summary.garbled > 0 ? ' stat-card-clickable' : ''}`}
+                  role={summary.garbled > 0 ? 'button' : undefined}
+                  tabIndex={summary.garbled > 0 ? 0 : undefined}
+                  title={summary.garbled > 0 ? '跳到第一个异常项' : undefined}
+                  onClick={() => summary.garbled > 0 && jumpToFirstOfStatus('empty_or_garbled')}
+                  onKeyDown={(e) => summary.garbled > 0 && (e.key === 'Enter' || e.key === ' ') && jumpToFirstOfStatus('empty_or_garbled')}
+                >
+                  <span>异常</span>
+                  <strong>{summary.garbled}</strong>
+                </div>
+              </div>
+            ) : null}
+          </div>
+
+          {/* ── Tab 切换 ── */}
+          <div className="sidebar-tabs">
+            <button
+              className={`sidebar-tab${sidebarTab === 'fields' ? ' active' : ''}`}
+              onClick={() => setSidebarTab('fields')}
+              type="button"
+            >
+              字段解析结果
+            </button>
+            <button
+              className={`sidebar-tab${sidebarTab === 'word' ? ' active' : ''}`}
+              onClick={() => setSidebarTab('word')}
+              type="button"
+            >
+              Word 解析结果
+            </button>
+            <button
+              className={`sidebar-tab${sidebarTab === 'barcode' ? ' active' : ''}`}
+              onClick={() => setSidebarTab('barcode')}
+              type="button"
+            >
+              条形码识别
+            </button>
+          </div>
+
+          {/* ── Tab 内容 ── */}
+          {sidebarTab === 'fields' ? (
+            <div className="field-list">
+              {result?.fields.length ? (
+                result.fields.map((field) => {
+                  const isSelected = field.id === selectedFieldId
+                  const isHovered = field.id === hoveredFieldId
+
+                  return (
+                    <div
+                      key={field.id}
+                      ref={(node) => {
+                        if (node) fieldCardRefs.current.set(field.id, node)
+                        else fieldCardRefs.current.delete(field.id)
+                      }}
+                      className={[
+                        'field-card',
+                        `status-${field.validation_status}`,
+                        isSelected ? 'selected' : '',
+                        isHovered ? 'hovered' : '',
+                      ]
+                        .filter(Boolean)
+                        .join(' ')}
+                      role="button"
+                      tabIndex={0}
+                      aria-pressed={isSelected}
+                      onMouseEnter={() => setHoveredFieldId(field.id)}
+                      onMouseLeave={() =>
+                        setHoveredFieldId((cur) => (cur === field.id ? null : cur))
+                      }
+                      onClick={() => setSelectedFieldId(field.id)}
+                      onKeyDown={(event) => handleFieldCardKeyDown(event, field.id)}
+                    >
+                      <div className="field-card-header">
+                        <div className="field-card-title-group">
+                          <span className="field-label">审核项</span>
+                          <span className="field-id">{field.id}</span>
+                        </div>
+                        <span className={`pill pill-${field.validation_status}`}>
+                          {statusIcon(field.validation_status)}&nbsp;{statusTone(field.validation_status)}
+                        </span>
+                      </div>
+                      <div className="field-section">
+                        <span className="field-label">审核内容</span>
+                        {field.block_type === 'table' && (field.table_html || field.text.includes('｜')) ? (
+                          <FieldTable text={field.text} tableHtml={field.table_html} />
+                        ) : (
+                          <pre className="field-text">
+                            {field.text || field.normalized_text || '（版面文字为空）'}
+                          </pre>
+                        )}
+                      </div>
+                      <div className="field-section">
+                        <span className="field-label">检测依据</span>
+                        <ExcerptView
+                          excerpt={field.matched_excerpt ?? null}
+                          reason={field.validation_reason}
+                          blockType={field.block_type}
+                          tableHtml={field.table_html}
+                        />
+                        {field.validation_status !== 'matched' && field.validation_reason && (
+                          <p className="field-reason-note">{field.validation_reason}</p>
+                        )}
+                      </div>
+                      <div className="field-footer">
+                        <div className="field-status-block">
+                          <span className="field-label">状态</span>
+                          <span className={`field-status-text status-text-${field.validation_status}`}>
+                            {statusLabel(field.validation_status)}
+                          </span>
+                        </div>
+                        <div className="field-meta">
+                          <span>第 {field.page} 页</span>
+                          {field.font_name ? <span>{field.font_name}</span> : null}
+                          {typeof field.font_size_pt === 'number' ? <span>{field.font_size_pt} pt</span> : null}
+                          {typeof field.font_height_mm === 'number' ? <span>{field.font_height_mm.toFixed(1)} mm</span> : null}
+                        </div>
+                      </div>
+                    </div>
+                  )
+                })
+              ) : (
+                <div className="empty-panel">
+                  <span className="empty-icon">📋</span>
+                  <p>上传文件并解析后，这里将显示逐字段的校验结果。</p>
+                  <p>点击任意字段，右侧预览会自动聚焦放大对应区域。</p>
+                </div>
+              )}
+            </div>
+          ) : sidebarTab === 'word' ? (
+            <div className="field-list word-text-panel">
+              {result?.word_html ? (
+                /* pandoc HTML：保留 colspan/rowspan，直接注入 */
+                <div
+                  className="word-html-wrap"
+                  // HTML 来自自有 pandoc 转换，非用户输入，风险可控
+                  // eslint-disable-next-line react/no-danger
+                  dangerouslySetInnerHTML={{ __html: result.word_html }}
+                />
+              ) : result?.word_text ? (
+                /* 回退：纯文本逐行渲染 */
+                result.word_text.split('\n').map((line, i) => {
+                  const cells = line.split('｜')
+                  return cells.length > 1 ? (
+                    <div key={i} className="word-table-row">
+                      {cells.map((cell, j) => (
+                        <span key={j} className="word-table-cell">{cell}</span>
+                      ))}
+                    </div>
+                  ) : (
+                    <p key={i} className="word-text-line">{line}</p>
+                  )
+                })
+              ) : (
+                <div className="empty-panel">
+                  <span className="empty-icon">📝</span>
+                  <p>解析完成后，这里将显示从 Word 校对稿中提取的全部文本内容。</p>
+                </div>
+              )}
+            </div>
+          ) : (
+            <div className="field-list barcode-panel">
+              {result?.barcodes?.length ? (
+                result.barcodes.map((bc: BarcodeResult, i: number) => {
+                  const isSelected = i === selectedBarcodeIndex
+                  return (
+                    <div
+                      key={i}
+                      ref={(node) => {
+                        if (node) barcodeCardRefs.current.set(i, node)
+                        else barcodeCardRefs.current.delete(i)
+                      }}
+                      className={[
+                        'barcode-card',
+                        bc.valid ? '' : 'barcode-invalid',
+                        isSelected ? 'selected' : '',
+                      ].filter(Boolean).join(' ')}
+                      role="button"
+                      tabIndex={0}
+                      onClick={() => setSelectedBarcodeIndex(i)}
+                      onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && setSelectedBarcodeIndex(i)}
+                    >
+                      <div className="barcode-card-header">
+                        <span className="barcode-format-badge">{bc.format_label}</span>
+                        {!bc.valid && <span className="barcode-invalid-badge">识别可疑</span>}
+                      </div>
+                      {bc.crop_url && (
+                        <img
+                          src={`${API_BASE_URL}${bc.crop_url}`}
+                          alt={`${bc.format_label} 条码图片`}
+                          className="barcode-crop-img"
+                        />
+                      )}
+                      <pre className="barcode-text">{bc.text}</pre>
+                      <div className="barcode-meta">
+                        <span>原始格式：{bc.format}</span>
+                        <span>位置：({bc.x0}, {bc.y0}) – ({bc.x1}, {bc.y1})</span>
+                      </div>
+                    </div>
+                  )
+                })
+              ) : (
+                <div className="empty-panel">
+                  <span className="empty-icon">🔲</span>
+                  <p>解析完成后，这里将显示在包装图中检测到的条形码和二维码内容。</p>
+                  <p>支持 EAN-13、Code 128、QR Code 等主流格式。</p>
+                </div>
+              )}
+            </div>
+          )}
+        </aside>
+
+        {/* ── 拖拽分隔条 ── */}
+        <div
+          className="resize-handle"
+          onMouseDown={handleResizeStart}
+          role="separator"
+          aria-orientation="vertical"
+          aria-label="拖动调整面板宽度"
+        />
+
+        <section className="preview-panel">
+          <div className="preview-header">
+            <div>
+              <p className="section-kicker">AI 预览</p>
+              <h2>预览与高亮</h2>
+            </div>
+          </div>
+          {result ? (
+            <PdfPreview
+              preview={result.preview}
+              fields={result.fields}
+              barcodes={result.barcodes}
+              activeFieldId={selectedFieldId}
+              hoveredFieldId={hoveredFieldId}
+              activeBarcodeIndex={selectedBarcodeIndex}
+              apiBaseUrl={API_BASE_URL}
+              onFieldSelect={handlePreviewFieldSelect}
+              onBarcodeSelect={handlePreviewBarcodeSelect}
+            />
+          ) : (
+            <div className="empty-preview">
+              <span className="empty-icon">🖼️</span>
+              <p>AI 预览将在解析完成后显示于此处。</p>
+              <p>悬停或点击左侧字段，对应区域会同步高亮并自动放大。</p>
+            </div>
+          )}
+        </section>
+      </section>
+    </main>
+    </>
+  )
+}
+
+export default App

frontend/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

frontend/src/components/LogSidebar.tsx

@@ -0,0 +1,143 @@
+import { useEffect, useRef, useState } from 'react'
+
+type LogLevel = 'DEBUG' | 'INFO' | 'WARNING' | 'ERROR' | 'CRITICAL'
+
+interface LogEntry {
+  time: string
+  level: LogLevel
+  name: string
+  msg: string
+}
+
+interface Props {
+  /** Base URL for the API, e.g. "" for proxied Vite dev server */
+  apiBaseUrl?: string
+}
+
+export function LogSidebar({ apiBaseUrl = '' }: Props) {
+  const [open, setOpen] = useState(false)
+  const [logs, setLogs] = useState<LogEntry[]>([])
+  const [autoScroll, setAutoScroll] = useState(true)
+  const [connected, setConnected] = useState(false)
+  const bodyRef = useRef<HTMLDivElement>(null)
+  const errorCount = logs.filter(l => l.level === 'ERROR' || l.level === 'CRITICAL').length
+
+  // Connect to SSE
+  useEffect(() => {
+    let source: EventSource | null = null
+    let retryTimer: ReturnType<typeof setTimeout> | null = null
+
+    const connect = () => {
+      source = new EventSource(`${apiBaseUrl}/api/logs/stream`)
+      source.onopen = () => setConnected(true)
+      source.onmessage = (e) => {
+        const entry = JSON.parse(e.data) as LogEntry
+        setLogs(prev => {
+          const next = prev.length >= 400 ? prev.slice(-399) : prev
+          return [...next, entry]
+        })
+      }
+      source.onerror = () => {
+        setConnected(false)
+        source?.close()
+        // Auto-reconnect after 3s
+        retryTimer = setTimeout(connect, 3000)
+      }
+    }
+
+    connect()
+
+    return () => {
+      retryTimer && clearTimeout(retryTimer)
+      source?.close()
+    }
+  }, [apiBaseUrl])
+
+  // Auto-scroll to bottom
+  useEffect(() => {
+    if (autoScroll && bodyRef.current) {
+      bodyRef.current.scrollTop = bodyRef.current.scrollHeight
+    }
+  }, [logs, autoScroll])
+
+  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    const el = e.currentTarget
+    const atBottom = el.scrollHeight - el.scrollTop <= el.clientHeight + 32
+    setAutoScroll(atBottom)
+  }
+
+  return (
+    <>
+      {/* ── Toggle button, always pinned to left edge ── */}
+      <button
+        className={`log-toggle${open ? ' log-toggle--open' : ''}`}
+        onClick={() => setOpen(v => !v)}
+        title={open ? '收起日志面板' : '展开日志面板'}
+        aria-label={open ? '收起日志面板' : '展开日志面板'}
+      >
+        <span className="log-toggle-arrow">{open ? '◀' : '▶'}</span>
+        <span className={`log-toggle-dot${connected ? ' log-toggle-dot--on' : ''}`} />
+        {!open && errorCount > 0 && (
+          <span className="log-toggle-badge">{errorCount}</span>
+        )}
+      </button>
+
+      {/* ── Sidebar panel ── */}
+      <aside className={`log-sidebar${open ? ' log-sidebar--open' : ''}`}>
+        <header className="log-sidebar-header">
+          <span className="log-sidebar-title">后端日志</span>
+          <div className="log-sidebar-actions">
+            <button
+              className={`log-btn${autoScroll ? ' log-btn--active' : ''}`}
+              onClick={() => {
+                const newVal = !autoScroll
+                setAutoScroll(newVal)
+                if (newVal && bodyRef.current) {
+                  bodyRef.current.scrollTop = bodyRef.current.scrollHeight
+                }
+              }}
+              title={autoScroll ? '暂停自动滚动' : '恢复自动滚动'}
+            >
+              {autoScroll ? '⬇ 跟随' : '⏸ 已暂停'}
+            </button>
+            <button
+              className="log-btn"
+              onClick={() => setLogs([])}
+              title="清空日志"
+            >
+              清空
+            </button>
+          </div>
+        </header>
+
+        <div
+          className="log-body"
+          ref={bodyRef}
+          onScroll={handleScroll}
+        >
+          {logs.length === 0 ? (
+            <div className="log-empty">等待日志…</div>
+          ) : (
+            logs.map((entry, i) => (
+              <div
+                key={i}
+                className={`log-entry log-entry--${entry.level.toLowerCase()}`}
+              >
+                <span className="log-time">{entry.time}</span>
+                <span className="log-level">{entry.level}</span>
+                <span className="log-name">{entry.name}</span>
+                <span className="log-msg">{entry.msg}</span>
+              </div>
+            ))
+          )}
+        </div>
+
+        {/* Connection status bar */}
+        <div className={`log-status-bar${connected ? ' log-status-bar--on' : ''}`}>
+          <span className="log-status-dot" />
+          {connected ? '已连接' : '连接断开，重试中…'}
+        </div>
+      </aside>
+    </>
+  )
+}

frontend/src/components/PdfPreview.tsx

@@ -0,0 +1,441 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import type { KeyboardEvent } from 'react'
+import { GlobalWorkerOptions, getDocument } from 'pdfjs-dist'
+import type { PDFDocumentProxy } from 'pdfjs-dist'
+import pdfWorkerUrl from 'pdfjs-dist/build/pdf.worker.min.mjs?url'
+import type { BarcodeResult, FieldResult, PreviewMeta } from '../types'
+import {
+  getOverlayRect,
+  getScrollTarget,
+  getTargetZoom,
+  type ContainerSize,
+  type PageMetric,
+} from './pdfPreviewMath'
+
+GlobalWorkerOptions.workerSrc = pdfWorkerUrl
+
+
+type PdfPreviewProps = {
+  preview: PreviewMeta
+  fields: FieldResult[]
+  barcodes?: BarcodeResult[]
+  activeFieldId: string | null
+  hoveredFieldId: string | null
+  activeBarcodeIndex?: number | null
+  apiBaseUrl: string
+  onFieldSelect: (fieldId: string) => void
+  onBarcodeSelect?: (index: number) => void
+}
+
+export function PdfPreview({
+  preview,
+  fields,
+  barcodes,
+  activeFieldId,
+  hoveredFieldId,
+  activeBarcodeIndex,
+  apiBaseUrl,
+  onFieldSelect,
+  onBarcodeSelect,
+}: PdfPreviewProps) {
+  const [zoom, setZoom] = useState(1)
+  const [pdfDocument, setPdfDocument] = useState<PDFDocumentProxy | null>(null)
+  const [pageNumbers, setPageNumbers] = useState<number[]>([])
+  const [pageMetrics, setPageMetrics] = useState<Record<number, PageMetric>>({})
+  const [containerSize, setContainerSize] = useState<ContainerSize>({ width: 0, height: 0 })
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [isFieldZoomed, setIsFieldZoomed] = useState(false)
+  const canvasRefs = useRef<Array<HTMLCanvasElement | null>>([])
+  const pageWrapRefs = useRef<Array<HTMLDivElement | null>>([])
+  const previewScrollRef = useRef<HTMLDivElement | null>(null)
+
+  function handleOverlayKeyDown(event: KeyboardEvent<HTMLDivElement>, fieldId: string) {
+    if (event.key !== 'Enter' && event.key !== ' ') {
+      return
+    }
+
+    event.preventDefault()
+    onFieldSelect(fieldId)
+  }
+
+  // 用 ref 持有最新的 containerSize / fitScale，避免 activeFieldId effect 产生额外依赖
+  const containerSizeRef = useRef(containerSize)
+  containerSizeRef.current = containerSize
+
+  const previewUrl = useMemo(() => {
+    if (/^https?:\/\//.test(preview.url)) {
+      return preview.url
+    }
+    return `${apiBaseUrl}${preview.url}`
+  }, [apiBaseUrl, preview.url])
+
+  const fitScale = useMemo(() => {
+    if (!containerSize.width || !containerSize.height) {
+      return 1
+    }
+    const usableWidth = Math.max(containerSize.width - 32, 320)
+    const usableHeight = Math.max(containerSize.height - 56, 240)
+    const widthScale = usableWidth / preview.pageWidthPt
+    const heightScale = usableHeight / preview.pageHeightPt
+    return Math.min(widthScale, heightScale)
+  }, [containerSize.height, containerSize.width, preview.pageHeightPt, preview.pageWidthPt])
+
+  const fitScaleRef = useRef(fitScale)
+  fitScaleRef.current = fitScale
+
+  const effectiveScale = useMemo(() => fitScale * zoom, [fitScale, zoom])
+
+  // 监听容器尺寸
+  useEffect(() => {
+    const container = previewScrollRef.current
+    if (!container) {
+      return
+    }
+
+    const updateSize = () => {
+      setContainerSize({
+        width: container.clientWidth,
+        height: container.clientHeight,
+      })
+    }
+
+    updateSize()
+    const observer = new ResizeObserver(updateSize)
+    observer.observe(container)
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [])
+
+  // ── PNG 模式：跳过 pdfjs，直接从图片尺寸计算 metrics ─────────────────────
+  useEffect(() => {
+    if (preview.type !== 'png') return
+    setLoading(false)
+    setError(null)
+    setPageNumbers([1])
+    // pageWidthPt / pageHeightPt 在 PNG 模式下存的是像素尺寸
+    setPageMetrics({
+      1: {
+        width: preview.pageWidthPt * effectiveScale,
+        height: preview.pageHeightPt * effectiveScale,
+      },
+    })
+  }, [preview.type, preview.pageWidthPt, preview.pageHeightPt, effectiveScale])
+
+  // 加载 PDF 文档（PNG 模式跳过）
+  useEffect(() => {
+    if (preview.type === 'png') return
+
+    let disposed = false
+    const loadingTask = getDocument(previewUrl)
+
+    async function loadPreview() {
+      setLoading(true)
+      setError(null)
+      setPageMetrics({})
+      try {
+        const pdf = await loadingTask.promise
+        if (disposed) {
+          return
+        }
+        setPdfDocument(pdf)
+        setPageNumbers(Array.from({ length: pdf.numPages }, (_, index) => index + 1))
+      } catch (caughtError) {
+        if (!disposed) {
+          setError(caughtError instanceof Error ? caughtError.message : 'PDF 预览加载失败')
+        }
+      } finally {
+        if (!disposed) {
+          setLoading(false)
+        }
+      }
+    }
+
+    void loadPreview()
+
+    return () => {
+      disposed = true
+      setPdfDocument(null)
+      void loadingTask.destroy()
+    }
+  }, [preview.type, previewUrl])
+
+  // 渲染 PDF 页面（canvas；PNG 模式跳过）
+  useEffect(() => {
+    if (preview.type === 'png') return
+
+    let cancelled = false
+
+    async function renderPages() {
+      if (!pdfDocument || pageNumbers.length === 0) {
+        return
+      }
+
+      const metrics: Record<number, PageMetric> = {}
+      const outputScale = typeof window === 'undefined' ? 1 : Math.min(window.devicePixelRatio || 1, 2.5)
+
+      for (const pageNumber of pageNumbers) {
+        const page = await pdfDocument.getPage(pageNumber)
+        const viewport = page.getViewport({ scale: effectiveScale })
+        const canvas = canvasRefs.current[pageNumber - 1]
+        if (!canvas) {
+          continue
+        }
+
+        const context = canvas.getContext('2d')
+        if (!context) {
+          continue
+        }
+
+        canvas.width = Math.floor(viewport.width * outputScale)
+        canvas.height = Math.floor(viewport.height * outputScale)
+        canvas.style.width = `${viewport.width}px`
+        canvas.style.height = `${viewport.height}px`
+
+        await page.render({
+          canvasContext: context,
+          viewport,
+          transform: outputScale === 1 ? undefined : [outputScale, 0, 0, outputScale, 0, 0],
+        }).promise
+        metrics[pageNumber] = { width: viewport.width, height: viewport.height }
+      }
+
+      if (!cancelled) {
+        setPageMetrics(metrics)
+        setLoading(false)
+      }
+    }
+
+    void renderPages()
+
+    return () => {
+      cancelled = true
+    }
+  }, [preview.type, effectiveScale, pageNumbers, pdfDocument])
+
+  // 点击字段时：自动计算最优缩放，然后滚动到目标页
+  useEffect(() => {
+    const activeField = fields.find((field) => field.id === activeFieldId)
+
+    if (!activeField) {
+      // 取消选中 → 恢复适应页面
+      setZoom(1)
+      setIsFieldZoomed(false)
+      return
+    }
+
+    const { width: cw, height: ch } = containerSizeRef.current
+    const fs = fitScaleRef.current
+
+    if (cw > 0 && ch > 0 && fs > 0) {
+      const targetZoom = getTargetZoom(activeField, { width: cw, height: ch }, fs)
+      setZoom(targetZoom)
+      setIsFieldZoomed(targetZoom > 1.05)
+    }
+  }, [activeFieldId, fields])
+
+  useEffect(() => {
+    const activeField = fields.find((field) => field.id === activeFieldId)
+    if (!activeField) {
+      return
+    }
+
+    const container = previewScrollRef.current
+    const pageWrap = pageWrapRefs.current[activeField.page - 1]
+    const metric = pageMetrics[activeField.page]
+    if (!container || !pageWrap || !metric) {
+      return
+    }
+
+    const rect = getOverlayRect(
+      activeField,
+      metric.width / preview.pageWidthPt,
+      metric.height / preview.pageHeightPt,
+    )
+
+    const timer = window.setTimeout(() => {
+      const target = getScrollTarget({
+        containerWidth: container.clientWidth,
+        containerHeight: container.clientHeight,
+        scrollWidth: container.scrollWidth,
+        scrollHeight: container.scrollHeight,
+        pageOffsetLeft: pageWrap.offsetLeft,
+        pageOffsetTop: pageWrap.offsetTop,
+        rect,
+      })
+
+      container.scrollTo({
+        left: target.left,
+        top: target.top,
+        behavior: 'smooth',
+      })
+    }, 120)
+
+    return () => window.clearTimeout(timer)
+  }, [activeFieldId, fields, pageMetrics, preview.pageHeightPt, preview.pageWidthPt])
+
+  return (
+    <>
+      {/* 工具栏：通过 CSS absolute 贴到 .preview-panel 右上角 */}
+      <div className="preview-toolbar">
+        <div className="zoom-rail" role="group" aria-label="预览缩放">
+          {isFieldZoomed && (
+            <span className="zoom-field-indicator">已聚焦字段</span>
+          )}
+          <button
+            className="toolbar-button toolbar-button-quiet"
+            type="button"
+            aria-label="缩小"
+            onClick={() => {
+              setZoom((v) => Math.max(0.6, v - 0.1))
+              setIsFieldZoomed(false)
+            }}
+          >
+            −
+          </button>
+          <button
+            className="toolbar-button toolbar-button-ghost"
+            type="button"
+            onClick={() => {
+              setZoom(1)
+              setIsFieldZoomed(false)
+            }}
+          >
+            适应页面
+          </button>
+          <span className="zoom-readout">{Math.round(effectiveScale * 100)}%</span>
+          <button
+            className="toolbar-button toolbar-button-quiet"
+            type="button"
+            aria-label="放大"
+            onClick={() => {
+              setZoom((v) => Math.min(3, v + 0.1))
+              setIsFieldZoomed(false)
+            }}
+          >
+            +
+          </button>
+        </div>
+      </div>
+
+      <div className="pdf-preview-root">
+      {error ? <p className="preview-error">{error}</p> : null}
+      {loading ? <p className="preview-loading">PDF 正在渲染…</p> : null}
+
+      <div className="preview-scroll" ref={previewScrollRef}>
+        {pageNumbers.map((pageNumber, index) => {
+          const pageFields = fields.filter((field) => field.page === pageNumber)
+          const metric = pageMetrics[pageNumber]
+          const xScale = metric ? metric.width / preview.pageWidthPt : effectiveScale
+          const yScale = metric ? metric.height / preview.pageHeightPt : effectiveScale
+
+          return (
+            <div
+              key={pageNumber}
+              className="page-frame"
+            >
+              <div className="page-label">第 {pageNumber} 页</div>
+              <div
+                className="page-canvas-wrap"
+                style={{ width: metric?.width ?? preview.pageWidthPt * effectiveScale }}
+                ref={(node) => {
+                  pageWrapRefs.current[index] = node
+                }}
+              >
+                {preview.type === 'png' ? (
+                  /* PNG 模式：直接显示裁剪后的图片 */
+                  <img
+                    src={previewUrl}
+                    alt="预览"
+                    style={{
+                      display: 'block',
+                      width: metric?.width ?? preview.pageWidthPt * effectiveScale,
+                      height: metric?.height ?? preview.pageHeightPt * effectiveScale,
+                      borderRadius: 8,
+                    }}
+                    draggable={false}
+                  />
+                ) : (
+                  <canvas
+                    ref={(node) => {
+                      canvasRefs.current[index] = node
+                    }}
+                  />
+                )}
+                <div className="overlay-layer">
+                  {pageFields.map((field) => {
+                    const isActive = field.id === activeFieldId
+                    const isHovered = field.id === hoveredFieldId
+                    const rect = getOverlayRect(field, xScale, yScale)
+
+                    return (
+                      <div
+                        key={field.id}
+                        className={[
+                          'overlay-box',
+                          `overlay-${field.validation_status}`,
+                          field.block_type ? `overlay-block-${field.block_type}` : '',
+                          isActive ? 'active' : '',
+                          isHovered ? 'hovered' : '',
+                        ]
+                          .filter(Boolean)
+                          .join(' ')}
+                        style={{
+                          left: rect.left,
+                          top: rect.top,
+                          width: rect.width,
+                          height: rect.height,
+                          ['--overlay-stroke-width' as string]: `${rect.strokeWidth}px`,
+                        }}
+                        title={field.text}
+                        role="button"
+                        tabIndex={0}
+                        aria-label={field.text}
+                        aria-pressed={isActive}
+                        onClick={() => onFieldSelect(field.id)}
+                        onKeyDown={(event) => handleOverlayKeyDown(event, field.id)}
+                      />
+                    )
+                  })}
+
+                  {/* 条码 overlay（仅渲染在第 1 页，坐标系与裁剪图一致） */}
+                  {pageNumber === 1 && barcodes?.map((bc, bi) => {
+                    const isActive = bi === activeBarcodeIndex
+                    return (
+                      <div
+                        key={`barcode-${bi}`}
+                        className={['overlay-box', 'overlay-barcode', isActive ? 'active' : ''].filter(Boolean).join(' ')}
+                        style={{
+                          left: bc.x0 * xScale,
+                          top: bc.y0 * yScale,
+                          width: (bc.x1 - bc.x0) * xScale,
+                          height: (bc.y1 - bc.y0) * yScale,
+                          ['--overlay-stroke-width' as string]: '2px',
+                        }}
+                        title={`${bc.format_label}：${bc.text}`}
+                        role="button"
+                        tabIndex={0}
+                        aria-label={`${bc.format_label} ${bc.text}`}
+                        aria-pressed={isActive}
+                        onClick={() => onBarcodeSelect?.(bi)}
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter' || e.key === ' ') {
+                            e.preventDefault()
+                            onBarcodeSelect?.(bi)
+                          }
+                        }}
+                      />
+                    )
+                  })}
+                </div>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+      </div>
+    </>
+  )
+}

frontend/src/components/pdfPreviewMath.ts

@@ -0,0 +1,97 @@
+import type { FieldResult } from '../types'
+
+export type ContainerSize = {
+  width: number
+  height: number
+}
+
+export type PageMetric = {
+  width: number
+  height: number
+}
+
+export type OverlayRect = {
+  left: number
+  top: number
+  width: number
+  height: number
+  strokeWidth: number
+}
+
+export type ScrollTargetInput = {
+  containerWidth: number
+  containerHeight: number
+  scrollWidth: number
+  scrollHeight: number
+  pageOffsetLeft: number
+  pageOffsetTop: number
+  rect: OverlayRect
+}
+
+export type ScrollTarget = {
+  left: number
+  top: number
+}
+
+export function clamp(value: number, min: number, max: number): number {
+  if (max < min) {
+    return min
+  }
+  return Math.min(Math.max(value, min), max)
+}
+
+export function getOverlayRect(field: FieldResult, xScale: number, yScale: number): OverlayRect {
+  const rawWidth = Math.max((field.x1_pt - field.x0_pt) * xScale, 0)
+  const rawHeight = Math.max((field.bottom_pt - field.top_pt) * yScale, 0)
+  const scaleFloor = Math.min(xScale, yScale)
+  const minSize = scaleFloor < 0.45 ? 4 : scaleFloor < 0.8 ? 6 : 8
+  const width = Math.max(rawWidth, minSize)
+  const height = Math.max(rawHeight, minSize)
+  const strokeWidth = scaleFloor < 0.5 ? 1 : scaleFloor < 1 ? 1.5 : 2
+
+  return {
+    left: field.x0_pt * xScale - (width - rawWidth) / 2,
+    top: field.top_pt * yScale - (height - rawHeight) / 2,
+    width,
+    height,
+    strokeWidth,
+  }
+}
+
+export function getTargetZoom(
+  field: FieldResult,
+  containerSize: ContainerSize,
+  fitScale: number,
+): number {
+  const { width: containerWidth, height: containerHeight } = containerSize
+  if (containerWidth <= 0 || containerHeight <= 0 || fitScale <= 0) {
+    return 1
+  }
+
+  const fieldWidth = Math.max(Math.abs(field.x1_pt - field.x0_pt), 24)
+  const fieldHeight = Math.max(Math.abs(field.bottom_pt - field.top_pt), 24)
+  const zoomWidth = (containerWidth * 0.45) / (fieldWidth * fitScale)
+  const zoomHeight = (containerHeight * 0.45) / (fieldHeight * fitScale)
+
+  return clamp(Math.min(zoomWidth, zoomHeight), 1, 2.8)
+}
+
+export function getScrollTarget(input: ScrollTargetInput): ScrollTarget {
+  const {
+    containerWidth,
+    containerHeight,
+    scrollWidth,
+    scrollHeight,
+    pageOffsetLeft,
+    pageOffsetTop,
+    rect,
+  } = input
+
+  const centerLeft = pageOffsetLeft + rect.left + rect.width / 2
+  const centerTop = pageOffsetTop + rect.top + rect.height / 2
+
+  return {
+    left: clamp(centerLeft - containerWidth / 2, 0, scrollWidth - containerWidth),
+    top: clamp(centerTop - containerHeight / 2, 0, scrollHeight - containerHeight),
+  }
+}

frontend/src/index.css

@@ -0,0 +1,64 @@
+@import "tailwindcss";
+
+:root {
+  font-family:
+    'IBM Plex Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
+    sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color: #4d3b2d;
+  background:
+    radial-gradient(circle at top left, rgba(255, 236, 214, 0.95), transparent 32%),
+    radial-gradient(circle at top right, rgba(224, 210, 187, 0.72), transparent 28%),
+    linear-gradient(180deg, #f6efe6 0%, #efe2d1 100%);
+  background-attachment: fixed;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+}
+
+button,
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+h1,
+h2,
+p {
+  margin: 0;
+}
+
+h1,
+h2 {
+  font-family:
+    'Avenir Next', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
+    sans-serif;
+  color: #23160d;
+}
+
+h1 {
+  font-size: clamp(2rem, 3vw, 3.2rem);
+  line-height: 1.05;
+  max-width: 18ch;
+}
+
+h2 {
+  font-size: 1.25rem;
+}

frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

frontend/src/mockData.ts

@@ -0,0 +1,656 @@
+import type { ProcessResponse } from './types'
+
+export const MOCK_JOB_ID = '8db8b6393957487d974b8cdc043d2edc'
+
+export const MOCK_RESULT: ProcessResponse = {
+  "preview": {
+    "type": "png",
+    "url": "/api/files/8db8b6393957487d974b8cdc043d2edc/crop/cropped_label.png",
+    "pageWidthPt": 1986,
+    "pageHeightPt": 1026
+  },
+  "fields": [
+    {
+      "id": "field-000",
+      "page": 1,
+      "block_type": "text",
+      "text": "过敏原信息：此产品含有肤质的谷物及其制品、大豆及其制品、蛋类及其制品、坚果及其果仁类制品。此生产线也加工含有甲壳纲类动物及其制品、鱼类及其制品、乳及乳制品、花生及其制品的食品。",
+      "font_name": "SourceHanSansCN-Regular",
+      "font_size_pt": 8.0,
+      "font_height_mm": 2.8,
+      "x0_pt": 173,
+      "top_pt": 431,
+      "x1_pt": 558,
+      "bottom_pt": 451,
+      "normalized_text": "过敏原信息：此产品含有肤质的谷物及其制品、大豆及其制品、蛋类及其制品、坚果及其果仁类制品。此生产线也加工含有甲壳纲类动物及其制品、鱼类及其制品、乳及乳制品、花生及其制品的食品。",
+      "validation_status": "matched",
+      "validation_reason": "文字内容与 Word 稿一致",
+      "matched_excerpt": "过敏原信息：此产品含有肤质的谷物及其制品、大豆及其制品、蛋类及其制品、坚果及其果"
+    },
+    {
+      "id": "field-001",
+      "page": 1,
+      "block_type": "text",
+      "text": "生产日期/保质期到期日：见礼盒底面喷码处",
+      "font_name": "SourceHanSansCN-Regular",
+      "font_size_pt": 8.0,
+      "font_height_mm": 2.8,
+      "x0_pt": 174,
+      "top_pt": 450,
+      "x1_pt": 262,
+      "bottom_pt": 467,
+      "normalized_text": "生产日期/保质期到期日：见礼盒底面喷码处",
+      "validation_status": "matched",
+      "validation_reason": "文字内容与 Word 稿一致",
+      "matched_excerpt": "生产日期/保质期到期日：见礼盒底面喷码处"
+    },
+    {
+      "id": "field-002",
+      "page": 1,
+      "block_type": "text",
+      "text": "保质期：6个月",
+      "font_name": "SourceHanSansCN-Regular",
+      "font_size_pt": 8.0,
+      "font_height_mm": 2.8,
+      "x0_pt": 174,
+      "top_pt": 467,
+      "x1_pt": 203,
+      "bottom_pt": 483,
+      "normalized_text": "保质期：6个月",
+      "validation_status": "matched",
+      "validation_reason": "文字内容与 Word 稿一致",
+      "matched_excerpt": "保质期：6个月"
+    },
+    {
+      "id": "field-003",
+      "page": 1,
+      "block_type": "text",
+      "text": "注意：如发现真空包装袋破损或膨胀，请勿食用，并在保质期内及时向当地经销商调换。",
+      "font_name": "SourceHanSansCN-Regular",
+      "font_size_pt": 8.0,
+      "font_height_mm": 2.8,
+      "x0_pt": 174,
+      "top_pt": 483,
+      "x1_pt": 344,
+      "bottom_pt": 501,
+      "normalized_text": "注意：如发现真空包装袋破损或膨胀，请勿食用，并在保质期内及时向当地经销商调换。",
+      "validation_status": "unmatched",
+      "validation_reason": "版面文字与 Word 校对稿存在差异，请人工核查",
+      "matched_excerpt": null
+    },
+    {
+      "id": "field-004",
+      "page": 1,
+      "block_type": "text",
+      "text": "贮存条件：常温干燥通风处保存 ",
+      "font_name": "SourceHanSansCN-Regular",
+      "font_size_pt": 8.0,
+      "font_height_mm": 2.8,
+      "x0_pt": 174,
+      "top_pt": 501,
+      "x1_pt": 237,
+      "bottom_pt": 519,
+      "normalized_text": "贮存条件：常温干燥通风处保存 ",
+      "validation_status": "matched",
+      "validation_reason": "文字内容与 Word 稿一致",
+      "matched_excerpt": "贮存条件：常温干燥通风处保存 "
+    },
+    {
+      "id": "field-005",
+      "page": 1,
+      "block_type": "text",
+      "text": "委托单位：湖州诸老大实业股份有限公司地址：浙江省湖州市吴兴区高新区科创园A幢317室服务热线：400-603-1887",
+      "font_name": "SourceHanSansCN-Regular",
+      "font_size_pt": 8.0,
+      "font_height_mm": 2.8,
+      "x0_pt": 174,
+      "top_pt": 518,
+      "x1_pt": 412,
+      "bottom_pt": 536,
+      "normalized_text": "委托单位：湖州诸老大实业股份有限公司地址：浙江省湖州市吴兴区高新区科创园A幢317室服务热线：400-603-1887",
+      "validation_status": "matched",
+      "validation_reason": "文字内容与 Word 稿一致",
+      "matched_excerpt": "委托单位：湖州诸老大实业股份有限公司地址：浙江省湖州市吴兴区高新区科创园A幢31"
+    },
+    {
+      "id": "field-006",
+      "page": 1,
+      "block_type": "text",
+      "text": "【老大黑猪五花肉粽子/老大双蛋黄黑猪肉粽子/酱香黑猪肉粽子/花胶鸡火腿老汤粽子/黑松露味五花肉粽子/高汤五花肉粽子/经典洗沙粽子/玫瑰白玉洗沙粽子/黑芝麻核桃粽子/新会陈皮洗沙粽子】",
+      "font_name": "SourceHanSansCN-Regular",
+      "font_size_pt": 8.0,
+      "font_height_mm": 2.8,
+      "x0_pt": 174,
+      "top_pt": 536,
+      "x1_pt": 562,
+      "bottom_pt": 553,
+      "normalized_text": "【老大黑猪五花肉粽子/老大双蛋黄黑猪肉粽子/酱香黑猪肉粽子/花胶鸡火腿老汤粽子/黑松露味五花肉粽子/高汤五花肉粽子/经典洗沙粽子/玫瑰白玉洗沙粽子/黑芝麻核桃粽子/新会陈皮洗沙粽子】",
+      "validation_status": "empty_or_garbled",
+      "validation_reason": "识别结果为空或包含乱码，无法有效校验",
+      "matched_excerpt": null
+    },
+    {
+      "id": "field-007",
+      "page": 1,
+      "block_type": "text",
+      "text": "受委托单位：浙江诸老大供应链管理有限公司地址：浙江省嘉兴市海盐县望海街道顾家路5号产地：浙江省嘉兴市",
+      "font_name": "SourceHanSansCN-Regular",
+      "font_size_pt": 8.0,
+      "font_height_mm": 2.8,
+      "x0_pt": 174,
+      "top_pt": 553,
+      "x1_pt": 399,
+      "bottom_pt": 571,
+      "normalized_text": "受委托单位：浙江诸老大供应链管理有限公司地址：浙江省嘉兴市海盐县望海街道顾家路5号产地：浙江省嘉兴市",
+      "validation_status": "matched",
+      "validation_reason": "文字内容与 Word 稿一致",
+      "matched_excerpt": "受委托单位：浙江诸老大供应链管理有限公司地址：浙江省嘉兴市海盐县望海街道顾家路5"
+    },
+    {
+      "id": "field-008",
+      "page": 1,
+      "block_type": "text",
+      "text": "电话：0573-86981666食品生产许可证编号：SC11133042404806产品标准代号：GB/T46259",
+      "font_name": "SourceHanSansCN-Regular",
+      "font_size_pt": 8.0,
+      "font_height_mm": 2.8,
+      "x0_pt": 174,
+      "top_pt": 571,
+      "x1_pt": 369,
+      "bottom_pt": 589,
+      "normalized_text": "电话：0573-86981666食品生产许可证编号：SC11133042404806产品标准代号：GB/T46259",
+      "validation_status": "matched",
+      "validation_reason": "文字内容与 Word 稿一致",
+      "matched_excerpt": "电话：0573-86981666食品生产许可证编号：SC111330424048"
+    },
+    {
+      "id": "field-009",
+      "page": 1,
+      "block_type": "text",
+      "text": "【草木灰咸鸭蛋】",
+      "font_name": "SourceHanSansCN-Regular",
+      "font_size_pt": 8.0,
+      "font_height_mm": 2.8,
+      "x0_pt": 174,
+      "top_pt": 603,
+      "x1_pt": 208,
+      "bottom_pt": 621,
+      "normalized_text": "【草木灰咸鸭蛋】",
+      "validation_status": "unmatched",
+      "validation_reason": "版面文字与 Word 校对稿存在差异，请人工核查",
+      "matched_excerpt": null
+    },
+    {
+      "id": "field-010",
+      "page": 1,
+      "block_type": "text",
+      "text": "（受委托单位详见喷码处）",
+      "font_name": "SourceHanSansCN-Regular",
+      "font_size_pt": 8.0,
+      "font_height_mm": 2.8,
+      "x0_pt": 174,
+      "top_pt": 621,
+      "x1_pt": 225,
+      "bottom_pt": 639,
+      "normalized_text": "（受委托单位详见喷码处）",
+      "validation_status": "matched",
+      "validation_reason": "文字内容与 Word 稿一致",
+      "matched_excerpt": "（受委托单位详见喷码处）"
+    },
+    {
+      "id": "field-011",
+      "page": 1,
+      "block_type": "text",
+      "text": "（A）受委托单位：高邮市秦邮蛋品有限公司",
+      "font_name": "SourceHanSansCN-Regular",
+      "font_size_pt": 8.0,
+      "font_height_mm": 2.8,
+      "x0_pt": 174,
+      "top_pt": 639,
+      "x1_pt": 258,
+      "bottom_pt": 657,
+      "normalized_text": "（A）受委托单位：高邮市秦邮蛋品有限公司",
+      "validation_status": "matched",
+      "validation_reason": "文字内容与 Word 稿一致",
+      "matched_excerpt": "（A）受委托单位：高邮市秦邮蛋品有限公司"
+    },
+    {
+      "id": "field-012",
+      "page": 1,
+      "block_type": "text",
+      "text": "受委托单位地址：高邮城南经济新区兴区路5号",
+      "font_name": "SourceHanSansCN-Regular",
+      "font_size_pt": 8.0,
+      "font_height_mm": 2.8,
+      "x0_pt": 174,
+      "top_pt": 657,
+      "x1_pt": 268,
+      "bottom_pt": 674,
+      "normalized_text": "受委托单位地址：高邮城南经济新区兴区路5号",
+      "validation_status": "matched",
+      "validation_reason": "文字内容与 Word 稿一致",
+      "matched_excerpt": "受委托单位地址：高邮城南经济新区兴区路5号"
+    },
+    {
+      "id": "field-013",
+      "page": 1,
+      "block_type": "text",
+      "text": "产地：江苏省扬州市",
+      "font_name": "SourceHanSansCN-Regular",
+      "font_size_pt": 8.0,
+      "font_height_mm": 2.8,
+      "x0_pt": 174,
+      "top_pt": 674,
+      "x1_pt": 214,
+      "bottom_pt": 691,
+      "normalized_text": "产地：江苏省扬州市",
+      "validation_status": "unmatched",
+      "validation_reason": "版面文字与 Word 校对稿存在差异，请人工核查",
+      "matched_excerpt": null
+    },
+    {
+      "id": "field-014",
+      "page": 1,
+      "block_type": "text",
+      "text": "产品类型：真空包装熟咸鸭蛋 ",
+      "font_name": "SourceHanSansCN-Regular",
+      "font_size_pt": 8.0,
+      "font_height_mm": 2.8,
+      "x0_pt": 174,
+      "top_pt": 691,
+      "x1_pt": 233,
+      "bottom_pt": 709,
+      "normalized_text": "产品类型：真空包装熟咸鸭蛋 ",
+      "validation_status": "matched",
+      "validation_reason": "文字内容与 Word 稿一致",
+      "matched_excerpt": "产品类型：真空包装熟咸鸭蛋 "
+    },
+    {
+      "id": "field-015",
+      "page": 1,
+      "block_type": "text",
+      "text": "等级：奎级",
+      "font_name": "SourceHanSansCN-Regular",
+      "font_size_pt": 8.0,
+      "font_height_mm": 2.8,
+      "x0_pt": 174,
+      "top_pt": 709,
+      "x1_pt": 196,
+      "bottom_pt": 726,
+      "normalized_text": "等级：奎级",
+      "validation_status": "matched",
+      "validation_reason": "文字内容与 Word 稿一致",
+      "matched_excerpt": "等级：奎级"
+    },
+    {
+      "id": "field-016",
+      "page": 1,
+      "block_type": "text",
+      "text": "电话：400-8118-252 400-8289-800",
+      "font_name": "SourceHanSansCN-Regular",
+      "font_size_pt": 8.0,
+      "font_height_mm": 2.8,
+      "x0_pt": 174,
+      "top_pt": 726,
+      "x1_pt": 247,
+      "bottom_pt": 743,
+      "normalized_text": "电话：400-8118-252 400-8289-800",
+      "validation_status": "matched",
+      "validation_reason": "文字内容与 Word 稿一致",
+      "matched_excerpt": "电话：400-8118-252 400-8289-800"
+    },
+    {
+      "id": "field-017",
+      "page": 1,
+      "block_type": "text",
+      "text": "食品生产许可证编号：SC11932108400062",
+      "font_name": "SourceHanSansCN-Regular",
+      "font_size_pt": 8.0,
+      "font_height_mm": 2.8,
+      "x0_pt": 174,
+      "top_pt": 743,
+      "x1_pt": 261,
+      "bottom_pt": 761,
+      "normalized_text": "食品生产许可证编号：SC11932108400062",
+      "validation_status": "matched",
+      "validation_reason": "文字内容与 Word 稿一致",
+      "matched_excerpt": "食品生产许可证编号：SC11932108400062"
+    },
+    {
+      "id": "field-018",
+      "page": 1,
+      "block_type": "text",
+      "text": "产品标准代号：Q/QYDP0001S ",
+      "font_name": "SourceHanSansCN-Regular",
+      "font_size_pt": 8.0,
+      "font_height_mm": 2.8,
+      "x0_pt": 174,
+      "top_pt": 761,
+      "x1_pt": 237,
+      "bottom_pt": 778,
+      "normalized_text": "产品标准代号：Q/QYDP0001S ",
+      "validation_status": "matched",
+      "validation_reason": "文字内容与 Word 稿一致",
+      "matched_excerpt": "产品标准代号：Q/QYDP0001S "
+    },
+    {
+      "id": "field-019",
+      "page": 1,
+      "block_type": "text",
+      "text": "食用方法：本品为熟制品，开袋去壳即食。冬季加热出油后",
+      "font_name": "SourceHanSansCN-Regular",
+      "font_size_pt": 8.0,
+      "font_height_mm": 2.8,
+      "x0_pt": 174,
+      "top_pt": 777,
+      "x1_pt": 287,
+      "bottom_pt": 795,
+      "normalized_text": "食用方法：本品为熟制品，开袋去壳即食。冬季加热出油后",
+      "validation_status": "unmatched",
+      "validation_reason": "版面文字与 Word 校对稿存在差异，请人工核查",
+      "matched_excerpt": null
+    },
+    {
+      "id": "field-020",
+      "page": 1,
+      "block_type": "text",
+      "text": "食用味道更佳。蛋品易破碎，若发现异味或真空袋漏气、胀气，",
+      "font_name": "SourceHanSansCN-Regular",
+      "font_size_pt": 8.0,
+      "font_height_mm": 2.8,
+      "x0_pt": 174,
+      "top_pt": 795,
+      "x1_pt": 293,
+      "bottom_pt": 813,
+      "normalized_text": "食用味道更佳。蛋品易破碎，若发现异味或真空袋漏气、胀气，",
+      "validation_status": "matched",
+      "validation_reason": "文字内容与 Word 稿一致",
+      "matched_excerpt": "食用味道更佳。蛋品易破碎，若发现异味或真空袋漏气、胀气，"
+    },
+    {
+      "id": "field-021",
+      "page": 1,
+      "block_type": "text",
+      "text": "请勿食用。可与当地经销商调换",
+      "font_name": "SourceHanSansCN-Regular",
+      "font_size_pt": 8.0,
+      "font_height_mm": 2.8,
+      "x0_pt": 174,
+      "top_pt": 812,
+      "x1_pt": 237,
+      "bottom_pt": 829,
+      "normalized_text": "请勿食用。可与当地经销商调换",
+      "validation_status": "matched",
+      "validation_reason": "文字内容与 Word 稿一致",
+      "matched_excerpt": "请勿食用。可与当地经销商调换"
+    },
+    {
+      "id": "field-022",
+      "page": 1,
+      "block_type": "text",
+      "text": "(B)受委托单位：高邮三宝食品有限公司",
+      "font_name": "SourceHanSansCN-Regular",
+      "font_size_pt": 8.0,
+      "font_height_mm": 2.8,
+      "x0_pt": 315,
+      "top_pt": 608,
+      "x1_pt": 393,
+      "bottom_pt": 625,
+      "normalized_text": "(B)受委托单位：高邮三宝食品有限公司",
+      "validation_status": "matched",
+      "validation_reason": "文字内容与 Word 稿一致",
+      "matched_excerpt": "(B)受委托单位：高邮三宝食品有限公司"
+    },
+    {
+      "id": "field-023",
+      "page": 1,
+      "block_type": "text",
+      "text": "受委托单位地址：高邮市甘燥镇三郎庙路38号",
+      "font_name": "SourceHanSansCN-Regular",
+      "font_size_pt": 8.0,
+      "font_height_mm": 2.8,
+      "x0_pt": 315,
+      "top_pt": 625,
+      "x1_pt": 406,
+      "bottom_pt": 643,
+      "normalized_text": "受委托单位地址：高邮市甘燥镇三郎庙路38号",
+      "validation_status": "matched",
+      "validation_reason": "文字内容与 Word 稿一致",
+      "matched_excerpt": "受委托单位地址：高邮市甘燥镇三郎庙路38号"
+    },
+    {
+      "id": "field-024",
+      "page": 1,
+      "block_type": "text",
+      "text": "产地：江苏省扬州市",
+      "font_name": "SourceHanSansCN-Regular",
+      "font_size_pt": 8.0,
+      "font_height_mm": 2.8,
+      "x0_pt": 315,
+      "top_pt": 643,
+      "x1_pt": 356,
+      "bottom_pt": 660,
+      "normalized_text": "产地：江苏省扬州市",
+      "validation_status": "matched",
+      "validation_reason": "文字内容与 Word 稿一致",
+      "matched_excerpt": "产地：江苏省扬州市"
+    },
+    {
+      "id": "field-025",
+      "page": 1,
+      "block_type": "text",
+      "text": "产品类型：高邮咸鸭蛋软罐头（熟）",
+      "font_name": "SourceHanSansCN-Regular",
+      "font_size_pt": 8.0,
+      "font_height_mm": 2.8,
+      "x0_pt": 315,
+      "top_pt": 660,
+      "x1_pt": 382,
+      "bottom_pt": 677,
+      "normalized_text": "产品类型：高邮咸鸭蛋软罐头（熟）",
+      "validation_status": "matched",
+      "validation_reason": "文字内容与 Word 稿一致",
+      "matched_excerpt": "产品类型：高邮咸鸭蛋软罐头（熟）"
+    },
+    {
+      "id": "field-026",
+      "page": 1,
+      "block_type": "text",
+      "text": "贮存条件：常温、阴凉干燥，通风处",
+      "font_name": "SourceHanSansCN-Regular",
+      "font_size_pt": 8.0,
+      "font_height_mm": 2.8,
+      "x0_pt": 315,
+      "top_pt": 677,
+      "x1_pt": 382,
+      "bottom_pt": 695,
+      "normalized_text": "贮存条件：常温、阴凉干燥，通风处",
+      "validation_status": "unmatched",
+      "validation_reason": "版面文字与 Word 校对稿存在差异，请人工核查",
+      "matched_excerpt": null
+    },
+    {
+      "id": "field-027",
+      "page": 1,
+      "block_type": "text",
+      "text": "电话：400-690-2811",
+      "font_name": "SourceHanSansCN-Regular",
+      "font_size_pt": 8.0,
+      "font_height_mm": 2.8,
+      "x0_pt": 315,
+      "top_pt": 695,
+      "x1_pt": 357,
+      "bottom_pt": 711,
+      "normalized_text": "电话：400-690-2811",
+      "validation_status": "matched",
+      "validation_reason": "文字内容与 Word 稿一致",
+      "matched_excerpt": "电话：400-690-2811"
+    },
+    {
+      "id": "field-028",
+      "page": 1,
+      "block_type": "text",
+      "text": "食品生产许可证编号：SC11932108401305",
+      "font_name": "SourceHanSansCN-Regular",
+      "font_size_pt": 8.0,
+      "font_height_mm": 2.8,
+      "x0_pt": 315,
+      "top_pt": 711,
+      "x1_pt": 402,
+      "bottom_pt": 729,
+      "normalized_text": "食品生产许可证编号：SC11932108401305",
+      "validation_status": "matched",
+      "validation_reason": "文字内容与 Word 稿一致",
+      "matched_excerpt": "食品生产许可证编号：SC11932108401305"
+    },
+    {
+      "id": "field-029",
+      "page": 1,
+      "block_type": "text",
+      "text": "产品标准代号：GB/T19050",
+      "font_name": "SourceHanSansCN-Regular",
+      "font_size_pt": 8.0,
+      "font_height_mm": 2.8,
+      "x0_pt": 315,
+      "top_pt": 729,
+      "x1_pt": 371,
+      "bottom_pt": 745,
+      "normalized_text": "产品标准代号：GB/T19050",
+      "validation_status": "matched",
+      "validation_reason": "文字内容与 Word 稿一致",
+      "matched_excerpt": "产品标准代号：GB/T19050"
+    },
+    {
+      "id": "field-030",
+      "page": 1,
+      "block_type": "text",
+      "text": "食用方法：去壳即食，冬季加温出油更佳，如出现真",
+      "font_name": "SourceHanSansCN-Regular",
+      "font_size_pt": 8.0,
+      "font_height_mm": 2.8,
+      "x0_pt": 315,
+      "top_pt": 745,
+      "x1_pt": 414,
+      "bottom_pt": 763,
+      "normalized_text": "食用方法：去壳即食，冬季加温出油更佳，如出现真",
+      "validation_status": "empty_or_garbled",
+      "validation_reason": "识别结果为空或包含乱码，无法有效校验",
+      "matched_excerpt": null
+    },
+    {
+      "id": "field-031",
+      "page": 1,
+      "block_type": "text",
+      "text": "空咸鸭蛋漏气、胀袋、变质请勿食用",
+      "font_name": "SourceHanSansCN-Regular",
+      "font_size_pt": 8.0,
+      "font_height_mm": 2.8,
+      "x0_pt": 315,
+      "top_pt": 763,
+      "x1_pt": 385,
+      "bottom_pt": 781,
+      "normalized_text": "空咸鸭蛋漏气、胀袋、变质请勿食用",
+      "validation_status": "matched",
+      "validation_reason": "文字内容与 Word 稿一致",
+      "matched_excerpt": "空咸鸭蛋漏气、胀袋、变质请勿食用"
+    },
+    {
+      "id": "field-032",
+      "page": 1,
+      "block_type": "text",
+      "text": "等级：叁级",
+      "font_name": "SourceHanSansCN-Regular",
+      "font_size_pt": 8.0,
+      "font_height_mm": 2.8,
+      "x0_pt": 315,
+      "top_pt": 781,
+      "x1_pt": 338,
+      "bottom_pt": 799,
+      "normalized_text": "等级：叁级",
+      "validation_status": "matched",
+      "validation_reason": "文字内容与 Word 稿一致",
+      "matched_excerpt": "等级：叁级"
+    },
+    {
+      "id": "field-033",
+      "page": 1,
+      "block_type": "text",
+      "text": "粽子食用方法：水煮加热法",
+      "font_name": "SourceHanSansCN-Regular",
+      "font_size_pt": 8.0,
+      "font_height_mm": 2.8,
+      "x0_pt": 446,
+      "top_pt": 589,
+      "x1_pt": 508,
+      "bottom_pt": 606,
+      "normalized_text": "粽子食用方法：水煮加热法",
+      "validation_status": "matched",
+      "validation_reason": "文字内容与 Word 稿一致",
+      "matched_excerpt": "粽子食用方法：水煮加热法"
+    },
+    {
+      "id": "field-034",
+      "page": 1,
+      "block_type": "text",
+      "text": "生产日期：",
+      "font_name": "SourceHanSansCN-Regular",
+      "font_size_pt": 8.0,
+      "font_height_mm": 2.8,
+      "x0_pt": 603,
+      "top_pt": 768,
+      "x1_pt": 642,
+      "bottom_pt": 801,
+      "normalized_text": "生产日期：",
+      "validation_status": "matched",
+      "validation_reason": "文字内容与 Word 稿一致",
+      "matched_excerpt": "生产日期："
+    },
+    {
+      "id": "field-035",
+      "page": 1,
+      "block_type": "text",
+      "text": "保质期到期日：",
+      "font_name": "SourceHanSansCN-Regular",
+      "font_size_pt": 8.0,
+      "font_height_mm": 2.8,
+      "x0_pt": 604,
+      "top_pt": 802,
+      "x1_pt": 659,
+      "bottom_pt": 835,
+      "normalized_text": "保质期到期日：",
+      "validation_status": "matched",
+      "validation_reason": "文字内容与 Word 稿一致",
+      "matched_excerpt": "保质期到期日："
+    },
+    {
+      "id": "field-036",
+      "page": 1,
+      "block_type": "text",
+      "text": "食品名称：卜居礼品粽(粽子/草木灰咸鸭蛋/低糖原味绿豆糕) 净含量:1.73千克(粽子:170克  \\times 3+130克  \\times 5, 草木灰咸鸭蛋:70克  \\times 6, 低糖原味绿豆糕:25克  \\times 6)",
+      "font_name": "SourceHanSansCN-Regular",
+      "font_size_pt": 8.0,
+      "font_height_mm": 2.8,
+      "x0_pt": 175,
+      "top_pt": 862,
+      "x1_pt": 878,
+      "bottom_pt": 909,
+      "normalized_text": "食品名称：卜居礼品粽(粽子/草木灰咸鸭蛋/低糖原味绿豆糕) 净含量:1.73千克(粽子:170克  \\times 3+130克  \\times 5, 草木灰咸鸭蛋:70克  \\times 6, 低糖原味绿豆糕:25克  \\times 6)",
+      "validation_status": "unmatched",
+      "validation_reason": "版面文字与 Word 校对稿存在差异，请人工核查",
+      "matched_excerpt": null
+    }
+  ],
+  "word_text": "诸老大粽子配料表：糯米、猪肉（黑猪）、酱油、食盐、白砂糖、味精。",
+  "barcodes": [
+    {
+      "format": "EAN_13",
+      "format_label": "EAN-13",
+      "text": "6901234567890",
+      "x0": 820,
+      "y0": 180,
+      "x1": 900,
+      "y1": 280,
+      "valid": true
+    }
+  ]
+}

frontend/src/types.ts

@@ -0,0 +1,69 @@
+export type ValidationStatus = 'matched' | 'unmatched' | 'empty_or_garbled'
+
+/** MinerU block types (non-exhaustive; extra values from newer models are allowed). */
+export type BlockType =
+  | 'text'
+  | 'para'
+  | 'title'
+  | 'table'
+  | 'figure'
+  | 'figure_caption'
+  | 'table_caption'
+  | 'equation'
+  | 'interline_equation'
+  | 'list'
+  | (string & {})  // allow unknown future values
+
+export type PreviewMeta = {
+  /**
+   * 'pdf' – rendered via pdfjs (canvas per page)
+   * 'png' – rendered as <img> (pageWidthPt/pageHeightPt hold pixel dimensions)
+   * 'svg' – reserved
+   */
+  type: 'pdf' | 'png' | 'svg'
+  url: string
+  pageWidthPt: number
+  pageHeightPt: number
+}
+
+export type FieldResult = {
+  id: string
+  page: number
+  block_type?: BlockType
+  text: string
+  /** MinerU 原始表格 HTML（含 colspan/rowspan），仅 block_type==='table' 时存在 */
+  table_html?: string | null
+  font_name?: string | null
+  font_size_pt?: number | null
+  font_height_mm?: number | null
+  x0_pt: number
+  top_pt: number
+  x1_pt: number
+  bottom_pt: number
+  normalized_text: string
+  validation_status: ValidationStatus
+  validation_reason: string
+  matched_excerpt: string | null
+}
+
+export type BarcodeResult = {
+  format: string
+  format_label: string
+  text: string
+  x0: number
+  y0: number
+  x1: number
+  y1: number
+  valid: boolean
+  /** 后端裁剪出的条码图片相对 URL，用于条形码面板预览 */
+  crop_url?: string
+}
+
+export type ProcessResponse = {
+  preview: PreviewMeta
+  fields: FieldResult[]
+  word_text?: string
+  /** pandoc 转换的 HTML 片段，保留 colspan/rowspan，用于 Word 解析结果 tab 展示 */
+  word_html?: string | null
+  barcodes?: BarcodeResult[]
+}