9.3 KiB
教育课程系统
**本文档引用的文件** - [index.html](file://index.html)目录
简介
本项目是一个基于单页应用（SPA）的教育课程系统，采用纯 HTML/CSS/JavaScript 实现，包含登录页面、仪表盘页面、AI智能体页面以及完整的课程与学习路径展示。系统通过 CSS Grid 和 Flexbox 实现响应式布局，提供丰富的交互效果与视觉层次，涵盖课程卡片设计、学习路径可视化、AI对话交互等功能模块。
项目结构
项目采用单一入口文件，所有样式、页面结构与脚本均内嵌在 index.html 中：
- 样式层：CSS 变量、动画、网格布局与响应式断点
- 结构层：登录页、仪表盘页、AI智能体页、聊天弹窗
- 交互层：页面切换、用户菜单、Tab 切换、行业筛选、AI对话
graph TB
A["index.html"] --> B["样式与主题变量"]
A --> C["页面结构"]
A --> D["交互脚本"]
C --> C1["登录页面(login-page)"]
C --> C2["仪表盘页面(dashboard-page)"]
C --> C3["AI智能体页面(ai-page)"]
C --> C4["聊天弹窗(chat-modal)"]
D --> D1["页面切换(showPage)"]
D --> D2["用户菜单(toggleUserMenu)"]
D --> D3["Tab切换(showTab)"]
D --> D4["行业筛选(filterByIndustry)"]
D --> D5["AI对话(openChat/sendMessage)"]
图表来源
章节来源
核心组件
- 登录页面：提供表单登录与社交登录入口，包含加载遮罩动画
- 仪表盘页面：导航栏、Tab 导航、统计卡片、内容卡片、课程网格、学习路径
- AI智能体页面：搜索框、筛选按钮、行业场景筛选栏、AI卡片网格
- 聊天弹窗：AI对话界面，支持快捷问题、输入发送、自动滚动
章节来源
架构总览
系统采用前端单页应用架构，通过 JavaScript 控制页面与内容的切换，结合 CSS Grid/Flexbox 实现响应式布局。交互逻辑集中在内联脚本中，便于快速部署与维护。
sequenceDiagram
participant U as "用户"
participant L as "登录页面"
participant D as "仪表盘页面"
participant A as "AI智能体页面"
participant M as "聊天弹窗"
U->>L : 输入账号密码并提交
L->>L : 显示加载遮罩
L-->>U : 登录成功，跳转仪表盘
U->>D : 点击导航或Tab
D-->>U : 展示课程网格与学习路径
U->>A : 访问AI智能体页面
A-->>U : 展示AI卡片与筛选
U->>M : 点击卡片打开聊天
M-->>U : 支持快捷问题与输入发送
图表来源
详细组件分析
课程卡片设计
课程卡片用于展示课程的核心信息，包括图标、标题、描述与元数据，并提供悬停交互效果。
- 设计要点
- 图标展示：使用固定尺寸圆角图标，配合背景色块增强识别度
- 标题描述：清晰的层级排版，突出课程名称与简要说明
- 元数据信息：课时与时长、学员数量等关键指标，使用小字号与图标装饰
- 交互效果：悬停时轻微上移与阴影变化，提升点击意愿
classDiagram
class CourseCard {
+图标展示
+标题描述
+元数据信息
+悬停交互
}
class CourseGrid {
+网格布局
+响应式列数
}
CourseGrid --> CourseCard : "包含多个"
图表来源
章节来源
课程网格布局与响应式设计
课程网格采用 CSS Grid，初始为四列布局；在不同断点下自动调整列数，确保在桌面端充分利用空间，在移动端提供良好的阅读体验。
- 布局策略
- 桌面端：4列网格，充分利用屏幕宽度
- 中等屏：2列网格，保证可读性
- 移动端：1列网格，适配窄屏设备
flowchart TD
Start(["进入页面"]) --> CheckWidth["检查视口宽度"]
CheckWidth --> Desktop{"≥ 1200px?"}
Desktop --> |是| FourCols["4列网格"]
Desktop --> |否| Medium{"≥ 768px?"}
Medium --> |是| TwoCols["2列网格"]
Medium --> |否| OneCol["1列网格"]
FourCols --> Render["渲染课程网格"]
TwoCols --> Render
OneCol --> Render
Render --> End(["完成"])
图表来源
章节来源
学习路径可视化
学习路径通过水平线段与步骤图标组合实现，渐变色背景线段贯穿整个路径，步骤图标带有边框与动态颜色，形成清晰的进度指示。
- 设计思路
- 渐变背景线段：使用双色渐变，营造前进感
- 步骤图标：圆形边框与图标组合，突出每个阶段
- 文字说明：简洁的标题与副标题，明确阶段目标
sequenceDiagram
participant P as "学习路径"
participant S1 as "步骤1 : 认知启蒙"
participant S2 as "步骤2 : 能力构建"
participant S3 as "步骤3 : 实战落地"
participant S4 as "步骤4 : 持续进化"
P->>S1 : 显示步骤图标与标题
P->>S2 : 渐变线段连接
P->>S3 : 渐变线段连接
P->>S4 : 渐变线段连接
图表来源
章节来源
课程详情页面与用户交互流程
课程详情页面通过 Tab 切换实现模块化展示，用户可在“平台概览”、“有维教育”、“AI工具”、“有维校友”、“会员体系”之间自由切换。课程网格与学习路径位于“有维教育”Tab 内，提供课程列表与学习路径可视化。
- 交互流程
- Tab 按钮激活：对应内容区域显示
- 课程卡片点击：可触发详情或学习入口（当前实现为占位）
- 学习路径点击：可触发学习进度或阶段跳转（当前实现为占位）
sequenceDiagram
participant U as "用户"
participant T as "Tab导航"
participant E as "有维教育Tab"
participant G as "课程网格"
participant L as "学习路径"
U->>T : 点击"有维教育"
T-->>E : 显示教育内容
U->>G : 查看课程卡片
U->>L : 查看学习路径
图表来源
章节来源
课程内容管理指南
- 课程数据结构建议
- 字段：id、title、description、icon、duration、enrollmentCount、category、tags
- 分类组织：按 category 或 tags 进行分组展示
- 搜索扩展：支持关键词检索、分类筛选、排序（按热度、时间、评分）
- 实现建议
- 使用 JSON 数据源管理课程列表
- 在前端实现过滤与排序逻辑
- 与现有网格布局无缝集成
章节来源
学习进度跟踪与用户成就系统
- 学习进度跟踪
- 课程完成标记：为每门课程设置完成状态与时间戳
- 进度条：在课程卡片或详情页展示完成百分比
- 阶段达成：学习路径各阶段完成后点亮步骤
- 用户成就系统
- 成就徽章：完成特定数量课程或达到学习时长获得徽章
- 排行榜：按完成课程数或学习时长进行排名
- 社交分享：允许用户分享成就至校友社群
章节来源
依赖关系分析
系统主要依赖于浏览器原生 API 与 DOM 操作，无外部库依赖。交互逻辑通过内联脚本实现，耦合度较低，便于维护与扩展。
graph TB
JS["JavaScript脚本"] --> DOM["DOM操作"]
JS --> Event["事件监听"]
CSS["CSS样式"] --> Layout["布局与响应式"]
CSS --> Theme["主题变量与动画"]
图表来源
章节来源
性能考虑
- 代码体积：单页应用，减少请求次数，利于首屏加载
- 动画性能：使用 CSS 动画与过渡，避免 JavaScript 高频操作
- 响应式优化：合理使用媒体查询，避免过度重绘
- 交互优化：事件委托与防抖节流，提升复杂交互的流畅度
故障排除指南
- 登录失败
- 检查用户名与密码是否为空
- 确认加载遮罩是否正常显示与隐藏
- 页面切换异常
- 确保页面 ID 与切换函数一致
- 检查 active 类名的添加与移除逻辑
- 用户菜单不关闭
- 确认点击外部区域的事件监听是否生效
- AI对话无法发送
- 检查文本域值与 Enter 键事件
- 确认消息容器滚动到底部逻辑
章节来源
结论
该教育课程系统通过简洁的单页架构与精心设计的 UI 组件，实现了课程展示、学习路径可视化与 AI 交互的完整体验。其响应式布局与丰富的交互细节为用户提供了良好的学习与探索体验。后续可在课程数据管理、进度跟踪与成就系统方面进一步完善，以提升系统的功能性与用户粘性。
附录
- 主题变量：定义主色、辅助色、渐变色、阴影与字体规范
- 动画集合：淡入、滑入、旋转、缩放等基础动画
- 响应式断点：1200px 与 768px 两个关键断点，适配不同设备
章节来源