AI QuizCard

依据 stitch_ai/titanium_glow_3.0 设计规范打造的「知识卡片」练习应用，包含网页端和微信小程序端两份能跑的实现，数据接口完全一致，方便日后接同一个后端。

---

目录结构

├── web/                      网页端（纯前端 SPA，可直接用静态服务跑）
│   ├── index.html              卡片库（首页）
│   ├── mode.html               选择练习模式
│   ├── practice.html           练习页（Deep + Quick 共用，URL 参数切换）
│   ├── report.html             练习报告
│   ├── create.html             新建 / 编辑卡片集
│   └── assets/
│       ├── style.css            Titanium Glow 3.0 共享样式
│       ├── store.js             数据层 (async API + localStorage)
│       ├── seed.js              默认题库（3 集 × 5 题）
│       └── shell.js             顶栏 / 底栏注入
└── miniprogram/              微信小程序端
                              （另见 showcase/ 为网页展示版，DESIGN.md 为设计规范）
    ├── app.{js,json,wxss}
    ├── project.config.json
    ├── sitemap.json
    ├── utils/
    │   ├── store.js             同款数据层（wx.storage 实现）
    │   └── seed.js              同款种子数据
    └── pages/
        ├── library/             卡片库
        ├── mode/                模式选择
        ├── practice/            练习（Deep + Quick）
        ├── report/              报告
        └── create/              新建 / 编辑

---

网页端：跑起来

任何静态服务都行。最简：

cd web
python -m http.server 8765
# 或：npx serve -p 8765

打开 http://127.0.0.1:8765/

⚠️ 不能直接双击 index.html 打开 (file:// 协议)，因为页面用了 ES Module。必须经过 http 服务。

核心流程

1. 首页（卡片库）→ 点 开始练习
2. 选择模式：Deep（词卡式，节奏舒缓）/ Quick（连发选择，快节奏）
3. 答题（自动洗牌选项顺序）→ 即时反馈对错与解析
4. 结束自动进入报告页：得分环 + 用时 + 错题列表
5. 报告页可点 再练错题 / 重练这一组

数据

默认存到 localStorage（quizcard.v1），刷新不丢，可导出 / 导入 JSON 备份。

切到真后端：编辑 assets/store.js 顶部：

const USE_REMOTE = true;            // ← 改这里
const REMOTE_BASE = 'https://...';  // ← 你的后端

remote.* 里已经写好对应的 fetch 调用骨架，按你后端接口微调即可。

---

微信小程序：跑起来

1. 打开微信开发者工具
2. 新建项目 → 选择 导入项目
3. 目录选 miniprogram/
4. AppID 用 测试号（项目里写的是 touristappid）
5. 点编译，模拟器上就能看到

注意

• 小程序里 backdrop-filter 兼容差，毛玻璃效果用半透明 + 多层阴影模拟
• 数据存到 wx.setStorageSync('quizcard.v1', ...)，首次启动自动注入种子题库
• 路由：tabBar 三个底栏 (卡片库 / 练习 / 新建) + practice/report 用 navigateTo

---

数据模型（两端一致）

Deck {
  id: string
  title: string
  subject: string         // "英语" / "物理" / ...
  desc?: string
  createdAt: number
  lastPracticed?: number
  mastery?: number        // 0-100, 上次正确率
}

Card {
  id: string
  deckId: string
  prompt: string
  options: { text: string, correct: boolean }[]
  hint?: string
  lang?: 'zh-en'          // 触发 deep 模式词卡样式
}

Session {
  id: string
  deckId: string
  mode: 'deep' | 'quick'
  startedAt: number
  finishedAt: number
  items: { cardId, picked, correct, ms }[]
}

---

接后端时该做的事

两端 Store 模块都暴露同一组方法：

listDecks() / getDeck(id) / createDeck(d) / updateDeck(id, p) / deleteDeck(id)
listCards(deckId) / createCard(c) / updateCard(id, p) / deleteCard(id)
saveSession(s) / getSession(id)

任何 REST/GraphQL 后端实现这套，把 web 端的 USE_REMOTE 打开 + 小程序端把 utils/store.js 替换成 wx.request 版即可。