【110】将分析报告转成可视化网页

基于提供的源文档（例如，财务报告、分析报告、产品信息），生成一个单一、完整、可直接运行的 HTML 文件。此文件必须动态地、可视化地呈现文档中的核心发现、关键数据和结构化信息，并严格遵守以下设计和实现要求：
核心要求：

1. 单一 HTML 文件输出：
   • 最终交付物必须是一个 .html 文件，包含所有必要的 HTML 结构、CSS 样式（通过 <style> 标签或内联 Tailwind 类）和 JavaScript（通过 <script> 标签，包括 CDN 引入和初始化逻辑）。
   • 不允许使用外部 CSS 或 JS 文件，只允许在 HTML 文件内部使用 CDN 链接。
     视觉设计与布局：
2. 整体风格：
   • 参考 Apple 官网及发布会风格——简洁、现代，具有清晰的信息层级。
3. 布局核心：卡片式布局
   • 主卡片 (Main Cards)： 用于主要版块（如执行摘要、财务状况、业务分部等）。使用大尺寸、风格明确的卡片样式。
   • 迷你卡片 / 要点卡片 (Mini-Cards / Point-Cards) (关键布局元素)：
     • 目的： 专门用于拆分和展示包含多个要点、风险、建议、特性、步骤或并行信息（例如，“关键发现”、“风险”、“建议”、“特性”）的段落或列表。
     • AI 任务： 深入理解这些内容的语义。提取每个逻辑上独立、并列的核心要点。将每个要点转换为一个独立的迷你卡片。
     • 布局： 将这些迷你卡片排列在一个响应式网格中（例如，grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4）。在中大型屏幕上，目标是每行排列 3-5 个迷你卡片，以实现结构化、易于扫视的信息密度。
     • 嵌套布局： 主卡片可以包含迷你卡片网格。
4. 背景：
   • 纯黑页面背景 (#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. 主标题强化 (Main Title Enhancement)：
   • 使主中文标题显著增大（例如，text-5xl 或 text-6xl, font-bold）。
   • 在其下方添加一个较小的、对应的英文标题（例如，text-xl 或 text-lg, font-semibold，颜色稍浅，如 text-gray-300 或 text-gray-400）。示例：“Xiaomi Corporation 2024 Annual Financial Report Analysis”。
     内容呈现与布局（核心优化）：
9. 全面的基础数据：
   • 准确提取并展示源文档中的所有关键信息、核心数据点（特别是财务数据、增长率、市场份额）、结论和分析。
10. 核心要点提取与卡片化（关键）：
    • 语义理解： 超越简单的句子分割。理解逻辑和语义，识别段落或列表内部独立、并列的核心观点/元素。
    • 转换： 将每个提取出的核心要点转化为一个独立的迷你卡片。
    • 目标： 将复杂信息解构成结构化、可视化的网格，使其成为易于扫视的单元。
11. 迷你卡片内部结构与细节（关键）：
    • 结构优先级：
      • 强调数字优先： 如果核心要点包含一个关键、突出的数字/指标，则将该数字/指标本身作为顶部元素，使用超大、粗体字号（例如 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）。示例：“YoY Growth”，“Total Revenue”，“Market Share”。审慎地应用以增加视觉风格，而非死板地用于每个卡片。
    • 专注与简洁： 严格遵守“一个卡片，一个核心要点”。大的元素和支撑文本都必须高度简洁。避免在单个迷你卡片中使用长句或包含多个观点。
12. 强烈的视觉层级：
    • 利用显著的字号差异（例如，数字用 text-5xl/6xl vs 文本标题用 text-3xl/4xl vs 支撑文本用 text-sm vs 英文副标题用 text-xs）、字重（font-bold vs font-normal）和颜色（高亮色、白色、灰色系）来在主要信息（大数字/标题）和次要信息（支撑文本、英文副标题）之间创建清晰的视觉区分。
13. 语言策略：
    • 主要语言： 使用中文或数字承载核心信息、主标题（大的中文部分）和迷你卡片的大元素。确保它们在视觉上占主导地位（大字号、加粗）。
    • 次要/装饰性语言： 使用英文作为主标题的副标题以及可选的、小的迷你卡片副标题。对这些元素使用较小字号和较低的强调度。如果源文档中存在英文术语，为确保技术准确性应予保留。
      图形元素与图表：
14. 图标 (Font Awesome)：
    • 来源： 通过 CDN 引入 Font Awesome (v5/v6)。
    • 风格： 偏好简洁、现代的线框风格 (outline-style) 图标。
    • 使用： 放置于主标题附近，可选择性地（且需微妙地）用于迷你卡片内部（靠近标题处）、列表前缀等。严格禁止使用 Emoji 作为功能性图标。颜色应协调；关键图标可使用高亮色。
15. 数据可视化 (推荐 Chart.js)：
    • 应用场景： 用于展示趋势、增长率、构成（饼图/环形图）、比较（柱状图）等适合的数据 [引用：数据可视化最佳实践]。
    • 技术： 通过 CDN 嵌入 Chart.js。
    • 位置： 放置在讨论财务或业务分析的相关主卡片内部。
    • 样式： 图表颜色必须与暗黑主题和高亮色保持一致。确保图表清晰、易读且响应式。
      技术与动画：
16. 技术栈：
    • HTML5, TailwindCSS 3+ (CDN), 原生 JavaScript (用于 Intersection Observer/图表初始化), Font Awesome (CDN), Chart.js (CDN)。
17. 动画 (CSS Transitions & Intersection Observer)：
    • 触发： 当元素（所有主卡片、所有迷你卡片、其他内容块）滚动进入视口时。
    • 效果： 平滑、微妙的淡入/向上滑动效果（模仿 Apple 风格）。通过 JavaScript 的 Intersection Observer API 添加/移除 CSS 类来触发 CSS Transitions 实现。确保动画性能流畅。为网格项应用轻微延迟以产生交错效果。
18. 响应式设计：
    • 强制要求。使用 Tailwind 的响应式修饰符（特别是针对网格布局），确保在手机、平板和桌面设备上均具有出色的显示效果和可用性。
      最终输出：
    • 生成一个单一、可运行的 .html 文件，该文件精确实现了上述所有要求，特别注意优先使用卡片布局，避免大段文字，核心要点提取到迷你卡片、通过更大的数字和选择性双语实现的增强视觉层级，以及整体的美学一致性。