概述

上一次写了一个卡片式呈现内容的 prompt，但是发现内容量很少，于是增加了更多的叙述和思考，降低卡片和图表的密度，对于命题有更多内容的呈现。卡片式更方便于观察一些数字、零散的小点。

prompt

# **核心任务：主题深度分析与动态可视化HTML报告生成 (v2 - 支持文本密集区域)**

**目标：** 针对用户提供的 **`[用户输入]`** 主题，进行深入的分析、解构、扩展和说明。最终生成一个 **单一、完整、可直接在浏览器运行的 HTML 文件**。该文件需要动态、可视化地呈现对该主题的分析过程、核心发现、关键数据和结构化信息，**并能优雅地处理文本密集的内容区域**。

**产出物核心约束：**

1.  **单一文件交付：** 最终产出必须是一个独立的 `.html` 文件。
    *   包含所有必需的 HTML 结构。
    *   包含所有 CSS 样式（通过 `<style>` 标签嵌入，**强制使用 TailwindCSS via CDN**）。
    *   包含所有 JavaScript（通过 `<script>` 标签嵌入，包括通过 CDN 引入的库，如 **Chart.js**、**Font Awesome**，以及必要的交互逻辑，特别是用于入场动画的 **Intersection Observer API**）。
    *   **严格禁止** 引用任何外部本地 `.css` 或 `.js` 文件，仅允许通过 CDN 链接引入必要的库。

**设计语言与视觉风格 (参照 Apple 现代美学)：**

1.  **整体观感：** 简洁、现代、专业，信息层级分明，注重视觉呼吸（留白）。
2.  **背景：** 严格使用 **纯黑色背景** (`#000000`)。
3.  **核心高亮色 (Highlight Color) - *智能选择与应用***：
    *   **自动识别优先：** 尝试从 **`[用户输入]`** 主题内容中识别核心实体或品牌。若识别出明确的、具有代表性视觉色彩的实体，**尝试** 使用其广为人知的官方主色调或行业代表色作为 **唯一的** 页面核心高亮色。若不确定或无法识别，则执行备选方案。
    *   **备选方案 (Fallback)：** 若无法识别或主题不适用特定颜色，则从中选择一个：专业的科技蓝 (`#00AEEF`) 或 充满活力的亮橙色 (`#FFA500`) 作为核心高亮色。
    *   **统一应用范围：** 选定的核心高亮色必须 **统一且克制地** 应用于：部分关键文本、大型强调数字、关键图标、图表元素、可选细微边框、微妙科技感渐变背景，以及文本块内的适度强调。
4.  **科技感渐变 (Tech Gradient)：**
    *   **严格单色透明渐变：** **仅** 基于选定的 **核心高亮色** 创建，从 `rgba(核心高亮色, 0.6-0.7)` 平滑过渡到 `rgba(核心高亮色, 0.2-0.3)`。
    *   **应用场景：** 作为卡片背景、图表区域背景或特定文本块的 **微妙底色**。**严禁使用多色、复杂或刺眼的渐变。**
5.  **字体排版与信息层级：**
    *   **字体：** 优先使用系统默认无衬线字体，或通过 CDN 引入简洁现代字体 (如 Inter - 可选)。确保中英文混排和谐。
    *   **页面主标题：** 中文主标题 (大字号, 加粗, 白色) + 英文副标题 (较小字号, 中等字重, 浅灰)。
    *   **视觉层级构建：** 必须通过 **显著的字号差异**、**字重** (`font-bold`, `semibold`, `normal`) 和 **颜色** (高亮色, 白色, 不同灰度) 来清晰区分信息主次。

**核心布局策略：卡片化与文本块结合**

1.  **主信息卡片 (Main Content Cards)：**
    *   **用途：** 承载分析过程中的主要逻辑版块（引言、解构、扩展、数据汇总、图表容器、结论等）。是 **迷你卡片网格** 和 **文本密集区域** 的主要容器。
    *   **样式：** 深灰背景 (`#1a1a1a` 或 `#222222`)，大圆角 (`rounded-xl` / `2xl`)，细边框/微阴影分隔，充足内边距 (`p-6` / `p-8`)。

2.  **关键布局元素之一：迷你信息卡片 / 要点卡片 (Mini-Cards / Insight Cards)：**
    *   **适用场景：** **优先用于** 展示结构化的、并列的、离散的信息点。例如：关键特征列表、步骤说明、优缺点对比、核心数据概览、相关概念定义等。
    *   **AI 提取与转换：** AI 需智能识别适合此格式的内容，提取核心要点，**将每一个要点转化为一个独立的迷你卡片**。
    *   **布局组织：** 在主卡片内使用 **响应式网格 (Grid)** (`grid gap-4`/`6`, `grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5`) 排列这些迷你卡片。
    *   **样式：** 深灰背景，较小圆角 (`rounded-lg`)，细边框/微阴影，适中内边距 (`p-4` / `p-6`)。
    *   **内部结构 (高度规范)：**
        *   **数字/指标优先：** 超大字号、加粗、高亮色数字 + 小字号、浅色说明文字。
        *   **概念/文本要点优先：** 大字号、加粗、白色/高亮色中文短标题 + 标准字号、标准颜色细节解释。
        *   **可选英文点缀：** 极小字号、柔和灰色，谨慎使用。

3.  **新增布局元素：文本密集区域设计规范 (For Detailed Prose):**
    *   **适用场景：** 当分析内容包含需要 **连续阅读的长段文字** 时使用，例如：深入的背景介绍、详细的过程阐述、复杂的论证分析、叙述性内容、引言或总结性段落。**此时不应强制拆分为迷你卡片。**
    *   **容器：** 这些文本块通常也放置在 **主信息卡片** 内部，与迷你卡片网格区域并列或独立存在。
    *   **布局：** 采用标准的 **单栏或响应式多栏文本流** 布局（例如，大屏幕上可以是两栏）。**避免在此区域使用网格布局排列段落。**
    *   **排版优化 (可读性优先)：**
        *   使用适宜的正文字号（如 `text-base` 或 `text-lg`，可能比迷你卡片描述文字稍大）。
        *   设置 **宽松舒适的行距** (如 Tailwind `leading-relaxed` 或 `leading-loose`)。
        *   确保段落之间有足够的垂直间距 (`my-4` 或 `mb-4`)。
    *   **视觉辅助元素：**
        *   可使用 **微妙的水平分割线** (`<hr class='border-gray-700/50 my-6'>`) 来分隔文本块内部的不同小节。
        *   可以设计并使用 **引用块 (`<blockquote>`)** 来突出重要的引述或关键论断，为其添加符合暗黑主题的样式（例如，左侧有高亮色的细边框，内部文字颜色稍作区分）。
    *   **高亮应用：** **核心高亮色** 可用于文本内部 **关键词或短语的适度强调** (`<span class="text-[highlight-color] font-semibold">...</span>`)，**必须避免过度使用** 以免干扰阅读。

**内容呈现与 AI 分析逻辑优化：**

1.  **引言与主题解读：** 清晰阐述分析目的、范围、视角。可包含执行摘要。适合使用 **文本密集区域** 格式。
2.  **AI 智能判断内容呈现方式：**
    *   **解构/扩展/说明中的判断：** AI 需要根据分析内容的性质，智能地决定信息呈现方式：
        *   **适合迷你卡片网格：** 列表式信息、并列要点、关键数据点、定义项、特征对比等。
        *   **适合文本密集区域：** 连贯的解释、背景信息、深入论证、过程描述、叙事性内容、总结等。
    *   **避免强制拆分：** 对于自然流畅的段落，应保持其完整性，使用文本密集区域格式。
3.  **语言运用策略：** 中文/数字主导，英文辅助/装饰。关键英文术语保留。
4.  **结构化与流畅性平衡：** 在追求结构化的同时，也要保证长篇解释的阅读流畅性。

**图形与数据可视化整合：**

1.  **图标 (Font Awesome)：** CDN 引入，线框/实底风格，谨慎、恰当地使用于标题旁、迷你卡片内、列表项，颜色与主题协调。禁止 Emoji。
2.  **图表 (Chart.js)：** CDN 引入，用于展示量化数据（趋势、比较、构成），嵌入主卡片，颜色、背景、标签需适配暗黑主题和高亮色，必须响应式。

**交互与技术实现细节：**

1.  **核心技术栈：** HTML5, TailwindCSS (CDN), Native JS (ES6+), Font Awesome (CDN), Chart.js (CDN).
2.  **入场动画：** 强制使用 `Intersection Observer API` 触发，为**所有主卡片、迷你卡片、图表容器、以及主要的文本密集区域容器** 应用平滑、微妙的 **淡入+上滑** 效果。网格内可加 `transition-delay` 实现交错效果。
3.  **响应式设计：** **强制性要求**，全面使用 Tailwind 响应式修饰符确保全设备适配。

**最终指令总结：**

请严格遵循以上所有规范和约束，特别是：**单一 HTML 文件输出**、**Apple 风格暗黑设计**、**卡片化布局（主卡片 + 迷你卡片网格）** 与 **文本密集区域设计的结合应用**、**AI 智能判断并选择最合适的内容呈现方式**（卡片 vs. 文本块）、**规范的迷你卡片内部设计**、**优化的文本密集区阅读体验**、**信息层级视觉表达**、**图表与图标整合**、**入场动画** 及 **全面响应式设计**。

基于用户提供的 **`[用户输入]`** 主题，执行深度分析，并将所有思考过程、分析结果、核心发现和关键信息，以动态、可视化、结构清晰且阅读舒适的方式，完整地呈现在最终生成的单一 HTML 文件中。

示例