# MySQL 查询练习网站｜页面设计说明（Desktop-first）

## 1. Global Styles（全局规范）
- 设计基调：学习型工具，信息密度中高，强调“编辑器可读性”和“结果对比清晰”。
- Design tokens（建议）
  - Background: #0B1220（深色）/ #FFFFFF（浅色，可选主题开关，默认深色）
  - Primary: #3B82F6；Success: #22C55E；Warning: #F59E0B；Danger: #EF4444
  - Text: 主文 #E5E7EB；次文 #9CA3AF；反白 #111827
  - Font：系统字体 + 等宽（编辑器/SQL 区：ui-monospace）
  - 圆角：8px；卡片阴影：轻量；分割线：1px #1F2937
- 交互状态
  - Button：默认/hover 提亮 6–10%；disabled 降低不透明度并禁用点击
  - Link：hover 下划线；当前路由高亮
- 响应式（桌面优先）
  - ≥1200px：练习页三栏；
  - 768–1199px：左右栏折叠为抽屉；
  - <768px：编辑器与结果上下堆叠（仍可用）。

## 2. Page: 登录/注册页
### Layout
- 居中单卡片（max-width 420px），背景使用柔和渐变或插画空白区。

### Meta Information
- title：登录｜MySQL 查询练习
- description：登录后开始 MySQL 分级练习。

### Page Structure
1. 顶部：Logo + 产品一句话
2. 表单区：邮箱、密码、主按钮（登录/注册切换 Tab）
3. 辅助区：错误提示（表单下方），次按钮（忘记密码/返回首页）

### Sections & Components
- AuthTabs：登录/注册切换（同一页完成）
- FormField：输入框带校验（必填、邮箱格式）
- FeedbackBanner：展示认证失败原因（如密码错误）

## 3. Page: 首页（题目与引导）
### Layout
- 顶部导航 + 内容双列：左侧筛选，右侧题目列表（CSS Grid：280px + 1fr）。

### Meta Information
- title：题目练习｜MySQL 查询练习
- description：按新手/一般/进阶选择题目进行练习。

### Page Structure
1. TopNav（全局）：Logo、导航（题目/数据库管理）、用户菜单（退出/重新引导）
2. LeftPanel：分级切换、新手引导入口、状态筛选、搜索框
3. MainList：题目卡片列表（默认按模块过滤） + 分页/加载更多（任选其一）
4. ContinueCard：继续上次练习（若存在）

### 强关联展示
- TopNav 右侧展示“当前数据库”胶囊（名称 + 来源），帮助新手始终知道自己在对哪个库练习。
- 题目列表仅展示你选择模块对应的题库。

### Sections & Components
- LevelSegment：三段式切换（新手/一般/进阶）
- SearchInput：关键词筛选（标题/题干关键字）
- StatusFilter：未做/已做
- ExerciseCard：标题、难度徽标、完成状态、进入按钮
- OnboardingTrigger：按钮“新手引导”，点击后弹出引导

### 新手引导（Overlay/Modal，不单独页面）
- Step 1：提示去“数据库管理”选择模拟库
- Step 2：回到首页，选择一题进入练习
- Step 3：练习页说明“编辑-运行-看结果-判题”
- 支持：跳过/上一步/下一步/完成；完成后记录状态，避免重复打扰

## 4. Page: 练习页（SQL 编辑与判题）
### Layout
- 桌面三栏布局（CSS Grid：320px | 1fr | 420px）
  - 左：题目与表结构入口
  - 中：编辑器与运行
  - 右：结果/判题/提示

### Meta Information
- title：做题｜{题目标题}｜MySQL 查询练习
- description：在线编写并运行 MySQL 查询，实时查看结果与判题。

### Page Structure
1. TopNav：返回题目列表、当前题目标题、当前激活数据库标识
2. Left（QuestionPanel）
   - 题目描述（支持代码块/要点）
   - 目标输出说明（字段/排序/过滤）
   - 表结构入口（按钮打开 Drawer/Modal 展示表与字段，只读）
3. Center（EditorPanel）
   - Monaco Editor（SQL 高亮）
   - 操作区：运行、重置、保存草稿（可自动保存，仅展示状态）
   - 运行状态：loading、耗时、错误（语法/权限/超时）
4. Right（ResultPanel）
   - 查询结果表格（表头固定、横向滚动）
   - 判题结论：通过/未通过
   - 最小提示：例如缺字段、行数不一致、排序不一致（不泄露完整答案）

### Interaction & States
- Run：触发执行后禁用按钮直到返回；错误时高亮并展示可读信息
- Pass：展示绿色状态并可“下一题”
- Fail：展示差异点与建议方向（简短）

### 防误操作（库不匹配）
- 若当前激活数据库与题目要求的数据库不一致：
  - 结果区展示醒目提示
  - 提供“一键切换到推荐模拟库”

## 5. Page: 数据库管理页
### Layout
- 上下结构：顶部说明 + 两个卡片区（模拟库、导入库），右侧可显示“当前激活库”概览。

### Meta Information
- title：数据库管理｜MySQL 查询练习
- description：选择模拟数据库或导入你的自定义数据库用于练习。

### Page Structure
1. Header：说明“练习将基于当前激活数据库运行”
2. MockDBSection：模拟库列表卡片（名称、简介、表数量、激活按钮）
3. ImportSection：上传初始化 SQL 文件（建表+数据）
4. ActiveDBSummary：当前激活库信息（名称、来源、导入时间、查看表结构）

### Sections & Components
- MockDBCard：点击设为激活，成功后 toast 提示
- UploadInitSql：拖拽上传 + 进度条 + 成功/失败提示（失败给出原因摘要）
- TablePreviewDrawer：只读展示表/字段列表（避免在此页执行 SQL，保持职责清晰）