# RecallNote

**Repository Path**: atuo-200/recall-note

## Basic Information

- **Project Name**: RecallNote
- **Description**: 一个Markdown笔记应用，支持实时预览、格式化工具栏和AI辅助内容优化功能。
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-11
- **Last Updated**: 2025-07-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## RecallNote - 智能笔记与记忆卡片应用

RecallNote是一款基于间隔重复学习法的个人笔记应用，通过将笔记内容转化为记忆卡片，并结合科学的复习计划，帮助用户更有效地掌握和记忆知识。

## ✨ 功能特点

- **笔记管理**：创建和组织笔记本，记录学习内容

- **间隔重复学习**：基于SM-2算法的科学复习系统

- **AI润色功能**：一键优化笔记内容，提升表达质量

- **Markdown支持**：markdown文本格式化与预览功能

- **图片插入**：支持直接粘贴图片到笔记中，并上传到第三方图床（图床服务相关代码在proxy-upload.js，请自行部署）

  ![image-20250712015543075](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20250712015543075.png)

## 🔧 技术栈

### 前端
- React 18
- TypeScript
- CSS Modules

### 后端
- Flask (Python)
- Supabase (数据库)
- OpenAI API (AI润色功能)

## 🚀 快速开始

### 安装步骤

1. 克隆仓库
```bash
git clone https://gitee.com/atuo-200/recall-note
cd recall_note
```

2. 安装前端依赖
```bash
npm install
```

3. 安装后端依赖
```bash
cd backstage_service
pip install -r requirements.txt
```

4. 环境配置
```bash
# 在backstage_service目录创建.env文件
cd backstage_service
touch .env

# 编辑.env文件，添加必要配置
UPLOAD_API_URL=your_upload_api_url
UPLOAD_API_TOKEN=your_upload api_token
SUPABASE_URL=your_supabase_url
SUPABASE_KEY=your_supabase_key
OPENAI_API_KEY=your_openai_api_key
```

5. 启动应用
```bash
# 启动后端服务（在backstage_service目录下）
python app.py

# 启动前端开发服务器（在项目根目录）
npm start

# 启动图床上传服务-端口转发，解决cors跨域问题（在项目根目录）
node proxy-upload.js
```

6. 访问应用
    浏览器访问 `http://localhost:3000`

### 数据结构与存储

关于该笔记应用的数据库设计和Supabase配置

