# next-ppt

**Repository Path**: aippt/next-ppt

## Basic Information

- **Project Name**: next-ppt
- **Description**: 基于NextJs的AIPPT应用
- **Primary Language**: Unknown
- **License**: AGPL-3.0
- **Default Branch**: main
- **Homepage**: https://ppt.55ai.store
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-27
- **Last Updated**: 2026-07-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Next PPT — AI PPT 生成与编辑工具

AI 驱动的 PPT 生成和在线编辑工具，支持多种 AI 模型，提供所见即所得的幻灯片编辑体验。

[体验地址：https://ppt.55ai.store](https://ppt.55ai.store)


## 功能特性

- **AI 生成 PPT**：输入主题，AI 自动生成大纲和幻灯片内容
- **多种 AI 模型**：支持智谱 AI、DeepSeek、Anthropic Claude、OpenAI、Google Gemini
- **在线编辑器**：基于 contentEditable 的内联编辑，支持文字样式、颜色、对齐
- **幻灯片管理**：拖拽排序、增删幻灯片
- **元素编辑**：文字、图片、形状、线条等多种幻灯片元素
- **PPTX 导出**：一键导出为标准 PowerPoint 文件
- **历史记录**：生成记录管理，支持缩略图预览
- **移动端**：全屏缩略图瀑布流浏览

## 技术栈

- **框架**: Next.js 16 (App Router), React 19
- **样式**: Tailwind CSS v4, shadcn/ui
- **状态管理**: Zustand v5
- **数据请求**: @tanstack/react-query v5
- **数据库**: PostgreSQL + Prisma ORM v7
- **认证**: NextAuth.js v5
- **AI**: Vercel AI SDK (智谱 AI, DeepSeek, Anthropic, OpenAI, Google)
- **文本编辑**: contentEditable + document.execCommand（内联，无需 TipTap）
- **导出**: pptxgenjs v4
- **截图**: html-to-image

## 快速开始

```bash
# 安装依赖
pnpm install

# 配置环境变量
cp .env.example .env
# 编辑 .env 填入必要的 API Key 和数据库配置

# 初始化数据库
pnpm prisma:migrate

# 启动开发服务器
pnpm dev
```

打开 [http://localhost:3000](http://localhost:3000) 查看。

## 项目结构

```
app/                      — Next.js App Router 路由
  api/ppt/                — PPT 生成 API（大纲、内容生成、CRUD）
  (ppt)/chat/             — 聊天/大纲输入页面
  (ppt)/ppt/              — PPT 编辑器页面（生成编排）
  (ppt)/history/          — 历史记录页面
  (auth)/login/      — 登录页面

ppt/                      — 幻灯片编辑器模块（独立可复用）
  store/                  — useSlidesStore（Zustand）
  types/                  — Slide、PPTElement 等类型
  components/             — Canvas、Editor、SlidePanel、Toolbar、元素渲染器等
  hooks/                  — useElementDrag、useKeyboardShortcuts
  utils/                  — exportPptx、element-factories、shapes、gradient
  data/                   — templates.json（113 套模板，图片在 public/cover/ 和 public/preview/）

ppt/generator/            — AI 生成模块（独立可复用）
  types/                  — AIPPTSlide 及 5 种语义子类型
  store/                  — usePPTGeneratorStore
  converter/              — AIPPTSlide → Slide 转换引擎
  hooks/                  — useSlide（流式生成 hook）
  components/             — ChatInput、TemplatePicker、TemplateDialog、GeneratingDialog 等
  api/                    — prompts.ts（SYSTEM_PROMPT 常量）

components/               — 通用 React 组件
  providers.tsx           — SessionProvider + QueryClientProvider + TooltipProvider
  login-form.tsx          — 密码登录 + Google OAuth

prisma/                   — 数据库 schema（Presentation 模型）
generated/                — Prisma 生成代码
```

## 核心模块说明

### `ppt/` — 幻灯片编辑器
画布编辑器，包含元素拖拽、缩放旋转、幻灯片缩略图面板、移动端瀑布流列表等。

### `ppt/generator/` — AI 生成模块
AI 生成流程的完整实现，包含：
- `useSlide` hook：流式读取 + JSON 解析，`onData`/`onFinish` 作为参数传入
- `converter/`：将 AI 返回的语义化数据转换为编辑器可渲染的 Slide 元素
  - `slide-splitter.ts` — 大内容页自动拆分
  - `template-matcher.ts` — 模板匹配算法
  - `text-filler.ts` — 文本填充 + 字号自适应
  - `image-filler.ts` — 图片填充 + 居中裁剪

迁移到其他项目时，复制 `ppt/generator/` 并更新 `@/ppt/types/slides` 和 `@/components/ui/*` 的导入路径即可。

## 可用命令

| 命令 | 说明 |
|------|------|
| `pnpm dev` | 启动开发服务器 |
| `pnpm build` | 构建生产版本 |
| `pnpm start` | 启动生产服务器 |
| `pnpm lint` | ESLint 检查 |
| `pnpm prisma:generate` | 生成 Prisma 客户端 |
| `pnpm prisma:migrate` | 执行数据库迁移 |
| `pnpm prisma:studio` | 打开 Prisma Studio |

# LICENSE
该项目遵循AGPL-V3.0协议，商用请联系授权。
开发者邮箱：liuming@mzsat.cn