123 lines
5.4 KiB
Markdown
123 lines
5.4 KiB
Markdown
# 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，保持职责清晰）
|
||
|