docs: 添加How解构结果可视化工具文档

详细说明：
- 功能特性（多帖子标签页、智能导航、卡片设计等）
- 数据结构和来源
- 交互功能和样式设计
- 使用场景和性能优化
- 常见问题解答

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

README_How解构可视化.md

@@ -0,0 +1,410 @@
+# How解构结果可视化工具
+
+将How解构结果生成交互式HTML可视化页面，展示帖子详情、灵感点、匹配结果和历史来源。
+
+---
+
+## 快速开始
+
+```bash
+python script/data_processing/visualize_how_results.py
+```
+
+生成的HTML文件位置：
+```
+data/data_1117/当前帖子_how解构结果_可视化.html
+```
+
+在浏览器中打开该文件即可查看可视化结果。
+
+---
+
+## 功能特性
+
+### 1. 多帖子标签页
+
+- 支持多个帖子的切合展示
+- 每个帖子一个标签页，点击切换
+- 标签显示帖子标题
+
+### 2. 智能目录导航
+
+- **左侧固定目录**
+  - 帖子详情快速跳转
+  - 灵感点列表导航
+  - How步骤快速定位
+
+- **自动激活高亮**
+  - 滚动时自动追踪当前位置
+  - 目录项高亮显示当前浏览区域
+  - 紫色背景标识激活项
+
+### 3. 紧凑帖子卡片
+
+- **主帖子卡片**（左上方固定显示）
+  - 缩略图预览（保持宽高比）
+  - 标题、正文预览
+  - 作者、发布日期
+  - 点赞、评论、收藏数
+
+- **点击展开详情**
+  - 模态框显示完整内容
+  - 图片轮播查看
+  - 完整正文和统计数据
+  - 链接跳转至小红书原帖
+
+### 4. 灵感点详情
+
+- **右上方固定显示**
+  - 灵感点名称（黄色徽章）
+  - 灵感点描述
+  - 包含的特征列表
+
+### 5. 特征分类展示
+
+- **简洁格式**: `[大类/中类/小类] 特征名称`
+- 灰色小字，不喧宾夺主
+- 显示在人设特征名称前
+
+### 6. How步骤分组
+
+- **三级折叠结构**
+  - 第一级：步骤名称（可折叠）
+  - 第二级：特征匹配结果（可折叠）
+  - 第三级：具体匹配项（可折叠）
+
+- **步骤信息展示**
+  - 步骤名称
+  - 来源灵感点
+  - 特征数量统计
+
+### 7. 匹配结果详情
+
+- **匹配头部信息**
+  - 人设特征名称和分类
+  - 关系类型徽章（完全相同/包含/部分重叠等）
+  - 匹配分数
+
+- **展开内容**
+  - 匹配解释说明
+  - 历史帖子来源卡片
+
+### 8. 历史帖子来源
+
+- **卡片式展示**
+  - 帖子缩略图
+  - 帖子标题
+  - 灵感点名称和描述
+  - 发布日期
+  - 点赞、收藏数
+  - 查看原帖链接
+
+- **点击查看详情**
+  - 所有历史帖子卡片均可点击
+  - 弹出模态框显示完整内容
+
+---
+
+## 数据来源
+
+### 输入数据
+
+| 数据文件 | 用途 | 说明 |
+|---------|------|------|
+| `data/data_1117/当前帖子_how解构结果/*.json` | How解构结果 | 包含帖子详情、灵感点、How步骤、匹配结果 |
+| `data/data_1117/特征名称_分类映射.json` | 特征分类 | 287个特征的分类层级（灵感点/关键点/目的点） |
+| `data/data_1117/特征名称_帖子来源.json` | 历史来源 | 275个特征的历史帖子来源 |
+
+### 输出文件
+
+```
+data/data_1117/当前帖子_how解构结果_可视化.html
+```
+
+单个HTML文件，包含所有数据、样式和交互逻辑。
+
+---
+
+## How解构结果数据结构
+
+### 主要结构
+
+```json
+{
+  "帖子详情": {
+    "title": "帖子标题",
+    "images": ["图片URL1", "图片URL2"],
+    "body_text": "正文内容",
+    "like_count": 1000,
+    "comment_count": 50,
+    "collect_count": 200,
+    "channel_account_name": "作者名",
+    "publish_time": "2025-11-17 10:00:00",
+    "link": "小红书链接"
+  },
+  "how解构结果": {
+    "灵感点列表": [
+      {
+        "名称": "灵感点名称",
+        "描述": "灵感点描述",
+        "how步骤列表": [
+          {
+            "步骤名称": "步骤1",
+            "特征列表": [
+              {
+                "特征名称": "特征A",
+                "匹配结果": [
+                  {
+                    "人设特征名称": "人设特征X",
+                    "匹配结果": {
+                      "relation": "same",
+                      "score": 0.95,
+                      "explanation": "匹配说明"
+                    }
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}
+```
+
+### 关系类型说明
+
+| relation | 中文标签 | 颜色 | 说明 |
+|----------|---------|------|------|
+| same | 完全相同 | 绿色 | 语义完全一致 |
+| contains | 包含 | 蓝色 | A包含B |
+| overlap | 部分重叠 | 橙色 | 有交集但不完全相同 |
+| related | 相关 | 紫色 | 语义相关 |
+| unrelated | 无关 | 灰色 | 不相关 |
+
+---
+
+## 特征分类映射
+
+### 数据结构
+
+```json
+{
+  "灵感点": {
+    "猫咪": {
+      "所属分类": ["猫咪物体", "物体", "实质"]
+    }
+  },
+  "关键点": {
+    "特征名": {
+      "所属分类": ["小类", "中类", "大类"]
+    }
+  },
+  "目的点": {
+    "种草产品": {
+      "所属分类": ["品牌种草", "创作者"]
+    }
+  }
+}
+```
+
+### 显示格式
+
+- 原始数据：`["猫咪物体", "物体", "实质"]`（从小类到大类）
+- 可视化显示：`[实质/物体/猫咪物体]`（从大类到小类）
+
+---
+
+## 历史帖子来源
+
+### 数据结构
+
+```json
+{
+  "灵感点": [
+    {
+      "特征名称": "猫咪",
+      "特征来源": [
+        {
+          "点的名称": "镜子里猫咪的反差萌表情",
+          "点的描述": "创作者在给两只穿着同款毛衣的猫拍照时...",
+          "帖子id": "69002ba70000000007008bcc",
+          "帖子详情": {
+            "title": "算了 跟你们没猫的说不清楚",
+            "images": ["图片URL"],
+            "like_count": 1847,
+            "publish_time": "2025-10-28 10:34:16",
+            "link": "小红书链接"
+          }
+        }
+      ]
+    }
+  ]
+}
+```
+
+### 用途
+
+- 展示该特征在历史帖子中的应用案例
+- 帮助理解特征的实际使用场景
+- 提供参考素材和灵感
+
+---
+
+## 交互功能
+
+### 1. 目录导航
+
+- **点击跳转**：点击目录项快速定位到对应区域
+- **自动高亮**：滚动时自动更新目录激活状态
+- **固定悬浮**：目录固定在左侧，始终可见
+
+### 2. 折叠展开
+
+- **步骤折叠**：点击步骤标题展开/收起该步骤下的所有特征
+- **特征折叠**：点击特征区域标题展开/收起匹配结果
+- **匹配项折叠**：点击匹配项标题查看详细说明和历史来源
+
+### 3. 帖子详情
+
+- **主帖子**：点击左上角紧凑卡片查看完整详情
+- **历史帖子**：点击历史来源卡片查看完整详情
+- **图片轮播**：模态框中支持左右切换查看多张图片
+- **关闭模态框**：点击背景或关闭按钮
+
+### 4. 外部链接
+
+- **查看原帖**：点击"查看原帖"链接跳转至小红书
+- **链接阻止冒泡**：点击链接不会触发卡片的点击事件
+
+---
+
+## 样式设计
+
+### 颜色方案
+
+- **主色调**：紫色系（#667eea, #764ba2）
+- **辅助色**：橙色（#fbbf24）用于灵感点
+- **关系颜色**：
+  - 完全相同：绿色
+  - 包含：蓝色
+  - 部分重叠：橙色
+  - 相关：紫色
+
+### 布局结构
+
+```
++------------------+----------------------------------------+
+|                  |  Tab导航（多帖子切换）                  |
++------------------+----------------------------------------+
+|                  |  +----------------+------------------+ |
+|                  |  | 帖子详情卡片    | 灵感点详情        | |
+|  目录导航         |  | (点击展开)     | (固定展示)       | |
+|  (固定左侧)       |  +----------------+------------------+ |
+|                  |                                        |
+|  - 帖子详情       |  How步骤分组                           |
+|  - 灵感点1       |  +----------------------------------+  |
+|    - 步骤1       |  | ▼ 步骤1 (来自: 灵感点1)           |  |
+|    - 步骤2       |  |   [特征A] 匹配结果                 |  |
+|  - 灵感点2       |  |     ▶ [分类] 人设特征X [关系] 分数  |  |
+|                  |  +----------------------------------+  |
++------------------+----------------------------------------+
+```
+
+---
+
+## 使用场景
+
+### 场景1：分析How解构质量
+
+1. 查看帖子被拆解成哪些灵感点
+2. 了解每个灵感点的步骤结构
+3. 检查特征匹配的准确性
+
+### 场景2：理解特征应用
+
+1. 点击展开匹配项查看详细说明
+2. 查看历史帖子来源卡片
+3. 学习特征在实际内容中的应用方式
+
+### 场景3：对比不同帖子
+
+1. 切换标签页查看不同帖子的解构结果
+2. 对比相同灵感点在不同帖子中的表现
+3. 发现内容创作的共性和差异
+
+---
+
+## 性能优化
+
+### 1. 图片懒加载
+
+- 历史帖子卡片的图片使用 `loading="lazy"`
+- 减少初始加载时间
+
+### 2. 滚动节流
+
+- 目录激活状态更新使用50ms节流
+- 避免频繁触发DOM操作
+
+### 3. 默认折叠
+
+- 步骤默认展开，便于快速浏览
+- 匹配项默认折叠，减少页面高度
+
+---
+
+## 常见问题
+
+### Q1: 为什么有些特征没有分类信息？
+
+**A**: 只有在`特征名称_分类映射.json`中存在的特征才会显示分类。如果是新增特征，需要先更新分类映射文件。
+
+### Q2: 为什么有些特征没有历史来源？
+
+**A**: 只有在`特征名称_帖子来源.json`中存在的特征才会显示历史来源。并非所有特征都有历史应用案例。
+
+### Q3: 如何更新可视化？
+
+**A**: 当解构结果更新后，重新运行脚本：
+```bash
+python script/data_processing/visualize_how_results.py
+```
+
+### Q4: 能否导出可视化结果？
+
+**A**: 生成的HTML文件是完全独立的，可以：
+- 直接分享给他人在浏览器中查看
+- 部署到Web服务器
+- 保存为PDF（浏览器打印功能）
+
+---
+
+## 版本历史
+
+### v1.0 (2025-11-17)
+
+- 初始版本
+- 多帖子标签页支持
+- 智能目录导航和自动激活
+- 紧凑帖子卡片设计
+- 特征分类层级显示
+- 历史帖子来源展示
+- 三级折叠结构
+- 点击查看帖子详情
+
+---
+
+## 相关脚本
+
+- `match_inspiration_features.py` - 灵感点特征匹配脚本
+- `visualize_inspiration_points.py` - 灵感点可视化脚本（另一个可视化工具）
+
+---
+
+## 技术栈
+
+- **Python 3.x**: 数据处理和HTML生成
+- **原生HTML/CSS/JavaScript**: 前端交互
+- **无外部依赖**: 生成的HTML文件完全独立，无需网络请求