PPT风格报告可视化

**目标：** 基于提供的源文档（例如，财务报告、分析报告、产品信息、毕业论文），生成一个单一、完整、可直接运行的 HTML 文件，该文件模拟PPT 演示文稿的风格，每页（幻灯片）为 16:9 比例，用户可以通过垂直滚动平滑地在幻灯片之间切换。文件必须动态地、可视化地呈现文档中的核心发现、关键数据和结构化信息，并特别优化单页（幻灯片）的内容密度，将辅助性或详细内容组织在可按需弹出的浮窗/模态框中。

**核心要求：**

1.  **单一 HTML 文件输出：**
    *   最终交付物必须是**一个 .html 文件**，包含所有必要的 HTML 结构、CSS 样式（通过 `<style>` 标签或内联 Tailwind 类）和 JavaScript（通过 `<script>` 标签，包括 CDN 引入和初始化逻辑）。
    *   不允许使用外部 CSS 或 JS 文件，只允许在 HTML 文件内部使用 CDN 链接。
2.  **PPT 风格与切换：**
    *   将文档内容组织成一系列逻辑上的“幻灯片”（slides）。
    *   每张幻灯片必须强制保持 16:9 的宽高比例。
    *   整个 HTML 页面应设置为一个可垂直滚动的容器。
    *   利用 CSS 的 `scroll-snap` 特性，实现平滑的、页面级的垂直滚动吸附效果，使用户在滚动时能准确停留在每张幻灯片（即一个完整的 16:9 区域）的开头。
    *   幻灯片应占据或接近占据整个视口宽度，高度根据 16:9 比例计算，并利用视口单位（`vh`, `vw`）进行响应式调整，确保在不同屏幕尺寸下保持比例和良好的观看体验。
4.  **内容密度与详细信息处理（核心优化）：**
    *   **提升单页密度：** 在每张幻灯片 16:9 的区域内，充分利用迷你卡片网络来呈现多个并列的核心要点、数据点或特性。这是在有限空间内提高信息密度的主要方式。
    *   **引入浮窗/模态框 (Modal/Overlay) 机制：**
        *   **目的：** 用于展示较长、详细但非核心、或者适合按需查看的内容（例如：完整的代码示例、详细的数据表格、某个复杂概念的详细解释、背景信息、引用原文等）。
        *   **实现：** 为这些详细内容创建独立的 HTML 结构，该结构最初是隐藏的。它应包含一个覆盖整个屏幕的半透明背景（用于遮罩和聚焦）和一个居中或占据屏幕主要区域的内容面板。内容面板内包含详细内容和一个清晰的关闭按钮（例如右上角的“X”图标）。
        *   **触发：** 在相关的幻灯片内容区域（例如在某个迷你卡片下方、一个段落旁边或一个关键数据点旁边）添加一个清晰的触发元素（按钮或链接，例如“查看详情”、“完整代码”、“数据表格”）。
        *   **JavaScript 交互：**
            *   使用 JavaScript 监听触发元素的点击事件。
            *   点击时，使对应的浮窗/模态框结构显示 (`display: block` 或调整 `visibility`/`opacity`)，并可能阻止背景滚动。
            *   监听浮窗背景区域的点击事件或关闭按钮的点击事件。
            *   点击浮窗背景或关闭按钮时，使浮窗/模态框结构隐藏 (`display: none` 或恢复 `visibility`/`opacity`)，并恢复背景滚动。
        *   **内容识别：** AI 必须能够智能识别源文档中哪些内容属于“详细、非核心、适合按需查看”的类别，并将它们从主幻灯片内容中剥离出来，放入浮窗结构中，同时在幻灯片原文位置生成相应的触发按钮。

**视觉设计与布局：**

1.  **整体风格：**
    *   参考 Apple 官网及发布会风格——简洁、现代，具有清晰的信息层级。
2.  **幻灯片内布局：**
    *   每张幻灯片是独立的 16:9 容器。
    *   幻灯片内部可以包含一个或多个内容块，这些块可以是全宽的，或者根据设计需求布局在 16:9 区域内。
    *   **迷你卡片 / 要点卡片 (Mini-Cards / Point-Cards) (幻灯片内关键布局元素)：**
        *   **目的：** 专门用于拆分和展示包含多个要点、风险、建议、特性、步骤或并行信息（例如，“关键发现”、“风险”、“建议”、“特性”）的段落或列表。
        *   **AI 任务：** 深入理解这些内容的语义。提取每个逻辑上独立、并列的核心要点。将每个要点转换为一个独立的迷你卡片。
        *   **布局：** 将这些迷你卡片排列在一个响应式网格中（例如，`grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4`，根据 16:9 的空间限制，可能需要更紧凑的布局，目标是在单页内尽可能多地展示迷你卡片，同时保持可读性）。
        *   **嵌套：** 幻灯片内的内容块可以包含迷你卡片网格。
