新增: u-ppt Vue 3 在线演示工具初始版本

- 核心架构: Vue 3 + Vite + TypeScript，零运行时依赖（仅 Vue） - 编辑器: 幻灯片增删排序、元素拖拽八向缩放、双击编辑、12 种元素类型 (标题/正文/列表/数据/金句/图片/形状/图表/卡片/表格/代码/公式) - 图表: 8 种 SVG 自绘（柱状/条形/折线/面积/饼图/环形/雷达/进度） - 富文本: 结构化 segments（加粗/斜体/颜色/高亮/上下标/代码/链接） - AI 能力: 对话编辑、生成整套、润色本页、大纲→逐页生成、一键美化、AI 配图 - 会话绑定: 每份 PPT 独立会话，切换 PPT 自动切换对话历史 - 模板系统: 7 个内置版式 + 用户自存模板 - 演示模式: 全屏播放、键盘/鼠标/滚轮导航、入场动画 - 持久化: localStorage 存 deck/文库/会话/模板/配置 - 支持多服务商: 智谱/DeepSeek/通义/Kimi/豆包/OpenAI/Anthropic/Gemini/Groq/Ollama
2026-07-12 13:12:09 +08:00
commit cfeabf2d37
35 changed files with 7919 additions and 0 deletions
--- a/src/styles/editor.css
+++ b/src/styles/editor.css
@@ -0,0 +1,354 @@
+/* =====================================================================
+ * editor.css — 编辑模式布局：工具栏 / 缩略图 / 画布 / 属性面板
+ * ===================================================================== */
+
+.app-editor { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
+
+/* ---------- 顶部工具栏 ---------- */
+.toolbar {
+  height: 54px; flex-shrink: 0;
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 0 16px; gap: 12px;
+  background: var(--ui-bar);
+  border-bottom: 1px solid var(--ui-border);
+  box-shadow: var(--shadow-sm);
+  z-index: 10;
+}
+.brand { display: flex; align-items: baseline; gap: 6px; }
+.brand .logo { color: var(--ui-primary); font-size: 20px; font-weight: 800; }
+.brand .name { font-size: 17px; font-weight: 700; letter-spacing: .5px; }
+.brand .sub { font-size: 12px; color: var(--ui-muted); }
+.tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+.tools .sep { width: 1px; height: 22px; background: var(--ui-border); margin: 0 4px; }
+.theme-select { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ui-muted); }
+.theme-select select { width: auto; height: 30px; padding: 0 8px; }
+
+/* ---------- 编辑区三栏 ---------- */
+.editor-body {
+  flex: 1; min-height: 0;
+  display: grid; grid-template-columns: 178px 1fr 304px;
+}
+
+/* ---------- 左：缩略图 ---------- */
+.thumb-bar { border-right: 1px solid var(--ui-border); background: var(--ui-panel); overflow: hidden; display: flex; flex-direction: column; }
+.thumb-list { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
+.thumb-item { position: relative; cursor: pointer; }
+.thumb-num {
+  position: absolute; top: -6px; left: -6px; z-index: 2;
+  width: 18px; height: 18px; border-radius: 50%;
+  background: var(--ui-text); color: #fff; font-size: 11px;
+  display: flex; align-items: center; justify-content: center;
+}
+.thumb-preview {
+  position: relative; width: 100%; aspect-ratio: 16 / 9;
+  border: 1px solid var(--ui-border); border-radius: var(--radius-sm);
+  overflow: hidden; background: #fff;
+  box-shadow: var(--shadow-sm); transition: outline-color .12s, transform .1s;
+  outline: 2px solid transparent; outline-offset: 1px;
+}
+.thumb-item:hover .thumb-preview { transform: translateY(-1px); }
+.thumb-item.active .thumb-preview { outline-color: var(--ui-primary); }
+.thumb-del {
+  position: absolute; top: 2px; right: 2px; z-index: 3;
+  width: 18px; height: 18px; border-radius: 4px; border: none;
+  background: rgba(15,23,42,.6); color: #fff; font-size: 11px;
+  opacity: 0; transition: opacity .12s; line-height: 1;
+}
+.thumb-item:hover .thumb-del { opacity: 1; }
+.thumb-del:hover { background: var(--ui-danger); }
+.thumb-add {
+  border: 1.5px dashed var(--ui-border); border-radius: var(--radius-sm);
+  height: 40px; background: transparent; color: var(--ui-muted);
+  display: flex; align-items: center; justify-content: center; gap: 4px;
+}
+.thumb-add:hover { border-color: var(--ui-primary); color: var(--ui-primary); background: var(--ui-primary-soft); }
+/* 缩略图内的迷你元素，统一缩小字号 */
+.thumb-preview .el { pointer-events: none; }
+
+/* ---------- 中：画布 ---------- */
+.canvas-stage {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  padding: 28px; min-width: 0; overflow: hidden; position: relative;
+}
+.canvas-frame {
+  position: relative;
+  width: min(100%, calc((100vh - 54px - 56px) * 16 / 9));
+  max-width: 100%;
+  aspect-ratio: 16 / 9;
+  box-shadow: var(--shadow-md); border-radius: 4px; overflow: hidden;
+  background: #fff;
+}
+.canvas {
+  position: absolute; top: 0; left: 0;
+  width: 1280px; height: 720px;
+  transform-origin: top left;
+}
+.canvas-status { margin-top: 10px; font-size: 12px; color: var(--ui-muted); }
+
+/* ---------- 画布元素 ---------- */
+.el { position: absolute; overflow: hidden; }
+.el[data-type="title"], .el[data-type="text"], .el[data-type="list"],
+.el[data-type="stat"], .el[data-type="quote"] {
+  display: flex;
+  align-items: flex-start;
+}
+.el[data-type="stat"] { align-items: center; justify-content: center; }
+.el[data-type="quote"] { align-items: center; justify-content: center; }
+.el[data-type="title"], .el[data-type="quote"] { font-weight: 700; }
+.el[data-type="quote"] { font-style: italic; }
+.el-text { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; }
+.el-list { width: 100%; height: 100%; display: flex; flex-direction: column; gap: .3em; justify-content: center; }
+.el-list .li { position: relative; padding-left: 1.1em; }
+.el-list .li::before {
+  content: ""; position: absolute; left: 0; top: .55em;
+  width: .35em; height: .35em; border-radius: 50%; background: currentColor;
+}
+.el-stat { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
+.el-stat .num { font-weight: 800; line-height: 1; }
+.el-stat .label { margin-top: .35em; text-align: center; }
+.el-shape { width: 100%; height: 100%; }
+.el-image { width: 100%; height: 100%; object-fit: cover; }
+.el-chart { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: .5em; }
+.el-chart .bar-row { display: flex; align-items: center; gap: .6em; font-size: 14px; }
+.el-chart .bar-label { width: 26%; flex-shrink: 0; }
+.el-chart .bar-track { flex: 1; height: .7em; background: rgba(100,116,139,.18); border-radius: 99px; overflow: hidden; }
+.el-chart .bar-fill { height: 100%; border-radius: 99px; }
+.el-chart .bar-val { width: 3em; text-align: right; flex-shrink: 0; }
+
+/* ===== 图表 SVG 通用 ===== */
+.el-chart svg { width: 100%; height: 100%; }
+.el-chart .chart-text { fill: currentColor; font-family: inherit; }
+.el-chart.chart-pie { position: relative; display: flex; align-items: center; }
+.el-chart .pie-legend {
+  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
+  display: flex; flex-direction: column; gap: .3em; font-size: 13px;
+}
+.el-chart .pie-legend-item { display: flex; align-items: center; gap: .4em; }
+.el-chart .pie-legend-dot { width: .8em; height: .8em; border-radius: 2px; flex-shrink: 0; }
+
+/* ===== 表格 ===== */
+.el-table {
+  width: 100%; height: 100%; border-collapse: collapse;
+  font-size: inherit; table-layout: fixed;
+}
+.el-table th, .el-table td {
+  padding: .55em .7em; text-align: left;
+  border-bottom: 1px solid rgba(100,116,139,.25);
+  overflow: hidden; word-break: break-word;
+}
+.el-table th {
+  font-weight: 700; color: var(--ui-primary, #4f46e5);
+  border-bottom: 2px solid rgba(100,116,139,.35);
+  background: rgba(100,116,139,.06);
+  white-space: nowrap;
+}
+.el-table tbody tr:nth-child(even) { background: rgba(100,116,139,.04); }
+
+/* ===== 代码 ===== */
+.el-code {
+  width: 100%; height: 100%; margin: 0;
+  padding: 1em 1.2em; box-sizing: border-box;
+  background: rgba(15,23,42,.04);
+  border-radius: 8px; border: 1px solid rgba(100,116,139,.2);
+  overflow: auto; font-family: 'Consolas','Monaco','Courier New',monospace;
+  font-size: inherit; line-height: 1.6; color: inherit;
+  white-space: pre; position: relative;
+}
+.el-code code { font-family: inherit; }
+.el-code .code-lang {
+  position: absolute; top: .4em; right: .8em;
+  opacity: .45; font-size: 11px; font-family: inherit;
+  text-transform: uppercase; letter-spacing: .05em;
+}
+
+/* ===== 公式 ===== */
+.el-formula {
+  width: 100%; height: 100%;
+  display: flex; align-items: center; justify-content: center;
+  font-family: 'Cambria Math','STIX','Latin Modern Math',serif;
+  font-size: inherit; line-height: 1.5;
+}
+.el-formula sup, .el-formula sub { font-size: .65em; }
+.el-formula .frac {
+  display: inline-flex; flex-direction: column; align-items: center;
+  vertical-align: middle; margin: 0 .2em;
+}
+.el-formula .frac .num { border-bottom: 1.5px solid currentColor; padding: 0 .3em; }
+.el-formula .frac .den { padding: 0 .3em; }
+.el-formula .sqrt { position: relative; padding-left: .3em; display: inline-flex; align-items: flex-end; }
+.el-formula .sqrt .rad { font-size: .6em; vertical-align: super; margin-right: .1em; }
+.el-formula .sqrt .overline { border-top: 1.5px solid currentColor; padding: 0 .2em; }
+
+/* 选中态与手柄 */
+.el.selected { outline: 2px solid var(--ui-primary); outline-offset: 0; }
+.el.dragging { opacity: .85; }
+.handle {
+  position: absolute; width: 10px; height: 10px;
+  background: #fff; border: 1.5px solid var(--ui-primary);
+  border-radius: 2px; z-index: 50;
+}
+.handle.tl { top: -5px; left: -5px; cursor: nwse-resize; }
+.handle.tr { top: -5px; right: -5px; cursor: nesw-resize; }
+.handle.bl { bottom: -5px; left: -5px; cursor: nesw-resize; }
+.handle.br { bottom: -5px; right: -5px; cursor: nwse-resize; }
+.handle.tm { top: -5px; left: 50%; margin-left: -5px; cursor: ns-resize; }
+.handle.bm { bottom: -5px; left: 50%; margin-left: -5px; cursor: ns-resize; }
+.handle.lm { left: -5px; top: 50%; margin-top: -5px; cursor: ew-resize; }
+.handle.rm { right: -5px; top: 50%; margin-top: -5px; cursor: ew-resize; }
+
+/* 元素文字可直接双击编辑 */
+.el [contenteditable="true"] { outline: none; cursor: text; }
+.el [contenteditable="true"]:focus { background: rgba(79,70,229,.06); border-radius: 2px; }
+
+/* ---------- 右：侧栏 Tabs ---------- */
+.side-panel { border-left: 1px solid var(--ui-border); background: var(--ui-panel); display: flex; flex-direction: column; min-height: 0; }
+.panel-tabs { display: flex; border-bottom: 1px solid var(--ui-border); flex-shrink: 0; }
+.panel-tab {
+  flex: 1; padding: 11px; border: none; background: transparent;
+  font-size: 13px; color: var(--ui-muted); border-bottom: 2px solid transparent;
+}
+.panel-tab:hover { color: var(--ui-text); background: var(--ui-hover); }
+.panel-tab.active { color: var(--ui-primary); border-bottom-color: var(--ui-primary); font-weight: 600; }
+.panel-pane { flex: 1; overflow-y: auto; padding: 16px; }
+.panel-pane.active { display: block; }
+/* AI 面板需要纵向擞布局，且不滚动整块（输入框常驻底部） */
+.ai-pane { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
+.ai-pane .chat-messages { flex: 1; overflow-y: auto; padding: 0 16px; }
+
+/* ---------- 属性面板 ---------- */
+.prop-section { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--ui-border); }
+.prop-section:last-child { border-bottom: none; margin-bottom: 0; }
+.prop-title { font-size: 12px; color: var(--ui-muted); margin-bottom: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
+.prop-hint { font-size: 12.5px; color: var(--ui-muted); text-align: center; line-height: 1.8; margin-bottom: 16px; }
+.prop-row { margin-bottom: 14px; }
+.prop-row > label { display: block; font-size: 12px; color: var(--ui-muted); margin-bottom: 6px; font-weight: 500; }
+.color-row { display: flex; gap: 6px; }
+.color-row select { flex: 1; }
+.color-row input[type="color"] { width: 38px; height: 32px; padding: 2px; flex-shrink: 0; }
+
+.add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+.add-grid button {
+  height: 48px; border: 1px solid var(--ui-border); background: #fff;
+  border-radius: var(--radius-sm); font-size: 12px; color: var(--ui-text);
+  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
+}
+.add-grid button:hover { border-color: var(--ui-primary); color: var(--ui-primary); background: var(--ui-primary-soft); }
+.add-grid button .ic { font-size: 18px; }
+
+.bg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+.bg-grid button { height: 36px; border: 1px solid var(--ui-border); background: #fff; border-radius: var(--radius-sm); font-size: 12px; }
+.bg-grid button.active { border-color: var(--ui-primary); box-shadow: 0 0 0 2px var(--ui-primary-soft); }
+
+/* 分段按钮组 */
+.seg { display: flex; gap: 6px; }
+.seg button {
+  flex: 1; height: 32px; border: 1px solid var(--ui-border); background: #fff;
+  border-radius: var(--radius-sm); color: var(--ui-text); font-size: 13px;
+}
+.seg button:hover { background: var(--ui-hover); }
+.seg button.active { background: var(--ui-primary); border-color: var(--ui-primary); color: #fff; }
+.seg button.danger { color: var(--ui-danger); }
+.seg button.danger:hover { background: #fff1f2; }
+
+/* ---------- 卡片元素 ---------- */
+.el[data-type="card"] {
+  background: #ffffff;
+  border-radius: 16px;
+  box-shadow: 0 12px 30px rgba(15, 23, 42, .12), 0 3px 8px rgba(15, 23, 42, .06);
+  overflow: hidden;
+  display: flex; flex-direction: column;
+}
+.el-card-bar { height: 6px; width: 100%; flex-shrink: 0; }
+.el-card { padding: 1.1em 1.3em 1.2em; flex: 1; display: flex; flex-direction: column; gap: .5em; justify-content: flex-start; box-sizing: border-box; }
+.card-icon { font-size: 1.6em; line-height: 1; margin-bottom: .1em; }
+.card-title {
+  font-weight: 700;
+  font-size: 1.5em;
+  line-height: 1.15;
+  color: var(--ui-text, #1e293b);
+  display: flex; align-items: center; gap: .4em;
+}
+.card-body {
+  font-size: 1em;
+  line-height: 1.5;
+  color: var(--ui-muted, #64748b);
+  white-space: pre-wrap;
+  flex: 1;
+}
+/* 兼容旧 class 名 */
+.el-card-title { font-weight: 700; font-size: 1.5em; line-height: 1.15; display: flex; align-items: center; gap: .45em; }
+.el-card-text { font-size: 1em; line-height: 1.5; opacity: .88; white-space: pre-wrap; }
+.el-card-body { padding: 1.1em 1.3em 1.2em; flex: 1; display: flex; flex-direction: column; gap: .5em; justify-content: flex-start; }
+
+/* 渐变形状由 renderElement 内联 backgroundImage；此处仅兜底圆角 */
+.el-shape.gradient { border-radius: var(--shape-radius, 0); }
+
+/* 装饰圆/光晕（shape 配合） */
+.el[data-deco="glow"] { filter: blur(2px); opacity: .9; }
+
+/* ---------- 文库弹窗 ---------- */
+.lib-modal { width: 580px; max-width: 94vw; max-height: 86vh; display: flex; flex-direction: column; }
+.lib-save-bar { display: flex; gap: 8px; margin-bottom: 14px; }
+.lib-save-bar input { flex: 1; }
+.lib-list { flex: 1; overflow-y: auto; border: 1px solid var(--ui-border); border-radius: var(--radius-sm); background: #fff; min-height: 140px; }
+.lib-list:empty::before {
+  content: '文库为空 —— 在上方命名并存入你的第一份演示';
+  display: block; padding: 32px; text-align: center; color: var(--ui-muted); font-size: 13px;
+}
+.lib-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--ui-border); }
+.lib-item:last-child { border-bottom: none; }
+.lib-item.active { background: var(--ui-primary-soft); }
+.lib-thumb { width: 72px; height: 41px; border: 1px solid var(--ui-border); border-radius: 4px; overflow: hidden; flex-shrink: 0; position: relative; background: #fff; }
+.lib-info { flex: 1; min-width: 0; }
+.lib-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.lib-meta { font-size: 12px; color: var(--ui-muted); margin-top: 2px; }
+.lib-ops { display: flex; gap: 6px; flex-shrink: 0; }
+.lib-ops .btn { height: 28px; padding: 0 10px; font-size: 12px; }
+.lib-ops .btn.del { background: transparent; color: var(--ui-danger); border-color: var(--ui-border); }
+.lib-ops .btn.del:hover { background: #fff1f2; }
+.modal-actions .muted { margin-right: auto; font-size: 12px; }
+
+/* 空页占位引导 */
+.canvas-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--ui-muted); pointer-events: none; }
+.canvas-placeholder .ph-icon { font-size: 48px; font-weight: 200; color: var(--ui-border); }
+.canvas-placeholder .ph-sub { font-size: 14px; opacity: .8; }
+
+/* 长内容溢出兆底 */
+.el-text, .el-card-title, .el-card-text { overflow: hidden; }
+.el-stat .num { overflow-wrap: anywhere; }
+.el-chart .bar-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* ---------- 富文本提示 ---------- */
+.rich-hint { margin-top: 6px; display: flex; flex-direction: column; gap: 5px; }
+.rich-syntax {
+  font-size: 11px; color: var(--ui-muted); line-height: 1.7;
+  background: var(--ui-hover, #f1f5f9); padding: 5px 8px; border-radius: 4px;
+  white-space: pre-wrap; word-break: break-all;
+}
+.rich-actions { display: flex; gap: 6px; }
+.rich-btn {
+  height: 22px; padding: 0 8px; font-size: 11px;
+  border: 1px solid var(--ui-border, #e2e8f0); background: #fff;
+  color: var(--ui-text, #1e293b); border-radius: 4px; cursor: pointer;
+}
+.rich-btn:hover { border-color: var(--ui-primary, #4f46e5); color: var(--ui-primary, #4f46e5); }
+.rich-btn.danger { color: var(--ui-danger, #e11d48); border-color: transparent; }
+.rich-btn.danger:hover { color: var(--ui-danger, #e11d48); background: #fff1f2; }
+
+/* ---------- 富文本渲染样式 ---------- */
+.el-text-rich strong, .el-list strong, .el-card strong { font-weight: 700; }
+.el-text-rich em, .el-list em, .el-card em { font-style: italic; }
+.el-text-rich del, .el-list del, .el-card del { text-decoration: line-through; opacity: .7; }
+.el-text-rich u, .el-list u, .el-card u { text-decoration: underline; text-underline-offset: 2px; }
+.el-text-rich mark, .el-list mark, .el-card mark { background: rgba(245,158,11,.25); padding: 0 .15em; border-radius: 2px; }
+.el-text-rich code, .el-list code, .el-card code {
+  font-family: 'Consolas','Monaco','Courier New',monospace;
+  background: rgba(100,116,139,.12); padding: .1em .3em; border-radius: 3px;
+  font-size: .85em;
+}
+.el-text-rich sup, .el-list sup, .el-card sup { font-size: .65em; vertical-align: super; }
+.el-text-rich sub, .el-list sub, .el-card sub { font-size: .65em; vertical-align: sub; }
+.el-text-rich a, .el-list a, .el-card a { text-decoration: underline; text-underline-offset: 2px; }
+
+/* 触屏设备（无 hover）缩略图删除按钮常驻 */
+@media (hover: none) { .thumb-del { opacity: 1 !important; } }