🗂️ 分类导航系统使用指南¶

概述¶

为了更好地管理和展示 215+ 个开源项目，我们设计了一套智能的多级分类导航系统。该系统支持：

✅ 23个主要技术分类 - 涵盖AI、Spring生态、分布式系统、数据库等
✅ 多视图模式 - 网格视图、列表视图、树形视图
✅ 智能搜索 - 快速定位任何项目
✅ 统计面板 - 实时展示热门分类
✅ 响应式设计 - 完美适配各种设备

功能特性¶

1. 三种视图模式¶

📊 分类视图（默认）¶

以卡片形式展示各个技术分类
每个分类显示项目数量、描述和预览
点击"查看全部"可展开完整项目列表

📋 列表视图¶

以表格形式列出所有项目
显示项目名称、所属分类和快捷操作
适合快速浏览和查找特定项目

🌳 树形视图¶

层级展示所有分类和项目
支持折叠/展开控制
清晰展示分类层级关系

2. 智能搜索¶

在搜索框中输入关键词，系统会： - 搜索分类名称 - 搜索项目名称 - 实时过滤结果

3. 快捷导航¶

点击"热门分类"卡片，页面自动滚动到对应分类，并高亮显示。

4. 弹窗详情¶

点击分类卡片的"查看全部"按钮，打开弹窗查看： - 完整的项目列表 - 所有子分类 - 项目快速访问链接

分类体系¶

🤖 AI & 机器学习¶

包含 23 个项目，涵盖： - Spring AI 生态 - 大语言模型工具（AutoGPT, FastGPT, MetaGPT） - AI 应用框架（langchain4j, ollama） - 文档处理（docling, firecrawl）

🍃 Spring 生态系统¶

包含 40+ 个项目，分为： - 核心框架: Spring Framework, Spring Boot - 微服务组件: Spring Cloud 全家桶 - 数据访问: Spring Data 系列 - 集成与消息: Spring Integration, Spring Kafka

🔄 分布式系统¶

包含 20+ 个项目，分为： - RPC框架: Dubbo, gRPC, SOFA-RPC - 服务网格: Istio, Envoy - 分布式事务: Seata - 服务治理: Sentinel, Nacos, Apollo

☁️ 云原生技术¶

包含 30+ 个项目，分为： - Kubernetes生态: K3s, Helm, Dashboard - 容器技术: Docker, Containerd, Harbor - CI/CD: Jenkins, ArgoCD - 可观测性: SkyWalking, Prometheus, Grafana

💾 数据库技术¶

包含 20+ 个项目，分为： - 缓存: Redis, Redisson, Lettuce - 关系型数据库: TiDB, PostgreSQL - NoSQL: HBase, InfluxDB, IoTDB - 数据处理: DataX, Flink CDC, Canal - ORM工具: MyBatis, jOOQ, Druid

其他分类¶

📨 消息队列
⚙️ 中间件
🔧 开发工具
📚 Java 类库
🎨 前端技术
🌐 网络与协议
🔒 安全认证
📄 文档处理
🎮 游戏与图形
📱 移动与桌面
🔌 物联网
⛓️ 区块链
🏗️ 基础设施

使用场景¶

场景1: 查找特定项目¶

在搜索框输入项目名称
系统实时过滤显示匹配结果
点击项目链接直接访问

场景2: 浏览某个技术领域¶

找到对应的分类卡片
查看该分类下的项目预览
点击"查看全部"获取完整列表

场景3: 了解整体项目分布¶

切换到"列表视图"或"树形视图"
查看所有项目的组织结构
使用折叠/展开控制浏览深度

场景4: 技术选型参考¶

查看"热门分类"统计
对比不同分类下的项目数量
点击分类快速跳转查看详情

技术实现¶

数据结构¶

所有分类数据存储在 /docs/zh/release_note/categories.json 文件中，采用如下结构：

{
  "categories": {
    "分类key": {
      "name": "分类名称",
      "icon": "图标emoji",
      "description": "分类描述",
      "projects": ["项目1", "项目2"],
      "subcategories": {
        "子分类key": {
          "name": "子分类名称",
          "projects": ["项目3", "项目4"]
        }
      }
    }
  }
}

前端组件¶

JavaScript: /docs/javascripts/category-navigation.js
动态加载分类数据
实现三种视图模式
处理搜索和过滤逻辑
管理弹窗交互
CSS: /docs/stylesheets/category-navigation.css
响应式布局设计
三种视图样式
深色模式适配
动画和过渡效果

集成方式¶

在页面中添加容器元素：

<div class="category-navigation-container"></div>

系统会自动： 1. 检测容器元素 2. 加载分类数据 3. 渲染导航界面 4. 绑定交互事件

维护指南¶

添加新项目¶

确定项目所属分类
编辑 categories.json 文件
在对应分类的 projects 数组中添加项目名称
无需重新部署，刷新页面即可看到更新

添加新分类¶

在 categories.json 的 categories 对象中添加新分类
设置分类的基本信息（name, icon, description）
添加该分类下的项目列表
如需子分类，添加 subcategories 对象

调整分类结构¶

如需将项目从一个分类移动到另一个分类： 1. 从原分类的 projects 数组中删除 2. 添加到目标分类的 projects 数组 3. 保存并刷新

最佳实践¶

保持分类均衡 - 避免某个分类下项目过多或过少
合理使用子分类 - 当主分类项目超过20个时考虑拆分子分类
描述要准确 - 分类描述应清晰说明该分类包含的项目类型
图标要一致 - 使用表情符号作为图标，保持视觉统一
定期维护 - 随着项目增加，定期review分类结构的合理性

性能优化¶

分类数据使用 JSON 格式存储，体积小、加载快
采用懒加载策略，只在需要时加载完整列表
使用CSS Grid和Flexbox实现高性能布局
搜索使用防抖优化，减少不必要的渲染

浏览器兼容性¶

✅ Chrome 90+
✅ Firefox 88+
✅ Safari 14+
✅ Edge 90+
✅ 移动端浏览器

反馈与改进¶

如有任何问题或建议，请通过以下方式联系： - 微信搜索"中间件源码" - 在 GitHub 仓库提交 Issue - 通过网站反馈表单

最后更新: 2025-01-19
版本: 1.0.0