3.  **背景：**
    *   纯黑页面背景 (`#000000`)。
5.  **高亮颜色**
    *   **自动品牌色：** 尝试识别内容中主要品牌（例如，“小米”、“华为”）。如果成功，则使用其官方主 VI 色（例如，小米橙 `#FF6900`）作为唯一的核心高亮色。
    *   **备选方案：** 如果品牌/颜色识别失败，则使用专业的科技蓝 (`#00AEEF`) 或亮橙色 (`#FFA500`)。
    *   **应用：** 统一应用于幻灯片标题、关键文本（标题、核心数据）、大的强调数字、图标、图表元素、可选边框和渐变色。
6.  **科技感渐变 (Tech Gradient)：**
    *   **仅应用于高亮色：** 创建从 `rgba(高亮色, 0.7)` 到 `rgba(高亮色, 0.3)` 的透明度渐变。
    *   **用途：** 用作卡片/区域、图表区域或文本背景的微妙底色。禁止使用多色渐变。
7.  **卡片样式 (Card Styling - 幻灯片内内容块与迷你卡片)：**
    *   **背景：** 所有卡片（幻灯片内的主要内容块和迷你卡片）均使用深灰色背景（例如 `#1a1a1a` 或 `#222222`）。
    *   **圆角：** 主要内容块使用较大圆角半径（`rounded-xl` 或 `rounded-2xl`），迷你卡片使用较小圆角半径（`rounded-lg`）。
    *   **分隔：** 使用细微边框（`border: 1px solid #333;`）或适合暗黑模式的轻微阴影（`shadow-md` 或 `shadow-lg`）。
8.  **幻灯片标题强化 (Slide Title Enhancement)：**
    *   每张幻灯片应有一个清晰的主标题。使其显著增大（例如，`text-4xl` 或 `text-5xl`, `font-bold`）。
    *   整个演示文稿的总标题可以放在第一张幻灯片。

**内容呈现与布局（核心优化）：**

1.  **内容组织到幻灯片：** 将源文档内容按逻辑章节、主题或核心要点组织到不同的幻灯片中。确保每张幻灯片聚焦于一个核心主题或一套紧密相关的要点。
2.  **全面的核心数据与要点：**
    *   准确提取并展示源文档中的所有关键信息、核心数据点、结论和分析，这些应主要呈现在幻灯片的主体内容或迷你卡片中。
3.  **核心要点提取与迷你卡片化（关键）：**
    *   **语义理解：** 超越简单的句子分割。理解逻辑和语义，识别段落或列表内部独立、并列的核心观点/元素。
    *   **转换：** 将每个提取出的核心要点转化为一个独立的迷你卡片。
    *   **目标：** 将复杂信息解构成结构化、可视化的迷你卡片网格，使其在 16:9 的幻灯片空间内成为易于扫视的密集信息单元。
4.  **迷你卡片内部结构与细节（关键）：**
    *   **结构优先级：**
        *   **强调数字优先：** 如果核心要点包含一个关键、突出的数字/指标，则将该数字/指标本身作为顶部元素，使用超大、粗体字号（例如 `text-5xl` 或 `text-6xl`, `font-bold`，使用高亮色）。目的是为了最大化视觉冲击力。
        *   **文本标题：** 如果核心要点是概念性的或数字是次要的，则使用一个简洁、加粗的中文短语（理想情况 3-5 个汉字）作为顶部元素，使用大字号（例如 `text-3xl` 或 `text-4xl`, `font-bold`，白色或高亮色）。
    *   **支撑文本：** 在大的数字/标题下方，使用较小字号（例如 `text-sm`, `text-gray-400`）。
        *   **当大元素是数字时**： 解释该数字代表什么（例如，“研发费用同比增长”，“营收额”，“市场份额排名”）并提供简要背景。
        *   **当大元素是文本标题时：** 提供具体细节、解释、数据支撑或影响。
    *   **双语副标题：**
        *   在适合增强设计感的地方（尤其是在大的中文数字或文本标题下方），可选择添加简洁的英文短语，使用小字号（例如 `text-xs` 或 `text-sm`）、常规字重和柔和的颜色（例如 `text-gray-500` 或 `text-gray-400`）。注意：审慎地应用以增加视觉风格，不要过于频繁使用。
    *   **专注与简洁：** 严格遵守“**一个卡片，一个核心要点**”。大的元素和支撑文本都必须**高度简洁**。避免在单个迷你卡片中使用长句或包含多个观点。
