# 小红书搜索结果可视化工具

这是一个用于可视化展示小红书搜索结果的交互式网页应用。

## 功能特性

### 核心功能
- ✅ **4层树形结构**：结果项 → 关联分类 → 特征列表 → 帖子预览
- ✅ **左右布局**：左侧树形菜单，右侧详情面板
- ✅ **图片轮播**：支持多图切换，左右箭头和指示器
- ✅ **帖子卡片**：展示标题、正文、用户信息、互动数据
- ✅ **搜索功能**：实时搜索特征名称和关键词
- ✅ **主题切换**：明亮/暗黑主题

### 交互特性
- 点击树节点展开/折叠子节点
- 点击特征显示搜索结果详情
- 图片点击放大查看
- 键盘快捷键（←/→ 切换图片，ESC 关闭）
- 响应式设计，支持桌面/平板/手机

## 使用方法

### 1. 启动本地服务器

```bash
# 进入项目目录
cd visualization

# 使用 Python 启动服务器（端口 8000）
python3 -m http.server 8000

# 或者使用其他端口
python3 -m http.server 8080
```

### 2. 在浏览器中打开

打开浏览器访问：
```
http://localhost:8000
```

## 项目结构

```
visualization/
├── index.html              # 主页面
├── css/
│   └── style.css          # 样式文件
├── js/
│   ├── main.js            # 主逻辑
│   ├── tree.js            # 树形菜单组件
│   ├── card.js            # 卡片渲染组件
│   └── carousel.js        # 图片轮播组件
└── data/
    └── data.json          # 数据文件（5.9MB）
```

## 数据统计

- **结果项数**：12 个
- **特征数**：153 个（有搜索结果）
- **帖子数**：3,059 条
- **平均每特征帖子数**：20 条

## 技术栈

- 纯 HTML/CSS/JavaScript
- 无第三方依赖
- 响应式设计
- 模块化组件

## 界面说明

### 顶部工具栏
- **搜索框**：实时搜索特征名称或关键词
- **状态筛选**：按搜索状态筛选（成功/失败/待搜索）
- **排序**：按帖子数或权重排序
- **主题切换**：切换明亮/暗黑主题

### 左侧树形列表
- **第1层**：📂 结果项（原始特征名称）
- **第2层**：📁 关联分类（目标分类路径）
- **第3层**：🔍 特征列表（特征名称 + search_word）
- **第4层**：📄 帖子预览（前3条帖子标题）

### 右侧详情面板
- **特征详情**：显示选中特征的搜索结果
- **帖子卡片**：完整的帖子信息展示
- **图片轮播**：支持多图切换和放大查看

## 快捷键

- **←/→**：切换图片
- **ESC**：关闭图片查看器

## 浏览器兼容性

- ✅ Chrome/Edge（推荐）
- ✅ Firefox
- ✅ Safari
- ⚠️ IE 不支持

## 性能优化

- 图片懒加载
- 虚拟滚动（计划中）
- 数据缓存
- 防抖搜索

## 注意事项

1. **必须使用 HTTP 服务器**：直接打开 HTML 文件会有 CORS 限制，无法加载 JSON 数据
2. **数据文件较大**：初次加载需要几秒钟
3. **网络图片**：帖子中的图片来自小红书 CDN，需要网络连接

## 停止服务器

```bash
# 查找服务器进程
ps aux | grep "python3 -m http.server"

# 停止服务器（替换 PID 为实际进程号）
kill <PID>
```

## 更新数据

如需更新数据文件，替换 `data/data.json` 文件即可：

```bash
cp ../associated_tags_results_with_search_data.json data/data.json
```

## 问题排查

### 页面空白
- 检查浏览器控制台是否有错误
- 确认数据文件路径正确
- 确认使用 HTTP 服务器访问，而非直接打开文件

### 图片无法显示
- 检查网络连接
- 某些图片可能已失效
- 浏览器可能阻止了外部图片

### 搜索无结果
- 确认搜索词拼写正确
- 搜索区分大小写
- 尝试搜索部分关键词

## 开发者

如需修改代码，建议使用现代代码编辑器（如 VS Code）。

主要组件说明：
- `TreeView` 类：树形菜单逻辑
- `CardRenderer` 类：卡片渲染逻辑
- `Carousel` 类：图片轮播逻辑
- `App` 类：主应用逻辑

## License

此项目仅供学习和研究使用。
