# 小红书搜索结果可视化工具 这是一个用于可视化展示小红书搜索结果的交互式网页应用。 ## 功能特性 ### 核心功能 - ✅ **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 ``` ## 更新数据 如需更新数据文件，替换 `data/data.json` 文件即可： ```bash cp ../associated_tags_results_with_search_data.json data/data.json ``` ## 问题排查 ### 页面空白 - 检查浏览器控制台是否有错误 - 确认数据文件路径正确 - 确认使用 HTTP 服务器访问，而非直接打开文件 ### 图片无法显示 - 检查网络连接 - 某些图片可能已失效 - 浏览器可能阻止了外部图片 ### 搜索无结果 - 确认搜索词拼写正确 - 搜索区分大小写 - 尝试搜索部分关键词 ## 开发者 如需修改代码，建议使用现代代码编辑器（如 VS Code）。 主要组件说明： - `TreeView` 类：树形菜单逻辑 - `CardRenderer` 类：卡片渲染逻辑 - `Carousel` 类：图片轮播逻辑 - `App` 类：主应用逻辑 ## License 此项目仅供学习和研究使用。