课程图谱视觉规范文档
1. 概述
本设计规范旨在为课程图谱提供统一、现代且专业的视觉语言。核心设计理念为扁平化、层次感与信息导向，确保用户在探索复杂课程关系时获得清晰流畅的体验。
2. 布局系统
- 网格系统：基于学期（列）和课程类别（行）的矩阵布局。
- 列宽 (Column Width)：
180px - 行高 (Row Height)：
110px - 内边距 (Padding)：Top
80px, Left120px
3. 色彩系统 (Color Palette)
采用柔和的专业色系，区分不同学科类别。
| 类别 | 标签 | 主色 (Primary) | 背景色 (Background) | 边框色 (Border) |
|---|---|---|---|---|
| 数理基础 | math_physics | #2563EB (Blue 600) | #EFF6FF (Blue 50) | #BFDBFE (Blue 200) |
| 计算机/智测 | cs | #7C3AED (Violet 600) | #F5F3FF (Violet 50) | #DDD6FE (Violet 200) |
| 测绘基础/制图 | basic_mapping | #059669 (Emerald 600) | #ECFDF5 (Emerald 50) | #A7F3D0 (Emerald 200) |
| 大地/GNSS | geodesy | #DB2777 (Pink 600) | #FDF2F8 (Pink 50) | #FBCFE8 (Pink 200) |
| 摄影/遥感 | photo_rs | #EA580C (Orange 600) | #FFF7ED (Orange 50) | #FED7AA (Orange 200) |
| 工程应用 | engineering | #DC2626 (Red 600) | #FEF2F2 (Red 50) | #FECACA (Red 200) |
| 实习/毕设 | practice | #4B5563 (Gray 600) | #F9FAFB (Gray 50) | #E5E7EB (Gray 200) |
- 通用背景色：
#F8F9FA(Gray 50) - 文本颜色：
- 主要：
#111827(Gray 900) - 次要：
#6B7280(Gray 500)
- 主要：
4. 组件样式
4.1 课程卡片 (Course Card)
- 尺寸：Width
150px, Height48px - 圆角 (Border Radius)：
8px(rounded-lg) - 阴影 (Shadow)：
- 常态：
0 2px 8px rgba(0,0,0,0.04) - 悬停 (Hover)：
0 8px 20px -4px rgba(theme_color, 0.3)
- 常态：
- 边框：左侧
6px宽色条指示类别。
4.2 连线 (Connections)
- 线条样式：贝塞尔曲线 (Bezier Curve)
- 线宽：
- 常态：
1.5px - 激活/高亮：
2.5px
- 常态：
- 颜色：
- 默认：
#CBD5E1(Slate 300) - 激活 (输出)：
#3B82F6(Blue 500) - 激活 (输入)：
#F43F5E(Rose 500) - 自身相关：
#10B981(Emerald 500)
- 默认：
5. 字体排版
- 字体族：系统默认 Sans-serif (Inter, -apple-system, BlinkMacSystemFont, etc.)
- 字号：
- 页面标题：
24px(text-2xl), Bold - 卡片标题：
14px(text-sm), Semibold - 标签/说明：
12px(text-xs)
- 页面标题：
6. 响应式策略
- 容器：采用
overflow-auto容器，保证图谱结构的完整性。 - 最小尺寸：画布最小宽高
1600px * 900px，确保在大屏上展示完整，小屏上可滑动查看。