AI 代码审查工具新增并排预览功能

AI 代码审查工具新增并排预览功能 | 前端进阶之旅

Full translation

完整中文译文

你好，我是 Maneshwar。我正在开发 git-lrc，一个在每次提交时运行的微型 AI 代码审查工具。它是免费的，代码开源在 Github 上。给 git-lrc 点个 star 帮助开发者发现这个项目。一定要试试看并分享你的反馈。

上次，我列出了一个"下一步"的清单。

图像内联预览：通过 Kitty/iTerm 协议或 chafa 在终端中渲染图像

分割窗格文件预览：选中的文件内容显示在右侧，这样你可以在不离开的情况下快速查看

今天这两个功能都上线了。

按下 p。右侧打开一个预览面板。再按一次 p。它关闭了。

就是这样。这就是从外部看整个功能。

内部更有趣。

Peek First. Open Later. 用 Bubble Tea 构建的 TUI 文件浏览器

一个用 Bubble Tea 构建的极简终端文件浏览器。

用方向键（或 vim 快捷键）浏览文件系统，然后将每个文件直接导入到你为它配置的应用程序中。

快速预览一下：

curl -fsSL https://raw.githubusercontent.com/lovestaco/peektea/master/scripts/install.sh | sh

下载一个二进制文件（不需要 Go）—— 从发布页面获取你的平台的最新版本：

解压并将 peektea 二进制文件放在你的 $PATH 的任何地方。

go install github.com/lovestaco/peektea@latest

git clone https://github.com/lovestaco/peektea
cd peektea
make install

make install 将二进制文件放在 ~/go/bin 并为你确定 $PATH：

已经可达 —— 完成，无需操作。

~/.local/bin 在你的 $PATH 中 —— 在那里创建符号链接，在当前 shell 中立即生效。

都不是 —— 将 ~/go/bin 追加到你的 .bashrc…

启用预览时，peektea 现在在两列中呈现。

左边：文件浏览器。右边：光标下的任何内容。

它处理四种情况：

文本文件：前 N 行，制表符展开，截断到面板宽度

图像：通过 chafa 内联呈现

目录：以与浏览器相同的目录/文件样式列出内容

二进制文件：显示 [binary file] 提示而不是乱码

预览会在你导航时更新。

移动光标，加载新的预览。

进入目录，它预览新的选择。

使用 tea.Cmd 的异步加载

预览不能阻塞 TUI，读取大文件或运行 chafa 需要时间。

在 Bubble Tea 中，任何需要时间的操作都是一个 tea.Cmd：一个在主循环外运行的函数，完成时返回一条消息。

type previewMsg struct{ content string }

func loadPreview(path string, entry os.DirEntry, width, height int) tea.Cmd {
    return func() tea.Msg {
        if entry.IsDir() {
            return previewMsg{content: previewDir(path, width, height)}
        }
        if isImageExt(entry.Name()) {
            return previewMsg{content: previewImage(path, width, height)}
        }
        return previewMsg{content: previewText(path, width, height)}
    }
}

模型设置 previewLoading = true 并发起命令。

面板显示加载中……

当 goroutine 完成时，previewMsg 通过 Update 返回，面板渲染结果。

整个过程中 TUI 保持响应，你可以在加载缓慢的预览时继续导航。

通过 chafa 的图像预览

chafa 是一个终端图像查看器，将图像转换为彩色 Unicode 块。

它尊重 --size WxH 所以输出完全适合预览面板内部。

func previewImage(path string, width, height int) string {
    if _, err := exec.LookPath("chafa"); err != nil {
        return "[image — install chafa for inline preview]"
    }
    out, err := exec.Command("chafa",
        "--size", fmt.Sprintf("%dx%d", width, height),
        path,
    ).Output()
    if err != nil {
        return fmt.Sprintf("[image preview failed: %v]", err)
    }
    return strings.TrimRight(string(out), "\n")
}

如果 chafa 没有安装，面板会告诉你。没有崩溃，没有无声的空白。

peektea init 现在在设置结束时检查 chafa，如果缺失则打印你的 distro 的安装命令。

将二进制文件作为文本打开会产生噪音。

所以在读取之前，peektea 检查前 512 字节的空字节，这是 git diff 和大多数编辑器使用的标准启发式方法。

func isBinary(path string) bool {
    f, err := os.Open(path)
    if err != nil {
        return false
    }
    defer f.Close()
    buf := make([]byte, 512)
    n, _ := f.Read(buf)
    for _, b := range buf[:n] {
        if b == 0 {
            return true
        }
    }
    return false
}

如果是二进制文件，预览显示 [binary file] 并继续。

终端大小和自适应左面板

为了正确地分割屏幕，peektea 需要知道它的大小。

每当终端调整大小时，Bubble Tea 会发送一个 tea.WindowSizeMsg。

模型存储宽度和高度，并用它们在每次渲染时计算面板尺寸。

case tea.WindowSizeMsg:
    m.width = msg.Width
    m.height = msg.Height

左面板宽度不是固定的，它从最少 50 个字符开始，然后扩展以适应当前目录中最长的文件名：

func (m model) leftWidth() int {
    const minWidth = 50
    w := minWidth
    for _, e := range m.entries {
        nameW := 2 + len([]rune(e.Name()))
        if e.IsDir() {
            nameW++
        }
        if nameW > w {
            w = nameW
        }
    }
    // Always leave at least 30 chars for the preview panel.
    if max := m.width - 32; w > max {
        w = max
    }
    return w
}

进入包含长文件名的目录时，左面板会扩展以容纳。离开时，它会缩回。

预览面板占用剩余的空间。

最后一件小事：左面板底部的提示栏被固定到终端的最后一行，而不是浮动在最后一项下方。

面板计算文件列表占用了多少行，并用空白行填充间隙，使提示始终位于底部。

感觉更像是一个真正的面板，而不是碰巧结束在那里的文本。

列表变短了：

Image previews inline ✓

Split-pane file preview ✓

边输入边过滤 —— Bubble Tea 的 bubbles 中的 textinput 组件就在那里等待

隐藏文件切换 —— 显示/隐藏点文件

模型增长，Update 处理新的按键，View 渲染新的状态。

这仍然是整个模式。它仍然可扩展。双关语永远不会枯竭。

AI agents 编写代码很快。他们也会静默地移除逻辑、改变行为并引入错误 —— 而不会告诉你。你经常在生产中才发现。

git-lrc 解决了这个问题。它钩入 git commit 并在每个 diff 合入前进行审查。60 秒设置。完全免费。

欢迎任何反馈或贡献者！它在线、源代码可用，且可供任何人使用。

免费、在提交时运行的微型 AI 代码审查

免费、在提交时运行的微型 AI 代码审查

AI agents 编写代码很快。他们也会静默地移除逻辑、改变行为并引入错误 —— 而不会告诉你。你经常在生产中才发现。

git-lrc 解决了这个问题。它钩入 git commit 并在每个 diff 合入前进行审查。60 秒设置。完全免费。

查看 git-lrc 捕获的严重安全问题，如泄露的凭证、昂贵的云操作和日志语句中的敏感材料

🤖 AI agents 默默地破坏东西。代码被移除。逻辑改变。边界情况消失。你不会注意到，直到生产。

🔍 在发布前捕获它。AI 驱动的内联注释向你确切地显示了什么改变了以及什么看起来不对。

一些评论可能仅对已登录的访问者可见。登录以查看所有评论。

对于进一步的操作，你可以考虑屏蔽此人和/或报告滥用行为