feat: 提取 BMAD 方法和技能到独立分支
This commit is contained in:
Claude Code
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"autoShutdown": {
|
||||
"enabled": false,
|
||||
"idleTimeoutMinutes": 30
|
||||
}
|
||||
}
|
||||
17
.gitignore
vendored
17
.gitignore
vendored
@@ -1,16 +1 @@
|
||||
# 日志目录
|
||||
prototype/logs/
|
||||
prototype-mobile/logs/
|
||||
*.log
|
||||
|
||||
# 临时文件
|
||||
.claude-nohup-*.out
|
||||
.claude-wrapper-*.sh
|
||||
.tmp-input-msg-*.txt
|
||||
|
||||
# 备份文件
|
||||
*.backup
|
||||
*.bak
|
||||
|
||||
# 技能包（保留但不需要提交）
|
||||
.claude/skills/*.tar.gz
|
||||
.nfs*
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
# 📋 AI 智能抽背助手 - 项目信息
|
||||
|
||||
## 🏢 工作空间信息
|
||||
- **工作空间 ID**: 226
|
||||
- **工作空间名称**: AI智能抽背助手
|
||||
- **创建时间**: 2026-03-28T11:06:14.039Z
|
||||
|
||||
## 📦 模板信息
|
||||
- **模板 ID**: 244
|
||||
- **模板名称**: AI智能抽背助手Web应用
|
||||
- **创建时间**: 2026-03-28T11:07:15.689Z
|
||||
|
||||
## 🐳 容器配置
|
||||
- **容器组配置 ID**: 11 (8v16G_node_sshd_pg2g_redis_minio)
|
||||
- **容器状态**: 🟢 Running
|
||||
|
||||
## 🌐 访问地址
|
||||
- **VSCode**: `d8d-ai-vscode-23964-226-244-template-6-group.dev.d8d.fun`
|
||||
- **应用端口8080**: `d8d-ai-vscode-8080-226-244-template-6-group.dev.d8d.fun`
|
||||
|
||||
## 📂 工作目录
|
||||
- **工作目录**: `/mnt/code/226-244-template-6`
|
||||
- **需求文档**: `ai-tutor-requirements.md` (564行，22K)
|
||||
|
||||
## 🤖 AI 助手
|
||||
- **助手名称**: @nextjs-admin
|
||||
- **助手 JID**: `agent-dbe15e72-5a99-4181-b305-49e7ad1f94c7`
|
||||
|
||||
## 🎯 项目描述
|
||||
用于开发AI智能抽背助手的全栈Web应用。支持语音抽背、记忆曲线、卡片式学习、挖空填空等功能。
|
||||
|
||||
### 技术栈
|
||||
- Next.js + React + TypeScript + Tailwind CSS
|
||||
- PostgreSQL + Redis + MinIO
|
||||
- AI服务: Ollama (可选)
|
||||
|
||||
---
|
||||
**文档生成时间**: 2026-03-28T11:14:00Z
|
||||
File diff suppressed because it is too large
Load Diff
77
package-lock.json
generated
77
package-lock.json
generated
@@ -1,77 +0,0 @@
|
||||
{
|
||||
"name": "226-244-template-6",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"dependencies": {
|
||||
"markdown-it": "^14.1.1"
|
||||
}
|
||||
},
|
||||
"node_modules/argparse": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
|
||||
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
|
||||
"license": "Python-2.0"
|
||||
},
|
||||
"node_modules/entities": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
|
||||
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
|
||||
"license": "BSD-2-Clause",
|
||||
"engines": {
|
||||
"node": ">=0.12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/fb55/entities?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/linkify-it": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
|
||||
"integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"uc.micro": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/markdown-it": {
|
||||
"version": "14.1.1",
|
||||
"resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.1.tgz",
|
||||
"integrity": "sha512-BuU2qnTti9YKgK5N+IeMubp14ZUKUUw7yeJbkjtosvHiP0AZ5c8IAgEMk79D0eC8F23r4Ac/q8cAIFdm2FtyoA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"argparse": "^2.0.1",
|
||||
"entities": "^4.4.0",
|
||||
"linkify-it": "^5.0.0",
|
||||
"mdurl": "^2.0.0",
|
||||
"punycode.js": "^2.3.1",
|
||||
"uc.micro": "^2.1.0"
|
||||
},
|
||||
"bin": {
|
||||
"markdown-it": "bin/markdown-it.mjs"
|
||||
}
|
||||
},
|
||||
"node_modules/mdurl": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
|
||||
"integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/punycode.js": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
|
||||
"integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/uc.micro": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
|
||||
"integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
|
||||
"license": "MIT"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"markdown-it": "^14.1.1"
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,114 +0,0 @@
|
||||
# AI 智能抽背助手 - 原型系统
|
||||
|
||||
基于 PRD 和 UX 设计规范自动生成的原型系统。
|
||||
|
||||
## 📁 文件结构
|
||||
|
||||
```
|
||||
prototype/
|
||||
├── index.html # 统一入口页面
|
||||
├── admin-index.html # 平铺展示入口（所有页面同时显示）
|
||||
├── docs-index.html # 文档中心
|
||||
├── server.js # 本地预览服务器
|
||||
├── start.sh # 启动脚本
|
||||
└── pages/admin/
|
||||
├── dashboard.html # 数据概览
|
||||
├── quiz-records.html # 抽背记录查询
|
||||
├── student-management.html # 学生管理
|
||||
├── knowledge-management.html # 知识点管理
|
||||
├── task-management.html # 学习任务管理
|
||||
└── settings.html # 系统设置
|
||||
```
|
||||
|
||||
## 🚀 快速开始
|
||||
|
||||
### 方式一：使用 Node.js 服务器（推荐）
|
||||
|
||||
```bash
|
||||
# 进入原型目录
|
||||
cd prototype/
|
||||
|
||||
# 启动服务器
|
||||
node server.js
|
||||
|
||||
# 或使用启动脚本（Linux/Mac）
|
||||
./start.sh
|
||||
```
|
||||
|
||||
服务器将在 `http://localhost:8080` 启动，浏览器会自动打开。
|
||||
|
||||
### 方式二：直接打开 HTML 文件
|
||||
|
||||
直接用浏览器打开以下任一文件：
|
||||
|
||||
- `index.html` - 统一入口页面
|
||||
- `admin-index.html` - 平铺展示页面
|
||||
- `docs-index.html` - 文档中心
|
||||
|
||||
## 📄 页面说明
|
||||
|
||||
### 入口页面
|
||||
|
||||
| 页面 | 说明 | URL |
|
||||
|------|------|-----|
|
||||
| 统一入口 | 展示项目介绍和页面列表 | `/index.html` |
|
||||
| 平铺展示 | 所有页面同时显示，一目了然 | `/admin-index.html` |
|
||||
| 文档中心 | 查看 PRD、UX 设计规范等文档 | `/docs-index.html` |
|
||||
|
||||
### 后台管理页面
|
||||
|
||||
| 页面 | 功能 | URL |
|
||||
|------|------|-----|
|
||||
| 数据概览 | 总抽背次数、平均正确率、活跃用户数、趋势图 | `/pages/admin/dashboard.html` |
|
||||
| 抽背记录查询 | 按用户/时间筛选，数据表格，导出功能 | `/pages/admin/quiz-records.html` |
|
||||
| 学生管理 | 学生列表，添加/编辑学生 | `/pages/admin/student-management.html` |
|
||||
| 知识点管理 | 知识点列表，添加/编辑知识点 | `/pages/admin/knowledge-management.html` |
|
||||
| 学习任务管理 | 任务列表，创建/编辑任务 | `/pages/admin/task-management.html` |
|
||||
| 系统设置 | 基本设置、抽背设置、提醒设置、数据管理 | `/pages/admin/settings.html` |
|
||||
|
||||
## 🎨 设计规范
|
||||
|
||||
### 色彩系统
|
||||
|
||||
| 颜色 | 用途 | 色值 |
|
||||
|------|------|------|
|
||||
| 主色 | 品牌、导航、按钮 | `#1890FF` |
|
||||
| 成功色 | 正确、已完成 | `#52C41A` |
|
||||
| 警告色 | 待复习、警告 | `#FAAD14` |
|
||||
| 错误色 | 错误、重要提示 | `#F5222D` |
|
||||
| 文字主色 | 主要文字 | `#262626` |
|
||||
| 文字辅色 | 次要文字 | `#8C8C8C` |
|
||||
| 背景色 | 页面背景 | `#FFFFFF` / `#F5F5F5` |
|
||||
|
||||
### 字体规范
|
||||
|
||||
| 用途 | 字号 | 字重 |
|
||||
|------|------|------|
|
||||
| 大标题 | 24px | Medium |
|
||||
| 标题 | 18px | Medium |
|
||||
| 副标题 | 16px | Regular |
|
||||
| 正文 | 14px | Regular |
|
||||
| 辅助文字 | 12px | Regular |
|
||||
|
||||
## 📚 参考文档
|
||||
|
||||
- [PRD 文档](../{output_folder}/planning-artifacts/prd.md)
|
||||
- [UX 设计规范](../{output_folder}/planning-artifacts/ux-design-specification.md)
|
||||
- [需求文档](../ai-tutor-requirements.md)
|
||||
|
||||
## 🛠️ 技术栈
|
||||
|
||||
- **样式框架**: Tailwind CSS (CDN)
|
||||
- **图标库**: Font Awesome 6.4.0
|
||||
- **字体**: 系统默认字体栈
|
||||
|
||||
## 📝 生成信息
|
||||
|
||||
- **生成工具**: generate-prototype-grid skill
|
||||
- **生成日期**: 2026-03-28
|
||||
- **项目名称**: AI 智能抽背助手
|
||||
- **模式**: 桌面端管理后台
|
||||
|
||||
---
|
||||
|
||||
*本文档由 generate-prototype-grid 技能自动生成*
|
||||
@@ -1,181 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AI 智能抽背助手 - 原型系统（平铺展示）</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
:root {
|
||||
--primary-blue: #1890FF;
|
||||
}
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
}
|
||||
/* 平铺网格布局 */
|
||||
.prototype-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
.prototype-iframe {
|
||||
width: 100%;
|
||||
height: 900px;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 12px;
|
||||
background: white;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
.prototype-iframe:hover {
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.page-label {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
background: rgba(24, 144, 255, 0.9);
|
||||
color: white;
|
||||
padding: 4px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
z-index: 10;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
.iframe-container {
|
||||
position: relative;
|
||||
}
|
||||
/* 滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<!-- 顶部标题栏 -->
|
||||
<header class="bg-gradient-to-r from-blue-600 to-blue-700 text-white py-4 px-6 sticky top-0 z-50 shadow-lg">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<div class="flex items-center gap-3">
|
||||
<i class="fas fa-robot text-2xl"></i>
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold">AI 智能抽背助手 - 原型系统</h1>
|
||||
<p class="text-blue-100 text-sm mt-1">
|
||||
<i class="fas fa-th mr-1"></i>平铺展示模式 - 所有页面同时显示，一目了然
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="index.html" class="px-4 py-2 bg-white/20 hover:bg-white/30 rounded-lg text-sm transition">
|
||||
<i class="fas fa-home mr-2"></i>统一入口
|
||||
</a>
|
||||
<a href="docs-index.html" class="px-4 py-2 bg-white/20 hover:bg-white/30 rounded-lg text-sm transition">
|
||||
<i class="fas fa-book mr-2"></i>文档中心
|
||||
</a>
|
||||
<div class="bg-white/20 rounded-lg px-3 py-2 text-sm">
|
||||
<i class="fas fa-calendar mr-2"></i>2026-03-28
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 页面说明 -->
|
||||
<div class="bg-white border-b px-6 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-6 text-sm">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-3 h-3 bg-blue-500 rounded-full"></span>
|
||||
<span class="text-gray-600">共 <strong>6</strong> 个页面</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-3 h-3 bg-green-500 rounded-full"></span>
|
||||
<span class="text-gray-600">桌面端模式</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-3 h-3 bg-purple-500 rounded-full"></span>
|
||||
<span class="text-gray-600">后台管理系统</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-sm text-gray-500">
|
||||
<i class="fas fa-info-circle mr-1"></i>提示：每个 iframe 可独立滚动查看完整内容
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 平铺网格容器 -->
|
||||
<div class="prototype-grid">
|
||||
<!-- 页面 1: 数据概览 -->
|
||||
<div class="iframe-container">
|
||||
<span class="page-label"><i class="fas fa-chart-line mr-1"></i>数据概览</span>
|
||||
<iframe src="pages/admin/dashboard.html" class="prototype-iframe" title="数据概览"></iframe>
|
||||
</div>
|
||||
|
||||
<!-- 页面 2: 抽背记录查询 -->
|
||||
<div class="iframe-container">
|
||||
<span class="page-label"><i class="fas fa-list-alt mr-1"></i>抽背记录查询</span>
|
||||
<iframe src="pages/admin/quiz-records.html" class="prototype-iframe" title="抽背记录查询"></iframe>
|
||||
</div>
|
||||
|
||||
<!-- 页面 3: 学生管理 -->
|
||||
<div class="iframe-container">
|
||||
<span class="page-label"><i class="fas fa-user-graduate mr-1"></i>学生管理</span>
|
||||
<iframe src="pages/admin/student-management.html" class="prototype-iframe" title="学生管理"></iframe>
|
||||
</div>
|
||||
|
||||
<!-- 页面 4: 知识点管理 -->
|
||||
<div class="iframe-container">
|
||||
<span class="page-label"><i class="fas fa-book mr-1"></i>知识点管理</span>
|
||||
<iframe src="pages/admin/knowledge-management.html" class="prototype-iframe" title="知识点管理"></iframe>
|
||||
</div>
|
||||
|
||||
<!-- 页面 5: 学习任务管理 -->
|
||||
<div class="iframe-container">
|
||||
<span class="page-label"><i class="fas fa-tasks mr-1"></i>学习任务管理</span>
|
||||
<iframe src="pages/admin/task-management.html" class="prototype-iframe" title="学习任务管理"></iframe>
|
||||
</div>
|
||||
|
||||
<!-- 页面 6: 系统设置 -->
|
||||
<div class="iframe-container">
|
||||
<span class="page-label"><i class="fas fa-cog mr-1"></i>系统设置</span>
|
||||
<iframe src="pages/admin/settings.html" class="prototype-iframe" title="系统设置"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer class="bg-white border-t py-4 px-6 mt-6">
|
||||
<div class="flex items-center justify-between text-sm text-gray-500">
|
||||
<div>
|
||||
<span>AI 智能抽背助手原型系统</span>
|
||||
<span class="mx-2">|</span>
|
||||
<span>基于 PRD 和 UX 设计规范生成</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="../{output_folder}/planning-artifacts/prd.md" target="_blank" class="hover:text-blue-600">
|
||||
<i class="fas fa-file-alt mr-1"></i>PRD 文档
|
||||
</a>
|
||||
<a href="../{output_folder}/planning-artifacts/ux-design-specification.md" target="_blank" class="hover:text-blue-600">
|
||||
<i class="fas fa-palette mr-1"></i>UX 设计规范
|
||||
</a>
|
||||
<a href="../ai-tutor-requirements.md" target="_blank" class="hover:text-blue-600">
|
||||
<i class="fas fa-list mr-1"></i>需求文档
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,329 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>文档中心 - AI 智能抽背助手原型系统</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
:root {
|
||||
--primary-blue: #1890FF;
|
||||
}
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
}
|
||||
.doc-card {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.doc-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.stat-item {
|
||||
background: linear-gradient(135deg, var(--primary-blue), #40a9ff);
|
||||
}
|
||||
.markdown-body h1, .markdown-body h2 { border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5em; margin-bottom: 1em; }
|
||||
.markdown-body pre { background: #1f2937; color: #e5e7eb; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; }
|
||||
.markdown-body code { background: #f3f4f6; padding: 0.2em 0.4em; border-radius: 0.25rem; }
|
||||
.markdown-body table { border-collapse: collapse; width: 100%; }
|
||||
.markdown-body table th, .markdown-body table td { border: 1px solid #e5e7eb; padding: 0.5rem; }
|
||||
.markdown-body table tr:nth-child(even) { background: #f9fafb; }
|
||||
.markdown-body blockquote { border-left: 4px solid #3b82f6; padding-left: 1rem; color: #6b7280; }
|
||||
.markdown-body a { color: #2563eb; }
|
||||
</style>
|
||||
<script src="https://cdn.jsdelivr.net/npm/markdown-it@14.0.0/dist/markdown-it.min.js"></script>
|
||||
</head>
|
||||
<body class="bg-gray-50 min-h-screen">
|
||||
<!-- 导航栏 -->
|
||||
<nav class="bg-white shadow-sm sticky top-0 z-50">
|
||||
<div class="max-w-7xl mx-auto px-6 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center">
|
||||
<i class="fas fa-book text-white"></i>
|
||||
</div>
|
||||
<span class="text-xl font-bold text-gray-800">文档中心</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="index.html" class="text-gray-600 hover:text-blue-600 text-sm">首页</a>
|
||||
<a href="admin-index.html" class="text-gray-600 hover:text-blue-600 text-sm">平铺展示</a>
|
||||
<span class="text-gray-300">|</span>
|
||||
<span class="text-gray-500 text-sm">AI 智能抽背助手</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 统计区域 -->
|
||||
<section class="py-8 bg-white border-b">
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
<div class="grid grid-cols-4 gap-4">
|
||||
<div class="stat-item rounded-xl p-4 text-white">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-white/80 text-sm">文档数量</p>
|
||||
<p class="text-2xl font-bold">3</p>
|
||||
</div>
|
||||
<i class="fas fa-file-alt text-3xl text-white/30"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gradient-to-br from-green-500 to-green-600 rounded-xl p-4 text-white">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-white/80 text-sm">页面数量</p>
|
||||
<p class="text-2xl font-bold">6</p>
|
||||
</div>
|
||||
<i class="fas fa-file-code text-3xl text-white/30"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl p-4 text-white">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-white/80 text-sm">功能模块</p>
|
||||
<p class="text-2xl font-bold">5</p>
|
||||
</div>
|
||||
<i class="fas fa-cubes text-3xl text-white/30"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl p-4 text-white">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-white/80 text-sm">更新日期</p>
|
||||
<p class="text-2xl font-bold">03-28</p>
|
||||
</div>
|
||||
<i class="fas fa-calendar text-3xl text-white/30"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<section class="py-12">
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<!-- 文档列表 -->
|
||||
<div class="lg:col-span-2">
|
||||
<h2 class="text-2xl font-bold text-gray-800 mb-6">项目文档</h2>
|
||||
|
||||
<!-- PRD 文档 -->
|
||||
<div class="doc-card bg-white rounded-xl shadow-sm overflow-hidden mb-6">
|
||||
<div class="flex">
|
||||
<div class="w-2 bg-blue-500"></div>
|
||||
<div class="p-6 flex-1">
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<h3 class="text-lg font-semibold text-gray-800">产品需求文档 (PRD)</h3>
|
||||
<span class="px-2 py-0.5 bg-blue-100 text-blue-700 rounded text-xs">核心文档</span>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm mb-4">完整的产品需求规格说明，包含项目愿景、功能需求、非功能需求、技术架构等</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
|
||||
<i class="fas fa-file-alt text-blue-600 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-4 mb-4 text-sm">
|
||||
<div class="bg-gray-50 rounded-lg p-3">
|
||||
<p class="text-gray-500 text-xs">行数</p>
|
||||
<p class="font-semibold text-gray-800">1,082 行</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-lg p-3">
|
||||
<p class="text-gray-500 text-xs">大小</p>
|
||||
<p class="font-semibold text-gray-800">40 KB</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-lg p-3">
|
||||
<p class="text-gray-500 text-xs">功能点</p>
|
||||
<p class="font-semibold text-gray-800">75 个</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">产品愿景</span>
|
||||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">功能需求</span>
|
||||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">技术架构</span>
|
||||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">数据模型</span>
|
||||
</div>
|
||||
<a href="view-doc.html?doc=prd.md" target="_self" class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700">
|
||||
<i class="fas fa-eye mr-2"></i>查看文档
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- UX 设计规范 -->
|
||||
<div class="doc-card bg-white rounded-xl shadow-sm overflow-hidden mb-6">
|
||||
<div class="flex">
|
||||
<div class="w-2 bg-purple-500"></div>
|
||||
<div class="p-6 flex-1">
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<h3 class="text-lg font-semibold text-gray-800">UX 设计规范</h3>
|
||||
<span class="px-2 py-0.5 bg-purple-100 text-purple-700 rounded text-xs">设计文档</span>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm mb-4">用户体验设计规范，包含设计系统、组件规范、页面设计、响应式与无障碍等</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center">
|
||||
<i class="fas fa-palette text-purple-600 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-4 mb-4 text-sm">
|
||||
<div class="bg-gray-50 rounded-lg p-3">
|
||||
<p class="text-gray-500 text-xs">行数</p>
|
||||
<p class="font-semibold text-gray-800">1,094 行</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-lg p-3">
|
||||
<p class="text-gray-500 text-xs">大小</p>
|
||||
<p class="font-semibold text-gray-800">36 KB</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-lg p-3">
|
||||
<p class="text-gray-500 text-xs">界面数</p>
|
||||
<p class="font-semibold text-gray-800">6 个</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">设计系统</span>
|
||||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">组件规范</span>
|
||||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">色彩系统</span>
|
||||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">无障碍</span>
|
||||
</div>
|
||||
<a href="view-doc.html?doc=ux-design-specification.md" target="_self" class="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700">
|
||||
<i class="fas fa-eye mr-2"></i>查看文档
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 需求文档 -->
|
||||
<div class="doc-card bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<div class="flex">
|
||||
<div class="w-2 bg-green-500"></div>
|
||||
<div class="p-6 flex-1">
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<h3 class="text-lg font-semibold text-gray-800">需求文档</h3>
|
||||
<span class="px-2 py-0.5 bg-green-100 text-green-700 rounded text-xs">原始需求</span>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm mb-4">原始需求文档，包含用户管理、收藏分享、任务制定、AI语音抽背、要点背诵等模块详细需求</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
|
||||
<i class="fas fa-list text-green-600 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-4 mb-4 text-sm">
|
||||
<div class="bg-gray-50 rounded-lg p-3">
|
||||
<p class="text-gray-500 text-xs">行数</p>
|
||||
<p class="font-semibold text-gray-800">1,092 行</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-lg p-3">
|
||||
<p class="text-gray-500 text-xs">大小</p>
|
||||
<p class="font-semibold text-gray-800">50 KB</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-lg p-3">
|
||||
<p class="text-gray-500 text-xs">模块数</p>
|
||||
<p class="font-semibold text-gray-800">5 个</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">用户管理</span>
|
||||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">收藏分享</span>
|
||||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">任务制定</span>
|
||||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">AI抽背</span>
|
||||
</div>
|
||||
<a href="view-doc.html?doc=ai-tutor-requirements.md" target="_self" class="px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700">
|
||||
<i class="fas fa-eye mr-2"></i>查看文档
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-800 mb-4">快速导航</h2>
|
||||
<div class="bg-white rounded-xl shadow-sm p-4 mb-6">
|
||||
<ul class="space-y-2">
|
||||
<li>
|
||||
<a href="index.html" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition">
|
||||
<i class="fas fa-home text-gray-400 w-5"></i>
|
||||
<span class="text-gray-700">统一入口</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="admin-index.html" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition">
|
||||
<i class="fas fa-th text-gray-400 w-5"></i>
|
||||
<span class="text-gray-700">平铺展示</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="pages/admin/dashboard.html" target="_blank" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition">
|
||||
<i class="fas fa-chart-line text-gray-400 w-5"></i>
|
||||
<span class="text-gray-700">数据概览</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2 class="text-lg font-bold text-gray-800 mb-4">页面列表</h2>
|
||||
<div class="bg-white rounded-xl shadow-sm p-4">
|
||||
<ul class="space-y-1 text-sm">
|
||||
<li><a href="pages/admin/dashboard.html" target="_blank" class="block p-2 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded">数据概览</a></li>
|
||||
<li><a href="pages/admin/quiz-records.html" target="_blank" class="block p-2 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded">抽背记录查询</a></li>
|
||||
<li><a href="pages/admin/student-management.html" target="_blank" class="block p-2 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded">学生管理</a></li>
|
||||
<li><a href="pages/admin/knowledge-management.html" target="_blank" class="block p-2 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded">知识点管理</a></li>
|
||||
<li><a href="pages/admin/task-management.html" target="_blank" class="block p-2 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded">学习任务管理</a></li>
|
||||
<li><a href="pages/admin/settings.html" target="_blank" class="block p-2 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded">系统设置</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2 class="text-lg font-bold text-gray-800 mb-4 mt-6">设计规范</h2>
|
||||
<div class="bg-white rounded-xl shadow-sm p-4">
|
||||
<h3 class="text-sm font-semibold text-gray-700 mb-3">色彩系统</h3>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded" style="background: #1890FF"></div>
|
||||
<span class="text-xs text-gray-600">主色 #1890FF</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded" style="background: #52C41A"></div>
|
||||
<span class="text-xs text-gray-600">成功 #52C41A</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded" style="background: #FAAD14"></div>
|
||||
<span class="text-xs text-gray-600">警告 #FAAD14</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded" style="background: #F5222D"></div>
|
||||
<span class="text-xs text-gray-600">错误 #F5222D</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer class="bg-white border-t py-6">
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
<div class="flex items-center justify-between text-sm text-gray-500">
|
||||
<div>
|
||||
<span>AI 智能抽背助手原型系统</span>
|
||||
<span class="mx-2">|</span>
|
||||
<span>基于 PRD 和 UX 设计规范生成</span>
|
||||
</div>
|
||||
<div>2026-03-28</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,310 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AI 智能抽背助手 - 原型系统入口</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
:root {
|
||||
--primary-blue: #1890FF;
|
||||
--success-green: #52C41A;
|
||||
--warning-orange: #FAAD14;
|
||||
}
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
}
|
||||
.hero-gradient {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
.card-hover {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.card-hover:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.feature-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 16px;
|
||||
font-size: 28px;
|
||||
}
|
||||
</style>
|
||||
<script src="https://cdn.jsdelivr.net/npm/markdown-it@14.0.0/dist/markdown-it.min.js"></script>
|
||||
</head>
|
||||
<body class="bg-gray-50 min-h-screen">
|
||||
<!-- 导航栏 -->
|
||||
<nav class="bg-white shadow-sm sticky top-0 z-50">
|
||||
<div class="max-w-7xl mx-auto px-6 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center">
|
||||
<i class="fas fa-robot text-white"></i>
|
||||
</div>
|
||||
<span class="text-xl font-bold text-gray-800">AI 智能抽背助手</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="#features" class="text-gray-600 hover:text-blue-600 text-sm">功能特性</a>
|
||||
<a href="#pages" class="text-gray-600 hover:text-blue-600 text-sm">页面列表</a>
|
||||
<a href="docs-index.html" class="text-gray-600 hover:text-blue-600 text-sm">文档中心</a>
|
||||
<a href="admin-index.html" class="px-3 py-2 bg-blue-100 text-blue-600 rounded-lg hover:bg-blue-200 text-sm transition">
|
||||
<i class="fas fa-desktop mr-1"></i>桌面端
|
||||
</a>
|
||||
<a href="mobile-index.html" class="px-3 py-2 bg-green-100 text-green-600 rounded-lg hover:bg-green-200 text-sm transition">
|
||||
<i class="fas fa-mobile-alt mr-1"></i>移动端
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 英雄区域 -->
|
||||
<section class="hero-gradient text-white py-20">
|
||||
<div class="max-w-7xl mx-auto px-6 text-center">
|
||||
<div class="inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full text-sm mb-6">
|
||||
<i class="fas fa-sparkles"></i>
|
||||
<span>基于 PRD 和 UX 设计规范自动生成</span>
|
||||
</div>
|
||||
<h1 class="text-5xl font-bold mb-6">AI 智能抽背助手</h1>
|
||||
<p class="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
|
||||
基于 AI 驱动的艾宾浩斯遗忘曲线算法，在用户即将遗忘知识点的关键时刻主动推送精准复习
|
||||
</p>
|
||||
<div class="flex justify-center gap-4">
|
||||
<a href="admin-index.html" class="px-6 py-3 bg-white text-blue-600 rounded-xl font-medium hover:bg-gray-100 transition shadow-lg">
|
||||
<i class="fas fa-desktop mr-2"></i>桌面端管理后台
|
||||
</a>
|
||||
<a href="mobile-index.html" class="px-6 py-3 bg-white text-green-600 rounded-xl font-medium hover:bg-gray-100 transition shadow-lg">
|
||||
<i class="fas fa-mobile-alt mr-2"></i>移动端应用
|
||||
</a>
|
||||
<a href="docs-index.html" class="px-6 py-3 bg-white/20 backdrop-blur-sm text-white rounded-xl font-medium hover:bg-white/30 transition">
|
||||
<i class="fas fa-book mr-2"></i>查看文档
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 功能特性 -->
|
||||
<section id="features" class="py-16 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl font-bold text-gray-800 mb-4">核心功能特性</h2>
|
||||
<p class="text-gray-600">基于 PRD 文档定义的 5 大核心模块</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="card-hover bg-gradient-to-br from-blue-50 to-blue-100 rounded-2xl p-6">
|
||||
<div class="feature-icon bg-blue-500 text-white mb-4">
|
||||
<i class="fas fa-microphone-alt"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-gray-800 mb-2">AI 语音抽背</h3>
|
||||
<p class="text-gray-600 text-sm">支持语音/文字输入提问，AI 即时判断正误，自动标记错误内容为"待再次抽背"</p>
|
||||
</div>
|
||||
<div class="card-hover bg-gradient-to-br from-green-50 to-green-100 rounded-2xl p-6">
|
||||
<div class="feature-icon bg-green-500 text-white mb-4">
|
||||
<i class="fas fa-brain"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-gray-800 mb-2">记忆曲线助力</h3>
|
||||
<p class="text-gray-600 text-sm">基于艾宾浩斯遗忘曲线，在遗忘临界点推送再次抽背提醒</p>
|
||||
</div>
|
||||
<div class="card-hover bg-gradient-to-br from-purple-50 to-purple-100 rounded-2xl p-6">
|
||||
<div class="feature-icon bg-purple-500 text-white mb-4">
|
||||
<i class="fas fa-layer-group"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-gray-800 mb-2">要点背诵</h3>
|
||||
<p class="text-gray-600 text-sm">卡片式背诵、音频带背挖空、关联试题推荐，多种学习模式</p>
|
||||
</div>
|
||||
<div class="card-hover bg-gradient-to-br from-orange-50 to-orange-100 rounded-2xl p-6">
|
||||
<div class="feature-icon bg-orange-500 text-white mb-4">
|
||||
<i class="fas fa-tasks"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-gray-800 mb-2">任务制定</h3>
|
||||
<p class="text-gray-600 text-sm">自主设置学习任务，通过手机通知栏推送学习提醒</p>
|
||||
</div>
|
||||
<div class="card-hover bg-gradient-to-br from-pink-50 to-pink-100 rounded-2xl p-6">
|
||||
<div class="feature-icon bg-pink-500 text-white mb-4">
|
||||
<i class="fas fa-star"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-gray-800 mb-2">收藏与分享</h3>
|
||||
<p class="text-gray-600 text-sm">收藏重要题目，添加标签分类，支持分享到微信、QQ等平台</p>
|
||||
</div>
|
||||
<div class="card-hover bg-gradient-to-br from-cyan-50 to-cyan-100 rounded-2xl p-6">
|
||||
<div class="feature-icon bg-cyan-500 text-white mb-4">
|
||||
<i class="fas fa-chart-bar"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-gray-800 mb-2">后台管理</h3>
|
||||
<p class="text-gray-600 text-sm">查看抽背记录、数据统计、内容管理、系统配置</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 页面列表 -->
|
||||
<section id="pages" class="py-16 bg-gray-50">
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl font-bold text-gray-800 mb-4">后台管理页面</h2>
|
||||
<p class="text-gray-600">共 6 个页面，涵盖数据概览、记录查询、学生管理等功能</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<a href="pages/admin/dashboard.html" target="_blank" class="card-hover bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<div class="h-2 bg-blue-500"></div>
|
||||
<div class="p-6">
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
|
||||
<i class="fas fa-chart-line text-blue-600"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-800">数据概览</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">总抽背次数、平均正确率、活跃用户数、正确率趋势图、错误知识点分布</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="pages/admin/quiz-records.html" target="_blank" class="card-hover bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<div class="h-2 bg-green-500"></div>
|
||||
<div class="p-6">
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
|
||||
<i class="fas fa-list-alt text-green-600"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-800">抽背记录查询</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">按用户/时间筛选，详细数据表格，导出Excel，发送报告</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="pages/admin/student-management.html" target="_blank" class="card-hover bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<div class="h-2 bg-purple-500"></div>
|
||||
<div class="p-6">
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
|
||||
<i class="fas fa-user-graduate text-purple-600"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-800">学生管理</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">学生列表、添加/编辑学生、查看学习数据、班级管理</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="pages/admin/knowledge-management.html" target="_blank" class="card-hover bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<div class="h-2 bg-orange-500"></div>
|
||||
<div class="p-6">
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
|
||||
<i class="fas fa-book text-orange-600"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-800">知识点管理</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">知识点列表、添加/编辑知识点、分类管理、难度设置</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="pages/admin/task-management.html" target="_blank" class="card-hover bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<div class="h-2 bg-pink-500"></div>
|
||||
<div class="p-6">
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<div class="w-10 h-10 bg-pink-100 rounded-lg flex items-center justify-center">
|
||||
<i class="fas fa-tasks text-pink-600"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-800">学习任务管理</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">任务列表、创建/编辑任务、任务类型、完成率统计</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="pages/admin/settings.html" target="_blank" class="card-hover bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<div class="h-2 bg-cyan-500"></div>
|
||||
<div class="p-6">
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<div class="w-10 h-10 bg-cyan-100 rounded-lg flex items-center justify-center">
|
||||
<i class="fas fa-cog text-cyan-600"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-800">系统设置</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">基本设置、抽背设置、提醒设置、数据管理、安全设置</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 快速入口 -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
<div class="text-center mb-10">
|
||||
<h2 class="text-3xl font-bold text-gray-800 mb-3">快速入口</h2>
|
||||
<p class="text-gray-600">选择您想要查看的原型系统</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<!-- 桌面端管理后台 -->
|
||||
<a href="admin-index.html" class="card-hover group">
|
||||
<div class="bg-gradient-to-br from-blue-500 to-blue-700 rounded-2xl p-8 text-white h-full">
|
||||
<div class="flex items-start justify-between mb-6">
|
||||
<div class="w-16 h-16 bg-white/20 rounded-2xl flex items-center justify-center">
|
||||
<i class="fas fa-desktop text-3xl"></i>
|
||||
</div>
|
||||
<i class="fas fa-arrow-right text-white/60 group-hover:text-white group-hover:translate-x-2 transition-all"></i>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">桌面端管理后台</h3>
|
||||
<p class="text-blue-100 mb-4">面向教师和管理员的 Web 管理系统</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-3 py-1 bg-white/20 rounded-full text-sm">数据概览</span>
|
||||
<span class="px-3 py-1 bg-white/20 rounded-full text-sm">学生管理</span>
|
||||
<span class="px-3 py-1 bg-white/20 rounded-full text-sm">知识点管理</span>
|
||||
<span class="px-3 py-1 bg-white/20 rounded-full text-sm">任务管理</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<!-- 移动端前端应用 -->
|
||||
<a href="mobile-index.html" class="card-hover group">
|
||||
<div class="bg-gradient-to-br from-green-500 to-green-700 rounded-2xl p-8 text-white h-full">
|
||||
<div class="flex items-start justify-between mb-6">
|
||||
<div class="w-16 h-16 bg-white/20 rounded-2xl flex items-center justify-center">
|
||||
<i class="fas fa-mobile-alt text-3xl"></i>
|
||||
</div>
|
||||
<i class="fas fa-arrow-right text-white/60 group-hover:text-white group-hover:translate-x-2 transition-all"></i>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">移动端前端应用</h3>
|
||||
<p class="text-green-100 mb-4">面向学生的移动学习应用</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-3 py-1 bg-white/20 rounded-full text-sm">AI 抽背</span>
|
||||
<span class="px-3 py-1 bg-white/20 rounded-full text-sm">要点背诵</span>
|
||||
<span class="px-3 py-1 bg-white/20 rounded-full text-sm">学习任务</span>
|
||||
<span class="px-3 py-1 bg-white/20 rounded-full text-sm">收藏分享</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-8 text-center">
|
||||
<a href="docs-index.html" class="inline-flex items-center gap-2 px-6 py-3 bg-gray-100 text-gray-700 rounded-xl font-medium hover:bg-gray-200 transition">
|
||||
<i class="fas fa-book"></i>查看文档中心
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer class="bg-gray-800 text-white py-8">
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center">
|
||||
<i class="fas fa-robot text-white text-sm"></i>
|
||||
</div>
|
||||
<span class="font-semibold">AI 智能抽背助手</span>
|
||||
</div>
|
||||
<div class="text-gray-400 text-sm">
|
||||
基于 PRD 和 UX 设计规范自动生成 | 2026-03-28
|
||||
</div>
|
||||
<div class="flex items-center gap-4 text-sm">
|
||||
<a href="view-doc.html?doc=prd.md" class="text-gray-400 hover:text-white">
|
||||
<i class="fas fa-file-alt mr-1"></i>PRD
|
||||
</a>
|
||||
<a href="view-doc.html?doc=ux-design-specification.md" class="text-gray-400 hover:text-white">
|
||||
<i class="fas fa-palette mr-1"></i>UX
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,181 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{title}}</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
line-height: 1.8;
|
||||
color: #333;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
.container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
.markdown-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 60px 20px;
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
.markdown-header h1 {
|
||||
font-size: 2.5em;
|
||||
font-weight: 700;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
|
||||
}
|
||||
.markdown-content {
|
||||
background: white;
|
||||
padding: 40px 50px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
|
||||
}
|
||||
.markdown-content h1,
|
||||
.markdown-content h2,
|
||||
.markdown-content h3,
|
||||
.markdown-content h4,
|
||||
.markdown-content h5,
|
||||
.markdown-content h6 {
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 0.8em;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.markdown-content h1 {
|
||||
font-size: 2em;
|
||||
border-bottom: 3px solid #667eea;
|
||||
padding-bottom: 0.3em;
|
||||
}
|
||||
.markdown-content h2 {
|
||||
font-size: 1.6em;
|
||||
border-bottom: 2px solid #e0e0e0;
|
||||
padding-bottom: 0.2em;
|
||||
}
|
||||
.markdown-content h3 {
|
||||
font-size: 1.3em;
|
||||
color: #555;
|
||||
}
|
||||
.markdown-content p {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.markdown-content a {
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px dotted #667eea;
|
||||
}
|
||||
.markdown-content a:hover {
|
||||
color: #764ba2;
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
.markdown-content ul,
|
||||
.markdown-content ol {
|
||||
margin-left: 2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.markdown-content li {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.markdown-content code {
|
||||
background: #f4f4f4;
|
||||
padding: 0.2em 0.4em;
|
||||
border-radius: 4px;
|
||||
font-family: 'Consolas', 'Monaco', monospace;
|
||||
font-size: 0.9em;
|
||||
color: #e74c3c;
|
||||
}
|
||||
.markdown-content pre {
|
||||
background: #2d2d2d;
|
||||
color: #f8f8f2;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
overflow-x: auto;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
.markdown-content pre code {
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
.markdown-content blockquote {
|
||||
border-left: 4px solid #667eea;
|
||||
padding-left: 20px;
|
||||
margin: 1.5em 0;
|
||||
color: #666;
|
||||
background: #f8f9fa;
|
||||
padding: 15px 20px;
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
.markdown-content table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
.markdown-content table th,
|
||||
.markdown-content table td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
}
|
||||
.markdown-content table th {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
}
|
||||
.markdown-content table tr:nth-child(even) {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
.markdown-content img {
|
||||
max-width: 100%;
|
||||
border-radius: 8px;
|
||||
margin: 1.5em 0;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
.markdown-content hr {
|
||||
border: none;
|
||||
border-top: 2px solid #e0e0e0;
|
||||
margin: 2em 0;
|
||||
}
|
||||
.back-link {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.back-link a {
|
||||
display: inline-block;
|
||||
padding: 10px 24px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 25px;
|
||||
border: none;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
.back-link a:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="markdown-header">
|
||||
<h1>{{title}}</h1>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="markdown-content">
|
||||
{{content}}
|
||||
</div>
|
||||
<div class="back-link">
|
||||
<a href="/">返回首页</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,79 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>文档查看器</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/markdown-it@14.0.0/dist/markdown-it.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
|
||||
.markdown-body h1, .markdown-body h2 { border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5em; margin-bottom: 1em; }
|
||||
.markdown-body pre { background: #1f2937; color: #e5e7eb; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; }
|
||||
.markdown-body code { background: #f3f4f6; padding: 0.2em 0.4em; border-radius: 0.25rem; font-size: 0.9em; }
|
||||
.markdown-body table { border-collapse: collapse; width: 100%; }
|
||||
.markdown-body table th, .markdown-body table td { border: 1px solid #e5e7eb; padding: 0.5rem; }
|
||||
.markdown-body table tr:nth-child(even) { background: #f9fafb; }
|
||||
.markdown-body blockquote { border-left: 4px solid #3b82f6; padding-left: 1rem; color: #6b7280; }
|
||||
.markdown-body a { color: #2563eb; }
|
||||
.markdown-body img { max-width: 100%; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
<nav class="bg-white shadow-sm">
|
||||
<div class="max-w-5xl mx-auto px-4 py-3 flex items-center gap-4">
|
||||
<a href="docs-index.html" class="text-gray-600 hover:text-gray-800">
|
||||
<i class="fas fa-arrow-left"></i> 返回
|
||||
</a>
|
||||
<h1 id="title" class="text-xl font-semibold flex-1">文档加载中...</h1>
|
||||
</div>
|
||||
</nav>
|
||||
<main class="max-w-5xl mx-auto bg-white rounded-lg shadow-sm my-6 p-8">
|
||||
<div id="loading" class="text-center py-12">
|
||||
<i class="fas fa-spinner fa-spin text-4xl text-blue-500"></i>
|
||||
<p class="mt-4 text-gray-600">正在加载文档...</p>
|
||||
</div>
|
||||
<div id="error" class="hidden bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg"></div>
|
||||
<div id="content" class="markdown-body hidden prose max-w-none"></div>
|
||||
</main>
|
||||
<script>
|
||||
const md = window.markdownit({ html: true, linkify: true, breaks: true });
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const doc = params.get('doc');
|
||||
|
||||
if (!doc) {
|
||||
showError('未指定文档');
|
||||
} else {
|
||||
document.getElementById('title').textContent = doc.replace(/\.md$/, '').replace(/-/g, ' ');
|
||||
loadDoc(doc);
|
||||
}
|
||||
|
||||
async function loadDoc(doc) {
|
||||
const paths = ['/planning-artifacts/' + doc, '/' + doc];
|
||||
for (const path of paths) {
|
||||
try {
|
||||
const res = await fetch(path);
|
||||
if (res.ok) {
|
||||
const text = await res.text();
|
||||
const html = md.render(text);
|
||||
document.getElementById('loading').classList.add('hidden');
|
||||
document.getElementById('content').classList.remove('hidden');
|
||||
document.getElementById('content').innerHTML = html;
|
||||
return;
|
||||
}
|
||||
} catch (e) {
|
||||
continue;
|
||||
}
|
||||
}
|
||||
showError('无法加载文档: ' + doc);
|
||||
}
|
||||
|
||||
function showError(msg) {
|
||||
document.getElementById('loading').classList.add('hidden');
|
||||
document.getElementById('error').classList.remove('hidden');
|
||||
document.getElementById('error').textContent = msg;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,140 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>移动端原型 - AI智能抽背助手</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
.prototype-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||||
gap: 30px;
|
||||
padding: 30px;
|
||||
max-width: 1800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.prototype-card {
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.prototype-card h3 {
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
left: 20px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 8px 20px;
|
||||
border-radius: 20px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
.prototype-iframe {
|
||||
width: 100%;
|
||||
height: 880px;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.header {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: white;
|
||||
}
|
||||
.header h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.header p {
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.info-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
margin: 0 5px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 头部标题 -->
|
||||
<div class="header">
|
||||
<h1><i class="fas fa-mobile-alt mr-3"></i>AI智能抽背助手 - 移动端原型</h1>
|
||||
<p>微信小程序风格 | 375×812 手机框架 | 6个核心页面</p>
|
||||
<div class="mt-4 flex justify-center flex-wrap">
|
||||
<span class="info-badge">
|
||||
<i class="fas fa-layer-group"></i>
|
||||
平铺展示模式
|
||||
</span>
|
||||
<span class="info-badge">
|
||||
<i class="fas fa-palette"></i>
|
||||
蓝紫渐变主题
|
||||
</span>
|
||||
<span class="info-badge">
|
||||
<i class="fas fa-microphone-alt"></i>
|
||||
AI语音交互
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 平铺网格容器 -->
|
||||
<div class="prototype-grid">
|
||||
<!-- 页面1：首页抽背 -->
|
||||
<div class="prototype-card relative">
|
||||
<h3><i class="fas fa-home mr-2"></i>首页抽背</h3>
|
||||
<iframe src="pages/mobile/home.html" class="prototype-iframe" title="首页抽背"></iframe>
|
||||
</div>
|
||||
|
||||
<!-- 页面2：AI智能抽背 -->
|
||||
<div class="prototype-card relative">
|
||||
<h3><i class="fas fa-microphone-alt mr-2"></i>AI智能抽背</h3>
|
||||
<iframe src="pages/mobile/ai-quiz.html" class="prototype-iframe" title="AI智能抽背"></iframe>
|
||||
</div>
|
||||
|
||||
<!-- 页面3：抽背报告 -->
|
||||
<div class="prototype-card relative">
|
||||
<h3><i class="fas fa-chart-bar mr-2"></i>抽背报告</h3>
|
||||
<iframe src="pages/mobile/quiz-report.html" class="prototype-iframe" title="抽背报告"></iframe>
|
||||
</div>
|
||||
|
||||
<!-- 页面4：记忆曲线 -->
|
||||
<div class="prototype-card relative">
|
||||
<h3><i class="fas fa-brain mr-2"></i>记忆曲线</h3>
|
||||
<iframe src="pages/mobile/memory-curve.html" class="prototype-iframe" title="记忆曲线"></iframe>
|
||||
</div>
|
||||
|
||||
<!-- 页面5：卡片背诵 -->
|
||||
<div class="prototype-card relative">
|
||||
<h3><i class="fas fa-clone mr-2"></i>卡片背诵</h3>
|
||||
<iframe src="pages/mobile/card-recite.html" class="prototype-iframe" title="卡片背诵"></iframe>
|
||||
</div>
|
||||
|
||||
<!-- 页面6：个人中心 -->
|
||||
<div class="prototype-card relative">
|
||||
<h3><i class="fas fa-user mr-2"></i>个人中心</h3>
|
||||
<iframe src="pages/mobile/profile.html" class="prototype-iframe" title="个人中心"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 页脚信息 -->
|
||||
<div class="text-center py-8 text-white/80">
|
||||
<p><i class="fas fa-info-circle mr-2"></i>移动端原型系统 | 基于需求文档生成</p>
|
||||
<p class="text-sm mt-2 opacity-70">生成时间: 2026-03-28 | 设计风格: 微信小程序</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,302 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>数据概览 - AI 智能抽背助手</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
:root {
|
||||
--primary-blue: #1890FF;
|
||||
--success-green: #52C41A;
|
||||
--warning-orange: #FAAD14;
|
||||
--error-red: #F5222D;
|
||||
--text-primary: #262626;
|
||||
--text-secondary: #8C8C8C;
|
||||
--bg-white: #FFFFFF;
|
||||
--bg-gray: #F5F5F5;
|
||||
}
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
}
|
||||
.stat-card {
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
.stat-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.chart-bar {
|
||||
animation: growUp 1s ease-out forwards;
|
||||
transform-origin: bottom;
|
||||
}
|
||||
@keyframes growUp {
|
||||
from { transform: scaleY(0); }
|
||||
to { transform: scaleY(1); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50 min-h-screen">
|
||||
<!-- 顶部导航栏 -->
|
||||
<nav class="bg-gradient-to-r from-blue-600 to-blue-700 h-14 px-6 flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<i class="fas fa-robot text-white text-xl"></i>
|
||||
<h1 class="text-white text-lg font-semibold">AI 智能抽背助手 - 后台管理</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="text-blue-100 text-sm">管理员</span>
|
||||
<div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
|
||||
<i class="fas fa-user text-white text-sm"></i>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="flex">
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="w-56 bg-white shadow-sm min-h-[calc(100vh-56px)]">
|
||||
<nav class="py-4">
|
||||
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 bg-blue-50 text-blue-600 border-l-4 border-blue-600">
|
||||
<i class="fas fa-chart-line w-5"></i>
|
||||
<span class="font-medium">数据概览</span>
|
||||
</a>
|
||||
<a href="quiz-records.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50">
|
||||
<i class="fas fa-list-alt w-5"></i>
|
||||
<span>抽背记录查询</span>
|
||||
</a>
|
||||
<a href="student-management.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50">
|
||||
<i class="fas fa-user-graduate w-5"></i>
|
||||
<span>学生管理</span>
|
||||
</a>
|
||||
<a href="knowledge-management.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50">
|
||||
<i class="fas fa-book w-5"></i>
|
||||
<span>知识点管理</span>
|
||||
</a>
|
||||
<a href="task-management.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50">
|
||||
<i class="fas fa-tasks w-5"></i>
|
||||
<span>学习任务管理</span>
|
||||
</a>
|
||||
<a href="settings.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50">
|
||||
<i class="fas fa-cog w-5"></i>
|
||||
<span>系统设置</span>
|
||||
</a>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="flex-1 p-6">
|
||||
<h2 class="text-2xl font-semibold text-gray-800 mb-6">数据概览</h2>
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<div class="grid grid-cols-4 gap-4 mb-6">
|
||||
<div class="stat-card bg-white rounded-xl p-5 shadow-sm">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-gray-500 text-sm">总抽背次数</p>
|
||||
<p class="text-3xl font-bold text-gray-800 mt-1">12,458</p>
|
||||
<p class="text-green-500 text-sm mt-2">
|
||||
<i class="fas fa-arrow-up"></i> 12.5%
|
||||
</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
|
||||
<i class="fas fa-clipboard-list text-blue-600 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card bg-white rounded-xl p-5 shadow-sm">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-gray-500 text-sm">平均正确率</p>
|
||||
<p class="text-3xl font-bold text-gray-800 mt-1">78.6%</p>
|
||||
<p class="text-green-500 text-sm mt-2">
|
||||
<i class="fas fa-arrow-up"></i> 3.2%
|
||||
</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
|
||||
<i class="fas fa-check-circle text-green-600 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card bg-white rounded-xl p-5 shadow-sm">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-gray-500 text-sm">活跃用户数</p>
|
||||
<p class="text-3xl font-bold text-gray-800 mt-1">1,286</p>
|
||||
<p class="text-green-500 text-sm mt-2">
|
||||
<i class="fas fa-arrow-up"></i> 8.3%
|
||||
</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center">
|
||||
<i class="fas fa-users text-purple-600 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card bg-white rounded-xl p-5 shadow-sm">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-gray-500 text-sm">今日抽背次数</p>
|
||||
<p class="text-3xl font-bold text-gray-800 mt-1">892</p>
|
||||
<p class="text-red-500 text-sm mt-2">
|
||||
<i class="fas fa-arrow-down"></i> 2.1%
|
||||
</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center">
|
||||
<i class="fas fa-calendar-day text-orange-600 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图表区域 -->
|
||||
<div class="grid grid-cols-2 gap-6">
|
||||
<!-- 正确率趋势图 -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-5">
|
||||
<h3 class="text-lg font-semibold text-gray-800 mb-4">正确率趋势（近7天）</h3>
|
||||
<div class="h-64 flex items-end justify-between gap-2 px-4">
|
||||
<div class="flex flex-col items-center flex-1">
|
||||
<div class="chart-bar w-full bg-gradient-to-t from-blue-500 to-blue-400 rounded-t-lg" style="height: 65%"></div>
|
||||
<span class="text-xs text-gray-500 mt-2">周一</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center flex-1">
|
||||
<div class="chart-bar w-full bg-gradient-to-t from-blue-500 to-blue-400 rounded-t-lg" style="height: 72%"></div>
|
||||
<span class="text-xs text-gray-500 mt-2">周二</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center flex-1">
|
||||
<div class="chart-bar w-full bg-gradient-to-t from-blue-500 to-blue-400 rounded-t-lg" style="height: 68%"></div>
|
||||
<span class="text-xs text-gray-500 mt-2">周三</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center flex-1">
|
||||
<div class="chart-bar w-full bg-gradient-to-t from-blue-500 to-blue-400 rounded-t-lg" style="height: 78%"></div>
|
||||
<span class="text-xs text-gray-500 mt-2">周四</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center flex-1">
|
||||
<div class="chart-bar w-full bg-gradient-to-t from-blue-500 to-blue-400 rounded-t-lg" style="height: 75%"></div>
|
||||
<span class="text-xs text-gray-500 mt-2">周五</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center flex-1">
|
||||
<div class="chart-bar w-full bg-gradient-to-t from-blue-500 to-blue-400 rounded-t-lg" style="height: 82%"></div>
|
||||
<span class="text-xs text-gray-500 mt-2">周六</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center flex-1">
|
||||
<div class="chart-bar w-full bg-gradient-to-t from-green-500 to-green-400 rounded-t-lg" style="height: 79%"></div>
|
||||
<span class="text-xs text-gray-500 mt-2">周日</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 错误知识点分布 -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-5">
|
||||
<h3 class="text-lg font-semibold text-gray-800 mb-4">错误知识点 TOP 5</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="w-6 text-sm text-gray-500">1</span>
|
||||
<div class="flex-1">
|
||||
<div class="flex justify-between mb-1">
|
||||
<span class="text-sm text-gray-700">麻黄汤功效</span>
|
||||
<span class="text-sm text-gray-500">42%</span>
|
||||
</div>
|
||||
<div class="h-2 bg-gray-200 rounded-full">
|
||||
<div class="h-2 bg-red-500 rounded-full" style="width: 42%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="w-6 text-sm text-gray-500">2</span>
|
||||
<div class="flex-1">
|
||||
<div class="flex justify-between mb-1">
|
||||
<span class="text-sm text-gray-700">阴阳失调基本概念</span>
|
||||
<span class="text-sm text-gray-500">38%</span>
|
||||
</div>
|
||||
<div class="h-2 bg-gray-200 rounded-full">
|
||||
<div class="h-2 bg-orange-500 rounded-full" style="width: 38%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="w-6 text-sm text-gray-500">3</span>
|
||||
<div class="flex-1">
|
||||
<div class="flex justify-between mb-1">
|
||||
<span class="text-sm text-gray-700">桂枝功效</span>
|
||||
<span class="text-sm text-gray-500">31%</span>
|
||||
</div>
|
||||
<div class="h-2 bg-gray-200 rounded-full">
|
||||
<div class="h-2 bg-yellow-500 rounded-full" style="width: 31%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="w-6 text-sm text-gray-500">4</span>
|
||||
<div class="flex-1">
|
||||
<div class="flex justify-between mb-1">
|
||||
<span class="text-sm text-gray-700">杏仁功效</span>
|
||||
<span class="text-sm text-gray-500">28%</span>
|
||||
</div>
|
||||
<div class="h-2 bg-gray-200 rounded-full">
|
||||
<div class="h-2 bg-blue-500 rounded-full" style="width: 28%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="w-6 text-sm text-gray-500">5</span>
|
||||
<div class="flex-1">
|
||||
<div class="flex justify-between mb-1">
|
||||
<span class="text-sm text-gray-700">甘草功效</span>
|
||||
<span class="text-sm text-gray-500">25%</span>
|
||||
</div>
|
||||
<div class="h-2 bg-gray-200 rounded-full">
|
||||
<div class="h-2 bg-green-500 rounded-full" style="width: 25%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 最新抽背记录 -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-5 mt-6">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="text-lg font-semibold text-gray-800">最新抽背记录</h3>
|
||||
<a href="quiz-records.html" class="text-blue-600 text-sm hover:underline">查看全部</a>
|
||||
</div>
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
<tr class="text-left text-gray-500 text-sm border-b">
|
||||
<th class="pb-3">用户</th>
|
||||
<th class="pb-3">抽背内容</th>
|
||||
<th class="pb-3">正确率</th>
|
||||
<th class="pb-3">用时</th>
|
||||
<th class="pb-3">时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-sm">
|
||||
<tr class="border-b hover:bg-gray-50">
|
||||
<td class="py-3">张三</td>
|
||||
<td>方剂学 - 麻黄汤</td>
|
||||
<td><span class="text-green-600 font-medium">85%</span></td>
|
||||
<td>12分30秒</td>
|
||||
<td class="text-gray-500">2026-03-28 14:32</td>
|
||||
</tr>
|
||||
<tr class="border-b hover:bg-gray-50">
|
||||
<td class="py-3">李四</td>
|
||||
<td>中医基础 - 阴阳学说</td>
|
||||
<td><span class="text-orange-600 font-medium">72%</span></td>
|
||||
<td>8分15秒</td>
|
||||
<td class="text-gray-500">2026-03-28 14:28</td>
|
||||
</tr>
|
||||
<tr class="border-b hover:bg-gray-50">
|
||||
<td class="py-3">王五</td>
|
||||
<td>中药学 - 解表药</td>
|
||||
<td><span class="text-green-600 font-medium">91%</span></td>
|
||||
<td>15分42秒</td>
|
||||
<td class="text-gray-500">2026-03-28 14:15</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,302 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>知识点管理 - AI 智能抽背助手</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
</head>
|
||||
<body class="bg-gray-50 min-h-screen">
|
||||
<!-- 顶部导航栏 -->
|
||||
<nav class="bg-gradient-to-r from-blue-600 to-blue-700 h-14 px-6 flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<i class="fas fa-robot text-white text-xl"></i>
|
||||
<h1 class="text-white text-lg font-semibold">AI 智能抽背助手 - 后台管理</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="text-blue-100 text-sm">管理员</span>
|
||||
<div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
|
||||
<i class="fas fa-user text-white text-sm"></i>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="flex">
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="w-56 bg-white shadow-sm min-h-[calc(100vh-56px)]">
|
||||
<nav class="py-4">
|
||||
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50">
|
||||
<i class="fas fa-chart-line w-5"></i>
|
||||
<span>数据概览</span>
|
||||
</a>
|
||||
<a href="quiz-records.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50">
|
||||
<i class="fas fa-list-alt w-5"></i>
|
||||
<span>抽背记录查询</span>
|
||||
</a>
|
||||
<a href="student-management.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50">
|
||||
<i class="fas fa-user-graduate w-5"></i>
|
||||
<span>学生管理</span>
|
||||
</a>
|
||||
<a href="knowledge-management.html" class="flex items-center gap-3 px-4 py-3 bg-blue-50 text-blue-600 border-l-4 border-blue-600">
|
||||
<i class="fas fa-book w-5"></i>
|
||||
<span class="font-medium">知识点管理</span>
|
||||
</a>
|
||||
<a href="task-management.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50">
|
||||
<i class="fas fa-tasks w-5"></i>
|
||||
<span>学习任务管理</span>
|
||||
</a>
|
||||
<a href="settings.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50">
|
||||
<i class="fas fa-cog w-5"></i>
|
||||
<span>系统设置</span>
|
||||
</a>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="flex-1 p-6">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h2 class="text-2xl font-semibold text-gray-800">知识点管理</h2>
|
||||
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm">
|
||||
<i class="fas fa-plus mr-2"></i>添加知识点
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<div class="grid grid-cols-4 gap-4 mb-6">
|
||||
<div class="bg-white rounded-xl p-4 shadow-sm">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
|
||||
<i class="fas fa-book text-blue-600"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-gray-500 text-sm">知识点总数</p>
|
||||
<p class="text-xl font-bold text-gray-800">3,456</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl p-4 shadow-sm">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
|
||||
<i class="fas fa-check-circle text-green-600"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-gray-500 text-sm">已发布</p>
|
||||
<p class="text-xl font-bold text-gray-800">3,128</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl p-4 shadow-sm">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
|
||||
<i class="fas fa-edit text-orange-600"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-gray-500 text-sm">草稿</p>
|
||||
<p class="text-xl font-bold text-gray-800">328</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl p-4 shadow-sm">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
|
||||
<i class="fas fa-folder text-purple-600"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-gray-500 text-sm">分类数</p>
|
||||
<p class="text-xl font-bold text-gray-800">24</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 搜索和筛选 -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-5 mb-6">
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-1 relative">
|
||||
<input type="text" placeholder="搜索知识点标题、内容..." class="w-full border border-gray-300 rounded-lg pl-10 pr-4 py-2 text-sm focus:outline-none focus:border-blue-500">
|
||||
<i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
|
||||
</div>
|
||||
<select class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-blue-500">
|
||||
<option>全部分类</option>
|
||||
<option>方剂学</option>
|
||||
<option>中医基础理论</option>
|
||||
<option>中药学</option>
|
||||
</select>
|
||||
<select class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-blue-500">
|
||||
<option>全部状态</option>
|
||||
<option>已发布</option>
|
||||
<option>草稿</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 知识点列表 -->
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<table class="w-full">
|
||||
<thead class="bg-gray-50">
|
||||
<tr class="text-left text-gray-600 text-sm">
|
||||
<th class="px-5 py-3 font-medium">
|
||||
<input type="checkbox" class="rounded">
|
||||
</th>
|
||||
<th class="px-5 py-3 font-medium">知识点标题</th>
|
||||
<th class="px-5 py-3 font-medium">分类</th>
|
||||
<th class="px-5 py-3 font-medium">难度</th>
|
||||
<th class="px-5 py-3 font-medium">抽背次数</th>
|
||||
<th class="px-5 py-3 font-medium">正确率</th>
|
||||
<th class="px-5 py-3 font-medium">状态</th>
|
||||
<th class="px-5 py-3 font-medium">更新时间</th>
|
||||
<th class="px-5 py-3 font-medium">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-sm divide-y">
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-5 py-4"><input type="checkbox" class="rounded"></td>
|
||||
<td class="px-5 py-4 font-medium">麻黄汤的组成与功效</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs">方剂学</span>
|
||||
</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="px-2 py-1 bg-yellow-100 text-yellow-700 rounded text-xs">中等</span>
|
||||
</td>
|
||||
<td class="px-5 py-4">1,234</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="text-orange-600 font-medium">68.5%</span>
|
||||
</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">已发布</span>
|
||||
</td>
|
||||
<td class="px-5 py-4 text-gray-500">2026-03-28</td>
|
||||
<td class="px-5 py-4">
|
||||
<div class="flex gap-2">
|
||||
<button class="text-blue-600 hover:underline" title="预览"><i class="fas fa-eye"></i></button>
|
||||
<button class="text-gray-600 hover:underline" title="编辑"><i class="fas fa-edit"></i></button>
|
||||
<button class="text-red-600 hover:underline" title="删除"><i class="fas fa-trash"></i></button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-5 py-4"><input type="checkbox" class="rounded"></td>
|
||||
<td class="px-5 py-4 font-medium">阴阳失调的基本概念</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="px-2 py-1 bg-purple-100 text-purple-700 rounded text-xs">中医基础理论</span>
|
||||
</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="px-2 py-1 bg-green-100 text-green-700 rounded text-xs">简单</span>
|
||||
</td>
|
||||
<td class="px-5 py-4">986</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="text-green-600 font-medium">82.3%</span>
|
||||
</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">已发布</span>
|
||||
</td>
|
||||
<td class="px-5 py-4 text-gray-500">2026-03-27</td>
|
||||
<td class="px-5 py-4">
|
||||
<div class="flex gap-2">
|
||||
<button class="text-blue-600 hover:underline" title="预览"><i class="fas fa-eye"></i></button>
|
||||
<button class="text-gray-600 hover:underline" title="编辑"><i class="fas fa-edit"></i></button>
|
||||
<button class="text-red-600 hover:underline" title="删除"><i class="fas fa-trash"></i></button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-5 py-4"><input type="checkbox" class="rounded"></td>
|
||||
<td class="px-5 py-4 font-medium">桂枝汤的主治病证</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs">方剂学</span>
|
||||
</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="px-2 py-1 bg-red-100 text-red-700 rounded text-xs">困难</span>
|
||||
</td>
|
||||
<td class="px-5 py-4">756</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="text-red-600 font-medium">54.2%</span>
|
||||
</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">已发布</span>
|
||||
</td>
|
||||
<td class="px-5 py-4 text-gray-500">2026-03-26</td>
|
||||
<td class="px-5 py-4">
|
||||
<div class="flex gap-2">
|
||||
<button class="text-blue-600 hover:underline" title="预览"><i class="fas fa-eye"></i></button>
|
||||
<button class="text-gray-600 hover:underline" title="编辑"><i class="fas fa-edit"></i></button>
|
||||
<button class="text-red-600 hover:underline" title="删除"><i class="fas fa-trash"></i></button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-5 py-4"><input type="checkbox" class="rounded"></td>
|
||||
<td class="px-5 py-4 font-medium">解表药的分类与功效</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="px-2 py-1 bg-green-100 text-green-700 rounded text-xs">中药学</span>
|
||||
</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="px-2 py-1 bg-yellow-100 text-yellow-700 rounded text-xs">中等</span>
|
||||
</td>
|
||||
<td class="px-5 py-4">1,102</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="text-green-600 font-medium">76.8%</span>
|
||||
</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="px-2 py-1 bg-gray-100 text-gray-700 rounded-full text-xs">草稿</span>
|
||||
</td>
|
||||
<td class="px-5 py-4 text-gray-500">2026-03-25</td>
|
||||
<td class="px-5 py-4">
|
||||
<div class="flex gap-2">
|
||||
<button class="text-blue-600 hover:underline" title="预览"><i class="fas fa-eye"></i></button>
|
||||
<button class="text-gray-600 hover:underline" title="编辑"><i class="fas fa-edit"></i></button>
|
||||
<button class="text-red-600 hover:underline" title="删除"><i class="fas fa-trash"></i></button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-5 py-4"><input type="checkbox" class="rounded"></td>
|
||||
<td class="px-5 py-4 font-medium">银翘散与桑菊饮的区别</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs">方剂学</span>
|
||||
</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="px-2 py-1 bg-red-100 text-red-700 rounded text-xs">困难</span>
|
||||
</td>
|
||||
<td class="px-5 py-4">623</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="text-orange-600 font-medium">61.5%</span>
|
||||
</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">已发布</span>
|
||||
</td>
|
||||
<td class="px-5 py-4 text-gray-500">2026-03-24</td>
|
||||
<td class="px-5 py-4">
|
||||
<div class="flex gap-2">
|
||||
<button class="text-blue-600 hover:underline" title="预览"><i class="fas fa-eye"></i></button>
|
||||
<button class="text-gray-600 hover:underline" title="编辑"><i class="fas fa-edit"></i></button>
|
||||
<button class="text-red-600 hover:underline" title="删除"><i class="fas fa-trash"></i></button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="px-5 py-4 bg-gray-50 flex items-center justify-between">
|
||||
<div class="text-sm text-gray-500">
|
||||
显示 1-5 条，共 3,456 条
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="px-3 py-1 border border-gray-300 rounded text-gray-500 hover:bg-gray-100 disabled:opacity-50" disabled>
|
||||
<i class="fas fa-chevron-left"></i>
|
||||
</button>
|
||||
<button class="px-3 py-1 bg-blue-600 text-white rounded">1</button>
|
||||
<button class="px-3 py-1 border border-gray-300 rounded text-gray-600 hover:bg-gray-100">2</button>
|
||||
<button class="px-3 py-1 border border-gray-300 rounded text-gray-600 hover:bg-gray-100">3</button>
|
||||
<button class="px-3 py-1 border border-gray-300 rounded text-gray-600 hover:bg-gray-100">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,251 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>抽背记录查询 - AI 智能抽背助手</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
:root {
|
||||
--primary-blue: #1890FF;
|
||||
--success-green: #52C41A;
|
||||
--warning-orange: #FAAD14;
|
||||
--error-red: #F5222D;
|
||||
}
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50 min-h-screen">
|
||||
<!-- 顶部导航栏 -->
|
||||
<nav class="bg-gradient-to-r from-blue-600 to-blue-700 h-14 px-6 flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<i class="fas fa-robot text-white text-xl"></i>
|
||||
<h1 class="text-white text-lg font-semibold">AI 智能抽背助手 - 后台管理</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="text-blue-100 text-sm">管理员</span>
|
||||
<div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
|
||||
<i class="fas fa-user text-white text-sm"></i>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="flex">
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="w-56 bg-white shadow-sm min-h-[calc(100vh-56px)]">
|
||||
<nav class="py-4">
|
||||
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50">
|
||||
<i class="fas fa-chart-line w-5"></i>
|
||||
<span>数据概览</span>
|
||||
</a>
|
||||
<a href="quiz-records.html" class="flex items-center gap-3 px-4 py-3 bg-blue-50 text-blue-600 border-l-4 border-blue-600">
|
||||
<i class="fas fa-list-alt w-5"></i>
|
||||
<span class="font-medium">抽背记录查询</span>
|
||||
</a>
|
||||
<a href="student-management.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50">
|
||||
<i class="fas fa-user-graduate w-5"></i>
|
||||
<span>学生管理</span>
|
||||
</a>
|
||||
<a href="knowledge-management.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50">
|
||||
<i class="fas fa-book w-5"></i>
|
||||
<span>知识点管理</span>
|
||||
</a>
|
||||
<a href="task-management.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50">
|
||||
<i class="fas fa-tasks w-5"></i>
|
||||
<span>学习任务管理</span>
|
||||
</a>
|
||||
<a href="settings.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50">
|
||||
<i class="fas fa-cog w-5"></i>
|
||||
<span>系统设置</span>
|
||||
</a>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="flex-1 p-6">
|
||||
<h2 class="text-2xl font-semibold text-gray-800 mb-6">抽背记录查询</h2>
|
||||
|
||||
<!-- 筛选区域 -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-5 mb-6">
|
||||
<div class="grid grid-cols-4 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-2">用户</label>
|
||||
<select class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-blue-500">
|
||||
<option>全部用户</option>
|
||||
<option>张三</option>
|
||||
<option>李四</option>
|
||||
<option>王五</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-2">时间范围</label>
|
||||
<select class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-blue-500">
|
||||
<option>最近7天</option>
|
||||
<option>最近30天</option>
|
||||
<option>最近90天</option>
|
||||
<option>自定义</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-2">学科</label>
|
||||
<select class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-blue-500">
|
||||
<option>全部学科</option>
|
||||
<option>方剂学</option>
|
||||
<option>中医基础理论</option>
|
||||
<option>中药学</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-2">抽背类型</label>
|
||||
<select class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-blue-500">
|
||||
<option>全部类型</option>
|
||||
<option>初次复习</option>
|
||||
<option>巩固复习</option>
|
||||
<option>紧急复习</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end mt-4 gap-3">
|
||||
<button class="px-4 py-2 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 text-sm">
|
||||
<i class="fas fa-redo mr-2"></i>重置
|
||||
</button>
|
||||
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm">
|
||||
<i class="fas fa-search mr-2"></i>查询
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<div class="text-sm text-gray-500">
|
||||
共 <span class="text-gray-800 font-medium">1,248</span> 条记录
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<button class="px-4 py-2 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 text-sm">
|
||||
<i class="fas fa-file-excel mr-2 text-green-600"></i>导出Excel
|
||||
</button>
|
||||
<button class="px-4 py-2 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 text-sm">
|
||||
<i class="fas fa-paper-plane mr-2 text-blue-600"></i>发送报告
|
||||
</button>
|
||||
<button class="px-4 py-2 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 text-sm">
|
||||
<i class="fas fa-bell mr-2 text-orange-600"></i>批量提醒
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<table class="w-full">
|
||||
<thead class="bg-gray-50">
|
||||
<tr class="text-left text-gray-600 text-sm">
|
||||
<th class="px-5 py-3 font-medium">
|
||||
<input type="checkbox" class="rounded">
|
||||
</th>
|
||||
<th class="px-5 py-3 font-medium">用户姓名</th>
|
||||
<th class="px-5 py-3 font-medium">抽背时间</th>
|
||||
<th class="px-5 py-3 font-medium">抽背内容</th>
|
||||
<th class="px-5 py-3 font-medium">正确率</th>
|
||||
<th class="px-5 py-3 font-medium">用时</th>
|
||||
<th class="px-5 py-3 font-medium">错误知识点</th>
|
||||
<th class="px-5 py-3 font-medium">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-sm divide-y">
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-5 py-4"><input type="checkbox" class="rounded"></td>
|
||||
<td class="px-5 py-4 font-medium">张三</td>
|
||||
<td class="px-5 py-4 text-gray-500">2026-03-28 14:32</td>
|
||||
<td class="px-5 py-4">方剂学 - 麻黄汤</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs font-medium">85%</span>
|
||||
</td>
|
||||
<td class="px-5 py-4 text-gray-500">12分30秒</td>
|
||||
<td class="px-5 py-4 text-gray-500">甘草功效、炙甘草</td>
|
||||
<td class="px-5 py-4">
|
||||
<button class="text-blue-600 hover:underline">详情</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-5 py-4"><input type="checkbox" class="rounded"></td>
|
||||
<td class="px-5 py-4 font-medium">李四</td>
|
||||
<td class="px-5 py-4 text-gray-500">2026-03-28 14:28</td>
|
||||
<td class="px-5 py-4">中医基础 - 阴阳学说</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="px-2 py-1 bg-orange-100 text-orange-700 rounded-full text-xs font-medium">72%</span>
|
||||
</td>
|
||||
<td class="px-5 py-4 text-gray-500">8分15秒</td>
|
||||
<td class="px-5 py-4 text-gray-500">阴阳失调概念</td>
|
||||
<td class="px-5 py-4">
|
||||
<button class="text-blue-600 hover:underline">详情</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-5 py-4"><input type="checkbox" class="rounded"></td>
|
||||
<td class="px-5 py-4 font-medium">王五</td>
|
||||
<td class="px-5 py-4 text-gray-500">2026-03-28 14:15</td>
|
||||
<td class="px-5 py-4">中药学 - 解表药</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs font-medium">91%</span>
|
||||
</td>
|
||||
<td class="px-5 py-4 text-gray-500">15分42秒</td>
|
||||
<td class="px-5 py-4 text-gray-500">麻黄与桂枝区别</td>
|
||||
<td class="px-5 py-4">
|
||||
<button class="text-blue-600 hover:underline">详情</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-5 py-4"><input type="checkbox" class="rounded"></td>
|
||||
<td class="px-5 py-4 font-medium">赵六</td>
|
||||
<td class="px-5 py-4 text-gray-500">2026-03-28 13:58</td>
|
||||
<td class="px-5 py-4">方剂学 - 桂枝汤</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="px-2 py-1 bg-red-100 text-red-700 rounded-full text-xs font-medium">58%</span>
|
||||
</td>
|
||||
<td class="px-5 py-4 text-gray-500">10分25秒</td>
|
||||
<td class="px-5 py-4 text-gray-500">桂枝汤组成、功效</td>
|
||||
<td class="px-5 py-4">
|
||||
<button class="text-blue-600 hover:underline">详情</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-5 py-4"><input type="checkbox" class="rounded"></td>
|
||||
<td class="px-5 py-4 font-medium">孙七</td>
|
||||
<td class="px-5 py-4 text-gray-500">2026-03-28 13:42</td>
|
||||
<td class="px-5 py-4">方剂学 - 银翘散</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs font-medium">88%</span>
|
||||
</td>
|
||||
<td class="px-5 py-4 text-gray-500">11分18秒</td>
|
||||
<td class="px-5 py-4 text-gray-500">银翘散主治</td>
|
||||
<td class="px-5 py-4">
|
||||
<button class="text-blue-600 hover:underline">详情</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="px-5 py-4 bg-gray-50 flex items-center justify-between">
|
||||
<div class="text-sm text-gray-500">
|
||||
显示 1-5 条，共 1,248 条
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="px-3 py-1 border border-gray-300 rounded text-gray-500 hover:bg-gray-100 disabled:opacity-50" disabled>
|
||||
<i class="fas fa-chevron-left"></i>
|
||||
</button>
|
||||
<button class="px-3 py-1 bg-blue-600 text-white rounded">1</button>
|
||||
<button class="px-3 py-1 border border-gray-300 rounded text-gray-600 hover:bg-gray-100">2</button>
|
||||
<button class="px-3 py-1 border border-gray-300 rounded text-gray-600 hover:bg-gray-100">3</button>
|
||||
<button class="px-3 py-1 border border-gray-300 rounded text-gray-600 hover:bg-gray-100">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,235 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>系统设置 - AI 智能抽背助手</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
</head>
|
||||
<body class="bg-gray-50 min-h-screen">
|
||||
<!-- 顶部导航栏 -->
|
||||
<nav class="bg-gradient-to-r from-blue-600 to-blue-700 h-14 px-6 flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<i class="fas fa-robot text-white text-xl"></i>
|
||||
<h1 class="text-white text-lg font-semibold">AI 智能抽背助手 - 后台管理</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="text-blue-100 text-sm">管理员</span>
|
||||
<div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
|
||||
<i class="fas fa-user text-white text-sm"></i>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="flex">
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="w-56 bg-white shadow-sm min-h-[calc(100vh-56px)]">
|
||||
<nav class="py-4">
|
||||
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50">
|
||||
<i class="fas fa-chart-line w-5"></i>
|
||||
<span>数据概览</span>
|
||||
</a>
|
||||
<a href="quiz-records.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50">
|
||||
<i class="fas fa-list-alt w-5"></i>
|
||||
<span>抽背记录查询</span>
|
||||
</a>
|
||||
<a href="student-management.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50">
|
||||
<i class="fas fa-user-graduate w-5"></i>
|
||||
<span>学生管理</span>
|
||||
</a>
|
||||
<a href="knowledge-management.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50">
|
||||
<i class="fas fa-book w-5"></i>
|
||||
<span>知识点管理</span>
|
||||
</a>
|
||||
<a href="task-management.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50">
|
||||
<i class="fas fa-tasks w-5"></i>
|
||||
<span>学习任务管理</span>
|
||||
</a>
|
||||
<a href="settings.html" class="flex items-center gap-3 px-4 py-3 bg-blue-50 text-blue-600 border-l-4 border-blue-600">
|
||||
<i class="fas fa-cog w-5"></i>
|
||||
<span class="font-medium">系统设置</span>
|
||||
</a>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="flex-1 p-6">
|
||||
<h2 class="text-2xl font-semibold text-gray-800 mb-6">系统设置</h2>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<!-- 基本设置 -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-6">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
|
||||
<i class="fas fa-sliders-h text-blue-600"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-800">基本设置</h3>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-2">系统名称</label>
|
||||
<input type="text" value="AI 智能抽背助手" class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:border-blue-500">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-2">系统描述</label>
|
||||
<textarea class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:border-blue-500 h-20">基于 AI 驱动的智能抽背学习系统</textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-2">默认语言</label>
|
||||
<select class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:border-blue-500">
|
||||
<option selected>简体中文</option>
|
||||
<option>繁體中文</option>
|
||||
<option>English</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 抽背设置 -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-6">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
|
||||
<i class="fas fa-brain text-green-600"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-800">抽背设置</h3>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-2">默认抽背间隔（秒）</label>
|
||||
<input type="number" value="60" class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:border-blue-500">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-2">记忆曲线算法</label>
|
||||
<select class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:border-blue-500">
|
||||
<option selected>艾宾浩斯遗忘曲线（1-3-7-15天）</option>
|
||||
<option>SuperMemo SM-2 算法</option>
|
||||
<option>自定义间隔</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-2">语音识别引擎</label>
|
||||
<select class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:border-blue-500">
|
||||
<option selected>微信语音识别</option>
|
||||
<option>阿里云语音识别</option>
|
||||
<option>腾讯云语音识别</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 提醒设置 -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-6">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
|
||||
<i class="fas fa-bell text-orange-600"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-800">提醒设置</h3>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-800">启用推送通知</p>
|
||||
<p class="text-xs text-gray-500">允许向用户发送学习提醒</p>
|
||||
</div>
|
||||
<label class="relative inline-flex items-center cursor-pointer">
|
||||
<input type="checkbox" checked class="sr-only peer">
|
||||
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-2">免打扰时段</label>
|
||||
<div class="flex gap-2 items-center">
|
||||
<input type="time" value="22:00" class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-blue-500">
|
||||
<span class="text-gray-500">至</span>
|
||||
<input type="time" value="08:00" class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-blue-500">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-2">默认提醒时间</label>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs cursor-pointer">09:00</span>
|
||||
<span class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs cursor-pointer">15:00</span>
|
||||
<span class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs cursor-pointer">20:00</span>
|
||||
<span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-xs cursor-pointer border border-dashed border-gray-400">+ 添加</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据管理 -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-6">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
|
||||
<i class="fas fa-database text-purple-600"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-800">数据管理</h3>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-2">数据保留期限</label>
|
||||
<select class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:border-blue-500">
|
||||
<option>30天</option>
|
||||
<option selected>90天</option>
|
||||
<option>180天</option>
|
||||
<option>365天</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="pt-4 border-t">
|
||||
<button class="w-full px-4 py-2 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 text-sm mb-2">
|
||||
<i class="fas fa-download mr-2"></i>导出所有数据
|
||||
</button>
|
||||
<button class="w-full px-4 py-2 border border-red-300 rounded-lg text-red-600 hover:bg-red-50 text-sm">
|
||||
<i class="fas fa-trash mr-2"></i>清除过期数据
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 安全设置 -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-6">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
|
||||
<i class="fas fa-shield-alt text-red-600"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-800">安全设置</h3>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-800">强制 HTTPS</p>
|
||||
<p class="text-xs text-gray-500">仅允许通过 HTTPS 访问</p>
|
||||
</div>
|
||||
<label class="relative inline-flex items-center cursor-pointer">
|
||||
<input type="checkbox" checked class="sr-only peer">
|
||||
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-800">启用 API 限流</p>
|
||||
<p class="text-xs text-gray-500">防止恶意请求</p>
|
||||
</div>
|
||||
<label class="relative inline-flex items-center cursor-pointer">
|
||||
<input type="checkbox" checked class="sr-only peer">
|
||||
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-2">会话超时时间（分钟）</label>
|
||||
<input type="number" value="30" class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:border-blue-500">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 保存按钮 -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-6 flex items-center justify-center">
|
||||
<button class="px-8 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium">
|
||||
<i class="fas fa-save mr-2"></i>保存设置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,269 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>学生管理 - AI 智能抽背助手</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
</head>
|
||||
<body class="bg-gray-50 min-h-screen">
|
||||
<!-- 顶部导航栏 -->
|
||||
<nav class="bg-gradient-to-r from-blue-600 to-blue-700 h-14 px-6 flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<i class="fas fa-robot text-white text-xl"></i>
|
||||
<h1 class="text-white text-lg font-semibold">AI 智能抽背助手 - 后台管理</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="text-blue-100 text-sm">管理员</span>
|
||||
<div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
|
||||
<i class="fas fa-user text-white text-sm"></i>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="flex">
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="w-56 bg-white shadow-sm min-h-[calc(100vh-56px)]">
|
||||
<nav class="py-4">
|
||||
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50">
|
||||
<i class="fas fa-chart-line w-5"></i>
|
||||
<span>数据概览</span>
|
||||
</a>
|
||||
<a href="quiz-records.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50">
|
||||
<i class="fas fa-list-alt w-5"></i>
|
||||
<span>抽背记录查询</span>
|
||||
</a>
|
||||
<a href="student-management.html" class="flex items-center gap-3 px-4 py-3 bg-blue-50 text-blue-600 border-l-4 border-blue-600">
|
||||
<i class="fas fa-user-graduate w-5"></i>
|
||||
<span class="font-medium">学生管理</span>
|
||||
</a>
|
||||
<a href="knowledge-management.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50">
|
||||
<i class="fas fa-book w-5"></i>
|
||||
<span>知识点管理</span>
|
||||
</a>
|
||||
<a href="task-management.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50">
|
||||
<i class="fas fa-tasks w-5"></i>
|
||||
<span>学习任务管理</span>
|
||||
</a>
|
||||
<a href="settings.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50">
|
||||
<i class="fas fa-cog w-5"></i>
|
||||
<span>系统设置</span>
|
||||
</a>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="flex-1 p-6">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h2 class="text-2xl font-semibold text-gray-800">学生管理</h2>
|
||||
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm">
|
||||
<i class="fas fa-plus mr-2"></i>添加学生
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 搜索和筛选 -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-5 mb-6">
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-1 relative">
|
||||
<input type="text" placeholder="搜索学生姓名、手机号..." class="w-full border border-gray-300 rounded-lg pl-10 pr-4 py-2 text-sm focus:outline-none focus:border-blue-500">
|
||||
<i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
|
||||
</div>
|
||||
<select class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-blue-500">
|
||||
<option>全部班级</option>
|
||||
<option>一班</option>
|
||||
<option>二班</option>
|
||||
<option>三班</option>
|
||||
</select>
|
||||
<select class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-blue-500">
|
||||
<option>全部状态</option>
|
||||
<option>活跃</option>
|
||||
<option>不活跃</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 学生列表 -->
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<table class="w-full">
|
||||
<thead class="bg-gray-50">
|
||||
<tr class="text-left text-gray-600 text-sm">
|
||||
<th class="px-5 py-3 font-medium">
|
||||
<input type="checkbox" class="rounded">
|
||||
</th>
|
||||
<th class="px-5 py-3 font-medium">学生姓名</th>
|
||||
<th class="px-5 py-3 font-medium">手机号</th>
|
||||
<th class="px-5 py-3 font-medium">班级</th>
|
||||
<th class="px-5 py-3 font-medium">抽背次数</th>
|
||||
<th class="px-5 py-3 font-medium">平均正确率</th>
|
||||
<th class="px-5 py-3 font-medium">最后活跃</th>
|
||||
<th class="px-5 py-3 font-medium">状态</th>
|
||||
<th class="px-5 py-3 font-medium">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-sm divide-y">
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-5 py-4"><input type="checkbox" class="rounded"></td>
|
||||
<td class="px-5 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<span class="text-blue-600 font-medium">张</span>
|
||||
</div>
|
||||
<span class="font-medium">张三</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-5 py-4 text-gray-500">138****1234</td>
|
||||
<td class="px-5 py-4">一班</td>
|
||||
<td class="px-5 py-4">156</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="text-green-600 font-medium">82.5%</span>
|
||||
</td>
|
||||
<td class="px-5 py-4 text-gray-500">今天 14:32</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">活跃</span>
|
||||
</td>
|
||||
<td class="px-5 py-4">
|
||||
<div class="flex gap-2">
|
||||
<button class="text-blue-600 hover:underline" title="查看详情"><i class="fas fa-eye"></i></button>
|
||||
<button class="text-gray-600 hover:underline" title="编辑"><i class="fas fa-edit"></i></button>
|
||||
<button class="text-red-600 hover:underline" title="删除"><i class="fas fa-trash"></i></button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-5 py-4"><input type="checkbox" class="rounded"></td>
|
||||
<td class="px-5 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
|
||||
<span class="text-purple-600 font-medium">李</span>
|
||||
</div>
|
||||
<span class="font-medium">李四</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-5 py-4 text-gray-500">139****5678</td>
|
||||
<td class="px-5 py-4">二班</td>
|
||||
<td class="px-5 py-4">203</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="text-green-600 font-medium">76.8%</span>
|
||||
</td>
|
||||
<td class="px-5 py-4 text-gray-500">今天 14:28</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">活跃</span>
|
||||
</td>
|
||||
<td class="px-5 py-4">
|
||||
<div class="flex gap-2">
|
||||
<button class="text-blue-600 hover:underline" title="查看详情"><i class="fas fa-eye"></i></button>
|
||||
<button class="text-gray-600 hover:underline" title="编辑"><i class="fas fa-edit"></i></button>
|
||||
<button class="text-red-600 hover:underline" title="删除"><i class="fas fa-trash"></i></button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-5 py-4"><input type="checkbox" class="rounded"></td>
|
||||
<td class="px-5 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
|
||||
<span class="text-green-600 font-medium">王</span>
|
||||
</div>
|
||||
<span class="font-medium">王五</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-5 py-4 text-gray-500">136****9012</td>
|
||||
<td class="px-5 py-4">一班</td>
|
||||
<td class="px-5 py-4">89</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="text-green-600 font-medium">91.2%</span>
|
||||
</td>
|
||||
<td class="px-5 py-4 text-gray-500">今天 14:15</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">活跃</span>
|
||||
</td>
|
||||
<td class="px-5 py-4">
|
||||
<div class="flex gap-2">
|
||||
<button class="text-blue-600 hover:underline" title="查看详情"><i class="fas fa-eye"></i></button>
|
||||
<button class="text-gray-600 hover:underline" title="编辑"><i class="fas fa-edit"></i></button>
|
||||
<button class="text-red-600 hover:underline" title="删除"><i class="fas fa-trash"></i></button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-5 py-4"><input type="checkbox" class="rounded"></td>
|
||||
<td class="px-5 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
|
||||
<span class="text-orange-600 font-medium">赵</span>
|
||||
</div>
|
||||
<span class="font-medium">赵六</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-5 py-4 text-gray-500">137****3456</td>
|
||||
<td class="px-5 py-4">三班</td>
|
||||
<td class="px-5 py-4">45</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="text-orange-600 font-medium">65.3%</span>
|
||||
</td>
|
||||
<td class="px-5 py-4 text-gray-500">3天前</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="px-2 py-1 bg-gray-100 text-gray-700 rounded-full text-xs">不活跃</span>
|
||||
</td>
|
||||
<td class="px-5 py-4">
|
||||
<div class="flex gap-2">
|
||||
<button class="text-blue-600 hover:underline" title="查看详情"><i class="fas fa-eye"></i></button>
|
||||
<button class="text-gray-600 hover:underline" title="编辑"><i class="fas fa-edit"></i></button>
|
||||
<button class="text-red-600 hover:underline" title="删除"><i class="fas fa-trash"></i></button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-5 py-4"><input type="checkbox" class="rounded"></td>
|
||||
<td class="px-5 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-pink-100 rounded-full flex items-center justify-center">
|
||||
<span class="text-pink-600 font-medium">孙</span>
|
||||
</div>
|
||||
<span class="font-medium">孙七</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-5 py-4 text-gray-500">135****7890</td>
|
||||
<td class="px-5 py-4">二班</td>
|
||||
<td class="px-5 py-4">178</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="text-green-600 font-medium">79.6%</span>
|
||||
</td>
|
||||
<td class="px-5 py-4 text-gray-500">今天 13:42</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">活跃</span>
|
||||
</td>
|
||||
<td class="px-5 py-4">
|
||||
<div class="flex gap-2">
|
||||
<button class="text-blue-600 hover:underline" title="查看详情"><i class="fas fa-eye"></i></button>
|
||||
<button class="text-gray-600 hover:underline" title="编辑"><i class="fas fa-edit"></i></button>
|
||||
<button class="text-red-600 hover:underline" title="删除"><i class="fas fa-trash"></i></button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="px-5 py-4 bg-gray-50 flex items-center justify-between">
|
||||
<div class="text-sm text-gray-500">
|
||||
显示 1-5 条，共 1,286 条
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="px-3 py-1 border border-gray-300 rounded text-gray-500 hover:bg-gray-100 disabled:opacity-50" disabled>
|
||||
<i class="fas fa-chevron-left"></i>
|
||||
</button>
|
||||
<button class="px-3 py-1 bg-blue-600 text-white rounded">1</button>
|
||||
<button class="px-3 py-1 border border-gray-300 rounded text-gray-600 hover:bg-gray-100">2</button>
|
||||
<button class="px-3 py-1 border border-gray-300 rounded text-gray-600 hover:bg-gray-100">3</button>
|
||||
<button class="px-3 py-1 border border-gray-300 rounded text-gray-600 hover:bg-gray-100">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,318 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>学习任务管理 - AI 智能抽背助手</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
</head>
|
||||
<body class="bg-gray-50 min-h-screen">
|
||||
<!-- 顶部导航栏 -->
|
||||
<nav class="bg-gradient-to-r from-blue-600 to-blue-700 h-14 px-6 flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<i class="fas fa-robot text-white text-xl"></i>
|
||||
<h1 class="text-white text-lg font-semibold">AI 智能抽背助手 - 后台管理</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="text-blue-100 text-sm">管理员</span>
|
||||
<div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
|
||||
<i class="fas fa-user text-white text-sm"></i>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="flex">
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="w-56 bg-white shadow-sm min-h-[calc(100vh-56px)]">
|
||||
<nav class="py-4">
|
||||
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50">
|
||||
<i class="fas fa-chart-line w-5"></i>
|
||||
<span>数据概览</span>
|
||||
</a>
|
||||
<a href="quiz-records.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50">
|
||||
<i class="fas fa-list-alt w-5"></i>
|
||||
<span>抽背记录查询</span>
|
||||
</a>
|
||||
<a href="student-management.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50">
|
||||
<i class="fas fa-user-graduate w-5"></i>
|
||||
<span>学生管理</span>
|
||||
</a>
|
||||
<a href="knowledge-management.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50">
|
||||
<i class="fas fa-book w-5"></i>
|
||||
<span>知识点管理</span>
|
||||
</a>
|
||||
<a href="task-management.html" class="flex items-center gap-3 px-4 py-3 bg-blue-50 text-blue-600 border-l-4 border-blue-600">
|
||||
<i class="fas fa-tasks w-5"></i>
|
||||
<span class="font-medium">学习任务管理</span>
|
||||
</a>
|
||||
<a href="settings.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50">
|
||||
<i class="fas fa-cog w-5"></i>
|
||||
<span>系统设置</span>
|
||||
</a>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="flex-1 p-6">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h2 class="text-2xl font-semibold text-gray-800">学习任务管理</h2>
|
||||
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm">
|
||||
<i class="fas fa-plus mr-2"></i>创建任务
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<div class="grid grid-cols-4 gap-4 mb-6">
|
||||
<div class="bg-white rounded-xl p-4 shadow-sm">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
|
||||
<i class="fas fa-tasks text-blue-600"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-gray-500 text-sm">任务总数</p>
|
||||
<p class="text-xl font-bold text-gray-800">856</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl p-4 shadow-sm">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
|
||||
<i class="fas fa-check-circle text-green-600"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-gray-500 text-sm">进行中</p>
|
||||
<p class="text-xl font-bold text-gray-800">624</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl p-4 shadow-sm">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
|
||||
<i class="fas fa-flag-checkered text-purple-600"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-gray-500 text-sm">已完成</p>
|
||||
<p class="text-xl font-bold text-gray-800">232</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl p-4 shadow-sm">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
|
||||
<i class="fas fa-users text-orange-600"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-gray-500 text-sm">参与人数</p>
|
||||
<p class="text-xl font-bold text-gray-800">1,086</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 搜索和筛选 -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-5 mb-6">
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-1 relative">
|
||||
<input type="text" placeholder="搜索任务名称..." class="w-full border border-gray-300 rounded-lg pl-10 pr-4 py-2 text-sm focus:outline-none focus:border-blue-500">
|
||||
<i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
|
||||
</div>
|
||||
<select class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-blue-500">
|
||||
<option>全部类型</option>
|
||||
<option>每日抽背</option>
|
||||
<option>每日复习</option>
|
||||
<option>每周测验</option>
|
||||
</select>
|
||||
<select class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-blue-500">
|
||||
<option>全部状态</option>
|
||||
<option>进行中</option>
|
||||
<option>已完成</option>
|
||||
<option>已过期</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 任务列表 -->
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<table class="w-full">
|
||||
<thead class="bg-gray-50">
|
||||
<tr class="text-left text-gray-600 text-sm">
|
||||
<th class="px-5 py-3 font-medium">
|
||||
<input type="checkbox" class="rounded">
|
||||
</th>
|
||||
<th class="px-5 py-3 font-medium">任务名称</th>
|
||||
<th class="px-5 py-3 font-medium">类型</th>
|
||||
<th class="px-5 py-3 font-medium">目标</th>
|
||||
<th class="px-5 py-3 font-medium">参与人数</th>
|
||||
<th class="px-5 py-3 font-medium">完成率</th>
|
||||
<th class="px-5 py-3 font-medium">状态</th>
|
||||
<th class="px-5 py-3 font-medium">截止时间</th>
|
||||
<th class="px-5 py-3 font-medium">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-sm divide-y">
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-5 py-4"><input type="checkbox" class="rounded"></td>
|
||||
<td class="px-5 py-4 font-medium">每日方剂学抽背（50题）</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs">每日抽背</span>
|
||||
</td>
|
||||
<td class="px-5 py-4">50题/天</td>
|
||||
<td class="px-5 py-4">326</td>
|
||||
<td class="px-5 py-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-20 h-2 bg-gray-200 rounded-full">
|
||||
<div class="h-2 bg-green-500 rounded-full" style="width: 78%"></div>
|
||||
</div>
|
||||
<span class="text-gray-600">78%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">进行中</span>
|
||||
</td>
|
||||
<td class="px-5 py-4 text-gray-500">每天 22:00</td>
|
||||
<td class="px-5 py-4">
|
||||
<div class="flex gap-2">
|
||||
<button class="text-blue-600 hover:underline" title="查看"><i class="fas fa-eye"></i></button>
|
||||
<button class="text-gray-600 hover:underline" title="编辑"><i class="fas fa-edit"></i></button>
|
||||
<button class="text-red-600 hover:underline" title="删除"><i class="fas fa-trash"></i></button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-5 py-4"><input type="checkbox" class="rounded"></td>
|
||||
<td class="px-5 py-4 font-medium">中医基础理论复习</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="px-2 py-1 bg-purple-100 text-purple-700 rounded text-xs">每日复习</span>
|
||||
</td>
|
||||
<td class="px-5 py-4">30知识点/天</td>
|
||||
<td class="px-5 py-4">256</td>
|
||||
<td class="px-5 py-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-20 h-2 bg-gray-200 rounded-full">
|
||||
<div class="h-2 bg-green-500 rounded-full" style="width: 92%"></div>
|
||||
</div>
|
||||
<span class="text-gray-600">92%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">进行中</span>
|
||||
</td>
|
||||
<td class="px-5 py-4 text-gray-500">每天 21:00</td>
|
||||
<td class="px-5 py-4">
|
||||
<div class="flex gap-2">
|
||||
<button class="text-blue-600 hover:underline" title="查看"><i class="fas fa-eye"></i></button>
|
||||
<button class="text-gray-600 hover:underline" title="编辑"><i class="fas fa-edit"></i></button>
|
||||
<button class="text-red-600 hover:underline" title="删除"><i class="fas fa-trash"></i></button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-5 py-4"><input type="checkbox" class="rounded"></td>
|
||||
<td class="px-5 py-4 font-medium">中药学每周测验</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="px-2 py-1 bg-orange-100 text-orange-700 rounded text-xs">每周测验</span>
|
||||
</td>
|
||||
<td class="px-5 py-4">100题/周</td>
|
||||
<td class="px-5 py-4">186</td>
|
||||
<td class="px-5 py-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-20 h-2 bg-gray-200 rounded-full">
|
||||
<div class="h-2 bg-orange-500 rounded-full" style="width: 45%"></div>
|
||||
</div>
|
||||
<span class="text-gray-600">45%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">进行中</span>
|
||||
</td>
|
||||
<td class="px-5 py-4 text-gray-500">周日 20:00</td>
|
||||
<td class="px-5 py-4">
|
||||
<div class="flex gap-2">
|
||||
<button class="text-blue-600 hover:underline" title="查看"><i class="fas fa-eye"></i></button>
|
||||
<button class="text-gray-600 hover:underline" title="编辑"><i class="fas fa-edit"></i></button>
|
||||
<button class="text-red-600 hover:underline" title="删除"><i class="fas fa-trash"></i></button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-5 py-4"><input type="checkbox" class="rounded"></td>
|
||||
<td class="px-5 py-4 font-medium">方剂学专项训练</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs">每日抽背</span>
|
||||
</td>
|
||||
<td class="px-5 py-4">100题/天</td>
|
||||
<td class="px-5 py-4">98</td>
|
||||
<td class="px-5 py-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-20 h-2 bg-gray-200 rounded-full">
|
||||
<div class="h-2 bg-green-500 rounded-full" style="width: 100%"></div>
|
||||
</div>
|
||||
<span class="text-gray-600">100%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="px-2 py-1 bg-gray-100 text-gray-700 rounded-full text-xs">已完成</span>
|
||||
</td>
|
||||
<td class="px-5 py-4 text-gray-500">2026-03-20</td>
|
||||
<td class="px-5 py-4">
|
||||
<div class="flex gap-2">
|
||||
<button class="text-blue-600 hover:underline" title="查看"><i class="fas fa-eye"></i></button>
|
||||
<button class="text-gray-600 hover:underline" title="编辑"><i class="fas fa-edit"></i></button>
|
||||
<button class="text-red-600 hover:underline" title="删除"><i class="fas fa-trash"></i></button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-5 py-4"><input type="checkbox" class="rounded"></td>
|
||||
<td class="px-5 py-4 font-medium">针灸学基础学习</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="px-2 py-1 bg-purple-100 text-purple-700 rounded text-xs">每日复习</span>
|
||||
</td>
|
||||
<td class="px-5 py-4">20知识点/天</td>
|
||||
<td class="px-5 py-4">220</td>
|
||||
<td class="px-5 py-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-20 h-2 bg-gray-200 rounded-full">
|
||||
<div class="h-2 bg-red-500 rounded-full" style="width: 15%"></div>
|
||||
</div>
|
||||
<span class="text-gray-600">15%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="px-2 py-1 bg-red-100 text-red-700 rounded-full text-xs">已过期</span>
|
||||
</td>
|
||||
<td class="px-5 py-4 text-gray-500">2026-03-15</td>
|
||||
<td class="px-5 py-4">
|
||||
<div class="flex gap-2">
|
||||
<button class="text-blue-600 hover:underline" title="查看"><i class="fas fa-eye"></i></button>
|
||||
<button class="text-gray-600 hover:underline" title="编辑"><i class="fas fa-edit"></i></button>
|
||||
<button class="text-red-600 hover:underline" title="删除"><i class="fas fa-trash"></i></button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="px-5 py-4 bg-gray-50 flex items-center justify-between">
|
||||
<div class="text-sm text-gray-500">
|
||||
显示 1-5 条，共 856 条
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="px-3 py-1 border border-gray-300 rounded text-gray-500 hover:bg-gray-100 disabled:opacity-50" disabled>
|
||||
<i class="fas fa-chevron-left"></i>
|
||||
</button>
|
||||
<button class="px-3 py-1 bg-blue-600 text-white rounded">1</button>
|
||||
<button class="px-3 py-1 border border-gray-300 rounded text-gray-600 hover:bg-gray-100">2</button>
|
||||
<button class="px-3 py-1 border border-gray-300 rounded text-gray-600 hover:bg-gray-100">3</button>
|
||||
<button class="px-3 py-1 border border-gray-300 rounded text-gray-600 hover:bg-gray-100">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,267 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AI智能抽背 - AI智能抽背助手</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.phone-frame {
|
||||
width: 375px;
|
||||
height: 812px;
|
||||
margin: 20px auto;
|
||||
border-radius: 40px;
|
||||
border: 12px solid #1a1a1a;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
position: relative;
|
||||
}
|
||||
.status-bar {
|
||||
height: 44px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
}
|
||||
.mic-button {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 8px 30px rgba(102, 126, 234, 0.4);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
.mic-button:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 12px 40px rgba(102, 126, 234, 0.5);
|
||||
}
|
||||
.mic-button.listening {
|
||||
animation: pulse-ring 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
|
||||
}
|
||||
@keyframes pulse-ring {
|
||||
0% {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
|
||||
}
|
||||
70% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 0 0 30px rgba(102, 126, 234, 0);
|
||||
}
|
||||
100% {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
|
||||
}
|
||||
}
|
||||
.wave-animation {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
height: 30px;
|
||||
}
|
||||
.wave-bar {
|
||||
width: 4px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 2px;
|
||||
animation: wave 1s ease-in-out infinite;
|
||||
}
|
||||
.wave-bar:nth-child(1) { animation-delay: 0s; height: 10px; }
|
||||
.wave-bar:nth-child(2) { animation-delay: 0.1s; height: 20px; }
|
||||
.wave-bar:nth-child(3) { animation-delay: 0.2s; height: 15px; }
|
||||
.wave-bar:nth-child(4) { animation-delay: 0.3s; height: 25px; }
|
||||
.wave-bar:nth-child(5) { animation-delay: 0.4s; height: 12px; }
|
||||
@keyframes wave {
|
||||
0%, 100% { transform: scaleY(1); }
|
||||
50% { transform: scaleY(1.5); }
|
||||
}
|
||||
.ai-bubble {
|
||||
background: linear-gradient(135deg, #f0f4ff 0%, #faf5ff 100%);
|
||||
border-radius: 20px 20px 20px 4px;
|
||||
}
|
||||
.user-bubble {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 20px 20px 4px 20px;
|
||||
}
|
||||
.nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
.nav-item.active {
|
||||
color: #667eea;
|
||||
}
|
||||
.feedback-correct {
|
||||
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||
}
|
||||
.feedback-wrong {
|
||||
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-frame">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span>09:41</span>
|
||||
<div class="flex gap-1">
|
||||
<i class="fas fa-signal"></i>
|
||||
<i class="fas fa-wifi"></i>
|
||||
<i class="fas fa-battery-full"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="bg-white px-4 py-3 flex items-center justify-between border-b border-gray-100">
|
||||
<a href="home.html" class="text-gray-600">
|
||||
<i class="fas fa-arrow-left text-xl"></i>
|
||||
</a>
|
||||
<h1 class="text-lg font-bold text-gray-800">AI智能抽背</h1>
|
||||
<button class="text-gray-600">
|
||||
<i class="fas fa-cog text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="h-[calc(100%-44px-56px-70px)] overflow-y-auto bg-gray-50">
|
||||
<!-- 进度提示 -->
|
||||
<div class="bg-gradient-to-r from-indigo-500 to-purple-500 px-5 py-3 text-white">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-sm">当前进度</span>
|
||||
<span class="font-bold">3 / 10 题</span>
|
||||
</div>
|
||||
<div class="mt-2 bg-white/30 rounded-full h-2">
|
||||
<div class="bg-white rounded-full h-2 w-[30%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AI对话区 -->
|
||||
<div class="px-5 py-4 space-y-4">
|
||||
<!-- AI问候 -->
|
||||
<div class="flex gap-3">
|
||||
<div class="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-robot text-white"></i>
|
||||
</div>
|
||||
<div class="ai-bubble px-4 py-3 max-w-[260px]">
|
||||
<p class="text-gray-800 text-sm">你好！我是你的AI助教，准备好了吗？我们开始今天的学习吧！</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AI问题 -->
|
||||
<div class="flex gap-3">
|
||||
<div class="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-robot text-white"></i>
|
||||
</div>
|
||||
<div class="ai-bubble px-4 py-3 max-w-[260px]">
|
||||
<p class="text-gray-800 text-sm font-medium mb-2">第3题：请背诵麻黄汤的组成</p>
|
||||
<div class="flex items-center gap-2 text-xs text-gray-500">
|
||||
<i class="fas fa-book-open"></i>
|
||||
<span>方剂学 - 解表剂</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户回答区 -->
|
||||
<div class="flex gap-3 justify-end">
|
||||
<div class="user-bubble px-4 py-3 max-w-[260px]">
|
||||
<p class="text-white text-sm" id="userAnswer">点击麦克风开始回答...</p>
|
||||
</div>
|
||||
<div class="w-10 h-10 bg-gray-300 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-user text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 语音波形（显示状态） -->
|
||||
<div class="flex justify-center" id="waveContainer">
|
||||
<div class="wave-animation">
|
||||
<div class="wave-bar"></div>
|
||||
<div class="wave-bar"></div>
|
||||
<div class="wave-bar"></div>
|
||||
<div class="wave-bar"></div>
|
||||
<div class="wave-bar"></div>
|
||||
</div>
|
||||
<span class="text-gray-500 text-sm ml-2">正在倾听...</span>
|
||||
</div>
|
||||
|
||||
<!-- AI反馈 -->
|
||||
<div class="flex gap-3" id="feedbackArea">
|
||||
<div class="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-robot text-white"></i>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl p-4 shadow-sm max-w-[280px]">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="feedback-correct text-white px-2 py-1 rounded-full text-xs">
|
||||
<i class="fas fa-check mr-1"></i>正确
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-gray-700 text-sm mb-3">
|
||||
麻黄汤由麻黄、桂枝、杏仁、甘草四味药组成，发汗解表，宣肺平喘。
|
||||
</p>
|
||||
<div class="bg-indigo-50 rounded-lg p-3">
|
||||
<p class="text-xs text-gray-600 mb-1">
|
||||
<i class="fas fa-lightbulb text-yellow-500 mr-1"></i>知识点解析
|
||||
</p>
|
||||
<p class="text-xs text-gray-700">
|
||||
麻黄汤为发汗解表之峻剂，主治外感风寒表实证。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作区 -->
|
||||
<div class="absolute bottom-0 left-0 right-0 h-[calc(70px+100px)] bg-white border-t border-gray-100">
|
||||
<!-- 麦克风按钮 -->
|
||||
<div class="flex justify-center items-end py-4">
|
||||
<div class="mic-button listening">
|
||||
<i class="fas fa-microphone text-white text-4xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="flex justify-center gap-4 px-6 pb-4">
|
||||
<button class="flex-1 bg-gray-100 text-gray-700 py-3 rounded-xl font-medium">
|
||||
<i class="fas fa-redo mr-2"></i>重录
|
||||
</button>
|
||||
<button class="flex-1 bg-gradient-to-r from-indigo-500 to-purple-500 text-white py-3 rounded-xl font-medium">
|
||||
下一题<i class="fas fa-arrow-right ml-2"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 底部导航栏 -->
|
||||
<div class="flex items-center justify-around px-4 pb-2">
|
||||
<a href="home.html" class="nav-item">
|
||||
<i class="fas fa-home text-xl"></i>
|
||||
<span>首页</span>
|
||||
</a>
|
||||
<a href="ai-quiz.html" class="nav-item active">
|
||||
<div class="w-12 h-12 -mt-6 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg">
|
||||
<i class="fas fa-microphone-alt text-white text-xl"></i>
|
||||
</div>
|
||||
<span class="text-indigo-500 font-medium">智能抽背</span>
|
||||
</a>
|
||||
<a href="profile.html" class="nav-item">
|
||||
<i class="fas fa-user text-xl"></i>
|
||||
<span>我的</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,248 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>卡片背诵 - AI智能抽背助手</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.phone-frame {
|
||||
width: 375px;
|
||||
height: 812px;
|
||||
margin: 20px auto;
|
||||
border-radius: 40px;
|
||||
border: 12px solid #1a1a1a;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
position: relative;
|
||||
}
|
||||
.status-bar {
|
||||
height: 44px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
}
|
||||
.flashcard {
|
||||
background: white;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.6s ease;
|
||||
transform-style: preserve-3d;
|
||||
cursor: pointer;
|
||||
}
|
||||
.flashcard:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.flashcard-front {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
.flashcard-back {
|
||||
background: white;
|
||||
border: 2px solid #e5e7eb;
|
||||
}
|
||||
.progress-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #e5e7eb;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.progress-dot.active {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
width: 24px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.progress-dot.completed {
|
||||
background: #10b981;
|
||||
}
|
||||
.nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
.nav-item.active {
|
||||
color: #667eea;
|
||||
}
|
||||
.swipe-hint {
|
||||
animation: swipe 2s ease-in-out infinite;
|
||||
}
|
||||
@keyframes swipe {
|
||||
0%, 100% { transform: translateX(0); opacity: 0.5; }
|
||||
50% { transform: translateX(10px); opacity: 1; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-frame">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span>09:41</span>
|
||||
<div class="flex gap-1">
|
||||
<i class="fas fa-signal"></i>
|
||||
<i class="fas fa-wifi"></i>
|
||||
<i class="fas fa-battery-full"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="bg-white px-4 py-3 flex items-center justify-between border-b border-gray-100">
|
||||
<a href="home.html" class="text-gray-600">
|
||||
<i class="fas fa-times text-xl"></i>
|
||||
</a>
|
||||
<h1 class="text-lg font-bold text-gray-800">卡片背诵</h1>
|
||||
<button class="text-gray-600">
|
||||
<i class="fas fa-cog text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="h-[calc(100%-44px-56px-70px)] overflow-hidden bg-gray-50 flex flex-col">
|
||||
<!-- 进度指示 -->
|
||||
<div class="px-5 pt-4 pb-2">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<span class="text-sm text-gray-500">方剂学 - 解表剂</span>
|
||||
<span class="text-sm font-medium text-indigo-500">4 / 12</span>
|
||||
</div>
|
||||
<div class="flex gap-2 justify-center">
|
||||
<div class="progress-dot completed"></div>
|
||||
<div class="progress-dot completed"></div>
|
||||
<div class="progress-dot completed"></div>
|
||||
<div class="progress-dot active"></div>
|
||||
<div class="progress-dot"></div>
|
||||
<div class="progress-dot"></div>
|
||||
<div class="progress-dot"></div>
|
||||
<div class="progress-dot"></div>
|
||||
<div class="progress-dot"></div>
|
||||
<div class="progress-dot"></div>
|
||||
<div class="progress-dot"></div>
|
||||
<div class="progress-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片区域 -->
|
||||
<div class="flex-1 flex items-center justify-center px-5 py-4">
|
||||
<div class="flashcard flashcard-front w-full h-[340px] p-6 flex flex-col items-center justify-center text-white">
|
||||
<div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mb-6">
|
||||
<i class="fas fa-book-medical text-3xl"></i>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold text-center mb-4">麻黄汤</h2>
|
||||
<p class="text-sm opacity-80 text-center mb-6">点击卡片查看详情</p>
|
||||
<div class="flex items-center gap-2 text-sm swipe-hint">
|
||||
<i class="fas fa-hand-point-left"></i>
|
||||
<span>左右滑动切换</span>
|
||||
<i class="fas fa-hand-point-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片背面（翻转后显示） -->
|
||||
<div class="px-5 pb-4 hidden" id="cardBack">
|
||||
<div class="flashcard flashcard-back w-full h-[340px] p-6">
|
||||
<h3 class="text-lg font-bold text-gray-800 mb-4 text-center">麻黄汤</h3>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<p class="text-xs text-gray-500 mb-1">组成</p>
|
||||
<p class="text-sm text-gray-800">麻黄、桂枝、杏仁、甘草</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-gray-500 mb-1">功效</p>
|
||||
<p class="text-sm text-gray-800">发汗解表，宣肺平喘</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-gray-500 mb-1">主治</p>
|
||||
<p class="text-sm text-gray-800">外感风寒表实证</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-gray-500 mb-1">方歌</p>
|
||||
<p class="text-sm text-indigo-600">麻黄汤中臣桂枝，杏仁甘草四般施</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="px-5 pb-4">
|
||||
<div class="flex gap-3 mb-4">
|
||||
<button class="flex-1 bg-white border-2 border-gray-300 text-gray-700 py-4 rounded-xl font-medium">
|
||||
<i class="fas fa-times mr-2 text-red-500"></i>未记住
|
||||
</button>
|
||||
<button class="flex-1 bg-gradient-to-r from-indigo-500 to-purple-500 text-white py-4 rounded-xl font-medium">
|
||||
<i class="fas fa-check mr-2"></i>已记住
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 导航按钮 -->
|
||||
<div class="flex justify-between items-center">
|
||||
<button class="w-12 h-12 bg-white rounded-full shadow flex items-center justify-center text-gray-600">
|
||||
<i class="fas fa-chevron-left"></i>
|
||||
</button>
|
||||
<div class="flex gap-2">
|
||||
<button class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-500">
|
||||
<i class="fas fa-bookmark"></i>
|
||||
</button>
|
||||
<button class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-500">
|
||||
<i class="fas fa-share-alt"></i>
|
||||
</button>
|
||||
</div>
|
||||
<button class="w-12 h-12 bg-white rounded-full shadow flex items-center justify-center text-gray-600">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部导航栏 -->
|
||||
<div class="absolute bottom-0 left-0 right-0 h-[70px] bg-white border-t border-gray-100 flex items-center justify-around px-4 pb-2">
|
||||
<a href="home.html" class="nav-item">
|
||||
<i class="fas fa-home text-xl"></i>
|
||||
<span>首页</span>
|
||||
</a>
|
||||
<a href="ai-quiz.html" class="nav-item active">
|
||||
<div class="w-12 h-12 -mt-6 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg">
|
||||
<i class="fas fa-microphone-alt text-white text-xl"></i>
|
||||
</div>
|
||||
<span class="text-indigo-500 font-medium">智能抽背</span>
|
||||
</a>
|
||||
<a href="profile.html" class="nav-item">
|
||||
<i class="fas fa-user text-xl"></i>
|
||||
<span>我的</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 卡片翻转效果
|
||||
const card = document.querySelector('.flashcard');
|
||||
const cardBack = document.getElementById('cardBack');
|
||||
const cardFront = document.querySelector('.flashcard-front');
|
||||
|
||||
card.addEventListener('click', function() {
|
||||
if (cardBack.classList.contains('hidden')) {
|
||||
// 显示背面
|
||||
cardFront.classList.add('hidden');
|
||||
cardFront.classList.remove('flashcard-front');
|
||||
cardBack.classList.remove('hidden');
|
||||
} else {
|
||||
// 显示正面
|
||||
cardFront.classList.remove('hidden');
|
||||
cardFront.classList.add('flashcard-front');
|
||||
cardBack.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,288 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>首页抽背 - AI智能抽背助手</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.phone-frame {
|
||||
width: 375px;
|
||||
height: 812px;
|
||||
margin: 20px auto;
|
||||
border-radius: 40px;
|
||||
border: 12px solid #1a1a1a;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
position: relative;
|
||||
}
|
||||
.status-bar {
|
||||
height: 44px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
}
|
||||
.avatar-ring {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 3px;
|
||||
margin: 0 auto 10px;
|
||||
}
|
||||
.avatar-inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.quiz-btn {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.quiz-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
.stat-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.progress-ring {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
.nav-item.active {
|
||||
color: #667eea;
|
||||
}
|
||||
.reminder-badge {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-frame">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span>09:41</span>
|
||||
<div class="flex gap-1">
|
||||
<i class="fas fa-signal"></i>
|
||||
<i class="fas fa-wifi"></i>
|
||||
<i class="fas fa-battery-full"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="h-[calc(100%-44px-70px)] overflow-y-auto bg-gray-50">
|
||||
<!-- 顶部用户信息区 -->
|
||||
<div class="bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-400 px-5 pt-6 pb-16 text-white">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<p class="text-sm opacity-90">欢迎回来</p>
|
||||
<h1 class="text-xl font-bold">小明同学</h1>
|
||||
</div>
|
||||
<div class="avatar-ring">
|
||||
<div class="avatar-inner">
|
||||
<i class="fas fa-user text-2xl text-indigo-500"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 学习概览 -->
|
||||
<div class="bg-white/20 backdrop-blur-sm rounded-2xl p-4 mt-4">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<span class="text-sm font-medium">学习概览</span>
|
||||
<span class="text-xs opacity-80">2026-03-28</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-3 text-center">
|
||||
<div>
|
||||
<p class="text-2xl font-bold">128</p>
|
||||
<p class="text-xs opacity-80">已记忆</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-2xl font-bold">45</p>
|
||||
<p class="text-xs opacity-80">未记忆</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-2xl font-bold text-yellow-300">12</p>
|
||||
<p class="text-xs opacity-80">待复习</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 快速抽背区 -->
|
||||
<div class="px-5 -mt-8">
|
||||
<div class="bg-white rounded-2xl shadow-lg p-5 mb-5">
|
||||
<h2 class="text-lg font-bold text-gray-800 mb-4">
|
||||
<i class="fas fa-bolt text-yellow-500 mr-2"></i>快速抽背
|
||||
</h2>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<a href="ai-quiz.html" class="quiz-btn text-white rounded-xl p-4 text-center">
|
||||
<i class="fas fa-microphone-alt text-2xl mb-2"></i>
|
||||
<p class="text-sm font-medium">AI语音抽背</p>
|
||||
</a>
|
||||
<a href="card-recite.html" class="bg-gradient-to-r from-emerald-500 to-teal-500 text-white rounded-xl p-4 text-center">
|
||||
<i class="fas fa-clone text-2xl mb-2"></i>
|
||||
<p class="text-sm font-medium">卡片背诵</p>
|
||||
</a>
|
||||
<a href="#" class="bg-gradient-to-r from-orange-500 to-amber-500 text-white rounded-xl p-4 text-center">
|
||||
<i class="fas fa-headphones text-2xl mb-2"></i>
|
||||
<p class="text-sm font-medium">音频带背</p>
|
||||
</a>
|
||||
<a href="#" class="bg-gradient-to-r from-rose-500 to-pink-500 text-white rounded-xl p-4 text-center">
|
||||
<i class="fas fa-edit text-2xl mb-2"></i>
|
||||
<p class="text-sm font-medium">挖空填空</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 记忆曲线提醒 -->
|
||||
<div class="bg-white rounded-2xl shadow-sm p-5 mb-5">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h2 class="text-lg font-bold text-gray-800">
|
||||
<i class="fas fa-brain text-purple-500 mr-2"></i>记忆曲线提醒
|
||||
</h2>
|
||||
<a href="memory-curve.html" class="text-indigo-500 text-sm">查看全部</a>
|
||||
</div>
|
||||
<div class="bg-gradient-to-r from-purple-50 to-pink-50 rounded-xl p-4 reminder-badge">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center">
|
||||
<i class="fas fa-bell text-white text-xl"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium text-gray-800">临界点复习</p>
|
||||
<p class="text-sm text-gray-600">麻黄汤功效、桂枝汤组成</p>
|
||||
</div>
|
||||
<a href="ai-quiz.html" class="bg-indigo-500 text-white px-4 py-2 rounded-lg text-sm">
|
||||
去背诵
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 高频考点 -->
|
||||
<div class="bg-white rounded-2xl shadow-sm p-5 mb-5">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h2 class="text-lg font-bold text-gray-800">
|
||||
<i class="fas fa-star text-yellow-500 mr-2"></i>高频考点
|
||||
</h2>
|
||||
<a href="#" class="text-indigo-500 text-sm">更多</a>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center gap-3 p-3 bg-gray-50 rounded-xl">
|
||||
<div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
|
||||
<span class="text-red-500 font-bold">1</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium text-gray-800">方剂学-解表剂</p>
|
||||
<p class="text-xs text-gray-500">错误率 68%</p>
|
||||
</div>
|
||||
<a href="#" class="text-indigo-500"><i class="fas fa-chevron-right"></i></a>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-3 bg-gray-50 rounded-xl">
|
||||
<div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
|
||||
<span class="text-orange-500 font-bold">2</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium text-gray-800">中医基础-阴阳学说</p>
|
||||
<p class="text-xs text-gray-500">错误率 52%</p>
|
||||
</div>
|
||||
<a href="#" class="text-indigo-500"><i class="fas fa-chevron-right"></i></a>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-3 bg-gray-50 rounded-xl">
|
||||
<div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center">
|
||||
<span class="text-yellow-600 font-bold">3</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium text-gray-800">中药学-解表药</p>
|
||||
<p class="text-xs text-gray-500">错误率 45%</p>
|
||||
</div>
|
||||
<a href="#" class="text-indigo-500"><i class="fas fa-chevron-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 今日任务 -->
|
||||
<div class="bg-white rounded-2xl shadow-sm p-5 mb-5">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h2 class="text-lg font-bold text-gray-800">
|
||||
<i class="fas fa-tasks text-blue-500 mr-2"></i>今日任务
|
||||
</h2>
|
||||
<span class="text-sm text-gray-500">2/5 完成</span>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center">
|
||||
<i class="fas fa-check text-white text-xs"></i>
|
||||
</div>
|
||||
<span class="flex-1 text-gray-600 line-through">完成30道题目</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center">
|
||||
<i class="fas fa-check text-white text-xs"></i>
|
||||
</div>
|
||||
<span class="flex-1 text-gray-600 line-through">复习错题本</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-6 h-6 border-2 border-gray-300 rounded-full"></div>
|
||||
<span class="flex-1 text-gray-800">AI抽背20题</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-6 h-6 border-2 border-gray-300 rounded-full"></div>
|
||||
<span class="flex-1 text-gray-800">背诵10个知识点</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-6 h-6 border-2 border-gray-300 rounded-full"></div>
|
||||
<span class="flex-1 text-gray-800">查看学习报告</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部导航栏 -->
|
||||
<div class="absolute bottom-0 left-0 right-0 h-[70px] bg-white border-t border-gray-100 flex items-center justify-around px-4 pb-2">
|
||||
<a href="home.html" class="nav-item active">
|
||||
<i class="fas fa-home text-xl"></i>
|
||||
<span>首页</span>
|
||||
</a>
|
||||
<a href="ai-quiz.html" class="nav-item">
|
||||
<div class="w-12 h-12 -mt-6 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg">
|
||||
<i class="fas fa-microphone-alt text-white text-xl"></i>
|
||||
</div>
|
||||
<span class="text-indigo-500 font-medium">智能抽背</span>
|
||||
</a>
|
||||
<a href="profile.html" class="nav-item">
|
||||
<i class="fas fa-user text-xl"></i>
|
||||
<span>我的</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,333 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>记忆曲线 - AI智能抽背助手</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.phone-frame {
|
||||
width: 375px;
|
||||
height: 812px;
|
||||
margin: 20px auto;
|
||||
border-radius: 40px;
|
||||
border: 12px solid #1a1a1a;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
position: relative;
|
||||
}
|
||||
.status-bar {
|
||||
height: 44px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
}
|
||||
.curve-container {
|
||||
position: relative;
|
||||
height: 200px;
|
||||
background: linear-gradient(180deg, #f0f4ff 0%, #faf5ff 100%);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.curve-line {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
height: 120px;
|
||||
}
|
||||
.memory-point {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border: 2px solid white;
|
||||
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.5);
|
||||
}
|
||||
.calendar-day {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content:;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.calendar-day.urgent {
|
||||
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
|
||||
color: white;
|
||||
}
|
||||
.calendar-day.today {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
.calendar-day.reviewed {
|
||||
background: #10b981;
|
||||
color: white;
|
||||
}
|
||||
.calendar-day.future {
|
||||
background: #e5e7eb;
|
||||
color: #9ca3af;
|
||||
}
|
||||
.nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
.nav-item.active {
|
||||
color: #667eea;
|
||||
}
|
||||
.reminder-pulse {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.6; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-frame">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span>09:41</span>
|
||||
<div class="flex gap-1">
|
||||
<i class="fas fa-signal"></i>
|
||||
<i class="fas fa-wifi"></i>
|
||||
<i class="fas fa-battery-full"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="bg-white px-4 py-3 flex items-center justify-between border-b border-gray-100">
|
||||
<a href="home.html" class="text-gray-600">
|
||||
<i class="fas fa-arrow-left text-xl"></i>
|
||||
</a>
|
||||
<h1 class="text-lg font-bold text-gray-800">记忆曲线</h1>
|
||||
<button class="text-gray-600">
|
||||
<i class="fas fa-cog text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="h-[calc(100%-44px-56px-70px)] overflow-y-auto bg-gray-50 px-5 py-4">
|
||||
<!-- 紧急提醒 -->
|
||||
<div class="bg-gradient-to-r from-red-500 to-pink-500 rounded-2xl p-4 mb-5 reminder-pulse">
|
||||
<div class="flex items-center gap-3 text-white">
|
||||
<div class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center">
|
||||
<i class="fas fa-bell text-2xl"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-bold">该复习啦！</p>
|
||||
<p class="text-sm opacity-90">你有 5 个知识点即将遗忘</p>
|
||||
</div>
|
||||
<a href="ai-quiz.html" class="bg-white text-red-500 px-4 py-2 rounded-lg text-sm font-medium">
|
||||
开始
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 艾宾浩斯记忆曲线 -->
|
||||
<div class="curve-container mb-5 p-4">
|
||||
<h3 class="font-bold text-gray-800 mb-2">
|
||||
<i class="fas fa-chart-area text-indigo-500 mr-2"></i>记忆强度曲线
|
||||
</h3>
|
||||
<svg class="curve-line" viewBox="0 0 300 120" preserveAspectRatio="none">
|
||||
<!-- 网格线 -->
|
||||
<line x1="0" y1="30" x2="300" y2="30" stroke="#e5e7eb" stroke-width="1" stroke-dasharray="4"/>
|
||||
<line x1="0" y1="60" x2="300" y2="60" stroke="#e5e7eb" stroke-width="1" stroke-dasharray="4"/>
|
||||
<line x1="0" y1="90" x2="300" y2="90" stroke="#e5e7eb" stroke-width="1" stroke-dasharray="4"/>
|
||||
<!-- 记忆曲线 -->
|
||||
<path d="M0,10 Q30,25 60,35 T120,55 T180,70 T240,85 T300,95" fill="none" stroke="url(#gradient)" stroke-width="3"/>
|
||||
<defs>
|
||||
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#667eea"/>
|
||||
<stop offset="100%" style="stop-color:#764ba2"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- 复习点标记 -->
|
||||
<circle cx="60" cy="35" r="5" fill="#10b981"/>
|
||||
<circle cx="120" cy="55" r="5" fill="#10b981"/>
|
||||
<circle cx="180" cy="70" r="5" fill="#f59e0b"/>
|
||||
</svg>
|
||||
<div class="flex justify-between text-xs text-gray-500 mt-2">
|
||||
<span>学习时</span>
|
||||
<span>20分钟后</span>
|
||||
<span>1小时后</span>
|
||||
<span>1天后</span>
|
||||
<span>3天后</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 复习日历 -->
|
||||
<div class="bg-white rounded-2xl p-4 mb-5 shadow-sm">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="font-bold text-gray-800">
|
||||
<i class="fas fa-calendar-alt text-indigo-500 mr-2"></i>复习计划
|
||||
</h3>
|
||||
<span class="text-sm text-gray-500">2026年3月</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-7 gap-2 text-center mb-2">
|
||||
<span class="text-xs text-gray-400">日</span>
|
||||
<span class="text-xs text-gray-400">一</span>
|
||||
<span class="text-xs text-gray-400">二</span>
|
||||
<span class="text-xs text-gray-400">三</span>
|
||||
<span class="text-xs text-gray-400">四</span>
|
||||
<span class="text-xs text-gray-400">五</span>
|
||||
<span class="text-xs text-gray-400">六</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-7 gap-2">
|
||||
<div class="calendar-day"></div>
|
||||
<div class="calendar-day"></div>
|
||||
<div class="calendar-day"></div>
|
||||
<div class="calendar-day"></div>
|
||||
<div class="calendar-day"></div>
|
||||
<div class="calendar-day reviewed">1</div>
|
||||
<div class="calendar-day reviewed">2</div>
|
||||
<div class="calendar-day reviewed">3</div>
|
||||
<div class="calendar-day reviewed">4</div>
|
||||
<div class="calendar-day reviewed">5</div>
|
||||
<div class="calendar-day reviewed">6</div>
|
||||
<div class="calendar-day reviewed">7</div>
|
||||
<div class="calendar-day reviewed">8</div>
|
||||
<div class="calendar-day reviewed">9</div>
|
||||
<div class="calendar-day reviewed">10</div>
|
||||
<div class="calendar-day reviewed">11</div>
|
||||
<div class="calendar-day reviewed">12</div>
|
||||
<div class="calendar-day reviewed">13</div>
|
||||
<div class="calendar-day reviewed">14</div>
|
||||
<div class="calendar-day reviewed">15</div>
|
||||
<div class="calendar-day reviewed">16</div>
|
||||
<div class="calendar-day reviewed">17</div>
|
||||
<div class="calendar-day reviewed">18</div>
|
||||
<div class="calendar-day reviewed">19</div>
|
||||
<div class="calendar-day reviewed">20</div>
|
||||
<div class="calendar-day reviewed">21</div>
|
||||
<div class="calendar-day reviewed">22</div>
|
||||
<div class="calendar-day reviewed">23</div>
|
||||
<div class="calendar-day reviewed">24</div>
|
||||
<div class="calendar-day reviewed">25</div>
|
||||
<div class="calendar-day reviewed">26</div>
|
||||
<div class="calendar-day reviewed">27</div>
|
||||
<div class="calendar-day today">28</div>
|
||||
<div class="calendar-day urgent">29</div>
|
||||
<div class="calendar-day future">30</div>
|
||||
<div class="calendar-day future">31</div>
|
||||
</div>
|
||||
<div class="flex justify-center gap-4 mt-4 text-xs">
|
||||
<div class="flex items-center gap-1">
|
||||
<div class="w-3 h-3 bg-green-500 rounded"></div>
|
||||
<span class="text-gray-600">已完成</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<div class="w-3 h-3 bg-indigo-500 rounded"></div>
|
||||
<span class="text-gray-600">今天</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<div class="w-3 h-3 bg-red-500 rounded"></div>
|
||||
<span class="text-gray-600">紧急</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 待复习列表 -->
|
||||
<div class="bg-white rounded-2xl p-4 mb-5 shadow-sm">
|
||||
<h3 class="font-bold text-gray-800 mb-4">
|
||||
<i class="fas fa-clock text-yellow-500 mr-2"></i>待复习知识点
|
||||
</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center gap-3 p-3 bg-red-50 rounded-xl border-l-4 border-red-500">
|
||||
<div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
|
||||
<i class="fas fa-exclamation-triangle text-red-500"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium text-gray-800 text-sm">麻黄汤功效</p>
|
||||
<p class="text-xs text-red-500">紧急复习 · 今天到期</p>
|
||||
</div>
|
||||
<a href="ai-quiz.html" class="text-indigo-500">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-3 bg-orange-50 rounded-xl border-l-4 border-orange-500">
|
||||
<div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
|
||||
<i class="fas fa-hourglass-half text-orange-500"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium text-gray-800 text-sm">桂枝汤组成</p>
|
||||
<p class="text-xs text-orange-500">明天到期</p>
|
||||
</div>
|
||||
<a href="ai-quiz.html" class="text-indigo-500">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-3 bg-yellow-50 rounded-xl border-l-4 border-yellow-500">
|
||||
<div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center">
|
||||
<i class="fas fa-clock text-yellow-500"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium text-gray-800 text-sm">阴阳失调概念</p>
|
||||
<p class="text-xs text-yellow-600">3天后到期</p>
|
||||
</div>
|
||||
<a href="ai-quiz.html" class="text-indigo-500">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 记忆统计 -->
|
||||
<div class="bg-white rounded-2xl p-4 mb-5 shadow-sm">
|
||||
<h3 class="font-bold text-gray-800 mb-4">
|
||||
<i class="fas fa-chart-pie text-indigo-500 mr-2"></i>记忆统计
|
||||
</h3>
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
<div class="text-center p-3 bg-green-50 rounded-xl">
|
||||
<p class="text-2xl font-bold text-green-500">86</p>
|
||||
<p class="text-xs text-gray-600">已牢固记忆</p>
|
||||
</div>
|
||||
<div class="text-center p-3 bg-yellow-50 rounded-xl">
|
||||
<p class="text-2xl font-bold text-yellow-500">32</p>
|
||||
<p class="text-xs text-gray-600">复习中</p>
|
||||
</div>
|
||||
<div class="text-center p-3 bg-red-50 rounded-xl">
|
||||
<p class="text-2xl font-bold text-red-500">10</p>
|
||||
<p class="text-xs text-gray-600">待巩固</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部导航栏 -->
|
||||
<div class="absolute bottom-0 left-0 right-0 h-[70px] bg-white border-t border-gray-100 flex items-center justify-around px-4 pb-2">
|
||||
<a href="home.html" class="nav-item">
|
||||
<i class="fas fa-home text-xl"></i>
|
||||
<span>首页</span>
|
||||
</a>
|
||||
<a href="ai-quiz.html" class="nav-item active">
|
||||
<div class="w-12 h-12 -mt-6 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg">
|
||||
<i class="fas fa-microphone-alt text-white text-xl"></i>
|
||||
</div>
|
||||
<span class="text-indigo-500 font-medium">智能抽背</span>
|
||||
</a>
|
||||
<a href="profile.html" class="nav-item">
|
||||
<i class="fas fa-user text-xl"></i>
|
||||
<span>我的</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,330 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>个人中心 - AI智能抽背助手</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.phone-frame {
|
||||
width: 375px;
|
||||
height: 812px;
|
||||
margin: 20px auto;
|
||||
border-radius: 40px;
|
||||
border: 12px solid #1a1a1a;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
position: relative;
|
||||
}
|
||||
.status-bar {
|
||||
height: 44px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
}
|
||||
.avatar-ring {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 3px;
|
||||
}
|
||||
.avatar-inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.stat-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
background: white;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
.menu-item:hover {
|
||||
background: #f9fafb;
|
||||
}
|
||||
.menu-item:first-child {
|
||||
border-radius: 16px 16px 0 0;
|
||||
}
|
||||
.menu-item:last-child {
|
||||
border-radius: 0 0 16px 16px;
|
||||
border-bottom: none;
|
||||
}
|
||||
.nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
.nav-item.active {
|
||||
color: #667eea;
|
||||
}
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-frame">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span>09:41</span>
|
||||
<div class="flex gap-1">
|
||||
<i class="fas fa-signal"></i>
|
||||
<i class="fas fa-wifi"></i>
|
||||
<i class="fas fa-battery-full"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="h-[calc(100%-44px-70px)] overflow-y-auto bg-gray-50">
|
||||
<!-- 用户信息头部 -->
|
||||
<div class="bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-400 px-5 pt-6 pb-20 text-white">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<h1 class="text-xl font-bold">个人中心</h1>
|
||||
<button class="text-white/80">
|
||||
<i class="fas fa-cog text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="avatar-ring">
|
||||
<div class="avatar-inner">
|
||||
<i class="fas fa-user text-3xl text-indigo-500"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h2 class="text-xl font-bold">小明同学</h2>
|
||||
<p class="text-sm opacity-80">ID: 10086888</p>
|
||||
</div>
|
||||
<button class="bg-white/20 px-4 py-2 rounded-full text-sm">
|
||||
编辑
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 学习统计卡片 -->
|
||||
<div class="px-5 -mt-12 mb-5">
|
||||
<div class="stat-card">
|
||||
<div class="grid grid-cols-4 gap-2 text-center">
|
||||
<div>
|
||||
<p class="text-xl font-bold text-indigo-500">128</p>
|
||||
<p class="text-xs text-gray-500">已记忆</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xl font-bold text-purple-500">45</p>
|
||||
<p class="text-xs text-gray-500">学习中</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xl font-bold text-pink-500">32</p>
|
||||
<p class="text-xs text-gray-500">收藏</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xl font-bold text-amber-500">15</p>
|
||||
<p class="text-xs text-gray-500">连续天数</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 学习数据 -->
|
||||
<div class="px-5 mb-5">
|
||||
<div class="stat-card">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="font-bold text-gray-800">本周学习</h3>
|
||||
<span class="text-xs text-gray-500">03/21 - 03/28</span>
|
||||
</div>
|
||||
<div class="flex items-end justify-between h-24 px-2">
|
||||
<div class="flex flex-col items-center gap-1 flex-1">
|
||||
<div class="w-full max-w-[24px] bg-gradient-to-t from-indigo-500 to-purple-500 rounded-t" style="height: 60%"></div>
|
||||
<span class="text-xs text-gray-500">一</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1 flex-1">
|
||||
<div class="w-full max-w-[24px] bg-gradient-to-t from-indigo-500 to-purple-500 rounded-t" style="height: 80%"></div>
|
||||
<span class="text-xs text-gray-500">二</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1 flex-1">
|
||||
<div class="w-full max-w-[24px] bg-gradient-to-t from-indigo-500 to-purple-500 rounded-t" style="height: 45%"></div>
|
||||
<span class="text-xs text-gray-500">三</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1 flex-1">
|
||||
<div class="w-full max-w-[24px] bg-gradient-to-t from-indigo-500 to-purple-500 rounded-t" style="height: 90%"></div>
|
||||
<span class="text-xs text-gray-500">四</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1 flex-1">
|
||||
<div class="w-full max-w-[24px] bg-gradient-to-t from-indigo-500 to-purple-500 rounded-t" style="height: 70%"></div>
|
||||
<span class="text-xs text-gray-500">五</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1 flex-1">
|
||||
<div class="w-full max-w-[24px] bg-gradient-to-t from-indigo-500 to-purple-500 rounded-t" style="height: 100%"></div>
|
||||
<span class="text-xs text-gray-500">六</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1 flex-1">
|
||||
<div class="w-full max-w-[24px] bg-gray-200 rounded-t" style="height: 30%"></div>
|
||||
<span class="text-xs text-indigo-500 font-medium">日</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 功能菜单 -->
|
||||
<div class="px-5 mb-5">
|
||||
<div class="bg-white rounded-2xl shadow-sm overflow-hidden">
|
||||
<a href="quiz-report.html" class="menu-item">
|
||||
<div class="w-10 h-10 bg-indigo-100 rounded-xl flex items-center justify-center">
|
||||
<i class="fas fa-chart-bar text-indigo-500"></i>
|
||||
</div>
|
||||
<span class="flex-1 text-gray-800">学习报告</span>
|
||||
<i class="fas fa-chevron-right text-gray-400"></i>
|
||||
</a>
|
||||
<a href="memory-curve.html" class="menu-item">
|
||||
<div class="w-10 h-10 bg-purple-100 rounded-xl flex items-center justify-center">
|
||||
<i class="fas fa-brain text-purple-500"></i>
|
||||
</div>
|
||||
<span class="flex-1 text-gray-800">记忆曲线</span>
|
||||
<span class="bg-red-500 text-white text-xs px-2 py-1 rounded-full mr-2">12</span>
|
||||
<i class="fas fa-chevron-right text-gray-400"></i>
|
||||
</a>
|
||||
<a href="#" class="menu-item">
|
||||
<div class="w-10 h-10 bg-amber-100 rounded-xl flex items-center justify-center">
|
||||
<i class="fas fa-bookmark text-amber-500"></i>
|
||||
</div>
|
||||
<span class="flex-1 text-gray-800">我的收藏</span>
|
||||
<i class="fas fa-chevron-right text-gray-400"></i>
|
||||
</a>
|
||||
<a href="#" class="menu-item">
|
||||
<div class="w-10 h-10 bg-rose-100 rounded-xl flex items-center justify-center relative">
|
||||
<i class="fas fa-times-circle text-rose-500"></i>
|
||||
<span class="badge">45</span>
|
||||
</div>
|
||||
<span class="flex-1 text-gray-800">错题本</span>
|
||||
<i class="fas fa-chevron-right text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 更多功能 -->
|
||||
<div class="px-5 mb-5">
|
||||
<div class="bg-white rounded-2xl shadow-sm overflow-hidden">
|
||||
<a href="#" class="menu-item">
|
||||
<div class="w-10 h-10 bg-green-100 rounded-xl flex items-center justify-center">
|
||||
<i class="fas fa-bell text-green-500"></i>
|
||||
</div>
|
||||
<span class="flex-1 text-gray-800">学习提醒</span>
|
||||
<span class="text-gray-400 text-sm mr-2">每天 09:00</span>
|
||||
<i class="fas fa-chevron-right text-gray-400"></i>
|
||||
</a>
|
||||
<a href="#" class="menu-item">
|
||||
<div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center">
|
||||
<i class="fas fa-download text-blue-500"></i>
|
||||
</div>
|
||||
<span class="flex-1 text-gray-800">离线题库</span>
|
||||
<i class="fas fa-chevron-right text-gray-400"></i>
|
||||
</a>
|
||||
<a href="#" class="menu-item">
|
||||
<div class="w-10 h-10 bg-cyan-100 rounded-xl flex items-center justify-center">
|
||||
<i class="fas fa-share-alt text-cyan-500"></i>
|
||||
</div>
|
||||
<span class="flex-1 text-gray-800">分享给好友</span>
|
||||
<i class="fas fa-chevron-right text-gray-400"></i>
|
||||
</a>
|
||||
<a href="#" class="menu-item">
|
||||
<div class="w-10 h-10 bg-gray-100 rounded-xl flex items-center justify-center">
|
||||
<i class="fas fa-cog text-gray-500"></i>
|
||||
</div>
|
||||
<span class="flex-1 text-gray-800">设置</span>
|
||||
<i class="fas fa-chevron-right text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 成就徽章 -->
|
||||
<div class="px-5 mb-5">
|
||||
<div class="stat-card">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="font-bold text-gray-800">
|
||||
<i class="fas fa-trophy text-yellow-500 mr-2"></i>我的成就
|
||||
</h3>
|
||||
<a href="#" class="text-indigo-500 text-sm">查看全部</a>
|
||||
</div>
|
||||
<div class="flex gap-4 justify-center">
|
||||
<div class="text-center">
|
||||
<div class="w-14 h-14 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-full flex items-center justify-center mb-1">
|
||||
<i class="fas fa-fire text-white text-xl"></i>
|
||||
</div>
|
||||
<p class="text-xs text-gray-600">连续7天</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-14 h-14 bg-gradient-to-br from-indigo-400 to-purple-500 rounded-full flex items-center justify-center mb-1">
|
||||
<i class="fas fa-star text-white text-xl"></i>
|
||||
</div>
|
||||
<p class="text-xs text-gray-600">百题达人</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-14 h-14 bg-gradient-to-br from-green-400 to-emerald-500 rounded-full flex items-center justify-center mb-1">
|
||||
<i class="fas fa-check-double text-white text-xl"></i>
|
||||
</div>
|
||||
<p class="text-xs text-gray-600">正确率90%</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-14 h-14 bg-gray-200 rounded-full flex items-center justify-center mb-1">
|
||||
<i class="fas fa-lock text-gray-400 text-xl"></i>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400">待解锁</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部导航栏 -->
|
||||
<div class="absolute bottom-0 left-0 right-0 h-[70px] bg-white border-t border-gray-100 flex items-center justify-around px-4 pb-2">
|
||||
<a href="home.html" class="nav-item">
|
||||
<i class="fas fa-home text-xl"></i>
|
||||
<span>首页</span>
|
||||
</a>
|
||||
<a href="ai-quiz.html" class="nav-item active">
|
||||
<div class="w-12 h-12 -mt-6 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg">
|
||||
<i class="fas fa-microphone-alt text-white text-xl"></i>
|
||||
</div>
|
||||
<span class="text-indigo-500 font-medium">智能抽背</span>
|
||||
</a>
|
||||
<a href="profile.html" class="nav-item">
|
||||
<i class="fas fa-user text-xl"></i>
|
||||
<span>我的</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,300 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>抽背报告 - AI智能抽背助手</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.phone-frame {
|
||||
width: 375px;
|
||||
height: 812px;
|
||||
margin: 20px auto;
|
||||
border-radius: 40px;
|
||||
border: 12px solid #1a1a1a;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
position: relative;
|
||||
}
|
||||
.status-bar {
|
||||
height: 44px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
}
|
||||
.score-circle {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
border-radius: 50%;
|
||||
background: conic-gradient(
|
||||
from 0deg,
|
||||
#10b981 0deg,
|
||||
#10b981 252deg,
|
||||
#e5e7eb 252deg,
|
||||
#e5e7eb 360deg
|
||||
);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
.score-circle::before {
|
||||
content: '';
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
position: absolute;
|
||||
}
|
||||
.score-text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.stat-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.error-item {
|
||||
background: #fef2f2;
|
||||
border-left: 4px solid #ef4444;
|
||||
}
|
||||
.nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
.nav-item.active {
|
||||
color: #667eea;
|
||||
}
|
||||
.chart-bar {
|
||||
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 4px 4px 0 0;
|
||||
transition: height 0.5s ease;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-frame">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span>09:41</span>
|
||||
<div class="flex gap-1">
|
||||
<i class="fas fa-signal"></i>
|
||||
<i class="fas fa-wifi"></i>
|
||||
<i class="fas fa-battery-full"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="bg-white px-4 py-3 flex items-center justify-between border-b border-gray-100">
|
||||
<a href="ai-quiz.html" class="text-gray-600">
|
||||
<i class="fas fa-arrow-left text-xl"></i>
|
||||
</a>
|
||||
<h1 class="text-lg font-bold text-gray-800">抽背报告</h1>
|
||||
<button class="text-gray-600">
|
||||
<i class="fas fa-share-alt text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="h-[calc(100%-44px-56px-70px)] overflow-y-auto bg-gray-50 px-5 py-4">
|
||||
<!-- 报告时间 -->
|
||||
<div class="text-center mb-4">
|
||||
<p class="text-sm text-gray-500">报告生成于 2026-03-28 09:41</p>
|
||||
<p class="text-xs text-gray-400">报告将保存30天</p>
|
||||
</div>
|
||||
|
||||
<!-- 核心数据 - 正确率 -->
|
||||
<div class="stat-card mb-5">
|
||||
<div class="flex flex-col items-center py-4">
|
||||
<div class="score-circle mb-4">
|
||||
<div class="score-text">
|
||||
<p class="text-4xl font-bold text-gray-800">70%</p>
|
||||
<p class="text-sm text-gray-500">正确率</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-4 gap-4 w-full px-4">
|
||||
<div class="text-center">
|
||||
<p class="text-2xl font-bold text-gray-800">10</p>
|
||||
<p class="text-xs text-gray-500">总题数</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="text-2xl font-bold text-green-500">7</p>
|
||||
<p class="text-xs text-gray-500">正确</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="text-2xl font-bold text-red-500">3</p>
|
||||
<p class="text-xs text-gray-500">错误</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="text-2xl font-bold text-indigo-500">5:32</p>
|
||||
<p class="text-xs text-gray-500">用时</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表现趋势 -->
|
||||
<div class="stat-card mb-5">
|
||||
<h3 class="font-bold text-gray-800 mb-4">
|
||||
<i class="fas fa-chart-line text-indigo-500 mr-2"></i>表现趋势
|
||||
</h3>
|
||||
<div class="flex items-end justify-between h-32 px-2">
|
||||
<div class="flex flex-col items-center gap-1">
|
||||
<div class="chart-bar w-6" style="height: 40%"></div>
|
||||
<span class="text-xs text-gray-500">周一</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1">
|
||||
<div class="chart-bar w-6" style="height: 55%"></div>
|
||||
<span class="text-xs text-gray-500">周二</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1">
|
||||
<div class="chart-bar w-6" style="height: 48%"></div>
|
||||
<span class="text-xs text-gray-500">周三</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1">
|
||||
<div class="chart-bar w-6" style="height: 65%"></div>
|
||||
<span class="text-xs text-gray-500">周四</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1">
|
||||
<div class="chart-bar w-6" style="height: 70%"></div>
|
||||
<span class="text-xs text-gray-500">今天</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 mt-3 text-center">
|
||||
<i class="fas fa-arrow-up text-green-500 mr-1"></i>
|
||||
比上次提升 5%，继续保持！
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 错题分析 -->
|
||||
<div class="stat-card mb-5">
|
||||
<h3 class="font-bold text-gray-800 mb-4">
|
||||
<i class="fas fa-times-circle text-red-500 mr-2"></i>错题分析
|
||||
</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="error-item rounded-lg p-3">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<div>
|
||||
<p class="font-medium text-gray-800 text-sm">桂枝汤的组成</p>
|
||||
<p class="text-xs text-gray-500">方剂学 - 解表剂</p>
|
||||
</div>
|
||||
<span class="bg-red-100 text-red-600 px-2 py-1 rounded text-xs">未掌握</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-600">
|
||||
<i class="fas fa-info-circle mr-1"></i>
|
||||
正确答案：桂枝、芍药、甘草、生姜、大枣
|
||||
</p>
|
||||
</div>
|
||||
<div class="error-item rounded-lg p-3">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<div>
|
||||
<p class="font-medium text-gray-800 text-sm">阴阳失调的基本概念</p>
|
||||
<p class="text-xs text-gray-500">中医基础理论</p>
|
||||
</div>
|
||||
<span class="bg-orange-100 text-orange-600 px-2 py-1 rounded text-xs">模糊</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-600">
|
||||
<i class="fas fa-info-circle mr-1"></i>
|
||||
阴阳失调是指阴阳之间失去平衡协调
|
||||
</p>
|
||||
</div>
|
||||
<div class="error-item rounded-lg p-3">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<div>
|
||||
<p class="font-medium text-gray-800 text-sm">麻黄汤的主治病证</p>
|
||||
<p class="text-xs text-gray-500">方剂学 - 解表剂</p>
|
||||
</div>
|
||||
<span class="bg-red-100 text-red-600 px-2 py-1 rounded text-xs">未掌握</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-600">
|
||||
<i class="fas fa-info-circle mr-1"></i>
|
||||
主治外感风寒表实证
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 复习建议 -->
|
||||
<div class="stat-card mb-5">
|
||||
<h3 class="font-bold text-gray-800 mb-4">
|
||||
<i class="fas fa-lightbulb text-yellow-500 mr-2"></i>复习建议
|
||||
</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-indigo-600 font-bold text-sm">1</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-800">重点复习方剂学解表剂章节</p>
|
||||
<p class="text-xs text-gray-500">建议用时：20分钟</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-indigo-600 font-bold text-sm">2</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-800">使用卡片背诵模式巩固记忆</p>
|
||||
<p class="text-xs text-gray-500">推荐题目：10道</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-indigo-600 font-bold text-sm">3</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-800">明天同一时间进行复习</p>
|
||||
<p class="text-xs text-gray-500">记忆曲线最佳复习时间</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="flex gap-3 mb-4">
|
||||
<a href="ai-quiz.html" class="flex-1 bg-gradient-to-r from-indigo-500 to-purple-500 text-white py-3 rounded-xl font-medium text-center">
|
||||
<i class="fas fa-redo mr-2"></i>重新抽背
|
||||
</a>
|
||||
<a href="card-recite.html" class="flex-1 bg-white border-2 border-indigo-500 text-indigo-500 py-3 rounded-xl font-medium text-center">
|
||||
<i class="fas fa-clone mr-2"></i>卡片练习
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部导航栏 -->
|
||||
<div class="absolute bottom-0 left-0 right-0 h-[70px] bg-white border-t border-gray-100 flex items-center justify-around px-4 pb-2">
|
||||
<a href="home.html" class="nav-item">
|
||||
<i class="fas fa-home text-xl"></i>
|
||||
<span>首页</span>
|
||||
</a>
|
||||
<a href="ai-quiz.html" class="nav-item active">
|
||||
<div class="w-12 h-12 -mt-6 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg">
|
||||
<i class="fas fa-microphone-alt text-white text-xl"></i>
|
||||
</div>
|
||||
<span class="text-indigo-500 font-medium">智能抽背</span>
|
||||
</a>
|
||||
<a href="profile.html" class="nav-item">
|
||||
<i class="fas fa-user text-xl"></i>
|
||||
<span>我的</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
195
prototype/server.js
vendored
195
prototype/server.js
vendored
@@ -1,195 +0,0 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
/**
|
||||
* AI 智能抽背助手 - 原型系统本地预览服务器
|
||||
*
|
||||
* 使用方法:
|
||||
* node server.js
|
||||
*
|
||||
* 功能:
|
||||
* - 启动本地 HTTP 服务器
|
||||
* - 自动打开浏览器访问原型系统
|
||||
* - 支持热重载（修改文件后自动刷新）
|
||||
*
|
||||
* @author generate-prototype-grid skill
|
||||
* @date 2026-03-28
|
||||
*/
|
||||
|
||||
const http = require('http');
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const { exec } = require('child_process');
|
||||
const { URL } = require('url');
|
||||
|
||||
const PORT = 8080;
|
||||
const PROTOTYPE_DIR = __dirname;
|
||||
const PARENT_DIR = path.dirname(__dirname);
|
||||
|
||||
// MIME 类型映射
|
||||
const MIME_TYPES = {
|
||||
'.html': 'text/html; charset=utf-8',
|
||||
'.css': 'text/css; charset=utf-8',
|
||||
'.js': 'application/javascript; charset=utf-8',
|
||||
'.json': 'application/json; charset=utf-8',
|
||||
'.png': 'image/png',
|
||||
'.jpg': 'image/jpeg',
|
||||
'.jpeg': 'image/jpeg',
|
||||
'.gif': 'image/gif',
|
||||
'.svg': 'image/svg+xml',
|
||||
'.ico': 'image/x-icon',
|
||||
'.woff': 'font/woff',
|
||||
'.woff2': 'font/woff2',
|
||||
'.ttf': 'font/ttf',
|
||||
'.md': 'text/markdown; charset=utf-8',
|
||||
};
|
||||
|
||||
// 创建服务器
|
||||
const server = http.createServer((req, res) => {
|
||||
// 使用 URL 模块安全解析 URL
|
||||
let urlPath;
|
||||
try {
|
||||
const parsedUrl = new URL(req.url, `http://${req.headers.host || 'localhost'}`);
|
||||
urlPath = parsedUrl.pathname || '/';
|
||||
} catch {
|
||||
urlPath = '/';
|
||||
}
|
||||
|
||||
// 处理根路径
|
||||
if (urlPath === '/') {
|
||||
urlPath = '/index.html';
|
||||
}
|
||||
|
||||
// 安全验证：防止路径遍历攻击
|
||||
// 规范化路径并检查是否在允许的目录内
|
||||
const isPlanningArtifacts = urlPath.startsWith("/planning-artifacts/");
|
||||
const baseDir = isPlanningArtifacts ? PARENT_DIR : PROTOTYPE_DIR;
|
||||
const relativePath = isPlanningArtifacts ? urlPath : urlPath;
|
||||
|
||||
const normalizedPath = path.normalize(path.join(baseDir, relativePath));
|
||||
if (!normalizedPath.startsWith(baseDir)) {
|
||||
// 路径遍历攻击检测
|
||||
res.writeHead(400, { 'Content-Type': 'text/html; charset=utf-8' });
|
||||
res.end('<!DOCTYPE html><html><head><meta charset="UTF-8"><title>400 - 错误请求</title></head><body><h1>400 - 错误请求</h1><p>无效的路径</p></body></html>');
|
||||
return;
|
||||
}
|
||||
|
||||
const filePath = normalizedPath;
|
||||
const extname = path.extname(filePath).toLowerCase();
|
||||
|
||||
// 设置响应头
|
||||
const contentType = MIME_TYPES[extname] || 'application/octet-stream';
|
||||
|
||||
// 读取并返回文件
|
||||
fs.readFile(filePath, (err, content) => {
|
||||
if (err) {
|
||||
if (err.code === 'ENOENT') {
|
||||
// 文件不存在
|
||||
res.writeHead(404, { 'Content-Type': 'text/html; charset=utf-8' });
|
||||
res.end(`
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>404 - 文件未找到</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.error-box {
|
||||
text-align: center;
|
||||
background: white;
|
||||
padding: 40px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
}
|
||||
h1 { color: #1890FF; margin: 0 0 16px 0; }
|
||||
p { color: #666; margin: 0 0 24px 0; }
|
||||
a {
|
||||
color: #1890FF;
|
||||
text-decoration: none;
|
||||
padding: 8px 16px;
|
||||
border: 1px solid #1890FF;
|
||||
border-radius: 6px;
|
||||
display: inline-block;
|
||||
}
|
||||
a:hover { background: #1890FF; color: white; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="error-box">
|
||||
<h1>404</h1>
|
||||
<p>文件未找到</p>
|
||||
<a href="/">返回首页</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`);
|
||||
} else {
|
||||
// 服务器错误 - 不暴露内部错误详情
|
||||
res.writeHead(500, { 'Content-Type': 'text/html; charset=utf-8' });
|
||||
res.end('<!DOCTYPE html><html><head><meta charset="UTF-8"><title>500 - 服务器错误</title></head><body><h1>500 - 服务器错误</h1><p>服务器内部错误，请稍后重试</p></body></html>');
|
||||
}
|
||||
} else {
|
||||
// 成功返回文件
|
||||
res.writeHead(200, { 'Content-Type': contentType });
|
||||
res.end(content);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 启动服务器
|
||||
server.listen(PORT, () => {
|
||||
console.log('='.repeat(60));
|
||||
console.log(' AI 智能抽背助手 - 原型系统本地预览服务器');
|
||||
console.log('='.repeat(60));
|
||||
console.log('');
|
||||
console.log(` 服务器地址: http://localhost:${PORT}`);
|
||||
console.log('');
|
||||
console.log(' 可用页面:');
|
||||
console.log(` - 统一入口: http://localhost:${PORT}/index.html`);
|
||||
console.log(` - 平铺展示: http://localhost:${PORT}/admin-index.html`);
|
||||
console.log(` - 文档中心: http://localhost:${PORT}/docs-index.html`);
|
||||
console.log('');
|
||||
console.log(' 后台管理页面:');
|
||||
console.log(` - 数据概览: http://localhost:${PORT}/pages/admin/dashboard.html`);
|
||||
console.log(` - 抽背记录查询: http://localhost:${PORT}/pages/admin/quiz-records.html`);
|
||||
console.log(` - 学生管理: http://localhost:${PORT}/pages/admin/student-management.html`);
|
||||
console.log(` - 知识点管理: http://localhost:${PORT}/pages/admin/knowledge-management.html`);
|
||||
console.log(` - 学习任务管理: http://localhost:${PORT}/pages/admin/task-management.html`);
|
||||
console.log(` - 系统设置: http://localhost:${PORT}/pages/admin/settings.html`);
|
||||
console.log('');
|
||||
console.log(' 按 Ctrl+C 停止服务器');
|
||||
console.log('='.repeat(60));
|
||||
console.log('');
|
||||
|
||||
// 自动打开浏览器
|
||||
const openCommand = process.platform === 'win32' ? 'start' :
|
||||
process.platform === 'darwin' ? 'open' : 'xdg-open';
|
||||
|
||||
exec(`${openCommand} http://localhost:${PORT}`, (error) => {
|
||||
if (error) {
|
||||
console.log(' 提示: 无法自动打开浏览器，请手动访问上述地址');
|
||||
} else {
|
||||
console.log(' 已自动打开浏览器');
|
||||
}
|
||||
console.log('');
|
||||
});
|
||||
});
|
||||
|
||||
// 优雅退出
|
||||
process.on('SIGINT', () => {
|
||||
console.log('');
|
||||
console.log('正在停止服务器...');
|
||||
server.close(() => {
|
||||
console.log('服务器已停止');
|
||||
process.exit(0);
|
||||
});
|
||||
});
|
||||
|
||||
module.exports = server;
|
||||
@@ -1,26 +0,0 @@
|
||||
#!/bin/bash
|
||||
|
||||
# AI 智能抽背助手 - 原型系统启动脚本
|
||||
#
|
||||
# 使用方法:
|
||||
# ./start.sh
|
||||
#
|
||||
# @author generate-prototype-grid skill
|
||||
# @date 2026-03-28
|
||||
|
||||
echo "=========================================="
|
||||
echo " AI 智能抽背助手 - 原型系统启动"
|
||||
echo "=========================================="
|
||||
echo ""
|
||||
echo "正在启动本地预览服务器..."
|
||||
echo ""
|
||||
|
||||
# 检查 Node.js 是否安装
|
||||
if ! command -v node &> /dev/null; then
|
||||
echo "错误: 未找到 Node.js"
|
||||
echo "请先安装 Node.js: https://nodejs.org/"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# 启动服务器
|
||||
node server.js
|
||||
@@ -1,297 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>文档查看器 - AI 智能抽背助手</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/markdown-it@14.0.0/dist/markdown-it.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
/* Markdown 内容样式 */
|
||||
.markdown-body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #24292f;
|
||||
}
|
||||
.markdown-body h1,
|
||||
.markdown-body h2,
|
||||
.markdown-body h3,
|
||||
.markdown-body h4,
|
||||
.markdown-body h5,
|
||||
.markdown-body h6 {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
}
|
||||
.markdown-body h1 {
|
||||
font-size: 2em;
|
||||
border-bottom: 1px solid #d8dee4;
|
||||
padding-bottom: 0.3em;
|
||||
}
|
||||
.markdown-body h2 {
|
||||
font-size: 1.5em;
|
||||
border-bottom: 1px solid #d8dee4;
|
||||
padding-bottom: 0.3em;
|
||||
}
|
||||
.markdown-body h3 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
.markdown-body h4 {
|
||||
font-size: 1em;
|
||||
}
|
||||
.markdown-body p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.markdown-body code {
|
||||
padding: 0.2em 0.4em;
|
||||
margin: 0;
|
||||
font-size: 85%;
|
||||
background-color: rgba(175, 184, 193, 0.2);
|
||||
border-radius: 6px;
|
||||
font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
|
||||
}
|
||||
.markdown-body pre {
|
||||
padding: 16px;
|
||||
overflow: auto;
|
||||
font-size: 85%;
|
||||
line-height: 1.45;
|
||||
background-color: #1f2937;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.markdown-body pre code {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
color: #e5e7eb;
|
||||
}
|
||||
.markdown-body ul,
|
||||
.markdown-body ol {
|
||||
padding-left: 2em;
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.markdown-body li {
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
.markdown-body table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
width: 100%;
|
||||
}
|
||||
.markdown-body table th {
|
||||
font-weight: 600;
|
||||
background-color: #f6f8fa;
|
||||
border: 1px solid #d8dee4;
|
||||
padding: 6px 13px;
|
||||
}
|
||||
.markdown-body table td {
|
||||
border: 1px solid #d8dee4;
|
||||
padding: 6px 13px;
|
||||
}
|
||||
.markdown-body table tr:nth-child(2n) {
|
||||
background-color: #f6f8fa;
|
||||
}
|
||||
.markdown-body blockquote {
|
||||
padding: 0 1em;
|
||||
color: #57606a;
|
||||
border-left: 0.25em solid #d8dee4;
|
||||
margin: 0 0 16px 0;
|
||||
}
|
||||
.markdown-body a {
|
||||
color: #0969da;
|
||||
text-decoration: none;
|
||||
}
|
||||
.markdown-body a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.markdown-body img {
|
||||
max-width: 100%;
|
||||
box-sizing: content-box;
|
||||
background-color: #fff;
|
||||
}
|
||||
.markdown-body hr {
|
||||
height: 0.25em;
|
||||
padding: 0;
|
||||
margin: 24px 0;
|
||||
background-color: #d8dee4;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* 加载动画 */
|
||||
.loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 200px;
|
||||
}
|
||||
.loading-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 4px solid #f3f3f3;
|
||||
border-top: 4px solid #3498db;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* 错误提示 */
|
||||
.error {
|
||||
background-color: #fee;
|
||||
border: 1px solid #fcc;
|
||||
padding: 16px;
|
||||
border-radius: 6px;
|
||||
color: #c33;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
<!-- 顶部导航栏 -->
|
||||
<nav class="bg-white shadow-sm sticky top-0 z-50">
|
||||
<div class="max-w-7xl mx-auto px-4 py-3 flex items-center gap-4">
|
||||
<a href="docs-index.html" class="text-gray-600 hover:text-gray-800">
|
||||
<i class="fas fa-arrow-left"></i> 返回文档中心
|
||||
</a>
|
||||
<h1 id="doc-title" class="text-xl font-semibold flex-1">文档加载中...</h1>
|
||||
<div class="flex items-center gap-2">
|
||||
<button onclick="copyLink()" class="px-3 py-1.5 text-sm bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200">
|
||||
<i class="fas fa-link mr-1"></i>复制链接
|
||||
</button>
|
||||
<button onclick="printDoc()" class="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700">
|
||||
<i class="fas fa-print mr-1"></i>打印
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="max-w-7xl mx-auto px-4 py-8">
|
||||
<!-- 加载动画 -->
|
||||
<div id="loading" class="loading">
|
||||
<div class="loading-spinner"></div>
|
||||
</div>
|
||||
<!-- 错误提示 -->
|
||||
<div id="error" class="error hidden"></div>
|
||||
<!-- Markdown 内容 -->
|
||||
<article id="content" class="markdown-body bg-white rounded-xl shadow-sm p-8 hidden"></article>
|
||||
</main>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer class="text-center py-6 text-sm text-gray-500">
|
||||
© 2026 AI 智能抽背助手 | 基于 markdown-it 渲染
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// 初始化 markdown-it - 安全配置（禁用 HTML 以防止 XSS）
|
||||
const md = window.markdownit({
|
||||
html: false, // 禁用 HTML 标签以防止 XSS
|
||||
linkify: true,
|
||||
typographer: true,
|
||||
breaks: true
|
||||
});
|
||||
|
||||
// 获取 URL 参数
|
||||
function getQueryParam(name) {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
return params.get(name);
|
||||
}
|
||||
|
||||
// 复制链接
|
||||
function copyLink() {
|
||||
const url = window.location.href;
|
||||
navigator.clipboard.writeText(url)
|
||||
.then(() => {
|
||||
alert('链接已复制到剪贴板');
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('复制失败:', err);
|
||||
});
|
||||
}
|
||||
|
||||
// 打印文档
|
||||
function printDoc() {
|
||||
window.print();
|
||||
}
|
||||
|
||||
// 显示错误信息
|
||||
function showError(message) {
|
||||
document.getElementById('loading').classList.add('hidden');
|
||||
document.getElementById('error').classList.remove('hidden');
|
||||
document.getElementById('error').textContent = message;
|
||||
}
|
||||
|
||||
// 加载并渲染文档 - 优化：并行尝试所有路径
|
||||
async function loadAndRenderDoc() {
|
||||
const docPath = getQueryParam('doc');
|
||||
if (!docPath) {
|
||||
showError('未指定文档路径，请使用 ?doc=文件名.md 参数访问');
|
||||
return;
|
||||
}
|
||||
|
||||
// 验证 docPath 安全性 - 防止路径遍历
|
||||
if (docPath.includes('..') || docPath.includes('/') || docPath.includes('\\')) {
|
||||
showError('无效的文档路径');
|
||||
return;
|
||||
}
|
||||
|
||||
// 从文件名提取标题
|
||||
const title = docPath
|
||||
.replace(/\.md$/, '')
|
||||
.replace(/-/g, ' ')
|
||||
.replace(/\b\w/g, l => l.toUpperCase());
|
||||
document.getElementById('doc-title').textContent = title;
|
||||
|
||||
// 尝试多个路径查找文档 - 并行请求提高效率
|
||||
const possiblePaths = [
|
||||
`../planning-artifacts/${docPath}`,
|
||||
`../docs/${docPath}`,
|
||||
`../${docPath}`,
|
||||
`planning-artifacts/${docPath}`,
|
||||
`docs/${docPath}`,
|
||||
docPath
|
||||
];
|
||||
|
||||
// 并行尝试所有路径，使用 Promise.race 获取第一个成功的结果
|
||||
const fetchPromises = possiblePaths.map(async (path) => {
|
||||
try {
|
||||
const response = await fetch(path);
|
||||
if (response.ok) {
|
||||
return { path, markdown: await response.text() };
|
||||
}
|
||||
return null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
});
|
||||
|
||||
const results = await Promise.all(fetchPromises);
|
||||
const successfulResult = results.find(r => r !== null);
|
||||
|
||||
if (!successfulResult) {
|
||||
showError('无法加载文档，请检查文件名是否正确');
|
||||
return;
|
||||
}
|
||||
|
||||
// 渲染 Markdown（html: false 配置已防止 XSS）
|
||||
const html = md.render(successfulResult.markdown);
|
||||
|
||||
// 显示内容 - 使用 textContent 设置标题防止 XSS
|
||||
document.getElementById('loading').classList.add('hidden');
|
||||
document.getElementById('content').classList.remove('hidden');
|
||||
document.getElementById('content').innerHTML = html;
|
||||
}
|
||||
|
||||
// 页面加载完成后执行
|
||||
window.addEventListener('DOMContentLoaded', loadAndRenderDoc);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user