Component
sight
Problem Statement
Token Savings 面板中展示的优化前后代码对比缺乏直观的解释,普通用户难以理解具体的节省逻辑。原有 DiffView 组件仅以整块红/绿背景展示原始与优化后文本,没有行级对比,没有自然语言说明,diff_lines 字段始终为空。
Proposed Solution
- 后端新增
optimization_reason 字段,根据操作类型+token变化量自动生成中文自然语言说明
- 后端实现
compute_diff_lines 函数,基于 LCS 算法生成行级 diff 数据
- 前端 DiffView 重构:顶部蓝色优化说明面板 + 行级 diff 高亮 + 底部统计
- 前端表格行增强:显示优化标题和节省百分比
Alternatives Considered
- 仅前端实现 diff 算法(缺点:大文本时前端性能不佳)
- 引入第三方 diff 库(缺点:增加依赖体积)
Additional Context
对应需求 ID: 82706233
Component
sight
Problem Statement
Token Savings 面板中展示的优化前后代码对比缺乏直观的解释,普通用户难以理解具体的节省逻辑。原有 DiffView 组件仅以整块红/绿背景展示原始与优化后文本,没有行级对比,没有自然语言说明,
diff_lines字段始终为空。Proposed Solution
optimization_reason字段,根据操作类型+token变化量自动生成中文自然语言说明compute_diff_lines函数,基于 LCS 算法生成行级 diff 数据Alternatives Considered
Additional Context
对应需求 ID: 82706233