AionUi 预览面板：3步让AI写出的文件直接能看、能改、能分享-创锋一号

AionUi 预览面板：3步让AI写出的文件直接能看、能改、能分享

【免费下载链接】AionUiOpen-source 24/7 Cowork app for OpenClaw, Hermes, Claude Code, Codex, OpenCode and 20+ more CLI Agent | Customize your assistants | Team them up｜Star if you like it!项目地址: https://gitcode.com/GitHub_Trending/ai/AionUi

让 Claude Code 改完一轮代码，你想看看它到底写了啥，结果得去终端里翻文件、开外部编辑器，还得自己判断哪段是它改的。AionUi 的预览面板就是为这个环节准备的：点开文件，代码、Markdown、图片、diff 直接在对话旁边渲染出来，还能顺手改掉再保存回去。

30秒跑通预览面板

跟着做就行，不用看原理：

在会话里让 AI 生成或修改一个文件（比如写个 Markdown 文档）。
在右侧工作区里单击这个文件，它自动在预览面板中打开。
不满意？点工具栏的编辑按钮，直接改，改完Cmd/Ctrl + S保存，完事。

这个功能到底能干嘛

如果你不想来回切窗口看文件

点一下文件就打开，代码带语法高亮，Markdown 直接渲染成富文本，图片直接显示。AI 生成什么，你在旁边就能看到什么，省得复制粘贴到别的软件里"验货"。

当你想同时盯好几个文件

预览面板支持多标签，每个文件一个 Tab，随便切换。同一个文件重复打开会自动合并到已有标签，不会刷屏。标签多了还能右键选"关闭其他"一键清场。

如果你发现AI改得有一点点不对

点编辑进编辑模式，Markdown 和代码支持分屏：左边改、右边实时看效果，滚动位置还同步。改完点保存（或按 Cmd/Ctrl + S），内容写回原文件。没保存就关掉？会弹确认框拦住你，不怕丢改动。

当AI在写文件时你不想干等

预览是实时流式更新的——Agent 正在往文件里写内容，你打开着就能逐段看到它"打字"，不用刷新、不用关再开。

进阶 / 隐藏技巧

两个不太显眼但很实用的点：

把选中内容直接丢进聊天框。在预览里选中一段文本，会浮出一个小工具栏，选"添加到发送框"，这段内容就进了聊天输入框——相当于指着 AI 的产物说"这段再优化一下"，不用手动复制粘贴。相关逻辑见 SelectionToolbar.tsx。

拖分隔条调分屏比例。编辑/分屏那条分隔线可以直接拖，左右比例在 30%~70% 之间随便调，而且会自动记住你的习惯，下次打开还是那个比例。

实战：3个典型场景

场景1：审AI改的代码。让 Agent 重构一个模块后，在工作区点开改动的文件，代码带高亮直接看；如果是 diff 文件（.diff/.patch），预览会按"加/删行"着色展示，改了哪几行一眼清楚。

场景2：让AI写一份报告。生成 Markdown 后点开预览，表格、标题、代码块全部渲染成富文本，相当于直接看终稿。觉得哪句措辞不行，编辑模式下顺手改掉保存，交付就完了。

场景3：AI生成的Excel/图片直接验收。工作区里点开 .xlsx 会按表格视图展示，点开 PNG/JPG 直接看图，连外部查看器都不用开，适合快速确认产物质量。

下次 AI 甩给你一堆产物时，别急着复制粘贴，先在工作区点开丢到预览里过一眼——能看、能改、能分享，体验完全不一样。现在就开一轮对话试试，你的第一个预览 Tab 马上就有内容了。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业官网建设流程全解析