\chapter{系统实现与界面展示}

\section{系统实现概况}

当前系统已经形成较完整的前后端闭环能力。前端采用 React 18、TypeScript、Ant Design 与 ECharts 构建案件管理和可视化界面；后端采用 FastAPI、SQLAlchemy、PostgreSQL 和 Redis 组织业务服务与异步任务；外部AI接口承担截图视觉识别、理由生成和笔录辅助文本生成等任务。

\begin{table}[H]
  \centering
  \caption{系统技术实现表}
  \begin{tabularx}{\textwidth}{p{0.18\textwidth}p{0.24\textwidth}Y}
    \toprule
    技术层面 & 选型情况 & 作用说明 \\
    \midrule
    前端展示 & React 18 + TypeScript + Ant Design + ECharts & 实现工作台、图表分析、复核与报告导出交互 \\
    后端服务 & FastAPI + SQLAlchemy & 提供案件、截图、分析、认定、报告等API能力 \\
    数据存储 & PostgreSQL & 保存案件、交易、认定、报告等核心数据 \\
    任务调度 & Celery + Redis & 支撑OCR和分析任务异步执行 \\
    智能能力 & 视觉模型接口、文本模型接口 & 支撑截图识别、理由优化和问询生成 \\
    \bottomrule
  \end{tabularx}
\end{table}

\section{前端功能页面}

系统前端围绕办案流程设计了案件列表、工作台、截图页、交易页、分析页、复核页和报告页等核心页面，能够覆盖从证据上传到结果导出的完整链路。其中，认定复核页新增笔录功能，可在民警完成复核确认后自动生成可直接插入笔录的内容摘要。

\begin{table}[H]
  \centering
  \caption{前端核心页面说明表}
  \begin{tabularx}{\textwidth}{p{0.2\textwidth}p{0.23\textwidth}Y}
    \toprule
    页面名称 & 主要功能 & 办案价值 \\
    \midrule
    案件列表页 & 创建、查看和管理案件 & 统一案件入口，形成案件级组织 \\
    工作台页 & 上传截图、查看处理进度、快速发起OCR和分析 & 串联完整工作流程 \\
    截图页 & 查看截图、识别状态与提取结果 & 便于证据逐张核验 \\
    交易页 & 查看提取交易、去重状态、中转标记 & 便于排查重复与异常记录 \\
    分析页 & 资金流图、时间轴、收款方聚合 & 快速把握案件整体资金结构 \\
    复核页 & 审核认定结果、确认或排除记录、生成笔录内容 & 落实人机协同闭环并提升笔录效率 \\
    报告页 & 生成和下载Excel/PDF报告 & 支撑汇报、归档和复用 \\
    \bottomrule
  \end{tabularx}
\end{table}

\placeholderwidefigure{建议放置“工作台界面截图”，重点体现上传截图、OCR状态、交易数量、待复核数量等关键指标。}

\placeholderwidefigure{建议放置“分析页界面截图”，突出资金流转关系图、交易时间轴和收款方聚合三个区域。}

\placeholderwidefigure{建议放置“认定复核页界面截图”，突出逐笔复核区域、笔录内容生成区域和可直接插入笔录的功能入口。}

\placeholderwidefigure{建议放置“报告页界面截图”，展示导出格式选择、报告内容选择、历史报告列表等区域。}

\section{后端接口与服务实现}

后端按案件管理、截图管理、分析任务、交易管理、认定复核、笔录辅助、报告导出等能力拆分接口，接口组织结构与办案流程高度对应，便于前后端协同和后续系统集成。

\begin{table}[H]
  \centering
  \caption{后端主要接口表}
  \begin{tabularx}{\textwidth}{p{0.32\textwidth}p{0.12\textwidth}Y}
    \toprule
    接口路径 & 方法 & 功能说明 \\
    \midrule
    /api/v1/cases & GET/POST & 案件列表查询与案件创建 \\
    /api/v1/cases/\{id\} & GET/PATCH & 案件详情查询与更新 \\
    /api/v1/cases/\{id\}/images & GET/POST & 案件截图列表与批量上传 \\
    /api/v1/images/\{id\} & GET & 截图详情及识别结果查看 \\
    /api/v1/cases/\{id\}/analyze & POST & 触发案件分析任务 \\
    /api/v1/cases/\{id\}/transactions & GET & 交易列表查看 \\
    /api/v1/cases/\{id\}/flows & GET & 资金流图数据获取 \\
    /api/v1/cases/\{id\}/assessments & GET & 认定结果列表获取 \\
    /api/v1/assessments/\{id\}/review & POST & 人工复核提交 \\
    /api/v1/cases/\{id\}/inquiry-suggestions & GET & 获取笔录问询建议 \\
    /api/v1/cases/\{id\}/reports & GET/POST & 报告列表获取与生成 \\
    /api/v1/reports/\{id\}/download & GET & 下载生成后的报告文件 \\
    \bottomrule
  \end{tabularx}
\end{table}

\section{处理链路实现}

系统分析链路采用按案件执行的同步或异步流水线模式。典型处理顺序为：先完成交易匹配与去重，再进行金额认定，最后回写案件总额并进入待复核状态。该设计兼顾了逻辑清晰性和工程可落地性。

\begin{table}[H]
  \centering
  \caption{案件分析链路实现表}
  \begin{tabularx}{\textwidth}{p{0.16\textwidth}p{0.22\textwidth}Y}
    \toprule
    处理阶段 & 主要动作 & 结果输出 \\
    \midrule
    阶段一 & 读取案件与截图上下文 & 初始化分析任务 \\
    阶段二 & 执行交易匹配、去重与中转识别 & 形成有效交易集合 \\
    阶段三 & 对有效交易执行金额认定与理由生成 & 形成认定结果清单 \\
    阶段四 & 回写案件总额并切换案件状态 & 进入人工复核阶段 \\
    阶段五 & 生成笔录内容、问询建议与导出报告 & 形成可办案输出材料 \\
    \bottomrule
  \end{tabularx}
\end{table}

\section{部署与演示方式}

项目支持本地开发部署和基础设施一键启动，便于完成比赛演示。当前设计同时支持在后端不可用时以前端内置数据进行演示，能够保证展示过程的稳定性与连续性。

\begin{table}[H]
  \centering
  \caption{部署与演示方式表}
  \begin{tabularx}{\textwidth}{p{0.18\textwidth}p{0.22\textwidth}Y}
    \toprule
    场景 & 主要方式 & 适用说明 \\
    \midrule
    本地联调 & 前端 + 后端 + PostgreSQL + Redis & 适合完整演示业务闭环 \\
    纯前端演示 & 前端使用内置Mock数据 & 适合网络环境受限时的稳定展示 \\
    AI接口配置 & OCR与LLM接口可分别配置 & 适合按需接入不同模型能力 \\
    扩展部署 & 可进一步迁移至专网或本地化环境 & 适合警务场景安全要求 \\
    \bottomrule
  \end{tabularx}
\end{table}
