xiaoqi/n8n_Demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
2741849c71fd68fab2d44f2ccae6317a3836046a
n8n_Demo/web_frontend/web_result/order-classes/developer/index.html
Yep_Q 6c172673e7 feat: 为12个订单班添加专属SVG图标 
详细说明:
- 为每个订单班创建专属的SVG favicon图标
- 每个图标使用渐变色和专属图形设计
- 在所有订单班的index.html中添加favicon引用
- 图标设计：
  * wenlu(文旅): 紫蓝渐变 + 地图标记
  * food(食品): 橙红渐变 + 厨师帽
  * visual-design(视觉设计): 粉紫渐变 + 画笔
  * civil(土木): 灰蓝渐变 + 建筑
  * health(大健康): 绿青渐变 + 医疗十字
  * energy(能源): 黄橙渐变 + 闪电
  * transportation(交通物流): 蓝色渐变 + 卡车
  * manufacturing(智能制造): 深蓝银色渐变 + 齿轮
  * developer(智能开发): 青绿渐变 + 代码符号
  * finance(财经商贸): 金蓝渐变 + 上升图表
  * environmental(环保): 绿蓝渐变 + 叶子
  * chemical(化工): 蓝紫渐变 + 烧杯
- 修改文件: 12个favicon.svg文件 + 12个index.html文件
- 影响模块: 所有订单班网页的视觉标识系统

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-10 17:12:22 +08:00

