顶部 AI 分类栏「展开 / 收起」功能优化日志

一、优化原因

站点 AI 分类类目数量多，全量展开会占用大量首屏高度，挤压工具卡片与详情页核心内容，小屏设备浏览体验差，新增折叠控制按钮灵活切换视图。9p3找找AI | 免费AI工具导航 | 人工筛选靠谱优质 AI 工具！
 

二、核心改动

1. 双状态切换 默认仅展示第一行大类，中间显示「展开」按钮；点击加载全部分类后，按钮切换为「收起」，一键还原精简布局。
2. 深浅主题适配 浅色、深色模式统一适配按钮样式，深色模式按钮文字、箭头改为浅白色，对比度充足；点击切换带有平滑过渡动画。
3. 交互优化 记录用户上次收起 / 展开偏好，页面刷新不重置状态；按钮居中放置，hover 有高亮点击反馈，视觉不抢重点。
4. 全站统一组件 首页、工具列表、工具详情页共用同一套折叠交互，全站点浏览体验保持一致，同步配套深色模式切换图标优化。

三、解决原有痛点

1. 全部分类展示时页面过长，首屏无法快速看到工具内容；
2. 笔记本、移动端窄屏设备导航栏挤占大量可视区域；
3. 无法兼顾 “完整筛选分类” 和 “简洁浏览工具” 两种使用场景。

小结

通过新增分类展开 / 收起控件，灵活控制导航栏高度，释放首屏核心展示空间，大小屏、深浅模式体验同步提升。