knowledge_search/visualization/README.md

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

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

功能特性

核心功能

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

交互特性

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

使用方法

1. 启动本地服务器

# 进入项目目录
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，需要网络连接

停止服务器

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

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

更新数据

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

cp ../associated_tags_results_with_search_data.json data/data.json

问题排查

页面空白

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

图片无法显示

• 检查网络连接
• 某些图片可能已失效
• 浏览器可能阻止了外部图片

搜索无结果

• 确认搜索词拼写正确
• 搜索区分大小写
• 尝试搜索部分关键词

开发者

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

主要组件说明：

• TreeView 类：树形菜单逻辑
• CardRenderer 类：卡片渲染逻辑
• Carousel 类：图片轮播逻辑
• App 类：主应用逻辑

License

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