Pinvou Agent 产物面板实战：AI 生成的 Markdown 如何直接编辑、集中预览与交付
【免费下载链接】pinvou-agentOpen-source desktop AI agent for tools, files, knowledge, workflows, and real deliverables.项目地址: https://gitcode.com/gh_mirrors/pi/pinvou-agent
Pinvou Agent（PINVOU 智能助手）是一款开源的桌面 AI Agent，能把文件、工具、知识与工作流整合成真实交付物。它的「产物面板」是所有 AI 生成文件的集中预览台：Markdown 文档可以直接编辑并自动保存，选中一段文字还能一键唤起 AI 修改，让交付不再依赖复制粘贴。📄
打开产物面板：AI 生成的文件集中预览
让 Pinvou Agent 完成一个任务（例如"对比这两份文件并生成会议纪要"），右侧会自动弹出「产物与代码」面板：
面板提供两种视图：
- 产物列表：按文件浏览本次会话产出的所有文件，附带类型、大小与修改时间；
- 预览：点击文件即可在面板内渲染 Markdown、HTML、图片、PDF 等格式，底部还有「打开」与「所在位置」两个快捷按钮，一步直达系统应用或资源管理器。
面板的核心实现位于 ArtifactsPanel.jsx，它监听会话产物快照并驱动列表与预览两种状态；文件读取由后端命令 artifacts.rs 的read_artifact_text完成，前端通过 artifacts.js 桥接调用。
直接编辑 Markdown：跳过预览与源码的来回切换
普通做法是"预览看看 → 切到编辑器改 → 保存 → 再回来预览"，Pinvou Agent 的产物面板把这一步省掉了：
- 打开
.md/.markdown产物，显示的就是渲染后的文档，没有"预览/编辑"双模式； - 直接在渲染出的正文上点击、选中、删除、输入、粘贴，支持标题、段落、列表、表格等常见内容；
- 手动编辑后1 秒防抖自动保存回原文件，状态栏会在"未保存 → 正在保存 → 已保存"之间切换，保存失败会有明确提示；
- 切换产物、关闭面板或失焦前会自动落盘，避免丢内容。
背后由 EditableMarkdownPreview.jsx 实现：用contentEditable承载渲染结果，再借助 turndown 把编辑后的 HTML 转回 Markdown；写回磁盘走后端write_artifact_text命令（同样在 artifacts.rs 中），它会校验路径合法性、只允许.md/.markdown扩展名，并采用"临时文件 + rename"方式安全写入。完整设计思路可阅读 产物Markdown编辑开发方案.md。
划选文字唤起 AI 编辑：最快修改路径
改一大段文字？不必自己敲提示词。在渲染后的文档中划选任意一段文字，选区旁会浮出「AI 编辑」按钮：
点击后按钮变成输入框，输入"改成更正式的语气"这类要求并确认，系统会自动把文件路径 + 选中文本 + 修改要求组织成提示词，预填进左侧聊天输入框。检查无误后自己点击发送，AI 就会基于最新文件内容进行修改——预填而不自动发送，正是为了防止误触和留给你补充上下文的余地。
这套"选区 → 提示词"的组装逻辑在 EditableMarkdownPreview.jsx 的buildAiPrompt中实现，预填走 bridge 的prefillComposer通道，若输入框已有草稿还会先弹替换确认，保护你正在写的内容。
交付与自动刷新：AI 改完，预览自己跟上
交付场景还有两个贴心细节：
- 产物卡片：当 AI 产出给客户看的成品（如 HTML 页面、图片）时，可以主动把它"升级"为聊天区里的可点击卡片，点一下就打开，迭代重写还会自动续卡。这条链路见 present-artifact-落地方案.md；
- 动态刷新：你正预览着某个 Markdown，AI 在对话中又修改了它——面板会通过
artifact:disk文件变更事件自动刷新，无需关闭重开。若你本地有未保存编辑，刷新会被拦截并提示"文件已在外部更新"，草稿绝不会被静默覆盖。
上手验证清单：5 分钟走通全流程
想亲手验收这套能力？跟着做一遍即可：
- 让 AI 生成一个
.md产物，确认右侧产物面板出现； - 打开它，直接在正文里改一句话，等 1 秒看状态变"已保存"，重新打开文件确认已写回；
- 划选一段文字，确认浮出「AI 编辑」按钮，输入要求后确认，检查聊天框里已带齐路径、选中文本与要求；
- 发出去让 AI 修改同一文件，回来看预览是否自动刷新；
- 有未保存内容时让外部修改文件，确认出现"外部更新"提示而非内容丢失。
对应的自动化测试在 markdown_artifact_edit_smoke.js 中覆盖了编辑、自动保存、AI 编辑预填、动态刷新、脏草稿保护等场景，后端写入安全（拒绝非 Markdown、敏感路径、不存在文件）由 tests.rs 中的write_artifact_text系列用例守护。
小结
Pinvou Agent 的产物面板把"AI 生成 → 人改 → AI 再改 → 交付"压缩到了同一个窗口里：集中预览省去翻文件，直接编辑省去模式切换，划选 AI 编辑省去手写提示词，自动刷新省去手动重开。对于经常和 AI 一起产出文档、页面的新手来说，这是上手门槛最低、回报最直接的一条工作流。✨
【免费下载链接】pinvou-agentOpen-source desktop AI agent for tools, files, knowledge, workflows, and real deliverables.项目地址: https://gitcode.com/gh_mirrors/pi/pinvou-agent
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
