# note

**Repository Path**: shijiyun/note

## Basic Information

- **Project Name**: note
- **Description**: 笔记本
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-23
- **Last Updated**: 2026-03-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# OneNote 风格笔记本应用

一个类似 Microsoft OneNote 的在线笔记本应用，支持多笔记本、分区、页面的层级结构，提供富文本编辑、标签管理、搜索等功能。

## 功能特性

### 核心功能
- 📚 **笔记本管理** - 创建、编辑、删除笔记本，支持自定义封面和颜色
- 📁 **分区管理** - 在笔记本内创建多个分区，支持重命名、删除、移动
- 📝 **页面管理** - 在分区内创建无限层级页面，支持富文本编辑
- ✨ **富文本编辑器** - 支持文本格式化、标题、列表、图片、表格、代码块等
- 🏷️ **标签系统** - 为页面添加多个标签，支持按标签筛选
- 🔍 **全文搜索** - 跨笔记本、分区、页面的实时搜索
- 💾 **数据持久化** - 本地数据存储，支持导入导出

### 技术特性
- 🚀 **前后端分离** - React + TypeScript + Vite 前端，Node.js + Express + TypeScript 后端
- 🎨 **企业级UI** - 使用 TDesign 组件库，提供一致的用户体验
- 📝 **专业编辑器** - 集成 Slate.js 富文本编辑器
- 🔒 **安全认证** - JWT 身份认证，保护用户数据
- 🐘 **PostgreSQL** - 使用 Prisma ORM 进行数据库操作
- 📦 **Monorepo** - 使用 pnpm workspaces 管理前后端项目

## 技术栈

### 前端
- **框架**: React 18 + TypeScript
- **构建工具**: Vite
- **UI组件库**: TDesign
- **富文本编辑器**: Slate.js
- **状态管理**: Zustand
- **路由**: React Router
- **HTTP客户端**: Axios

### 后端
- **框架**: Node.js + Express + TypeScript
- **数据库**: PostgreSQL
- **ORM**: Prisma
- **认证**: JWT
- **API文档**: Swagger
- **文件上传**: Multer

### 其他
- **包管理**: pnpm
- **代码规范**: ESLint + Prettier
- **版本控制**: Git

## 项目结构

```
note/
├── client/                     # 前端代码
│   ├── src/
│   │   ├── components/         # React 组件
│   │   ├── store/              # Zustand 状态管理
│   │   ├── services/           # API 服务
│   │   ├── types/              # TypeScript 类型定义
│   │   ├── utils/              # 工具函数
│   │   └── App.tsx             # 根组件
│   ├── package.json
│   └── vite.config.ts
├── server/                     # 后端代码
│   ├── src/
│   │   ├── routes/             # API 路由
│   │   ├── middleware/         # 中间件
│   │   ├── types/              # 类型定义
│   │   └── index.ts            # 服务器入口
│   ├── prisma/                 # 数据库schema
│   └── package.json
├── shared/                     # 共享类型和工具
│   └── src/
│       └── index.ts            # 共享类型定义
└── package.json                # Monorepo 根配置
```

## 快速开始

### 前置要求

- Node.js >= 18.0.0
- pnpm >= 8.0.0
- PostgreSQL >= 14.0

### 安装依赖

1. 安装 pnpm（如果还没有安装）:
```bash
npm install -g pnpm
```

2. 安装项目依赖:
```bash
pnpm install
```

### 配置环境变量

1. 后端环境变量:
```bash
cd server
cp .env.example .env
```

编辑 `.env` 文件，配置数据库连接等信息:
```env
PORT=4000
DATABASE_URL="postgresql://username:password@localhost:5432/onenote?schema=public"
JWT_SECRET=your-super-secret-jwt-key-here
CORS_ORIGIN=http://localhost:3000
```

2. 前端环境变量（可选）:
在 `client` 目录下创建 `.env` 文件:
```env
VITE_API_BASE_URL=http://localhost:4000
```

### 数据库设置

1. 创建数据库:
```bash
createdb onenote
```

2. 生成 Prisma 客户端:
```bash
pnpm db:generate
```

3. 推送数据库schema:
```bash
pnpm db:push
```

### 开发模式运行

```bash
# 同时启动前后端（在根目录）
pnpm dev

# 或者分别启动
# 启动后端（在 server 目录）
pnpm dev

# 启动前端（在 client 目录）
pnpm dev
```

### 生产模式构建

```bash
# 构建所有项目
pnpm build

# 启动生产服务器
# 先启动后端
pnpm start:server

# 然后启动前端
pnpm start:client
```

## 可用脚本

### 根目录

- `pnpm dev` - 同时启动前后端开发服务器
- `pnpm dev:client` - 启动前端开发服务器
- `pnpm dev:server` - 启动后端开发服务器
- `pnpm build` - 构建所有项目
- `pnpm lint` - 检查所有项目代码
- `pnpm type-check` - 检查所有项目类型

### 前端

- `pnpm dev` - 启动开发服务器（http://localhost:3000）
- `pnpm build` - 构建生产版本
- `pnpm preview` - 预览生产构建
- `pnpm lint` - 检查代码
- `pnpm type-check` - 检查类型

### 后端

- `pnpm dev` - 启动开发服务器（http://localhost:4000）
- `pnpm build` - 构建项目
- `pnpm start` - 启动生产服务器
- `pnpm lint` - 检查代码
- `pnpm type-check` - 检查类型

### 数据库

- `pnpm db:generate` - 生成 Prisma 客户端
- `pnpm db:push` - 推送 schema 到数据库
- `pnpm db:studio` - 打开 Prisma Studio

## API 文档

启动后端服务器后，访问 http://localhost:4000/api-docs 查看 Swagger API 文档。

## 功能演示

### 创建笔记本
1. 点击左侧笔记本列表顶部的 "+" 按钮
2. 输入笔记本名称
3. 点击"创建"

### 创建分区
1. 选中笔记本后，在分区栏点击 "+" 按钮
2. 输入分区名称
3. 点击"创建"

### 创建页面
1. 在分区栏点击 "+" 按钮创建新页面
2. 输入页面标题
3. 在编辑器中编写内容（自动保存）

### 搜索
在顶部搜索框输入关键词，支持按标题和内容搜索。

### 添加标签
在页面编辑器中，可以为页面添加标签以便分类。

## 开发规范

1. **代码风格**: 使用 ESLint + Prettier 保持代码一致性
2. **命名规范**:
   - 组件: PascalCase
   - 函数/变量: camelCase
   - 常量: UPPER_SNAKE_CASE
   - 接口/类型: PascalCase
3. **Git 提交**: 使用 Conventional Commits 规范
4. **UI 组件**: 优先使用 TDesign 组件

## 开发阶段

项目分为 10 个开发阶段:

1. **第一阶段**: 基础框架搭建 (1-2天)
2. **第二阶段**: 核心数据模型和API (2-3天)
3. **第三阶段**: 笔记本和分区管理 (2天)
4. **第四阶段**: 富文本编辑器集成 (3-4天)
5. **第五阶段**: 页面管理 (2-3天)
6. **第六阶段**: 搜索和标签 (2-3天)
7. **第七阶段**: UI优化和体验提升 (2天)
8. **第八阶段**: 数据导入导出 (1-2天)
9. **第九阶段**: 测试和优化 (2天)
10. **第十阶段**: 部署和文档 (1天)

## 问题反馈

如果在使用过程中遇到问题，请创建 Issue 或联系开发团队。

## 许可证

MIT License

## 贡献

欢迎提交 Pull Request 或 Issue 来改进项目！