把结果画出来

终端里把 JSON 打漂亮，模型组会点头。把同一段 JSON 丢给要签字的人，他只会问这是什么。TextGuard 的前端是 React / TypeScript。识别、特征解释、风险可视化、样本对照，都得画在屏幕上。我是张恒基。我把可视化当成产品，不当成「再包一层」。只训模型不算全栈。

JSON 清楚不等于人清楚

后端返回标签、分数、特征列表，结构可以很干净。干净对接口测试有用，对老师没用。老师要看见风险落在哪一段、对照样本长什么样、下一步点哪。这些如果还要读字段名，页面就没做完。页面做完的标准是：不懂 score 这个词的人，也能决定要不要复核。

React 这边容易陷入组件拆分的自我满足。拆得很细，故事书里每块都亮，主路径却要点五次。评委没有五次。我把主路径收成三次以内：贴文本、看结果、导出。解释和对照挂在结果页，不挂在另一个「可视化中心」。中心听起来高级，用起来像走丢。

TypeScript 把接口字段写成类型，能挡住一类低级错：后端改了名字，前端还在画旧键。挡住之后，仍要有人把空数据和超时画成空状态。类型过了，运行时仍会空。空的时候如果用默认零把图撑起来，风险曲线会从零开始一段假的平滑。假的平滑比报错难看。报错至少诚实。

解释和对照是同一屏的事

特征解释如果和样本对照拆开，使用者看完解释还要自己想象「像什么」。想象会往判决的方向走。对照放在旁边，想象被压住。压住一点，误伤时才有反驳的材料。反驳的材料是产品，不是科研配图。科研配图可以进论文。产品图要进报告导出。导出里的图和屏幕上的图必须是同一套数。

可视化也有自己的超时。结果还没回来就先画骨架，可以。骨架如果带一条正在上升的动画，会像已经在判。我把等待态画成静的。静，评委可能觉得不炫。不炫比误导安全。安全在检测产品里比炫更值钱。值钱的东西往往不好看。不好看我认。

2025 年 11 月起这条前端线和 FastAPI 后端一起走。我作为总负责人，不把页面外包成「有人在写 React」。页面上的字段我要说得出对应哪个接口。说不出，可视化就是装饰。装饰在京彩会被问可持续。可持续回答成「我们会继续优化界面」，等于没回答。界面要先服务于报告谁来用。

打通三条，才算这一层做完

识别通了，只是能打分。解释通了，只是能说话。报告通了，才有人能把结果带走。三条都通，前端才算把全栈的最后一截接上。接上之后还会坏：接口改字段、超时策略改了、导出缺签字栏。坏的时候先修主路径，不先加新图表。新图表在主路径断的时候是负担。

我后来在智链写 Vue3，肌肉记忆会把 useState 往组件里塞。仓库用 Vue 就跟 Vue。TextGuard 这条线用 React 就跟 React。不要把 A 的习惯套到 B。这一条我给别的仓库写约定时又写了一遍。写的时候想的就是：检测页的可视化债，不要带到校级平台的列表页上。列表页有自己的空状态。

画结果还有一个限制：数字不能比划分更漂亮。图上的准确率条、风险色阶，都要能指回当次请求的字段。指回不了的总览数字，不要做成仪表盘挂在识别页头顶。头顶的仪表盘是 Banner 的亲戚。亲戚会过时。过时的图仍在 React 树里发光，危害比过时的 PPT 更大，因为站点一直开着。

色阶也容易吓人。从绿到红的渐变，会把中间分数画成「已经危险」。已经危险是判决口吻。口吻一出现，解释页来不及救。我把中间段画成需要复核的中性色，两端才用明确的色。明确的色仍然配文字，不单靠颜色。单靠颜色的图，打印成报告会失效。失效的图不要进导出。导出里的图和屏幕必须同源。同源比好看先做完。

包一层不算前端

我收到的限制来自模型组那次点头：JSON 清楚只对写接口的人清楚。React / TypeScript 这一层必须把识别、解释、对照、导出画成一条人能走完的路。走不完，全栈就停在终端。停在终端的项目可以训模型，不能给人签字。给人签字的那一截，必须在屏幕上。

屏幕上如果只是把 JSON 缩进打印出来，那叫调试页。调试页可以留给自己。给评委和老师的页要把字段翻译成人能决定的下一步：复核、放过、再贴一段。下一步点不出去，前端就还没做完。没做完的时候，不要在材料里写「可视化完善」。完善两个字超了证据。超证据的前端，和超证据的论文数字，是同一类缺陷。缺陷我先从识别页头顶的假仪表盘卸掉。