main
- 创建 Next.js 14 项目基础结构 - 实现登录界面 (LoginForm 组件) - 实现文件树组件 (FileTree) - 实现 Markdown 编辑器 (Monaco Editor + react-markdown) - 实现编辑器主页面 (文件树 + 编辑器 + 保存功能) - 添加 API 路由 (登录、文件操作) - 支持编辑/预览切换 - 支持快捷键保存 (Cmd/Ctrl + S) 技术栈:Next.js 14 + React + TailwindCSS + Monaco Editor
Public Editor Backend
公网编辑器后端服务 - 基于 Next.js API + Supabase
技术栈
- Framework: Next.js 14 (App Router)
- Language: TypeScript
- Database: Supabase (PostgreSQL)
- Storage: Supabase Storage
- Auth: Supabase Auth
快速开始
1. 配置 Supabase
- 在 Supabase 创建新项目
- 获取项目 URL 和 API Keys
- 复制
.env.local.example到.env.local并填入配置
cp .env.local.example .env.local
2. 初始化数据库
在 Supabase SQL Editor 中运行 supabase/init.sql 脚本:
-- 复制 supabase/init.sql 的全部内容并执行
这将创建:
files数据表- Row Level Security 策略
- Storage Bucket 和访问策略
3. 安装依赖
npm install
4. 启动开发服务器
npm run dev
API 端点
认证
POST /api/auth/login- 用户登录POST /api/auth/logout- 用户登出GET /api/auth/me- 获取当前用户信息
文件存储
GET /api/files- 获取文件列表POST /api/files/upload- 上传文件GET /api/files/[id]- 获取单个文件信息DELETE /api/files/[id]- 删除文件
数据库操作
GET /api/database/tables- 获取所有表POST /api/database/query- 执行数据库操作
API 使用示例
登录
curl -X POST http://localhost:3000/api/auth/login \
-H "Content-Type: application/json" \
-d '{"email":"user@example.com","password":"password123"}'
上传文件
curl -X POST http://localhost:3000/api/files/upload \
-H "Authorization: Bearer YOUR_ACCESS_TOKEN" \
-F "file=@/path/to/file.pdf"
获取文件列表
curl http://localhost:3000/api/files \
-H "Authorization: Bearer YOUR_ACCESS_TOKEN"
数据库查询
curl -X POST http://localhost:3000/api/database/query \
-H "Authorization: Bearer YOUR_ACCESS_TOKEN" \
-H "Content-Type: application/json" \
-d '{
"table": "files",
"operation": "select",
"filters": {}
}'
环境变量
| 变量名 | 说明 |
|---|---|
NEXT_PUBLIC_SUPABASE_URL |
Supabase 项目 URL |
NEXT_PUBLIC_SUPABASE_ANON_KEY |
Supabase 匿名 Key |
SUPABASE_SERVICE_ROLE_KEY |
Supabase 服务角色 Key |
NEXT_PUBLIC_APP_URL |
应用 URL |
安全
- 所有 API 端点都需要认证(除了登录)
- 使用 Supabase Row Level Security 确保用户只能访问自己的数据
- Storage 策略确保用户只能操作自己文件夹中的文件
- 使用 HTTP-only cookies 存储 session
部署
Vercel
- 连接 GitHub 仓库
- 添加环境变量
- 部署
Docker
docker build -t public-editor .
docker run -p 3000:3000 --env-file .env.local public-editor
开发
# 开发模式
npm run dev
# 构建
npm run build
# 生产模式
npm start
# 代码检查
npm run lint
License
MIT
Description
Languages
TypeScript
91.6%
PLpgSQL
6.7%
CSS
1.1%
JavaScript
0.6%