拼贴诗 - Poetry Collage App

Poetrup - 一个优雅的中文词语采集与拼贴诗创作应用

🇺🇸 English Version | 🇨🇳 中文版（当前）

---

📖 关于本项目

拼贴诗（Poetrup） 是一个专注于中文词语采集和拼贴诗创作的 Web 应用。用户可以收集喜欢的词语，将它们分类整理到不同的收藏册中，并通过拖拽的方式创作独特的拼贴诗作品。

核心功能

• 📝 词语管理

  • 添加、编辑、删除词语
  • 支持自定义标签分类
  • 词语使用统计

• 📚 收藏册

  • 创建多个收藏册来组织词语
  • 支持公开、共享、私密三种可见性
  • 拖拽词语到收藏册

• ✍️ 拼贴诗创作

  • 可视化拖拽创作界面
  • 支持词语位置、旋转、颜色自定义
  • 作品保存和编辑

• 🏷️ 标签系统

  • 为词语添加标签进行分类
  • 支持自定义标签类别
  • 按标签筛选词语

• 👤 用户系统

  • 用户注册和登录
  • 个人作品集管理
  • 用户偏好设置（保存在 profile.metadata）

🛠️ 技术栈

Frontend / 前端

• Next.js 15 (App Router)
• React 19
• Tailwind CSS - 样式框架
• shadcn/ui - UI 组件库
• React DnD - 拖拽功能
• Sonner - Toast 通知
• next-themes - 主题管理

Backend / 后端

• Supabase - 后端即服务（BaaS）
  • PostgreSQL 数据库
  • Row Level Security (RLS)
  • Authentication
  • Storage Buckets
  • Edge Functions（中文分词）

设计

• 前端设计来自 Poetrupfrontend
• 纸张纹理主题，优雅的视觉体验

🚀 快速开始

前置要求

1. Node.js 18+ 和 Yarn
2. Supabase 账户和项目
3. Supabase CLI（用于数据库迁移）

安装步骤

1. 克隆仓库

git clone https://github.com/SongshGeo/Poetrup.git
cd Poetrup

2. 连接 Supabase 项目

# 登录 Supabase
npx supabase login

# 连接到你的 Supabase 项目（会提示选择项目）
npx supabase link

# 推送配置到服务器
npx supabase config push

3. 运行数据库迁移

# 执行所有迁移文件
npx supabase migrations up --linked

这将创建以下数据库结构：

• profiles - 用户档案
• words - 词语表
• collections - 收藏册表
• collection_words - 词语与收藏册关联表
• poetry - 作品表
• poetry_collections - 作品与收藏册关联表
• favorites - 收藏表

详细迁移指南请查看：docs/MIGRATION_GUIDE.md

4. 配置环境变量

在 nextjs/.env.local 文件中配置：

NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key
PRIVATE_SUPABASE_SERVICE_KEY=your_service_role_key

你可以在 Supabase 控制台的 项目设置 -> API 中找到这些密钥。

5. 安装依赖并启动

cd nextjs
yarn install
yarn dev

访问 http://localhost:3000 🎉

📝 前端代码更新

本项目集成了来自 Poetrupfrontend 的前端设计。

快速更新前端代码：

./scripts/update-frontend.sh

详细更新指南请查看：docs/前端更新后同步指南.md

📚 项目结构

Poetrup/
├── nextjs/                    # Next.js 前端应用
│   ├── src/
│   │   ├── app/              # App Router 页面
│   │   │   ├── app/          # 主应用页面（拼贴诗）
│   │   │   │   ├── page.tsx              # 主页面（词语管理）
│   │   │   │   └── poetry/               # 作品相关页面
│   │   │   │       ├── collection/       # 作品集
│   │   │   │       └── edit/[id]/       # 编辑作品
│   │   │   └── auth/         # 认证页面
│   │   ├── components/       # React 组件
│   │   │   ├── ui/           # shadcn/ui 组件
│   │   │   └── ...           # 业务组件
│   │   └── lib/              # 工具函数和 API
│   │       ├── api/          # Supabase API 封装
│   │       │   ├── words.ts      # 词语 API
│   │       │   ├── collections.ts # 收藏册 API
│   │       │   └── poetry.ts    # 作品 API
│   │       └── utils/        # 工具函数
│   └── package.json
├── supabase/                  # Supabase 配置和迁移
│   ├── migrations/           # 数据库迁移文件
│   ├── functions/            # Edge Functions
│   └── config.toml           # Supabase 配置
├── scripts/                   # 工具脚本
│   └── update-frontend.sh    # 前端更新脚本
└── docs/                      # 文档
    ├── MIGRATION_GUIDE.md     # 迁移指南
    └── 前端更新后同步指南.md  # 前端更新指南

🔑 核心功能说明

词语管理

• 用户可以添加中文词语，系统会自动提取标签（如 #电影、#心情）
• 词语可以关联多个标签
• 支持搜索和筛选

收藏册

• 创建收藏册来组织词语
• 支持三种可见性：私密、共享、公开
• 通过拖拽将词语添加到收藏册

拼贴诗创作

• 可视化创作界面，支持拖拽词语到画布
• 每个词语可以设置位置、旋转角度、颜色
• 作品内容以 JSONB 格式存储在数据库中

数据持久化

所有操作都会自动保存到 Supabase 数据库：

• 创建词语 → words 表
• 创建收藏册 → collections 表
• 拖动词语到收藏册 → collection_words 表
• 创建/编辑作品 → poetry 表
• 创建标签 → profile.metadata.tags

📖 文档

• 数据库迁移指南
• 本地同步到云端指南
• 前端更新指南
• API 文档

🔒 安全特性

• Row Level Security (RLS) - 数据库行级安全策略
• 用户认证 - Supabase Auth 集成
• 数据隔离 - 用户只能访问自己的数据

🚀 部署

Vercel 部署（推荐）

详细部署指南请查看：部署指南

快速步骤：

1. 将代码推送到 GitHub
2. 在 Vercel 创建项目，选择你的仓库
3. 重要：设置 Root Directory 为 nextjs
4. 在 Vercel 项目设置中添加环境变量：
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
   • PRIVATE_SUPABASE_SERVICE_KEY
5. 点击部署
6. 在 Supabase Dashboard 配置重定向 URL（项目设置 -> Authentication -> URL Configuration）

创建测试用户

部署后，可以通过以下方式创建测试用户：

1. Supabase Dashboard（推荐）：

   • 访问 https://supabase.com/dashboard/project/qsqohnmpxuxgeijjosrg
   • 进入 Authentication -> Users -> Add user
   • 创建新用户并勾选 "Auto Confirm User"

2. 应用注册页面：

   • 访问部署后的应用 URL
   • 使用注册功能创建账号

🤝 贡献

欢迎贡献！请随时提交 Pull Request。

📝 许可证

本项目采用 Apache License 2.0 许可证 - 详见 LICENSE 文件。

🙏 致谢

• Next.js
• Supabase
• Tailwind CSS
• shadcn/ui
• 前端设计：Poetrupfrontend

---

享受创作拼贴诗的乐趣！ 🎨✨