674 lines
34 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在线教育平台开发项目 - 智能开发订单班</title>
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<link rel="stylesheet" href="css/styles.css">
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
</head>
<body class="dark-theme">
<!-- 主题切换按钮 -->
<div class="theme-toggle">
<button id="themeToggleBtn" class="theme-toggle-btn">
<i data-lucide="sun" class="theme-icon theme-icon-light"></i>
<i data-lucide="moon" class="theme-icon theme-icon-dark"></i>
</button>
</div>
<!-- Hero 区域 -->
<section class="hero">
<div class="hero-content">
<div class="hero-badge">💻 智能开发订单班</div>
<h1 class="hero-title">在线教育平台<br>全栈开发项目</h1>
<h2 class="hero-subtitle">K12直播教学与智能学习管理系统</h2>
<p class="hero-description">
<i data-lucide="video"></i> 实时直播互动教学<br>
<i data-lucide="play-circle"></i> 智能回放与点播<br>
<i data-lucide="brain"></i> AI学习进度追踪
</p>
</div>
</section>
<!-- 导航栏 -->
<nav class="nav">
<div class="nav-container">
<div class="nav-item active">
<i data-lucide="target"></i>
<span>项目概述</span>
</div>
<div class="nav-item">
<i data-lucide="layout"></i>
<span>系统架构</span>
</div>
<div class="nav-item">
<i data-lucide="package"></i>
<span>核心功能</span>
</div>
<div class="nav-item">
<i data-lucide="code"></i>
<span>技术实现</span>
</div>
</div>
</nav>
<!-- Section 1: 项目概述与目标 -->
<section class="section">
<div class="container">
<div class="section-header">
<img src="agent-avatars/产品经理.jpg" alt="产品经理" class="agent-avatar">
<div class="agent-info">
<div class="agent-name">
<i data-lucide="briefcase"></i> 产品经理
</div>
<h2 class="section-title">项目概述与目标</h2>
</div>
</div>
<div class="section-content">
<div class="expert-intro">
<h3><i data-lucide="lightbulb"></i> 项目背景</h3>
<p>随着互联网教育的快速发展，K12教育领域对于在线学习的需求日益增长，尤其是直播和回放课程的需求不断上升。本项目旨在开发一个高效、稳定、互动性强的在线教育平台，支持直播教学、直播回放、课后作业管理、学生进度追踪、在线考试与反馈等功能。平台通过实时互动与多样化学习方式，提升学生的学习体验，帮助教师更好地管理课程和学生。</p>
</div>
<div class="image-container" style="margin-bottom: var(--spacing-xl);">
<img data-src="images/首页.jpg" alt="平台首页" loading="lazy">
<div class="image-caption">在线教育平台首页展示</div>
</div>
<div class="grid grid-2">
<div class="card">
<div class="card-header">
<h3 class="card-title">核心目标</h3>
</div>
<div class="card-body">
<ul class="feature-list">
<li><i data-lucide="video"></i> 直播教学与回放:实时互动、连麦举手</li>
<li><i data-lucide="file-text"></i> 作业与考试管理:自动批改、实时反馈</li>
<li><i data-lucide="trending-up"></i> 学习进度追踪:AI分析、个性化建议</li>
<li><i data-lucide="zap"></i> 高并发支持:10万+在线、流畅无延迟</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">项目范围</h3>
</div>
<div class="card-body">
<ul class="feature-list">
<li><i data-lucide="user"></i> 学生端:直播观看、作业提交、进度查看</li>
<li><i data-lucide="user-check"></i> 教师端:课程管理、作业批改、学员互动</li>
<li><i data-lucide="building"></i> 机构端:课程发布、资源调度、财务管理</li>
<li><i data-lucide="settings"></i> 运维端:权限管理、数据监控、系统维护</li>
</ul>
</div>
</div>
</div>
<div class="grid grid-3" style="margin-top: var(--spacing-xl);">
<div class="card">
<div class="image-container">
<img data-src="images/课程直播间.jpg" alt="直播间" loading="lazy">
</div>
<div class="card-header">
<h3 class="card-title">直播教学</h3>
</div>
<div class="card-body">
<p>实时直播互动，支持举手连麦、聊天问答、白板演示等多种互动方式。</p>
</div>
</div>
<div class="card">
<div class="image-container">
<img data-src="images/课程内容.jpg" alt="课程内容" loading="lazy">
</div>
<div class="card-header">
<h3 class="card-title">课程管理</h3>
</div>
<div class="card-body">
<p>完善的课程创建、编辑、发布流程，支持多种课程形式和资料上传。</p>
</div>
</div>
<div class="card">
<div class="image-container">
<img data-src="images/智能学习数据分析.jpg" alt="数据分析" loading="lazy">
</div>
<div class="card-header">
<h3 class="card-title">智能分析</h3>
</div>
<div class="card-body">
<p>AI驱动的学习数据分析，提供个性化学习路径和智能推荐。</p>
</div>
</div>
</div>
<div class="stats" style="margin-top: var(--spacing-xl);">
<div class="stat-item">
<div class="stat-label">支持并发</div>
<div class="stat-value concurrent-users">0万</div>
</div>
<div class="stat-item">
<div class="stat-label">开发周期</div>
<div class="stat-value">9个月</div>
</div>
<div class="stat-item">
<div class="stat-label">功能模块</div>
<div class="stat-value feature-modules">0个</div>
</div>
<div class="stat-item">
<div class="stat-label">用户角色</div>
<div class="stat-value">4种</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section 2: 系统架构设计 -->
<section class="section">
<div class="container">
<div class="section-header">
<img src="agent-avatars/平台架构师.jpg" alt="平台架构师" class="agent-avatar">
<div class="agent-info">
<div class="agent-name">
<i data-lucide="layers"></i> 平台架构师
</div>
<h2 class="section-title">系统架构设计</h2>
</div>
</div>
<div class="section-content">
<div class="expert-intro">
<h3><i data-lucide="box"></i> 技术架构</h3>
<p>平台采用前后端分离架构，使用微服务设计模式，确保系统的高可用性、可扩展性和高并发处理能力。前端使用React构建，后端基于Spring Boot微服务框架，数据库采用MySQL主从复制+Redis缓存，直播服务使用阿里云/腾讯云视频直播解决方案。</p>
</div>
<div class="grid grid-3" style="margin-bottom: var(--spacing-xl);">
<div class="card">
<div class="card-header">
<h3 class="card-title">前端技术栈</h3>
</div>
<div class="card-body">
<p><strong>React + TypeScript</strong></p>
<ul class="feature-list">
<li><i data-lucide="layout"></i> React 18 + Hooks</li>
<li><i data-lucide="database"></i> Redux Toolkit状态管理</li>
<li><i data-lucide="palette"></i> Ant Design UI组件库</li>
<li><i data-lucide="zap"></i> Vite构建工具</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">后端技术栈</h3>
</div>
<div class="card-body">
<p><strong>Spring Boot微服务</strong></p>
<ul class="feature-list">
<li><i data-lucide="server"></i> Spring Boot 2.7</li>
<li><i data-lucide="shield"></i> Spring Security + JWT</li>
<li><i data-lucide="database"></i> MyBatis Plus ORM</li>
<li><i data-lucide="cloud"></i> Spring Cloud微服务</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">基础设施</h3>
</div>
<div class="card-body">
<p><strong>云原生部署</strong></p>
<ul class="feature-list">
<li><i data-lucide="database"></i> MySQL 8.0主从复制</li>
<li><i data-lucide="zap"></i> Redis 6.0缓存集群</li>
<li><i data-lucide="video"></i> 阿里云视频直播</li>
<li><i data-lucide="box"></i> Docker + K8s部署</li>
</ul>
</div>
</div>
</div>
<div class="table-container">
<table>
<thead>
<tr>
<th>架构层次</th>
<th>技术选型</th>
<th>核心功能</th>
<th>性能指标</th>
</tr>
</thead>
<tbody>
<tr>
<td>前端层</td>
<td>React + TypeScript + Vite</td>
<td>用户界面、交互逻辑</td>
<td>首屏加载<2s</td>
</tr>
<tr>
<td>网关层</td>
<td>Spring Cloud Gateway</td>
<td>路由转发、负载均衡</td>
<td>QPS>10000</td>
</tr>
<tr>
<td>服务层</td>
<td>Spring Boot微服务</td>
<td>业务逻辑处理</td>
<td>响应时间<200ms</td>
</tr>
<tr>
<td>数据层</td>
<td>MySQL + Redis</td>
<td>数据存储与缓存</td>
<td>读写分离，缓存命中率>80%</td>
</tr>
<tr>
<td>直播层</td>
<td>阿里云视频直播</td>
<td>直播推流、拉流</td>
<td>延迟<3s，支持10万并发</td>
</tr>
<tr>
<td>存储层</td>
<td>阿里云OSS</td>
<td>视频、文件存储</td>
<td>CDN加速，全球可用</td>
</tr>
</tbody>
</table>
</div>
<div class="stats" style="margin-top: var(--spacing-xl);">
<div class="stat-item">
<div class="stat-label">微服务数量</div>
<div class="stat-value microservices-count">0个</div>
</div>
<div class="stat-item">
<div class="stat-label">数据库节点</div>
<div class="stat-value">3个</div>
</div>
<div class="stat-item">
<div class="stat-label">缓存集群</div>
<div class="stat-value redis-nodes">0节点</div>
</div>
<div class="stat-item">
<div class="stat-label">CDN节点</div>
<div class="stat-value">100+</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section 3: 核心功能模块 -->
<section class="section">
<div class="container">
<div class="section-header">
<img src="agent-avatars/前端开发工程师.jpg" alt="前端开发工程师" class="agent-avatar">
<div class="agent-info">
<div class="agent-name">
<i data-lucide="code"></i> 前端开发工程师
</div>
<h2 class="section-title">核心功能模块</h2>
</div>
</div>
<div class="section-content">
<div class="expert-intro">
<h3><i data-lucide="blocks"></i> 功能模块</h3>
<p>平台包含用户系统、课程管理、直播系统、作业考试、支付订单、数据分析等6大核心模块。每个模块都经过精心设计，确保用户体验流畅、功能完善、数据安全。</p>
</div>
<div class="grid grid-4" style="margin-bottom: var(--spacing-xl);">
<div class="card">
<div class="image-container">
<img data-src="images/注册界面.jpg" alt="用户注册" loading="lazy">
</div>
<div class="card-header">
<h3 class="card-title">用户系统</h3>
</div>
<div class="card-body">
<ul class="feature-list">
<li><i data-lucide="user-plus"></i> 多方式注册登录</li>
<li><i data-lucide="shield"></i> JWT身份认证</li>
<li><i data-lucide="users"></i> RBAC权限管理</li>
<li><i data-lucide="key"></i> Token自动刷新</li>
</ul>
</div>
</div>
<div class="card">
<div class="image-container">
<img data-src="images/热门课程.jpg" alt="课程展示" loading="lazy">
</div>
<div class="card-header">
<h3 class="card-title">课程管理</h3>
</div>
<div class="card-body">
<ul class="feature-list">
<li><i data-lucide="plus-circle"></i> 课程创建编辑</li>
<li><i data-lucide="search"></i> 智能搜索推荐</li>
<li><i data-lucide="upload"></i> 资料上传管理</li>
<li><i data-lucide="calendar"></i> 课程安排调度</li>
</ul>
</div>
</div>
<div class="card">
<div class="image-container">
<img data-src="images/课程直播间.jpg" alt="直播间" loading="lazy">
</div>
<div class="card-header">
<h3 class="card-title">直播系统</h3>
</div>
<div class="card-body">
<ul class="feature-list">
<li><i data-lucide="video"></i> 实时直播推流</li>
<li><i data-lucide="message-circle"></i> 互动聊天问答</li>
<li><i data-lucide="hand"></i> 举手连麦功能</li>
<li><i data-lucide="play"></i> 直播回放点播</li>
</ul>
</div>
</div>
<div class="card">
<div class="image-container">
<img data-src="images/智能学习数据分析.jpg" alt="数据分析" loading="lazy">
</div>
<div class="card-header">
<h3 class="card-title">数据分析</h3>
</div>
<div class="card-body">
<ul class="feature-list">
<li><i data-lucide="bar-chart"></i> 学习进度统计</li>
<li><i data-lucide="pie-chart"></i> 成绩数据分析</li>
<li><i data-lucide="brain"></i> AI智能推荐</li>
<li><i data-lucide="trending-up"></i> 个性化建议</li>
</ul>
</div>
</div>
</div>
<div class="grid grid-2">
<div class="card">
<div class="card-header">
<h3 class="card-title">作业考试模块</h3>
</div>
<div class="card-body">
<p><strong>智能批改与反馈</strong></p>
<ul class="feature-list">
<li><i data-lucide="file-text"></i> 作业在线布置与提交</li>
<li><i data-lucide="check-circle"></i> 自动批改客观题</li>
<li><i data-lucide="edit"></i> 教师批改主观题</li>
<li><i data-lucide="award"></i> 成绩反馈与统计</li>
<li><i data-lucide="calendar-check"></i> 在线考试与监考</li>
<li><i data-lucide="clock"></i> 限时答题与自动提交</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">支付订单模块</h3>
</div>
<div class="card-body">
<p><strong>安全便捷支付</strong></p>
<ul class="feature-list">
<li><i data-lucide="credit-card"></i> 支付宝/微信支付</li>
<li><i data-lucide="shopping-cart"></i> 购物车与订单管理</li>
<li><i data-lucide="ticket"></i> 优惠券与促销活动</li>
<li><i data-lucide="file-spreadsheet"></i> 订单状态追踪</li>
<li><i data-lucide="repeat"></i> 退款与售后处理</li>
<li><i data-lucide="bar-chart-2"></i> 财务报表统计</li>
</ul>
</div>
</div>
</div>
<div class="stats" style="margin-top: var(--spacing-xl);">
<div class="stat-item">
<div class="stat-label">用户注册方式</div>
<div class="stat-value">3种</div>
</div>
<div class="stat-item">
<div class="stat-label">直播延迟</div>
<div class="stat-value live-latency">0秒</div>
</div>
<div class="stat-item">
<div class="stat-label">支付方式</div>
<div class="stat-value">2种</div>
</div>
<div class="stat-item">
<div class="stat-label">首屏加载</div>
<div class="stat-value">2秒</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section 4: 技术实现与优化 -->
<section class="section">
<div class="container">
<div class="section-header">
<img src="agent-avatars/后端开发工程师.jpg" alt="后端开发工程师" class="agent-avatar">
<div class="agent-info">
<div class="agent-name">
<i data-lucide="server"></i> 后端开发工程师
</div>
<h2 class="section-title">技术实现与优化</h2>
</div>
</div>
<div class="section-content">
<div class="expert-intro">
<h3><i data-lucide="code-2"></i> 技术实现</h3>
<p>平台采用多项优化技术确保高性能和高可用性。包括数据库读写分离、Redis缓存优化、CDN加速、消息队列异步处理、微服务治理等。通过合理的架构设计和技术选型，平台能够稳定支撑10万+并发用户同时在线。</p>
</div>
<div class="grid grid-3" style="margin-bottom: var(--spacing-xl);">
<div class="card">
<div class="image-container">
<img data-src="images/API配置界面.jpg" alt="API配置" loading="lazy">
</div>
<div class="card-header">
<h3 class="card-title">API网关</h3>
</div>
<div class="card-body">
<ul class="feature-list">
<li><i data-lucide="shield-check"></i> 统一鉴权认证</li>
<li><i data-lucide="gauge"></i> 流量限流熔断</li>
<li><i data-lucide="route"></i> 动态路由转发</li>
<li><i data-lucide="activity"></i> 实时监控告警</li>
</ul>
</div>
</div>
<div class="card">
<div class="image-container">
<img data-src="images/用户信息后台数据.jpg" alt="数据管理" loading="lazy">
</div>
<div class="card-header">
<h3 class="card-title">数据优化</h3>
</div>
<div class="card-body">
<ul class="feature-list">
<li><i data-lucide="database"></i> 读写分离架构</li>
<li><i data-lucide="zap"></i> Redis多级缓存</li>
<li><i data-lucide="hard-drive"></i> 分库分表设计</li>
<li><i data-lucide="archive"></i> 冷热数据分离</li>
</ul>
</div>
</div>
<div class="card">
<div class="image-container">
<img data-src="images/课程信息后台数据.jpg" alt="课程数据" loading="lazy">
</div>
<div class="card-header">
<h3 class="card-title">性能优化</h3>
</div>
<div class="card-body">
<ul class="feature-list">
<li><i data-lucide="cloud"></i> CDN全球加速</li>
<li><i data-lucide="layers"></i> 静态资源压缩</li>
<li><i data-lucide="repeat"></i> 消息队列异步</li>
<li><i data-lucide="trending-up"></i> 负载均衡优化</li>
</ul>
</div>
</div>
</div>
<div class="table-container">
<table>
<thead>
<tr>
<th>优化项</th>
<th>技术方案</th>
<th>实现效果</th>
<th>性能指标</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据库优化</td>
<td>MySQL主从复制+读写分离</td>
<td>读写性能提升3倍</td>
<td>QPS>5000</td>
</tr>
<tr>
<td>缓存优化</td>
<td>Redis集群+多级缓存</td>
<td>响应时间降低80%</td>
<td>缓存命中率>85%</td>
</tr>
<tr>
<td>直播优化</td>
<td>阿里云CDN+智能调度</td>
<td>全球流畅观看</td>
<td>延迟<3s</td>
</tr>
<tr>
<td>前端优化</td>
<td>Webpack分包+懒加载</td>
<td>首屏加载提速50%</td>
<td>FCP<1.5s</td>
</tr>
<tr>
<td>异步处理</td>
<td>RabbitMQ消息队列</td>
<td>系统吞吐量提升5倍</td>
<td>TPS>10000</td>
</tr>
<tr>
<td>服务治理</td>
<td>Nacos+Sentinel</td>
<td>服务高可用99.9%</td>
<td>故障自愈<30s</td>
</tr>
</tbody>
</table>
</div>
<div class="stats" style="margin-top: var(--spacing-xl);">
<div class="stat-item">
<div class="stat-label">API响应时间</div>
<div class="stat-value">200ms</div>
</div>
<div class="stat-item">
<div class="stat-label">系统可用性</div>
<div class="stat-value">99.9%</div>
</div>
<div class="stat-item">
<div class="stat-label">数据库QPS</div>
<div class="stat-value db-qps">0</div>
</div>
<div class="stat-item">
<div class="stat-label">消息TPS</div>
<div class="stat-value message-tps">0万</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer: 项目成果总结 -->
<section class="section" style="background: var(--bg-semi-dark); padding: var(--spacing-3xl) 0;">
<div class="container">
<h2 class="section-title text-center" style="margin-bottom: var(--spacing-2xl);">
<i data-lucide="award"></i> 项目成果总结
</h2>
<div class="grid grid-3">
<div class="card">
<div class="card-header" style="order: 1;">
<h3 class="card-title">💻 技术架构</h3>
</div>
<div class="card-body" style="order: 2;">
<ul class="feature-list">
<li><i data-lucide="layout"></i> React 18 + TypeScript前端</li>
<li><i data-lucide="server"></i> Spring Boot微服务后端</li>
<li><i data-lucide="database"></i> MySQL主从+Redis集群</li>
<li><i data-lucide="video"></i> 阿里云视频直播服务</li>
<li><i data-lucide="cloud"></i> Spring Cloud微服务治理</li>
<li><i data-lucide="box"></i> Docker + K8s容器化</li>
<li><i data-lucide="shield"></i> JWT认证+RBAC权限</li>
<li><i data-lucide="zap"></i> RabbitMQ消息队列</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header" style="order: 1;">
<h3 class="card-title">⚡ 核心功能</h3>
</div>
<div class="card-body" style="order: 2;">
<ul class="feature-list">
<li><i data-lucide="video"></i> 实时直播互动教学</li>
<li><i data-lucide="play-circle"></i> 直播回放智能点播</li>
<li><i data-lucide="file-text"></i> 作业考试自动批改</li>
<li><i data-lucide="brain"></i> AI学习进度追踪</li>
<li><i data-lucide="credit-card"></i> 在线支付订单管理</li>
<li><i data-lucide="bar-chart"></i> 数据分析智能推荐</li>
<li><i data-lucide="users"></i> 多角色权限管理</li>
<li><i data-lucide="settings"></i> 系统监控运维管理</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header" style="order: 1;">
<h3 class="card-title">🎯 性能指标</h3>
</div>
<div class="card-body" style="order: 2;">
<ul class="feature-list">
<li><i data-lucide="users"></i> 支持10万+并发在线</li>
<li><i data-lucide="gauge"></i> API响应<200ms</li>
<li><i data-lucide="zap"></i> 首屏加载<2秒</li>
<li><i data-lucide="video"></i> 直播延迟<3秒</li>
<li><i data-lucide="database"></i> 数据库QPS>5000</li>
<li><i data-lucide="repeat"></i> 消息TPS>10000</li>
<li><i data-lucide="shield-check"></i> 系统可用性99.9%</li>
<li><i data-lucide="cloud"></i> CDN全球加速</li>
</ul>
</div>
</div>
</div>
<div class="text-center" style="margin-top: var(--spacing-2xl); color: var(--text-gray);">
<p>💻 在线教育平台全栈开发项目圆满完成!</p>
<p style="margin-top: var(--spacing-sm);">© 2024 智能开发订单班 | K12在线教育解决方案</p>
</div>
</div>
</section>
<script src="js/main.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink