# 可视化脚本 Step3 集成补丁

## 需要修改的部分

### 1. 修改 `load_inspiration_points_data()` 函数

**位置**: line 14-45

**当前代码**:
```python
def load_inspiration_points_data(inspiration_dir: str) -> List[Dict[str, Any]]:
    inspiration_path = Path(inspiration_dir)
    results = []

    for subdir in inspiration_path.iterdir():
        if subdir.is_dir():
            step1_files = list(subdir.glob("all_step1_*.json"))

            if step1_files:
                try:
                    with open(step1_files[0], 'r', encoding='utf-8') as f:
                        step1_data = json.load(f)

                    results.append({
                        "step1": step1_data,
                        "inspiration_name": subdir.name
                    })
                except Exception as e:
                    print(f"警告: 读取 {step1_files[0]} 失败: {e}")

    return results
```

**修改为**:
```python
def load_inspiration_points_data(inspiration_dir: str) -> List[Dict[str, Any]]:
    """
    加载所有灵感点的分析结果（包含 step1 和 step3）

    Args:
        inspiration_dir: 灵感点目录路径

    Returns:
        灵感点分析结果列表
    """
    inspiration_path = Path(inspiration_dir)
    results = []

    # 遍历所有子目录
    for subdir in inspiration_path.iterdir():
        if subdir.is_dir():
            # 查找 step1 文件
            step1_files = list(subdir.glob("all_step1_*.json"))
            # 查找 step3 文件
            step3_files = list(subdir.glob("all_step3_*.json"))

            if step1_files:
                try:
                    # 读取 step1
                    with open(step1_files[0], 'r', encoding='utf-8') as f:
                        step1_data = json.load(f)

                    # 尝试读取 step3
                    step3_data = None
                    if step3_files:
                        try:
                            with open(step3_files[0], 'r', encoding='utf-8') as f:
                                step3_data = json.load(f)
                        except Exception as e:
                            print(f"警告: 读取 {step3_files[0]} 失败: {e}")

                    results.append({
                        "step1": step1_data,
                        "step3": step3_data,
                        "inspiration_name": subdir.name
                    })
                except Exception as e:
                    print(f"警告: 读取 {step1_files[0]} 失败: {e}")

    return results
```

---

### 2. 修改 `generate_inspiration_card_html()` 函数

**位置**: line 74-183

在 score-section 之后添加 step3 预览部分：

**在 line 177 (step1_match_preview 之后) 添加**:
```python
# 获取 Step3 生成的灵感点（简要展示）
step3_preview = ""
step3 = inspiration_data.get("step3")
if step3:
    step3_inspirations = step3.get("灵感点列表", [])
    if step3_inspirations:
        preview_items = []
        for idx, item in enumerate(step3_inspirations[:3]):
            path = item.get("推理路径", "")
            insp_point = item.get("灵感点", "")

            preview_items.append(f'''
                <div class="step3-preview-item">
                    <span class="step3-point">💡 {html_module.escape(insp_point)}</span>
                    <span class="step3-path">{html_module.escape(path)}</span>
                </div>
            ''')

        step3_preview = f'''
        <div class="step3-preview">
            <div class="step3-preview-header">✨ Step3 生成的灵感点 (前3个，共{len(step3_inspirations)}个)</div>
            <div class="step3-preview-list">
                {"".join(preview_items)}
            </div>
        </div>
        '''
```

然后在 HTML 模板中，在 `{step1_match_preview}` 之后添加 `{step3_preview}`：

```python
html = f'''
    <div class="inspiration-card" style="border-left-color: {border_color};"
         ...>
        ...

        {step1_match_preview}

        {step3_preview}

        <div class="click-hint">点击查看详情 →</div>
    </div>
    '''
```

---

### 3. 修改 `generate_detail_html()` 函数

**位置**: line 186-460

在 step1 详细信息之后添加 step3 详细信息。

**在 line 448 (step1 section 结束后) 添加**:
```python
# Step3 详细信息
step3 = inspiration_data.get("step3")
if step3:
    anchor_info = step3.get("锚点信息", {})
    step3_inspirations = step3.get("灵感点列表", [])

    anchor_category = anchor_info.get("锚点分类", "")
    category_def = anchor_info.get("分类定义", "")

    content += f'''
        <div class="modal-section">
            <h3>✨ Step3: 生成的灵感点</h3>
            <div class="step-content">
                <div class="step-field">
                    <span class="step-field-label">🎯 锚点分类:</span>
                    <span class="step-field-value">{html_module.escape(anchor_category)}</span>
                </div>
    '''

    if category_def:
        content += f'''
                <div class="step-field">
                    <span class="step-field-label">📖 分类定义:</span>
                    <span class="step-field-value">{html_module.escape(category_def)}</span>
                </div>
        '''

    if step3_inspirations:
        content += f'''
                <div class="step-field">
                    <span class="step-field-label">生成的灵感点列表 (共 {len(step3_inspirations)} 个):</span>
                    <div class="step3-inspirations-list">
        '''

        for idx, item in enumerate(step3_inspirations):
            path = item.get("推理路径", "")
            insp_point = item.get("灵感点", "")
            description = item.get("描述", "")

            content += f'''
                    <div class="step3-inspiration-item">
                        <div class="step3-header">
                            <span class="step3-rank">#{idx + 1}</span>
                            <span class="step3-point">{html_module.escape(insp_point)}</span>
                        </div>
                        <div class="step3-path"><strong>推理路径:</strong> {html_module.escape(path)}</div>
                        <div class="step3-desc"><strong>描述:</strong> {html_module.escape(description)}</div>
                    </div>
            '''

        content += '''
                    </div>
                </div>
        '''

    content += '''
            </div>
        </div>
    '''
```

---

### 4. 添加 CSS 样式

**位置**: 在 `</style>` 标签之前 (line 2140 之前) 添加

```css
/* Step3 预览样式 */
.step3-preview {
    background: #fef3c7;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 10px;
    border-left: 3px solid #f59e0b;
}

.step3-preview-header {
    font-size: 12px;
    font-weight: 600;
    color: #92400e;
    margin-bottom: 8px;
}

.step3-preview-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.step3-preview-item {
    background: white;
    padding: 10px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.step3-point {
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
}

.step3-path {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.5;
}

/* Step3 详情样式 */
.step3-inspirations-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
}

.step3-inspiration-item {
    background: white;
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #f59e0b;
}

.step3-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.step3-rank {
    font-size: 16px;
    font-weight: 800;
    color: #92400e;
    background: #fef3c7;
    padding: 4px 10px;
    border-radius: 6px;
}

.step3-inspiration-item .step3-point {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    flex: 1;
}

.step3-path {
    background: #f9fafb;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    color: #4b5563;
    margin: 8px 0;
}

.step3-desc {
    font-size: 13px;
    color: #374151;
    line-height: 1.7;
}
```

---

## 使用说明

1. 打开 `visualize_inspiration_points.py`
2. 按照上述补丁修改对应的函数
3. 添加CSS样式
4. 运行脚本生成可视化HTML
5. 打开HTML文件，现在可以看到 step3 生成的灵感点了

## 效果

- 卡片上会显示前3个生成的灵感点预览
- 点击卡片查看详情时，会显示完整的灵感点列表
- 每个灵感点包含：推理路径、灵感点名称、描述