Skip to content

[Feature] 增加 HTML 预览功能 #48

Description

@Matsuko97

What do you want? (你想要什么?)

希望在 Cebian 中增加一个 HTML 预览功能:当侧边栏 / 对话中出现 HTML 代码(例如 AI 生成的 HTML 片段,或从页面提取的 HTML)时,可以一键在预览面板中直接渲染该 HTML,实时查看最终显示效果,而不必手动把代码复制到本地文件或外部工具中打开。

Why? (为什么?)

目前当 AI 生成或整理出一段 HTML 代码后,用户只能看到源码,无法直接看到渲染效果,需要自己复制到本地 .html 文件或第三方在线工具中才能预览,操作繁琐、打断工作流。增加内置 HTML 预览可以让用户即时看到页面效果,大幅提升制作网页片段、调试样式、生成可视化内容等场景下的效率与体验。

How? (怎么做? — 可选)

可以在包含 HTML 代码块的消息上增加一个「预览 / Preview」按钮,点击后在侧边栏内(或弹出面板中)通过安全的 iframe(建议开启沙箱 sandbox)渲染该段 HTML。可考虑:

  • 支持「代码 / 预览」两个标签页切换;
  • 出于安全考虑对脚本执行做限制或提示;
  • 预览面板支持刷新与全屏查看。

Alternatives considered (考虑过的替代方案 — 可选)

  • 手动复制 HTML 到本地文件并用浏览器打开(繁琐、打断工作流);
  • 使用外部在线工具(如 CodePen、JSFiddle)预览(需切换应用、粘贴代码,且涉及把内容发送到第三方)。

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions