shunzi 7fd4adcd69 feat: 实现公网编辑器前端
- 创建 Next.js 14 项目基础结构
- 实现登录界面 (LoginForm 组件)
- 实现文件树组件 (FileTree)
- 实现 Markdown 编辑器 (Monaco Editor + react-markdown)
- 实现编辑器主页面 (文件树 + 编辑器 + 保存功能)
- 添加 API 路由 (登录、文件操作)
- 支持编辑/预览切换
- 支持快捷键保存 (Cmd/Ctrl + S)

技术栈:Next.js 14 + React + TailwindCSS + Monaco Editor
2026-03-17 01:03:26 +08:00
2026-03-17 01:03:26 +08:00

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

  1. Supabase 创建新项目
  2. 获取项目 URL 和 API Keys
  3. 复制 .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

访问 http://localhost:3000

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

  1. 连接 GitHub 仓库
  2. 添加环境变量
  3. 部署

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

S
Description
No description provided
Readme 220 KiB
Languages
TypeScript 91.6%
PLpgSQL 6.7%
CSS 1.1%
JavaScript 0.6%