📸 分类导航系统视觉展示¶

设计理念¶

本系统采用现代化的**卡片式设计**，结合**渐变色彩**和**流畅动画**，为用户提供愉悦的浏览体验。

界面布局¶

┌─────────────────────────────────────────────────────────────┐
│                  🗂️ 项目分类导航                            │
│     追踪 215 个开源项目，跨越 23 个技术领域                  │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│  🔍 [搜索项目名称...]              [📊分类] [📋列表] [🌳树形] │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│                     📈 热门分类                              │
│  ┌──────────┬──────────┬──────────┬──────────┬──────────┐   │
│  │Spring生态│云原生技术│分布式系统│数据库技术│AI&机器学习│   │
│  │   40+    │   30+    │   20+    │   20+    │   23     │   │
│  └──────────┴──────────┴──────────┴──────────┴──────────┘   │
└─────────────────────────────────────────────────────────────┘

┌──────────────┬──────────────┬──────────────┬──────────────┐
│  🤖 AI & ML  │ 🍃 Spring    │ 🔄 分布式    │ ☁️ 云原生     │
│     (23)     │    (40+)     │    (20+)     │    (30+)     │
├──────────────┼──────────────┼──────────────┼──────────────┤
│ 人工智能...  │ Spring全家桶 │ RPC框架...   │ K8s、容器... │
│              │              │              │              │
│ • spring-ai  │ 核心框架 (3) │ RPC框架 (10) │ K8s生态 (8)  │
│ • AutoGPT    │ 微服务 (18)  │ 服务网格 (3) │ 容器 (8)     │
│ • FastGPT    │ 数据访问 (4) │ 服务治理 (5) │ CI/CD (4)    │
│ ...          │ ...          │ ...          │ ...          │
│              │              │              │              │
│ [查看全部 →] │ [查看全部 →] │ [查看全部 →] │ [查看全部 →] │
└──────────────┴──────────────┴──────────────┴──────────────┘

界面元素详解¶

1. 页面标题区¶

┌─────────────────────────────────────────┐
│        🗂️ 项目分类导航                   │
│  追踪 215 个开源项目，跨越 23 个技术领域  │
└─────────────────────────────────────────┘

- 渐变背景: 紫蓝色渐变 (Indigo → Purple) - 大标题: 2.5rem，渐变文字 - 副标题: 高亮显示关键数字

2. 控制栏¶

┌─────────────────────────────────────────────┐
│ [🔍 搜索...]  [📊分类视图] [📋列表] [🌳树形] │
└─────────────────────────────────────────────┘

- 搜索框: 圆角、阴影、聚焦时蓝色边框 - 视图切换: 三个按钮，激活状态显示主题色背景

3. 统计面板¶

┌────────────────────────────────────────┐
│          📈 热门分类                    │
│  ┌─────────┬─────────┬─────────┐       │
│  │Spring   │云原生   │分布式   │       │
│  │  40+    │  30+    │  20+    │       │
│  └─────────┴─────────┴─────────┘       │
└────────────────────────────────────────┘

- 卡片设计: 渐变背景、圆角、阴影 - 数字突出: 大号字体、主题色 - 可点击: 悬停上浮效果

4. 分类卡片（网格视图）¶

┌──────────────────────────────┐
│ 🤖 AI & 机器学习         [23] │
├──────────────────────────────┤
│ 人工智能、机器学习、大语言模型 │
│ 相关项目                      │
│                              │
│ 📦 spring-ai                 │
│ 📦 AutoGPT                   │
│ 📦 FastGPT                   │
│ 📦 langchain4j               │
│ 📦 ollama                    │
│                              │
│ ┌──────────────────────────┐ │
│ │   查看全部项目 →          │ │
│ └──────────────────────────┘ │
└──────────────────────────────┘

卡片特性: - 顶部彩色条（悬停时展开） - 图标 + 标题 + 徽章布局 - 描述文字灰色显示 - 项目预览列表 - 底部操作按钮

5. 列表视图¶