5.  **详细内容的处理（浮窗/模态框）：**
    *   识别源文档中的详细、非核心内容。
    *   将这些内容移出主幻灯片结构，放入一个隐藏的浮窗/模态框 HTML 结构内。
    *   在原幻灯片（或相关的迷你卡片）的适当位置，插入一个触发按钮或链接，清晰指示用户点击可查看更多详细内容。为每个需要详细内容的点创建唯一的触发器和对应的浮窗。
6.  **强烈的视觉层级：**
    *   利用显著的字号差异（幻灯片标题 vs 迷你卡片数字/标题 vs 支撑文本 vs 英文副标题）、字重（`font-bold` vs `font-normal`）和颜色（高亮色、白色、灰色系）来在主要信息和次要信息之间以及幻灯片标题、主要内容、迷你卡片之间创建清晰的视觉区分。
7.  **语言策略：**
    *   **主要语言：** 使用中文或数字承载核心信息、幻灯片标题（大的中文部分）和迷你卡片的大元素。确保它们在视觉上占主导地位（大字号、加粗）。
    *   **次要/装饰性语言：** 使用英文作为幻灯片标题的副标题以及可选的、小的迷你卡片副标题。对这些元素使用较小字号和较低的强调度。如果源文档中存在英文术语，为确保技术准确性应予保留。

**图形元素与图表：**

1.  **图标 (Font Awesome)：**
    *   **来源：** 通过 CDN 引入 Font Awesome (v5/v6)。
    *   **风格：** 偏好简洁、现代的线框风格 (outline-style) 图标。
    *   **使用：** 放置于幻灯片标题附近，可选择性地（且需微妙地）用于迷你卡片内部（靠近标题处）、列表前缀等。严格禁止使用 Emoji 作为功能性图标。颜色应协调；关键图标可使用高亮色。
2.  **数据可视化 (推荐 Chart.js)：**
    *   **应用场景：** 用于展示趋势、增长率、构成（饼图/环形图）、比较（柱状图）等适合的数据。
    *   **技术：** 通过 CDN 嵌入 Chart.js。
    *   **位置：** 放置在讨论财务或业务分析的相关幻灯片内部。复杂的、详细的数据表格或图表适合放入浮窗中。
    *   **样式：** 图表颜色必须与暗黑主题和高亮色保持一致。确保图表清晰、易读且响应式。

**技术与动画：**

1.  **技术栈：**
    *   HTML5, TailwindCSS 3+ (CDN), 原生 JavaScript (用于 scroll-snap 辅助、浮窗控制、Intersection Observer/图表初始化), Font Awesome (CDN), Chart.js (CDN)。
2.  **滚动切换实现 (CSS Scroll Snap)：**
    *   主容器设置 `scroll-snap-type: y mandatory;` 或 `y proximity;`。
    *   每张幻灯片元素设置 `scroll-snap-align: start;` 或 `center;`。
3.  **浮窗/模态框实现 (JavaScript)：**
    *   使用 JavaScript 编写函数控制浮窗的显示和隐藏，监听触发元素、关闭按钮和浮窗背景的点击事件。
    *   确保浮窗显示时，页面背景固定或不可滚动（可选）。
4.  **动画 (CSS Transitions & Intersection Observer/Active Slide)：**
    *   **触发：** 当元素（所有幻灯片内的卡片、内容块）滚动进入当前激活幻灯片的视口时。
    *   **效果：** 平滑、微妙的淡入/向上滑动效果（模仿 Apple 风格）。可以通过 `Intersection Observer API` 结合判断当前滚动位置所属的幻灯片索引来触发 CSS 类，或者更简单地，当幻灯片进入视口时（结合 scroll-snap 和 JS 滚动监听判断当前页），为其内的元素应用延迟动画。
    *   为网格项应用轻微延迟以产生交错效果。
5.  **响应式设计：**
    *   **强制要求**。使用 Tailwind 的响应式修饰符，特别是针对幻灯片内的网格布局和文字大小，确保在手机、平板和桌面设备上均具有出色的显示效果和可用性，同时保持 16:9 比例。

**最终输出：**

*   生成一个单一、可运行的 .html 文件，该文件：
    *   精确实现了上述所有要求。
    *   将内容组织成一系列 16:9 的幻灯片，支持垂直滚动吸附切换。
    *   在幻灯片内优先使用卡片布局，最大限度地利用迷你卡片网络提升单页信息密度。
    *   识别并剥离详细、非核心内容到隐藏的浮窗/模态框结构中，并在幻灯片内提供清晰的触发按钮。
    *   通过更大的数字、选择性双语和颜色实现了增强的视觉层级。
    *   整体美学符合 Apple 风格，并应用指定的高亮色和渐变。
    *   包含所有必需的 CSS (Tailwind 类/style 标签) 和 JavaScript (script 标签) 实现滚动切换、浮窗控制、动画触发和图表。