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)。所有功能点均按预期工作，转义问题已修复。