5.4 KiB
5.4 KiB
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
- 顶部：Logo + 产品一句话
- 表单区：邮箱、密码、主按钮（登录/注册切换 Tab）
- 辅助区：错误提示（表单下方），次按钮（忘记密码/返回首页）
Sections & Components
- AuthTabs：登录/注册切换（同一页完成）
- FormField：输入框带校验（必填、邮箱格式）
- FeedbackBanner：展示认证失败原因（如密码错误）
3. Page: 首页（题目与引导）
Layout
- 顶部导航 + 内容双列：左侧筛选，右侧题目列表（CSS Grid：280px + 1fr）。
Meta Information
- title：题目练习｜MySQL 查询练习
- description：按新手/一般/进阶选择题目进行练习。
Page Structure
- TopNav（全局）：Logo、导航（题目/数据库管理）、用户菜单（退出/重新引导）
- LeftPanel：分级切换、新手引导入口、状态筛选、搜索框
- MainList：题目卡片列表（默认按模块过滤） + 分页/加载更多（任选其一）
- 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
- TopNav：返回题目列表、当前题目标题、当前激活数据库标识
- Left（QuestionPanel）
- 题目描述（支持代码块/要点）
- 目标输出说明（字段/排序/过滤）
- 表结构入口（按钮打开 Drawer/Modal 展示表与字段，只读）
- Center（EditorPanel）
- Monaco Editor（SQL 高亮）
- 操作区：运行、重置、保存草稿（可自动保存，仅展示状态）
- 运行状态：loading、耗时、错误（语法/权限/超时）
- Right（ResultPanel）
- 查询结果表格（表头固定、横向滚动）
- 判题结论：通过/未通过
- 最小提示：例如缺字段、行数不一致、排序不一致（不泄露完整答案）
Interaction & States
- Run：触发执行后禁用按钮直到返回；错误时高亮并展示可读信息
- Pass：展示绿色状态并可“下一题”
- Fail：展示差异点与建议方向（简短）
防误操作（库不匹配）
- 若当前激活数据库与题目要求的数据库不一致：
- 结果区展示醒目提示
- 提供“一键切换到推荐模拟库”
5. Page: 数据库管理页
Layout
- 上下结构：顶部说明 + 两个卡片区（模拟库、导入库），右侧可显示“当前激活库”概览。
Meta Information
- title：数据库管理｜MySQL 查询练习
- description：选择模拟数据库或导入你的自定义数据库用于练习。
Page Structure
- Header：说明“练习将基于当前激活数据库运行”
- MockDBSection：模拟库列表卡片（名称、简介、表数量、激活按钮）
- ImportSection：上传初始化 SQL 文件（建表+数据）
- ActiveDBSummary：当前激活库信息（名称、来源、导入时间、查看表结构）
Sections & Components
- MockDBCard：点击设为激活，成功后 toast 提示
- UploadInitSql：拖拽上传 + 进度条 + 成功/失败提示（失败给出原因摘要）
- TablePreviewDrawer：只读展示表/字段列表（避免在此页执行 SQL，保持职责清晰）