docs/requirements/2025-10-11-16-59-add-fullscreen-preview.md

需求：为代码生成预览增加缩放与全屏功能

• 创建时间: 2025-10-11
• 状态: 已验证 (Verified)

1. 需求描述

当前“代码生成”标签页的实时预览 <iframe> 尺寸固定，对于内容复杂或尺寸较大的生成结果（如 Canvas 动画），无法完整展示。需要对此进行优化，提供更好的预览体验。

2. 功能要求

1. 缩放预览 (Zoomed Preview):

   • 默认情况下，<iframe> 内的 HTML 内容需要被按比例缩小，以使其整体视图能被容纳在预览框内，即“缩放模式”。
   • 这需要通过 CSS transform: scale() 等技术实现。

2. 全屏切换功能 (Fullscreen Toggle):

   • 在“实时预览”区域的右上角，需要增加一个按钮，初始文本为“全屏预览”。
   • 点击“全屏预览”:
     • 左侧的输入面板和下方的源代码面板需要被隐藏。
     • 预览区域（gr.HTML 组件）扩展至占据整个可用空间。
     • 按钮文本变为“退出全屏”。
   • 点击“退出全屏”:
     • 恢复原始布局，重新显示左侧输入面板和下方源代码面板。
     • 按钮文本改回“全屏预览”。

3. 验收标准

1. 默认缩放: 生成一个页面后，预览区域默认以缩小后的视图展示 <iframe> 的内容。
2. 按钮存在: “实时预览”区域的右上角有一个“全屏预览”按钮。
3. 全屏功能: 点击按钮后，输入和代码区域消失，预览区变大，按钮文本切换。
4. 退出全屏: 再次点击按钮后，布局和按钮文本恢复原状。

4. 验证方式

• 通过 UI 手动测试缩放和全屏功能。

5. 验证结果

• 已验证 (Verified)。功能按预期工作。