┌────────────────────────────────────────────────┐
│ 项目名称        │ 所属分类            │ 操作   │
├────────────────────────────────────────────────┤
│ 📦 spring-ai    │ AI & 机器学习       │ [查看] │
│ 📦 AutoGPT      │ AI & 机器学习       │ [查看] │
│ 📦 Dubbo        │ 分布式系统/RPC框架   │ [查看] │
│ 📦 Spring Boot  │ Spring生态/核心框架  │ [查看] │
│ ...             │ ...                 │ ...   │
└────────────────────────────────────────────────┘

特点: - 表头固定 - 隔行换色 - 悬停高亮 - 紧凑布局

6. 树形视图¶

▼ 🤖 AI & 机器学习 (23)
  ├─ 📦 spring-ai
  ├─ 📦 AutoGPT
  ├─ 📦 FastGPT
  └─ ...

▼ 🍃 Spring 生态系统 (40+)
  ├─ ▼ 核心框架 (3)
  │   ├─ 📦 spring-framework
  │   ├─ 📦 Spring-Boot
  │   └─ 📦 spring-boot-admin
  ├─ ▼ 微服务组件 (18)
  │   ├─ 📦 spring-cloud-gateway
  │   ├─ 📦 spring-cloud-alibaba
  │   └─ ...
  └─ ...

特点: - 可折叠节点 - 缩进显示层级 - 点击跳转

7. 弹窗详情¶

┌─────────────────────────────────────────────┐
│ 🤖 AI & 机器学习                        [×] │
├─────────────────────────────────────────────┤
│ 人工智能、机器学习、大语言模型相关项目       │
│                                             │
│ ┌─────────┬─────────┬─────────┬─────────┐  │
│ │spring-ai│ AutoGPT │ FastGPT │ MetaGPT │  │
│ ├─────────┼─────────┼─────────┼─────────┤  │
│ │ollama   │langchain│ dify    │ ragflow │  │
│ ├─────────┼─────────┼─────────┼─────────┤  │
│ │ ...     │ ...     │ ...     │ ...     │  │
│ └─────────┴─────────┴─────────┴─────────┘  │
└─────────────────────────────────────────────┘

特点: - 模态框设计 - 半透明背景蒙层 - 网格展示所有项目 - 滚动条支持大量内容

颜色方案¶

主题色¶

Primary: #6366f1 (Indigo 500)
Accent: #a855f7 (Purple 500)
Success: #10b981 (Green 500)
Warning: #f59e0b (Amber 500)

背景色¶

Light Mode: #ffffff (白色)
Dark Mode: rgba(255,255,255,0.05) (半透明白)

渐变效果¶

Header: linear-gradient(135deg, #6366f1, #a855f7)
Card Hover: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(168,85,247,0.1))

动画效果¶

1. 卡片悬停¶

transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,0.12);

- 上浮 4px - 阴影加深

2. 顶部彩条展开¶

transform: scaleX(0) → scaleX(1);
transition: 0.3s ease;

3. 弹窗出现¶

opacity: 0 → 1;
transform: translateY(30px) → translateY(0);
animation: 0.3s ease;

4. 搜索框聚焦¶

border-color: var(--md-primary-fg-color);
box-shadow: 0 4px 12px rgba(99,102,241,0.2);
transform: translateY(-1px);

响应式断点¶

桌面端 (> 1024px)¶

4列网格布局
完整的搜索和控制栏
大尺寸卡片和间距

平板 (768px - 1024px)¶

2-3列网格布局
简化的控制按钮
中等尺寸卡片

移动端 (< 768px)¶

单列布局
堆叠式控制栏
触摸优化的交互区域
隐藏部分装饰性元素

可访问性¶

键盘导航¶

Tab 键切换焦点
Enter 键激活按钮
Esc 键关闭弹窗

语义化HTML¶

使用适当的标题层级 (h2, h3)
链接包含描述性文本
按钮有明确的作用说明

对比度¶

所有文字与背景对比度 ≥ 4.5:1
交互元素有明显的视觉反馈

设计灵感来源¶

Material Design: Google的设计语言
Fluent Design: Microsoft的设计系统
GitHub: 代码托管平台的UI
Vercel: 现代化的部署平台

设计工具¶

Figma: UI设计和原型
CSS Grid Generator: 布局设计
Coolors: 配色方案
Animista: CSS动画

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