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 种）/ 卡片 / 表格 / 代码 / 公式。

🚀 使用

开发

npm install
npm run dev
# 浏览器自动打开 http://localhost:8080

构建

npm run build      # 产出 dist/，可部署到任意静态托管
npm run preview    # 本地预览构建结果

起本地静态服务（构建后，便于 AI 跨域调试）

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	完成率/百分比

属性面板还可切换「图例」与「网格线」显示。

数据格式（两种）：

单系列（向后兼容）：

[ {"label":"配图","value":65}, {"label":"文字","value":10} ]

多系列（用于柱状/折线/面积/雷达对比）：

{
  "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。后续可扩展。