# 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 技能自动生成*