docs/requirements/2025-10-11-17-12-refactor-code-preview-to-tabs.md

需求：将代码预览重构为 Tab 布局并优化刷新机制

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

1. 需求描述

为了优化“代码生成”标签页的布局和用户体验，需要将“实时预览”和“生成的源代码”整合到同一个区域，并改进代码生成过程中的预览刷新逻辑。

2. 功能要求

1. Tab 布局:

   • 将原有的右侧“实时预览”面板和底部“生成的源代码”面板，合并为页面右侧的一个 gr.Tabs 组件。
   • 该组件包含两个标签页：
     • Tab 1: "实时预览": 显示 <iframe> 预览和“全屏”按钮。
     • Tab 2: "生成的源代码": 显示代码框。

2. 加载动画:

   • 当用户点击“生成代码”后，在“实时预览”Tab 的内容区域中央，应立即显示一个旋转的加载动画（spinner），以明确表示“正在生成中”。
   • 这个动画在代码完全生成后消失。

3. 刷新节流 (Throttling):

   • 在代码流式生成期间，“实时预览”<iframe> 的内容刷新频率应降低，至多每 5 秒刷新一次。
   • 这可以避免因 <iframe> 过于频繁的重渲染导致的浏览器性能问题和闪烁。
   • 与此同时，“生成的源代码”Tab 内的文本需要保持实时的逐字流式更新。

3. 验收标准

1. 新布局: 预览和代码框已正确地显示在两个并列的 Tab 中。
2. 加载动画: 点击生成后，预览 Tab 能立即看到加载动画。
3. 刷新行为:
   • 在生成过程中切换到“生成的源代码”Tab，能看到代码在流畅地逐字增加。
   • 停留在“实时预览”Tab，能观察到 <iframe> 的内容是间隔性更新的（大约5秒一次），而不是持续闪烁。
4. 最终结果: 代码生成结束后，加载动画消失，预览区和代码区都显示最终的完整内容。

4. 验证方式

• 通过 UI 手动测试 Tab 布局、加载动画、刷新节流机制以及源代码的 HTML 转义问题。

5. 验证结果

• 已验证 (Verified)。所有功能点均按预期工作，转义问题已修复。