Hunk UI 打磨实战：用 TSX 双文件对比演示 rename、属性重构与行内高亮

开发工具代码评审CLIAI 应用【免费下载链接】hunkReview-first terminal diff viewer for agentic coders项目地址https://gitcode.com/gh_mirrors/hu/hunk点击查看免费下载这篇技术指南以 Hunk 仓库中的4-ui-polish示例为线索讲解如何用hunk diff --files对两个具体的 TSX 文件做一次界面打磨级代码评审组件改名、属性prop重命名、提取按钮文案辅助函数以及 Hunk 在字符串与标签上的行内intra-line强调效果。读完你可以直接复现这个示例并理解 Hunk 的 split/unified 布局、行内 diff 高亮和主题渲染在底层是如何工作的。一、示例概览一次截图友好的 TSX 变更examples/4-ui-polish/README.md将本示例定位为 A screenshot-friendly TSX diff with copy edits, prop renames, and a small layout cleanup即一次刻意设计成适合截图展示的 TSX 差异演示变更内容覆盖三类典型重构组件与属性重命名ChangeSummaryCard→ReviewSummaryCardtitle/note→heading/supportingTextchanges→fileCountlastSynced→lastUpdatedonOpen→onReview提取按钮文案辅助函数新增reviewButtonLabel(fileCount)根据文件数量动态生成单数/复数文案小幅布局清理外层容器增加gap: 1底栏增加alignItems: center文案从{changes} files changed改为{fileCount} files ready for review。之所以说截图友好是因为这是一份紧凑的、只涉及单个文件对before/after的 UI 差异变更点集中、行数不多在 split左右对照和 unified上下合并两种布局下都能完整呈现不会因内容过长而需要滚动。这与同仓库的5-pager-tour高而长的单文件 diff专门演示分页滚动形成互补。二、运行方式hunk diff --files双文件对比在仓库根目录执行 README 给出的命令即可复现hunk diff --files examples/4-ui-polish/before.tsx examples/4-ui-polish/after.tsx--files是 Hunkdiff子命令提供的具体文件对比入口。根据 CLI 定义语法为hunk diff --files left right恰好两个文件路径不带 revision、staged 或 pathspec 参数与位置参数不同两个位置参数永远被解释为 revision 端点即使磁盘上存在同名文件而--files专门用于不依赖仓库、直接对比两个具体文件的场景解析器在遇到--files后不再依赖当前文件系统或后端语法来做歧义消解cli.ts这在仓库外直接对比文件时尤其有用。相关行为有测试覆盖例如 cli.test.ts 中验证了--fast --files left right的解析、两个已有文件路径在无--files时仍按 revision 处理、以及混合/畸形--files形式会被拒绝cli.test.ts。三、before → after逐项拆解这次 UI 打磨3.1 组件与属性重命名copy edits prop renamesbefore.tsx中组件名为ChangeSummaryCard属性面向变更摘要语义title、note、changes、lastSynced、onOpenafter.tsx将其整体重命名为面向评审工作流的ReviewSummaryCard属性变为heading、supportingText、fileCount、lastUpdated、onReview。在 diff 视图中这类连续多行全部改写的区域会以整块删除新增的形式呈现是练习观察 Hunk 行内强调的好素材——changes→fileCount、lastSynced→lastUpdated这类单词级改动会被逐词高亮出来详见第四节。3.2 提取按钮文案辅助函数after.tsx新增了独立辅助函数集中管理按钮文案的复数逻辑function reviewButtonLabel(fileCount: number) { return fileCount 1 ? Review 1 file : Review ${fileCount} files; }并在按钮上改为label{reviewButtonLabel(fileCount)}。相比before.tsx里写死的labelOpen diff这不仅让单复数文案集中管理也让 diff 中模板字符串内插值成为演示行内高亮的经典案例Review ${fileCount} files的插值部分与外围字符串在行内会被不同强调区分开。3.3 布局与文案清理after.tsx的容器样式从flexDirection: column增加gap: 1两个内层 box 之间获得统一间距底部行增加alignItems: center以对齐按钮与文本文案也从被动陈述{changes} files changed改为行动导向的{fileCount} files ready for review并把Synced {lastSynced}改为Updated {lastUpdated}。四、What to look for如何在 diff 中检验效果README 给出了三个观察要点逐一对应底层实现重命名与提取的辅助函数观察 props 声明行的成组改写以及新增reviewButtonLabel函数块作为纯新增 hunk 出现字符串与标签的行内强调这是 Hunk 的 word-diff词级 diff能力。在 highlightCompact.ts 中COMPACT_HIGHLIGHT_FLAG_WORD_DIFF标记专门标识由接收方行的 word-diff 策略决定背景的高亮 run行内变化的文字会被单独着色/加背景使fileCount、lastUpdated、模板插值等微改动一目了然split 与 unified 布局下都好看的紧凑 UI diffHunk 支持--mode auto|split|unifiedcli.ts。split 布局左右对照、unified 布局上下合并单元格配色由splitCellPalette/unifiedCellPalette分别定义并有 CodeCellView.test.tsx 覆盖两种布局下新增/删除行的调色板与复制选择行为。如果希望在固定布局下观看可加上--mode split或--mode unified想使用预设主题可用--theme theme如--theme midnight需要分页式终端外壳时加--pagercli.ts。五、把示例迁移到自己的 TSX 评审工作流4-ui-polish的精髓不在文件本身而在于它示范的工作流——用hunk diff --files对任意两份 TSX 快照做 UI 级代码评审。可以这样迁移用 Git 历史或手动保存的方式导出重构前的before.tsx与重构后的after.tsx运行hunk diff --files before.tsx after.tsx [--mode split]在双栏下逐块核对重命名与布局变更重点检查字符串模板、props 名这类单词级修改是否被行内强调正确标出避免漏看对多文件、更真实的重构场景则可改用hunk patch change.patch参见2-mini-app-refactor示例或配合--agent-context注入 agent 评审笔记参见3-agent-review-demo。六、小结4-ui-polish用 40 余行 TSX 演示了组件改名、属性重命名、辅助函数提取与布局清理这四类常见 UI 重构并借助 Hunk 的--files双文件对比与行内 word-diff 强调让每次微改动都清晰可见。复现它只需一条命令理解它则能顺带掌握 Hunk 的布局模式、主题与高亮管线的核心概念为后续阅读 HunkDiffView 组件文档 或浏览其他示例如 examples/README.md 的完整菜单打下基础。赞分享开发工具代码评审CLIAI 应用【免费下载链接】hunkReview-first terminal diff viewer for agentic coders项目地址https://gitcode.com/gh_mirrors/hu/hunk点击查看免费下载相关推荐Hunk 实战示例解析用 hunk patch 完成一个多文件 mini-app 重构审查Hunk 实战示例解析用 hunk patch 完成一个多文件 mini app 重构审查 导读 examples/2 mini app refactor 是开发工具代码评审CLIAI 应用pypdf文档对比工具实现两个PDF文件内容差异高亮显示pypdf文档对比工具实现两个PDF文件内容差异高亮显示 在日常工作中你是否经常需要对比两个PDF文件的内容差异无论是合同修订、报告更新还是学术论文修改后端Habitat-Lab完整指南如何快速构建你的第一个具身AI训练环境Habitat Lab完整指南如何快速构建你的第一个具身AI训练环境 Habitat Lab是Meta AI开发的 模块化高级库 专门用于 具身AI代理训练开发工具代码评审CLIAI 应用上一篇CLIP零样本分类避坑指南3步跑通4个高频报错下一篇Czkawka/Krokiet 免费开源重复文件清理工具完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考