# card-box

**Repository Path**: woligequ/card-box

## Basic Information

- **Project Name**: card-box
- **Description**: 一款简单易用的卡盒学习小程序，通过正反面卡片帮助你随时随地记录、复习任何内容~
- **Primary Language**: TypeScript
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 9
- **Created**: 2025-05-15
- **Last Updated**: 2025-05-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center">
  <img width="160" src="./images/miniprogram.png">
</p>

<h1 align="center">学习卡盒</h1>

## 📝 项目介绍

学习卡盒是一个类似于 anki 的卡片式学习小程序，每个用户可以创建多个卡盒，每个卡盒中可以放很多张卡片，每张卡片分为正反两面：

- 正面可以用来记录 **“问题 \ 概念 \ 中英文”**
- 反面可以用来记录 **“答案 \ 概念解析 \ 中英文的翻译”**

<p align="center">
  <img width="400" src="./images/cards.png">
</p>

### ✨ 核心功能

#### 📁 目录管理

- **多目录支持**：每个用户拥有默认目录，可创建多个目录分类管理卡盒

#### 📦 卡盒管理

- **AI 生成卡盒**：通过描述需求让 AI 自动卡片，支持预览和自定义上下文
- **创建空白卡盒**：手动创建并添加卡片
- **导出/导入卡盒**：以固定格式导出卡盒内容为文本，或从文本导入卡片
- **卡盒封面颜色**：自定义卡盒外观颜色
- **卡盒排序**：调整卡盒在目录中的显示顺序
- **移动目录**：将卡盒移动到其他目录
- **正反面交换**：一键交换卡盒中所有卡片的正反面内容和笔记

#### 📝 卡片管理

- **AI 生成卡片**：通过 AI 生成卡片并添加到指定卡盒
- **批量删除**：支持多选删除卡片
- **卡片排序**：调整卡片在卡盒中的顺序
- **卡片关联**：建立卡片之间的关联关系，支持查看和跳转
- **卡片笔记**：为卡片添加额外笔记，支持 AI 生成笔记
- **朗读功能**：支持中英文朗读卡片内容
- **翻面模式**：在卡盒中快速翻面查看内容，适合背单词场景
- **样式设置**：自定义卡片排版（居左/居中）、文字大小、序号显示等

#### 🔍 搜索功能

- **全局搜索**：通过关键字搜索所有目录中的卡片内容
- **快速定位**：点击搜索结果直接跳转到对应卡盒和卡片位置

#### 👤 用户相关功能

- **学习统计**：记录学习时间并生成热力图，直观展示学习进度
- **AI 额度管理**：查看 AI 功能的剩余使用额度

#### 📚 学习相关功能

- **回忆模式**：展示卡片正面，用户自行判断是否记住反面内容
- **单选模式**：AI 生成混淆选项，用户选择正确答案，错误时提供解析
- **复述模式**：支持文字或语音输入回答，AI 评分判断正误
- **学习计划**：基于艾宾浩斯记忆曲线，科学安排每日学习和复习内容
- **练一练模式**：无需制定计划，随时选择学习模式进行练习

#### 🏪 卡盒集市

- **卡盒列表**：系统提供各类现成卡盒（英语短文、单词、考试知识点等）
- **分类浏览**：按类别查看和导入卡盒

## 🛠️ 技术栈

- **前端框架**：[Vue 3](https://v3.vuejs.org/) + [TypeScript](https://www.typescriptlang.org/)
- **跨端框架**：[uni-app](https://uniapp.dcloud.io/)
- **构建工具**：[Vite 5](https://vitejs.dev/)
- **CSS 框架**：[UnoCSS](https://github.com/unocss/unocss)
- **UI 组件**：[wot-design-uni](https://github.com/Moonofweisheng/wot-desig-uni)
- **后端服务**：微信云开发（数据库、云函数）

## 🚀 快速开始

### 安装依赖

```bash
pnpm i
```

### 开发模式

```bash
pnpm dev:mp-weixin
```

然后打开微信开发者工具，导入本地文件夹，选择本项目的 `dist/dev/mp-weixin` 文件夹

### 构建发布

```bash
pnpm build:mp-weixin
```

打包后的文件在 `dist/build/mp-weixin`，通过微信开发者工具导入并上传