RecallNote使用[Supabase](https://supabase.io/)作为数据存储解决方案，一个基于PostgreSQL的开源Firebase替代品。

#### 数据库表结构

#### notebooks表

| 字段名     | 类型      | 说明               |
| ---------- | --------- | ------------------ |
| id         | uuid      | 主键               |
| name       | varchar   | 笔记本名称         |
| card_count | integer   | 笔记本中的卡片数量 |
| created_at | timestamp | 创建时间           |

#### cards表

| 字段名      | 类型      | 说明                     |
| ----------- | --------- | ------------------------ |
| id          | uuid      | 主键                     |
| notebook_id | uuid      | 外键，关联notebooks表    |
| title       | varchar   | 卡片标题                 |
| content     | text      | 卡片内容（Markdown格式） |
| created_at  | timestamp | 创建时间                 |
| next_review | timestamp | 下次复习时间             |
| ease_factor | numeric   | 难度因子(SM-2算法参数)   |
| repetition  | integer   | 已复习次数               |
| interval    | integer   | 复习间隔(天)             |

#### 实体关系图

```mermaid
erDiagram
    NOTEBOOKS {
        uuid id PK
        varchar name
        integer card_count
        timestamp created_at
    }
    
    CARDS {
        uuid id PK
        uuid notebook_id FK
        varchar title
        text content
        timestamp created_at
        timestamp next_review
        numeric ease_factor
        integer repetition
        integer interval
    }
    
    NOTEBOOKS ||--o{ CARDS : "contains"
```

#### Supabase配置

1. **创建项目**：在[Supabase控制台](https://app.supabase.io/)创建新项目

2. **创建数据表**：执行以下SQL语句创建所需表

```sql
-- 创建笔记本表
CREATE TABLE notebooks (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  name VARCHAR NOT NULL,
  card_count INTEGER DEFAULT 0,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- 创建卡片表
CREATE TABLE cards (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  notebook_id UUID REFERENCES notebooks(id) ON DELETE CASCADE,
  title VARCHAR NOT NULL,
  content TEXT NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  next_review TIMESTAMP WITH TIME ZONE NOT NULL,
  ease_factor NUMERIC DEFAULT 2.5,
  repetition INTEGER DEFAULT 0,
  interval INTEGER DEFAULT 0
);

-- 创建索引提升查询性能
CREATE INDEX cards_notebook_id_idx ON cards(notebook_id);
CREATE INDEX cards_next_review_idx ON cards(next_review);
```

3. **配置API访问**：

在项目的`.env`文件中添加Supabase相关配置：

```
SUPABASE_URL=https://your-project-ref.supabase.co
SUPABASE_KEY=your-supabase-anon-key
```

#### API调用结构

应用通过以下API与Supabase数据库交互：

- **笔记本API** (`notebookApi.ts`)
  - `fetchNotebooks()` - 获取所有笔记本
  - `createNotebook(name)` - 创建新笔记本
  - `deleteNotebook(id)` - 删除笔记本

- **卡片API** (`cardApi.ts`)
  - `fetchCards(notebookId?)` - 获取特定笔记本或所有卡片
  - `createCard(card)` - 创建新卡片
  - `updateCard(card)` - 更新卡片内容
  - `deleteCard(id)` - 删除卡片

- **复习API** (`reviewApi.ts`)
  - `fetchReviewCards(notebookId?)` - 获取今日待复习卡片
  - `submitCardReview(cardId, quality)` - 提交复习结果，更新复习计划

后端服务会处理数据转换、业务逻辑和Supabase的交互，前端通过这些API接口与数据进行交互而不需要直接处理数据库操作。

## 💻 开发指南

### 项目结构


```mermaid
flowchart TD
    A[recall_note/] --> B[src/ 前端源代码]
    A --> C[backstage_service/ 后端服务]
    A --> D[public/ 公共资源]
    B --> B1[components/ React组件]
    B1 --> B1a[Layout/ 布局组件]
    B1 --> B1b[Notebook/ 笔记本组件]
    B1 --> B1c[Review/ 复习组件]
    B --> B2[types/ TS类型定义]

    C --> C1[app.py Flask主文件]
    C --> C2[requirements.txt Python依赖]
```

### 新增组件

1. 在相应目录创建组件文件
2. 导入必要的依赖
3. 实现组件逻辑
4. 在适当位置引入并使用

### 样式修改

项目使用CSS Modules，每个组件样式文件命名为`[ComponentName].module.css`。修改样式后需更新对应的类型声明文件。

### API调用

所有API调用都集中在各模块的API文件中（如`notebookApi.ts`, `cardApi.ts`, `reviewApi.ts`）。添加新的API调用时，请遵循现有模式。

## 📖 交互逻辑

### 创建笔记流程

```mermaid
flowchart TD
    A[进入应用] --> B[创建笔记本]
    B --> C[创建新卡片]
    C --> D[编辑卡片内容]
    D --> E{需要AI润色?}
    E -- 是 --> F[点击AI完善]
    F --> G[查看润色结果]
    G --> H{接受润色?}
    H -- 是 --> I[保存卡片]
    H -- 否 --> D
    E -- 否 --> I
```

### 复习流程

```mermaid
flowchart TD
    A[进入复习页面] --> B[选择笔记本]
    B --> C[查看待复习卡片]
    C --> D[点击显示答案]
    D --> E{评价记忆效果}
    E -- 记得 --> F[延长复习间隔]
    E -- 模糊 --> G[适度延长间隔]
    E -- 忘记 --> H[重置复习间隔]
    F & G & H --> I{还有卡片?}
    I -- 是 --> C
    I -- 否 --> J[查看复习统计]
```



## 🤝 贡献指南

欢迎贡献代码、报告问题或提出新功能建议！请遵循以下步骤：

1. Fork项目
2. 创建特性分支 (`git checkout -b feature/amazing-feature`)
3. 提交更改 (`git commit -m 'Add some amazing feature'`)
4. 推送到分支 (`git push origin feature/amazing-feature`)
5. 创建Pull Request

## 📝 未来计划

- [ ] 用户认证系统
- [ ] 数据导入/导出功能
- [ ] 移动应用版本

---

开发者: [阿坨]  
联系方式: 2314393852@qq.com