资源内容

你将学习如何创建一个直观的编辑器，让用户能够自定义模板、操控文本和形状，并集成高级绘图工具。为了处理认证，我们将使用 Auth.js（Next-Auth 的新名称），掌握如何使用 Google 和 Github 等社交提供商，以及使用电子邮件和密码的传统凭证提供商。你还将学习如何使用 AI 技术去除背景，并使用像 Replicate 这样的软件根据文本生成图像。我们还将实现一个使用 Stripe 的安全订阅和计费系统。

引言

环境搭建

Next.js 基础

设置 Fabric.js

响应式画布

编辑器布局

编辑器导航栏

编辑器活动工具

编辑器形状侧边栏

编辑器形状工具

编辑器填充颜色工具

编辑器描边颜色工具

编辑器描边宽度工具

编辑器图层管理

编辑器透明度工具

编辑器文字侧边栏

编辑器字体家族工具

编辑器字体样式工具

编辑器字体大小工具

编辑器删除工具

Hono 基础

编辑器图片侧边栏

编辑器文件上传

编辑器图片滤镜工具

AI 图像生成

AI 背景去除

剪贴板（复制与粘贴）

绘图工具

画布设置

缩放工具

历史记录（撤销与重做）

快捷键与快捷方式

导出与导入

Auth.js 基础

数据库与 Drizzle 配置

自定义认证页面

Google 登录

凭证登录

Auth.js 与 Hono

会话提供者与用户按钮

主页与布局

项目模式与 API

获取现有项目

自动保存功能

项目无限加载

复制项目功能

删除项目功能

模板功能

模板侧边栏

订阅界面

订阅 API

在 Vercel 上部署