Initial commit: Flutter 无书应用项目

2026-03-30 02:35:31 +08:00
commit 9175ff9905
566 changed files with 103261 additions and 0 deletions
--- a/ht/docs/superpowers/specs/2026-03-27-poetry-quiz-frontend-design.md
+++ b/ht/docs/superpowers/specs/2026-03-27-poetry-quiz-frontend-design.md
@@ -0,0 +1,111 @@
+# 古诗文答题系统前端设计文档
+
+## 概述
+为 `p1/api.php` API 创建一个古风风格的前端答题页面，包含题目获取、答案提交、提示功能和答题统计。
+
+## 设计决策
+
+### 布局风格
+- **选择**: 单卡片居中布局
+- **原因**: 答题系统一次只显示一道题，居中卡片布局更专注
+
+### 配色方案
+- **选择**: 古风配色
+- **原因**: 符合古诗文主题，营造文化氛围
+
+### 功能模块
+- 答题统计（答对/总题数）
+- 题目导航（数字按钮）
+- 题目详情（作者、朝代、年级、类型）
+
+## 页面架构
+
+```
+┌─────────────────────────────────────────────┐
+│                  页面头部                    │
+│         📜 古诗文答题 · 统计信息             │
+├─────────────────────────────────────────────┤
+│            ┌─────────────────┐              │
+│            │   题目导航条     │              │
+│            │  1 2 3 4 5 ...  │              │
+│            └─────────────────┘              │
+│                                             │
+│            ┌─────────────────┐              │
+│            │    题目卡片     │              │
+│            │   (宣纸质感)    │              │
+│            │   [选项按钮]    │              │
+│            │   💡 提示按钮   │              │
+│            └─────────────────┘              │
+│                                             │
+│            ┌─────────────────┐              │
+│            │   题目详情      │              │
+│            │ 作者·朝代·年级  │              │
+│            └─────────────────┘              │
+└─────────────────────────────────────────────┘
+```
+
+## 配色方案
+
+```css
+--bg-primary: #f5f0e6;      /* 米色背景 */
+--bg-card: #fffef9;         /* 宣纸白 */
+--text-primary: #5d4e37;    /* 棕色文字 */
+--text-secondary: #8b7355;  /* 浅棕色 */
+--accent: #c94c4c;          /* 朱红色（印章色） */
+--border: #d4c5a9;          /* 边框色 */
+--success: #4a7c59;         /* 正确提示绿 */
+--error: #c94c4c;           /* 错误提示红 */
+```
+
+## 视觉元素
+
+- 卡片圆角: 12px
+- 选项按钮: 印章风格，方形圆角，悬停时微微放大
+- 动画: 平滑过渡 0.3s
+- 字体: 题目使用「楷体」，选项使用「微软雅黑」
+
+## 交互流程
+
+1. 页面初始化 → 从 URL 获取 id 参数（默认 id=1）
+2. 调用 API 获取题目 → 显示题目卡片
+3. 用户选择选项 → 提交答案
+4. API 返回结果 → 显示反馈
+   - 正确: 显示成功动画，自动加载下一题
+   - 错误: 显示错误提示，可点击「提示」按钮
+   - 提示: 显示提示信息
+
+## API 调用
+
+```javascript
+// 获取题目
+GET api.php?id=1
+
+// 提交答案
+GET api.php?id=1&msg=1
+
+// 获取提示
+GET api.php?id=1&msg=提示
+```
+
+## 状态管理
+
+- `currentId`: 当前题目 ID
+- `correctCount`: 答对题数
+- `totalCount`: 总答题数
+- `selectedOption`: 当前选中选项
+
+## 文件结构
+
+```
+p1/
+├── index.html    # 页面结构
+├── api.js        # API 调用与交互逻辑
+├── api.php       # 后端 API
+└── API文档.md    # API 文档
+```
+
+## 错误处理
+
+- 网络错误: 显示友好提示，提供重试按钮
+- API 错误: 显示错误信息
+- 题目不存在: 提示用户