绝尘
cfeabf2d37
- 核心架构: Vue 3 + Vite + TypeScript，零运行时依赖（仅 Vue） - 编辑器: 幻灯片增删排序、元素拖拽八向缩放、双击编辑、12 种元素类型 (标题/正文/列表/数据/金句/图片/形状/图表/卡片/表格/代码/公式) - 图表: 8 种 SVG 自绘（柱状/条形/折线/面积/饼图/环形/雷达/进度） - 富文本: 结构化 segments（加粗/斜体/颜色/高亮/上下标/代码/链接） - AI 能力: 对话编辑、生成整套、润色本页、大纲→逐页生成、一键美化、AI 配图 - 会话绑定: 每份 PPT 独立会话，切换 PPT 自动切换对话历史 - 模板系统: 7 个内置版式 + 用户自存模板 - 演示模式: 全屏播放、键盘/鼠标/滚轮导航、入场动画 - 持久化: localStorage 存 deck/文库/会话/模板/配置 - 支持多服务商: 智谱/DeepSeek/通义/Kimi/豆包/OpenAI/Anthropic/Gemini/Groq/Ollama
255 lines
12 KiB
Markdown
255 lines
12 KiB
Markdown
# u-ppt · 在线演示工具
|
||
|
||
基于 **Vue 3 + Vite + TypeScript** 的在线 PPT 应用，无后端。支持编辑、全屏演示，以及 AI 对话式创作。
|
||
|
||
> 历史版本为纯 HTML/CSS/JS 无构建方案，已迁移至 Vue 3 组件化架构，便于长期迭代。
|
||
|
||
## ✨ 功能
|
||
|
||
| 模块 | 能力 |
|
||
|------|------|
|
||
| **编辑器** | 幻灯片增删/排序、元素拖拽与八向缩放、双击编辑文字、属性面板（字号/颜色/对齐/加粗/形状/层级）、5 套主题、页面背景、7 个内置页面模板 + 自存模板 |
|
||
| **演示** | 全屏播放、← →/Space/Home/End 翻页、F 切换全屏、B 黑屏、Esc 退出、左键下一页/右键上一页/滚轮翻页、页码与进度 |
|
||
| **AI 创作** | 一键生成整套 PPT、润色当前页、对话式连续编辑、流式打字机输出、随时中断 |
|
||
| **AI 深化** | 大纲→逐页生成（先出可编辑大纲，逐页填充）、AI 配图（接入图像模型）、AI 配色/主题推荐、一键美化整份（逐页排版优化） |
|
||
| **演示文库** | 命名保存多套 PPT；文库面板管理（打开/重命名/复制/删除）、首屏迷你预览；当前编辑自动保存不丢 |
|
||
| **持久化** | 自动保存到浏览器 localStorage，刷新不丢；一键重置为内置示例；Ctrl+Z/Y 撤销重做 |
|
||
|
||
支持元素：标题 / 正文 / 列表 / 数据 / 金句 / 形状 / 图片 / 图表（柱状/条形/折线/面积/饼图/环形/雷达/进度 8 种）/ 卡片 / 表格 / 代码 / 公式。
|
||
|
||
## 🚀 使用
|
||
|
||
### 开发
|
||
```bash
|
||
npm install
|
||
npm run dev
|
||
# 浏览器自动打开 http://localhost:8080
|
||
```
|
||
|
||
### 构建
|
||
```bash
|
||
npm run build # 产出 dist/，可部署到任意静态托管
|
||
npm run preview # 本地预览构建结果
|
||
```
|
||
|
||
### 起本地静态服务（构建后，便于 AI 跨域调试）
|
||
```bash
|
||
npm run build
|
||
python -m http.server 8080 --directory dist
|
||
```
|
||
|
||
## ⌨ 快捷键
|
||
|
||
**编辑模式**
|
||
- `Ctrl/Cmd + Z` 撤销 `Ctrl/Cmd + Shift + Z` 重做 `Delete` 删除选中元素
|
||
- `Ctrl/Cmd + S` 触发保存提示（其实已自动保存）
|
||
|
||
**演示模式**
|
||
- `→` `↓` `Space` `PageDown`：下一页 `←` `↑` `PageUp`：上一页
|
||
- `Home` / `End`：首页 / 末页 `F`：切换全屏 `B`：黑屏 `Esc`：退出
|
||
|
||
## 📚 演示文库（多套 PPT）
|
||
|
||
支持保存多份独立演示，随时切换编辑。
|
||
|
||
- **💾 保存**（工具栏）：当前已从文库打开则直接更新该份；否则弹出文库让你命名。
|
||
- **📁 文库**（工具栏）：打开文库面板
|
||
- 顶部输入名字 → **存入文库**（同名覆盖，不同名则新建一份）
|
||
- **＋ 新建空白**：从空白演示开始创作
|
||
- 列表每份支持：**打开** / **重命名** / **复制** / **删除**，左侧显示首屏迷你预览
|
||
- 所有内容存浏览器本地（`u-ppt.library`），不上云，刷新不丢。
|
||
|
||
## 🤖 AI 配置
|
||
|
||
点击右上角 **⚙**，在「服务商」下拉选厂商，地址与模型自动填好，只需填 API Key：
|
||
|
||
| 服务商 | 协议 | Base URL | 默认模型 |
|
||
|--------|------|----------|----------|
|
||
| 智谱 GLM（OpenAI） | OpenAI | `open.bigmodel.cn/api/paas/v4` | glm-4.6 |
|
||
| 智谱 GLM（Anthropic） | Anthropic | `open.bigmodel.cn/api/anthropic` | glm-4.6 |
|
||
| **DeepSeek** | OpenAI | `api.deepseek.com` | deepseek-chat |
|
||
| 通义千问（阿里） | OpenAI | `dashscope.aliyuncs.com/compatible-mode/v1` | qwen-plus |
|
||
| Kimi（月之暗面） | OpenAI | `api.moonshot.cn/v1` | moonshot-v1-8k |
|
||
| 豆包（火山引擎） | OpenAI | `ark.cn-beijing.volces.com/api/v3` | doubao-pro-32k¹ |
|
||
| OpenAI | OpenAI | `api.openai.com/v1` | gpt-4o-mini |
|
||
| Anthropic Claude | Anthropic | `api.anthropic.com` | claude-sonnet-5 |
|
||
| Google Gemini | OpenAI | `generativelanguage.googleapis.com/v1beta/openai` | gemini-2.0-flash |
|
||
| Groq（极速） | OpenAI | `api.groq.com/openai/v1` | llama-3.3-70b-versatile |
|
||
| Ollama（本地） | OpenAI | `localhost:11434/v1` | llama3.1² |
|
||
|
||
¹ 豆包实际需填你在火山方舟创建的**接入点 endpoint id**（`ep-xxx`）。
|
||
² 本地服务（localhost / 127.0.0.1）无需填 Key；Ollama 需设环境变量 `OLLAMA_ORIGINS=*` 允许浏览器跨端口访问。
|
||
|
||
选「**自定义**」可手填任意 OpenAI / Anthropic 兼容服务（如自建网关、LiteLLM、one-api 等）。改字段后保存即可，配置全部存本地 localStorage。
|
||
|
||
> **协议差异**：OpenAI 走 `/chat/completions` + `Authorization: Bearer`；Anthropic 走 `/v1/messages` + `x-api-key` + `anthropic-version`，system 提示置于顶层，流式解析 `content_block_delta`。厂商选错协议会报错，按表格对应即可。
|
||
|
||
### ⚠ 跨域 (CORS) 说明
|
||
|
||
浏览器直连 LLM API 可能被跨域策略拦截（因服务方而异）。若控制台报 CORS 错：
|
||
1. 改用本地起服务（见上）再试；
|
||
2. 仍不行，在「代理 URL」填一个转发地址（如 Cloudflare Worker / 自建简易代理），请求会改走该代理，Base URL 与 Key 不变。
|
||
|
||
## 🧠 AI 深化能力
|
||
|
||
在原有「一键生成整套」基础上，新增四个可控、渐进式的 AI 创作能力。入口在右侧 **🤖 AI 助手** 面板的顶部按钮区。
|
||
|
||
### 📋 大纲→逐页生成
|
||
|
||
原「生成整套」是一次性出结果，不可干预。深化后的工作流：
|
||
|
||
1. 点 **📋 大纲** → 面板展开，输入主题 → **✨ 生成大纲**
|
||
2. AI 先出一份可编辑大纲（5-8 页），每页含：页类型（封面/目录/内容/金句/结尾）、标题、要点、补充指令
|
||
3. 你可以自由编辑：改标题、增删要点、调页类型、删页、补 hint（如「数据页：用 stat+chart」「对比页：双 card」）
|
||
4. 点单条 **生成此页** 预览效果，或点 **全部生成** 串行生成（带进度 N/M，可中断）
|
||
5. 满意后 **应用到文稿** —— 把已生成的页面替换整份 deck
|
||
|
||
这样你完全控制节奏与内容结构，不满意可只重生成某一条。
|
||
|
||
### 🎨 美化整份
|
||
|
||
遍历当前文稿的所有页，逐页调 AI 优化**排版**（位置/尺寸/字号/对齐/装饰），**文字内容不变**。适合内容已经到位但版式粗糙的场景。流式气泡实时显示进度「正在美化 3/8 页…」，可中断。
|
||
|
||
### 🎨 AI 配图
|
||
|
||
选中画布上的 **图片元素** 后，右侧属性面板会出现「**🎨 AI 配图**」按钮：
|
||
|
||
1. 点击后输入图片描述（如「现代办公室协作场景，俯拍，柔和光线」）
|
||
2. 调用图像模型生成图片并自动填入该元素
|
||
|
||
需在 **⚙ 设置** 的「图像模型（可选）」区配置（DALL-E 协议 `/images/generations`）：
|
||
- 图像 Base URL：留空则复用主配置的 Base URL
|
||
- 图像 API Key：留空则复用主配置的 Key
|
||
- 图像模型：默认 `dall-e-3`，智谱可用 `cogview-3`，其他兼容服务填对应模型名
|
||
|
||
### AI 配色/主题推荐
|
||
|
||
在对话中输入「给这套演示换个配色」「推荐一个适合科技主题的主题」等，AI 会返回 6 色配色方案 + 推荐背景，确认后应用为新主题（自动存入自定义主题库）。
|
||
|
||
## 📐 元素与图表
|
||
|
||
### 图表（8 种）
|
||
|
||
选中图表元素后，右侧属性面板「图表类型」下拉可切换：
|
||
|
||
| 类型 | 代号 | 适用场景 |
|
||
|------|------|----------|
|
||
| 柱状图 | `bar` | 离散类型对比（默认） |
|
||
| 条形图 | `hbar` | 标签较长的横向对比 |
|
||
| 折线图 | `line` | 时间序列/趋势变化 |
|
||
| 面积图 | `area` | 累计趋势/体量对比 |
|
||
| 饼图 | `pie` | 占比构成 |
|
||
| 环形图 | `doughnut` | 轻量占比 |
|
||
| 雷达图 | `radar` | 多维度能力对比（≥3 维） |
|
||
| 进度图 | `progress` | 完成率/百分比 |
|
||
|
||
属性面板还可切换「图例」与「网格线」显示。
|
||
|
||
**数据格式（两种）：**
|
||
|
||
单系列（向后兼容）：
|
||
```json
|
||
[ {"label":"配图","value":65}, {"label":"文字","value":10} ]
|
||
```
|
||
|
||
多系列（用于柱状/折线/面积/雷达对比）：
|
||
```json
|
||
{
|
||
"series": ["Q1", "Q2"],
|
||
"items": [
|
||
{"label":"华东", "values":[120, 150]},
|
||
{"label":"华南", "values":[80, 95]}
|
||
]
|
||
}
|
||
```
|
||
|
||
全部用 SVG 自绘，零运行时依赖。修改 content 后图表自动重绘。
|
||
|
||
### 表格（table）
|
||
|
||
content 为 **Markdown 管道表格**字符串：
|
||
|
||
```
|
||
| 指标 | Q1 | Q2 |
|
||
|------|----|----|
|
||
| 营收 | 120 | 150 |
|
||
| 利润 | 30 | 45 |
|
||
```
|
||
|
||
属性面板可切换「首行表头」。
|
||
|
||
### 代码（code）
|
||
|
||
content 为代码原文，等宽字体渲染，保留缩进与换行。属性面板可选填语言（仅作右上角徽标提示，不做语法高亮）。
|
||
|
||
### 公式（formula）
|
||
|
||
content 为 **LaTeX 子集**字符串（不含 `$$`）。支持：
|
||
|
||
- 上下标：`E = mc^2`、`x_1`、`a^{bc}`、`a_{ij}`
|
||
- 分数：`\frac{a}{b}`
|
||
- 根号：`\sqrt{x}`、`\sqrt[n]{x}`
|
||
- 求和/积分：`\sum_{i=1}^n x_i`、`\int_0^1 f(x)dx`
|
||
- 希腊字母与运算符：`\alpha \beta \pi \infty \leq \geq \neq \times \pm \cdot \to \rightarrow \forall \exists \partial \nabla` 等
|
||
|
||
渲染由内置极简渲染器处理（纯 HTML/CSS，不引入 KaTeX）。未识别的 `\xxx` 会去掉反斜杠后原样显示。
|
||
|
||
## 📋 页面模板
|
||
|
||
点工具栏 **📋 模板** 打开模板面板：
|
||
|
||
- **内置模板**（7 个）：空白页 / 标题页 / 章节页 / 三卡片 / 对比页 / 金句页 / 数据页，点击即基于模板新建一页
|
||
- **存为模板**：输入名称 → 把当前页的元素结构（含背景）保存为用户模板，下次可复用版式
|
||
- 自存模板可删除，内置不可删
|
||
|
||
模板只记录「版式 + 占位内容」，应用到新页时会重新生成 id，不会与原页发生关联。
|
||
|
||
## 📁 文件结构
|
||
|
||
```
|
||
u-ppt/
|
||
├── index.html # 入口（挂载点 + 模块脚本）
|
||
├── package.json # Vue 3 + Vite + TypeScript
|
||
├── vite.config.ts
|
||
├── tsconfig.json
|
||
├── src/
|
||
│ ├── main.ts # createApp 挂载
|
||
│ ├── App.vue # 根组件：编辑/演示模式切换
|
||
│ ├── core/ # 纯逻辑层（无 Vue 依赖，可单测）
|
||
│ │ ├── types.ts # Deck/Slide/Element/Style 类型
|
||
│ │ ├── store.ts # 响应式状态/localStorage/CRUD/undo-redo
|
||
│ │ ├── ai.ts # AI 引擎：流式 SSE/JSON 解析/prompt
|
||
│ │ └── sample.ts # 主题预设/元素工厂/内置 8 页示例
|
||
│ ├── composables/
|
||
│ │ └── useEditor.ts # 画布拖拽/缩放/选中逻辑
|
||
│ ├── components/
|
||
│ │ ├── editor/
|
||
│ │ │ ├── Toolbar.vue # 顶部工具栏
|
||
│ │ │ ├── ThumbBar.vue # 左侧缩略图
|
||
│ │ │ ├── Canvas.vue # 中间画布
|
||
│ │ │ ├── ElementView.vue # 单元素渲染（9 种类型）
|
||
│ │ │ ├── PropsPanel.vue # 右侧属性面板
|
||
│ │ │ └── AddGrid.vue # 添加元素网格
|
||
│ │ ├── present/
|
||
│ │ │ └── PresentMode.vue # 全屏演示
|
||
│ │ ├── ai/
|
||
│ │ │ └── AiPanel.vue # AI 聊天面板
|
||
│ │ └── modals/
|
||
│ │ ├── SettingsModal.vue
|
||
│ │ └── LibraryModal.vue
|
||
│ └── styles/ # 全局 CSS（由原 css/ 平移）
|
||
│ ├── base.css
|
||
│ ├── editor.css
|
||
│ ├── present.css
|
||
│ └── chat.css
|
||
└── README.md
|
||
```
|
||
|
||
## 🧱 数据模型
|
||
|
||
元素用**百分比坐标**存储，编辑画布与全屏演示共用一份数据，自动等比缩放。可 `store.exportJSON()` 导出 / `importJSON()` 导入，便于备份与迁移。
|
||
|
||
## 📌 范围说明
|
||
|
||
纯前端工具，不含：多人协作、云同步、复杂图表（折线/饼图）、音视频嵌入、导出 PPTX/PDF。后续可扩展。
|