+
+ 属性面板选择本地视频或填入 URL
+
+
+
+ ![]()
+ ▶
+
+
+
+
+
-
-
-
-
+
+
+
+ {{ el.content }}
+
@@ -255,8 +335,18 @@ function onBlur(e: Event, field: string) {
-
diff --git a/src/components/editor/PropsPanel.vue b/src/components/editor/PropsPanel.vue
index b3e2738..518ccee 100644
--- a/src/components/editor/PropsPanel.vue
+++ b/src/components/editor/PropsPanel.vue
@@ -7,9 +7,10 @@ import { store } from '../../core/store'
import { elementTypes } from '../../core/sample'
import { generateImage, isImageConfigured, checkImageQuota } from '../../core/ai'
import { readAsDataURL } from '../../core/importer'
+import { appAlert, appConfirm, appPrompt } from '../../core/dialog'
import { markdownToSegments, segmentsToPlain, hasFormatting } from '../../core/richtext'
import AddGrid from './AddGrid.vue'
-import type { ElementType, ChartType } from '../../core/types'
+import type { ElementType, ChartType, ShapeType } from '../../core/types'
const CHART_TYPES: Array<{ k: ChartType; label: string; icon: string }> = [
{ k: 'bar', label: '柱状图', icon: '📊' },
@@ -31,7 +32,7 @@ const content = ref('')
const fontSize = ref(24)
const colorSel = ref('primary')
const colorPicker = ref('#000000')
-const shape = ref<'rect' | 'circle' | 'triangle'>('rect')
+const shape = ref{{ cardParts.title }}
- {{ cardParts.body }}
+ {{ cardParts.title }}
+ {{ cardParts.body }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -262,7 +363,12 @@ function onLocalImage() {
+
+
+
-
+
+
+
@@ -322,7 +428,15 @@ function onLocalImage() {
@@ -384,6 +498,31 @@ function onLocalImage() {
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -393,6 +532,108 @@ function onLocalImage() {
+
+
@@ -409,3 +650,126 @@ function onLocalImage() {
+
+
+
+
+
+
+
+ {{ expandedAnno === anno.id ? '▾' : '▸' }}
+ 批注 {{ i + 1 }}
+ {{ annoSummary(anno) }}
+
+
+
+
+
+
+
+
+ 气泡文字
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 连线
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
{{ entry.name }}
{{ fmtSize(entry.file.size) }}
✅ 图片就绪
+
+ ✅ 视频就绪
✅ AI → {{ entry.slides.length }} 页
⏳ 待分析
diff --git a/src/core/ai.ts b/src/core/ai.ts
index 340b05b..f1b2b49 100644
--- a/src/core/ai.ts
+++ b/src/core/ai.ts
@@ -13,7 +13,7 @@ import { normSegments } from './richtext'
import { isTauri, aiProxy, aiProxyStream } from './bridge'
const SEP = '%%PPT_JSON%%' // 对话模式中，自然语言回复与结构化操作的分隔标记
-const VALID_TYPES = ['title', 'text', 'list', 'stat', 'quote', 'image', 'shape', 'chart', 'card', 'table', 'code', 'formula'] as const
+const VALID_TYPES = ['title', 'text', 'list', 'stat', 'quote', 'image', 'video', 'shape', 'chart', 'card', 'table', 'code', 'formula'] as const
/* 智谱/通用错误码 → 可操作提示 */
const ERROR_HINTS: Record = {
@@ -40,12 +40,12 @@ const SYS_BASE =
'幻灯片模型：\n' +
'{ "slides": [ { "background": "bg|panel|primary|accent|g-primary|g-deep|g-soft", "elements": [ 元素, ... ] } ] }\n' +
'背景：bg/panel=浅底；primary/accent=纯色深底；g-primary=主→强调渐变(深)；g-deep=深色渐变；g-soft=浅色渐变。\n\n' +
- '元素类型 type：title 标题 | text 正文 | list 列表 | stat 数据 | quote 金句 | image 图片 | shape 形状 | chart 图表 | card 卡片 | table 表格 | code 代码 | formula 公式\n' +
+ '元素类型 type：title 标题 | text 正文 | list 列表 | stat 数据 | quote 金句 | image 图片 | video 视频 | shape 形状 | chart 图表 | card 卡片 | table 表格 | code 代码 | formula 公式\n' +
'元素：{ "type":..., "x":数字,"y":数字,"w":数字,"h":数字 (0-100), "content":字符串, "style":{...} }\n' +
' - title/text/list/quote：content 为文字，list 用 \\n 分多行\n' +
' - stat：content 为大数字(如 "65%")，style.label 为说明\n' +
' - card：content 第一行=标题、其余行=正文；style.accent=顶部色条键，style.icon=emoji 图标\n' +
- ' - shape：style.shapeType=rect|circle|triangle，style.fill=颜色键，style.gradient=true 渐变，style.opacity=0~1\n' +
+ ' - shape：style.shapeType=rect|circle|ellipse|triangle|diamond|pentagon|hexagon|star|arrow|chevron|bubble，style.fill=颜色键，style.gradient=true 渐变，style.opacity=0~1\n' +
' - chart：content 为 JSON，两种格式：\n' +
' 单系列：[{"label":"","value":数字}, ...]\n' +
' 多系列：{"series":["Q1","Q2"], "items":[{"label":"华东","values":[120,150]}, ...]}\n' +
@@ -56,7 +56,8 @@ const SYS_BASE =
' - table：content 为 Markdown 管道表格字符串（首行表头，用 | 分列，换行分行），style.header=true 首行加粗\n' +
' - code：content 为代码文本（保留符原样，不要转义），style.lang=语言如 js/python（可选）\n' +
' - formula：content 为 LaTeX 公式字符串（不含 $$ 分隔符），如 "E = mc^2"、"\\sum_{i=1}^n x_i"\n' +
- ' - image：content 留空\n\n' +
+ ' - image：content 留空\n' +
+ ' - video：content 填视频 URL\n\n' +
'可选 segments 字段（结构化富文本，同一行内不同片段可有不同样式）：\n' +
' segments: [[ {"text":"华东 "}, {"text":"增长 23%","bold":true,"color":"accent"} ], ...]\n' +
' 每个 segment 支持：bold/italic/underline/strike/color(主题键或#hex)/highlight(黄底)/code/sup/sub/fontSize/link\n' +
@@ -106,11 +107,12 @@ function deckContext(currentIdx: number, selectedEl?: SlideElement | null): stri
const deck: Deck = store.getDeck()
/** 图片/超长 content 脱敏：base64 会撑爆上下文，替换为占位说明 */
const sanitizeEl = (el: SlideElement): SlideElement => {
- if (el.type === 'image') {
+ if (el.type === 'image' || el.type === 'video') {
const src = el.content || ''
+ const label = el.type === 'video' ? '视频' : '图片'
const desc = src.startsWith('data:')
- ? `[图片 base64 ${Math.round(src.length / 1024)}KB]`
- : (src ? `[图片URL: ${src.slice(0, 80)}${src.length > 80 ? '…' : ''}]` : '[空图片]')
+ ? `[${label} base64 ${Math.round(src.length / 1024)}KB]`
+ : (src ? `[${label}URL: ${src.slice(0, 80)}${src.length > 80 ? '…' : ''}]` : `[空${label}]`)
return { ...el, content: desc }
}
if (el.content && el.content.length > 2000) {
@@ -415,6 +417,9 @@ function normStyle(st: any): ElementStyle {
if (out.grid != null) out.grid = !!out.grid
if (out.header != null) out.header = !!out.header
if (out.inline != null) out.inline = !!out.inline
+ if (out.autoplay != null) out.autoplay = !!out.autoplay
+ if (out.loop != null) out.loop = !!out.loop
+ if (out.muted != null) out.muted = !!out.muted
if (typeof out.lang === 'string' && out.lang.length > 16) out.lang = out.lang.slice(0, 16)
;['color', 'fill', 'accent', 'labelColor'].forEach(k => {
if (validColor(out[k]) === undefined && out[k] != null) delete out[k]
diff --git a/src/core/importer.ts b/src/core/importer.ts
index 40b1957..1f3840b 100644
--- a/src/core/importer.ts
+++ b/src/core/importer.ts
@@ -17,15 +17,18 @@ export const IMAGE_EXTS = new Set(['.png', '.jpg', '.jpeg', '.gif', '.webp', '.s
/** 允许的文档扩展名（由 LLM 解析） */
export const DOC_EXTS = new Set(['.md', '.markdown', '.txt', '.text', '.pdf', '.docx', '.doc'])
+/** 允许的视频扩展名（实际判定以 MIME video/* 为准，此处用于 accept 与无 MIME 环境兜底） */
+export const VIDEO_EXTS = new Set(['.mp4', '.webm', '.mov', '.avi', '.mkv'])
+
/** 文件选择器 accept 属性（由支持清单派生，保持单一数据源） */
-export const ACCEPT_ATTR = [...IMAGE_EXTS, ...DOC_EXTS].join(',')
+export const ACCEPT_ATTR = [...IMAGE_EXTS, ...VIDEO_EXTS, ...DOC_EXTS].join(',')
/** 文件分类结果 */
export interface FileEntry {
file: File
name: string
ext: string
- kind: 'image' | 'document' | 'unsupported'
+ kind: 'image' | 'video' | 'document' | 'unsupported'
/** 图片的 data URL，或文档的原始文本 */
data?: string
/** AI 解析出的幻灯片（文档读取 + LLM 分析后填充） */
@@ -46,6 +49,8 @@ export function getFileKind(file: File): FileEntry['kind'] {
const dot = name.lastIndexOf('.')
const ext = dot >= 0 ? name.slice(dot) : ''
if (IMAGE_EXTS.has(ext)) return 'image'
+ // 视频按 MIME 判定（扩展名太杂），无 MIME 时扩展名兜底
+ if (file.type.startsWith('video/') || VIDEO_EXTS.has(ext)) return 'video'
if (DOC_EXTS.has(ext)) return 'document'
return 'unsupported'
}
@@ -163,8 +168,7 @@ export function fileToImageElement(file: File, dataUrl: string): SlideElement {
export function imagesToSlideElements(files: Array<{ file: File; dataUrl: string }>): SlideElement[] {
if (files.length === 1) {
return [fileToImageElement(files[0].file, files[0].dataUrl)]
- }
- const cols = Math.ceil(Math.sqrt(files.length))
+ } const cols = Math.ceil(Math.sqrt(files.length))
const rows = Math.ceil(files.length / cols)
const cellW = Math.floor(80 / cols)
const cellH = Math.floor(60 / rows)
@@ -180,6 +184,19 @@ export function imagesToSlideElements(files: Array<{ file: File; dataUrl: string
})
}
+/* ============================================================
+ * 视频导入 → SlideElement（video 类型）
+ * 注意：dataURL 会把整个视频读入内存，大视频占内存较高（本地工具首版接受）
+ * ============================================================ */
+
+export function fileToVideoElement(file: File, dataUrl: string): SlideElement {
+ return createElement('video', {
+ content: dataUrl,
+ x: 20, y: 15, w: 60, h: 45,
+ style: { anim: 'fade' }
+ })
+}
+
/* ============================================================
* 批量文件扫描与读取
* ============================================================ */
@@ -204,6 +221,9 @@ export async function readEntries(entries: FileEntry[]): Promise {
try {
if (entry.kind === 'image') {
entry.data = await readAsDataURL(entry.file)
+ } else if (entry.kind === 'video') {
+ // 视频 → data URL（与图片同管线，播放元素直接消费）
+ entry.data = await readAsDataURL(entry.file)
} else if (entry.kind === 'document') {
if (entry.ext === '.pdf') {
entry.data = await extractPdfText(entry.file)
diff --git a/src/core/op.ts b/src/core/op.ts
index bfb10f3..35b1b0e 100644
--- a/src/core/op.ts
+++ b/src/core/op.ts
@@ -20,6 +20,7 @@ export type OpType =
| 'move_slide'
| 'replace_slide'
| 'set_slide_bg'
+ | 'set_slide_note'
| 'add_element'
| 'update_element'
| 'del_element'
@@ -106,6 +107,15 @@ export function applyOp(inputDeck: Deck, op: Op): Deck {
break
}
+ case 'set_slide_note': {
+ const index = op.index as number
+ const note = op.note as string
+ if (deck.slides[index]) {
+ deck.slides[index].note = note
+ }
+ break
+ }
+
case 'add_element': {
const slideIdx = op.slideIdx as number
const element = op.element as SlideElement
@@ -221,6 +231,12 @@ export function invertOp(inputDeck: Deck, op: Op): Op {
return { type: 'set_slide_bg', index, bg: oldBg }
}
+ case 'set_slide_note': {
+ const index = op.index as number
+ const oldNote = deck.slides[index]?.note ?? ''
+ return { type: 'set_slide_note', index, note: oldNote }
+ }
+
case 'add_element': {
// 逆：删除加的元素
return { type: 'del_element', slideIdx: op.slideIdx, elementId: (op.element as SlideElement).id }
diff --git a/src/core/sample.ts b/src/core/sample.ts
index 85b92b5..6571b52 100644
--- a/src/core/sample.ts
+++ b/src/core/sample.ts
@@ -30,7 +30,8 @@ export const elementTypes: Record &
stat: { w: 30, h: 35 },
quote: { w: 70, h: 25 },
image: { w: 40, h: 40 },
- shape: { w: 25, h: 25 },
+ video: { w: 50, h: 32 },
+ shape: { w: 30, h: 15 },
chart: { w: 45, h: 35 },
card: { w: 35, h: 35 },
table: { w: 60, h: 35 },
diff --git a/src/core/store.ts b/src/core/store.ts
index 5a82f95..e20c0a8 100644
--- a/src/core/store.ts
+++ b/src/core/store.ts
@@ -3,7 +3,7 @@
* 由 store.js 迁移：用 Vue reactive 替代手写 pub/sub，组件自动追踪
* ===================================================================== */
import { reactive, computed } from 'vue'
-import type { AiCfg, Deck, LibItem, PageTemplate, Slide, SlideElement, ThemeKey, ChatMessage } from './types'
+import type { AiCfg, Deck, LibItem, PageTemplate, Slide, SlideElement, ThemeKey, ChatMessage, Annotation } from './types'
import { DECK_VERSION, SAMPLE_DECK, createElement, themes, uid } from './sample'
import { applyOp, invertOp, type Op, type HistoryEntry } from './op'
@@ -185,12 +185,15 @@ const state = reactive<{
/** 多选集（框选/Shift加选时非空；selectedId 始终为锚点元素） */
selectedIds: string[]
activeLibId: string | null
+ /** 当前选中的批注 id（纯 UI 态，不持久化；Delete 删除优先级高于宿主元素） */
+ selectedAnnoId: string | null
}>({
deck: JSON.parse(JSON.stringify(SAMPLE_DECK)),
currentIndex: 0,
selectedId: null,
selectedIds: [],
- activeLibId: null
+ activeLibId: null,
+ selectedAnnoId: null
})
let saveTimer: ReturnType | null = null
@@ -430,6 +433,10 @@ function selectElement(id: string | null) { state.selectedId = id || null; state
/* ---------- 多选（框选 / Shift 加选 / Ctrl+A） ---------- */
const selectedIds = computed(() => state.selectedIds)
+/* ---------- 批注选中（纯 UI 态） ---------- */
+const selectedAnnoId = computed(() => state.selectedAnnoId)
+function setSelectedAnnoId(id: string | null) { state.selectedAnnoId = id }
+
/** 有效多选集：过滤掉已不存在的元素，非空(length>1)时表示多选态 */
function getSelection(): string[] {
const s = currentSlide.value
@@ -471,6 +478,53 @@ function moveElementsBy(ids: string[], dx: number, dy: number) {
}
}
+/** 多选对齐：left左对齐 hcenter水平居中 right右对齐 top顶对齐 vmiddle垂直居中 bottom底对齐 */
+function alignElements(ids: string[], edge: 'left' | 'hcenter' | 'right' | 'top' | 'vmiddle' | 'bottom') {
+ const els = ids.map(findElement).filter(Boolean) as SlideElement[]
+ if (els.length < 2) return
+ const group = beginBatch()
+ const minX = Math.min(...els.map(e => e.x))
+ const maxX = Math.max(...els.map(e => e.x + e.w))
+ const minY = Math.min(...els.map(e => e.y))
+ const maxY = Math.max(...els.map(e => e.y + e.h))
+ for (const el of els) {
+ let x = el.x, y = el.y
+ if (edge === 'left') x = minX
+ if (edge === 'right') x = maxX - el.w
+ if (edge === 'hcenter') x = (minX + maxX) / 2 - el.w / 2
+ if (edge === 'top') y = minY
+ if (edge === 'bottom') y = maxY - el.h
+ if (edge === 'vmiddle') y = (minY + maxY) / 2 - el.h / 2
+ if (x !== el.x || y !== el.y) {
+ execOp({ type: 'update_element', slideIdx: state.currentIndex, elementId: el.id, patch: { x, y }, clientId: CLIENT_ID, timestamp: Date.now() }, { group })
+ }
+ }
+}
+
+/** 多选分布：h 水平等间距分布（x 方向）v 垂直等间距分布（y 方向）；首尾不动，中间均匀排布 */
+function distributeElements(ids: string[], axis: 'h' | 'v') {
+ const els = ids.map(findElement).filter(Boolean) as SlideElement[]
+ if (els.length < 3) return
+ const group = beginBatch()
+ const sorted = axis === 'h' ? [...els].sort((a, b) => a.x - b.x) : [...els].sort((a, b) => a.y - b.y)
+ const first = sorted[0], last = sorted[sorted.length - 1]
+ let gapTotal: number
+ if (axis === 'h') {
+ // last.x - first.x - first.w 为首尾间总空隙（含中间元素占的宽），再减中间元素总宽 = 纯空隙
+ gapTotal = (last.x - first.x - first.w) - sorted.slice(1, -1).reduce((s, e) => s + e.w, 0)
+ } else {
+ gapTotal = (last.y - first.y - first.h) - sorted.slice(1, -1).reduce((s, e) => s + e.h, 0)
+ }
+ const gap = gapTotal / (sorted.length - 1)
+ let cur = axis === 'h' ? first.x + first.w + gap : first.y + first.h + gap
+ for (let i = 1; i < sorted.length - 1; i++) {
+ const el = sorted[i]
+ const patch = axis === 'h' ? { x: cur, y: el.y } : { x: el.x, y: cur }
+ execOp({ type: 'update_element', slideIdx: state.currentIndex, elementId: el.id, patch, clientId: CLIENT_ID, timestamp: Date.now() }, { group })
+ cur += (axis === 'h' ? el.w : el.h) + gap
+ }
+}
+
/** 批量删除（同批 undo） */
function delElements(ids: string[]) {
const group = beginBatch()
@@ -527,6 +581,13 @@ function setSlideBackground(bg: string) {
execOp({ type: 'set_slide_bg', index: state.currentIndex, bg: bg as Slide['background'], clientId: CLIENT_ID, timestamp: Date.now() })
}
+function setSlideNote(note: string) {
+ execOp(
+ { type: 'set_slide_note', index: state.currentIndex, note, clientId: CLIENT_ID, timestamp: Date.now() },
+ { coalesceKey: 'slide-note:' + state.currentIndex }
+ )
+}
+
/* ---------- 元素 CRUD ---------- */
function addElement(type: SlideElement['type'], over?: Parameters[1], group?: string) {
const el = createElement(type, over)
@@ -540,6 +601,40 @@ function updateElement(id: string, patch: Partial & { style?: Reco
execOp({ type: 'update_element', slideIdx: state.currentIndex, elementId: id, patch, clientId: CLIENT_ID, timestamp: Date.now() }, { coalesceKey })
}
+/* ---------- 批注（annotation）：挂在 element.style.annotations，走 updateElement ---------- */
+function addAnnotation(elId: string) {
+ const el = findElement(elId)
+ if (!el) return
+ const list: Annotation[] = [...(el.style.annotations || [])]
+ const anno: Annotation = {
+ id: uid('an'),
+ text: '',
+ bx: Math.min(90, (el.x || 0) + (el.w || 20) + 4), by: Math.max(2, el.y || 10),
+ bw: 22, bh: 12,
+ ax: 50, ay: 50,
+ }
+ list.push(anno)
+ updateElement(elId, { style: { annotations: list } })
+ return anno.id
+}
+function updateAnnotation(elId: string, annoId: string, patch: Partial) {
+ const el = findElement(elId)
+ if (!el) return
+ const list = (el.style.annotations || []).map(a => {
+ if (a.id !== annoId) return a
+ const next: Annotation = { ...a, ...patch }
+ if (patch.line) next.line = { ...(a.line || {}), ...patch.line }
+ return next
+ })
+ updateElement(elId, { style: { annotations: list } })
+}
+function delAnnotation(elId: string, annoId: string) {
+ const el = findElement(elId)
+ if (!el) return
+ const list = (el.style.annotations || []).filter(a => a.id !== annoId)
+ updateElement(elId, { style: { annotations: list } })
+}
+
function delElement(id: string) {
const el = findElement(id)
const deletedElement = el ? clone(el) : undefined
@@ -988,14 +1083,17 @@ export const store = {
// 主题
setTheme,
// 幻灯片 CRUD
- addSlide, dupSlide, delSlide, moveSlide, setSlideBackground,
+ addSlide, dupSlide, delSlide, moveSlide, setSlideBackground, setSlideNote,
// 元素 CRUD
addElement, updateElement, delElement, moveElementZ, findElement,
+ // 批注
+ addAnnotation, updateAnnotation, delAnnotation,
// 元素剪贴板
copyElement, copyElements, cutElement, cutElements, pasteElement, pasteElements, hasClipboard,
// 多选
selectedIds, getSelection, selectMany, toggleSelect, selectAllElements,
- moveElementsBy, delElements,
+ selectedAnnoId, setSelectedAnnoId,
+ moveElementsBy, delElements, alignElements, distributeElements,
// undo/redo
undo, redo, beginBatch,
// 整体替换
diff --git a/src/core/types.ts b/src/core/types.ts
index 0f4fbf4..1f26b6d 100644
--- a/src/core/types.ts
+++ b/src/core/types.ts
@@ -17,7 +17,7 @@ export type ColorKey = 'primary' | 'accent' | 'text' | 'muted' | (string & {})
/** 元素类型 */
export type ElementType =
| 'title' | 'text' | 'list' | 'stat' | 'quote'
- | 'image' | 'shape' | 'chart' | 'card'
+ | 'image' | 'video' | 'shape' | 'chart' | 'card'
| 'table' | 'code' | 'formula'
/** 图表子类型 */
@@ -31,7 +31,9 @@ export type AnimType =
| 'pop' | 'rotate' | 'bounce' | 'flip' | 'blur'
/** 形状类型 */
-export type ShapeType = 'rect' | 'circle' | 'triangle'
+export type ShapeType =
+ | 'rect' | 'circle' | 'ellipse' | 'triangle' | 'diamond'
+ | 'pentagon' | 'hexagon' | 'star' | 'arrow' | 'chevron' | 'bubble'
/** 主题对象 */
export interface Theme {
@@ -44,6 +46,26 @@ export interface Theme {
muted: string
}
+/** 批注（连线 + 气泡） */
+export interface Annotation {
+ id: string
+ text: string
+ /** 气泡框：百分比坐标，与元素同坐标系（画布 1280×720） */
+ bx: number; by: number; bw: number; bh: number
+ /** 图片侧连线锚点（相对图片框的百分比 0~100），默认 50/50 */
+ ax?: number; ay?: number
+ /** 气泡文字整体样式 */
+ fontSize?: number; color?: ColorKey; bold?: boolean; italic?: boolean; align?: 'left' | 'center' | 'right'
+ /** 连线样式 */
+ line?: {
+ style?: 'solid' | 'dashed'
+ width?: number
+ color?: ColorKey
+ startCap?: 'none' | 'arrow' | 'dot'
+ endCap?: 'none' | 'arrow' | 'dot'
+ }
+}
+
/** 元素样式（所有字段可选，按 type 决定哪些有效） */
export interface ElementStyle {
fontSize?: number
@@ -58,6 +80,11 @@ export interface ElementStyle {
labelSize?: number
// image
fit?: 'contain' | 'cover'
+ // video
+ poster?: string
+ autoplay?: boolean
+ loop?: boolean
+ muted?: boolean
// shape
shapeType?: ShapeType
fill?: ColorKey
@@ -85,6 +112,8 @@ export interface ElementStyle {
// card
icon?: string
accent?: ColorKey
+ // annotation（批注气泡，image 起步，未来任意元素）
+ annotations?: Annotation[]
}
/** 幻灯片元素 */
@@ -106,6 +135,7 @@ export interface Slide {
id: string
background: BgKey
elements: SlideElement[]
+ note?: string // 演讲者备注/页脚批注（不渲染到幻灯片）
}
/** 一份演示文稿 */
diff --git a/src/styles/editor.css b/src/styles/editor.css
index d8856c4..d39e93a 100644
--- a/src/styles/editor.css
+++ b/src/styles/editor.css
@@ -72,7 +72,7 @@
}
.canvas-frame {
position: relative;
- width: min(100%, calc((100vh - 54px - 56px) * 16 / 9));
+ width: min(100%, calc((100vh - 54px - 116px) * 16 / 9));
max-width: 100%;
aspect-ratio: 16 / 9;
box-shadow: var(--shadow-md); border-radius: 4px; overflow: hidden;
@@ -83,7 +83,78 @@
width: 1280px; height: 720px;
transform-origin: top left;
}
-.canvas-status { margin-top: 10px; font-size: 12px; color: var(--ui-muted); }
+.canvas-footer {
+ margin-top: 10px;
+ flex: none;
+ width: min(100%, calc((100vh - 54px - 116px) * 16 / 9));
+ max-width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+}
+.canvas-status { font-size: 12px; color: var(--ui-muted); flex: none; }
+.note-toggle {
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+ height: 26px;
+ padding: 0 10px;
+ border: 1px solid transparent;
+ border-radius: 13px;
+ background: transparent;
+ color: var(--ui-muted);
+ font-size: 12px;
+ cursor: pointer;
+ transition: background .15s, color .15s, border-color .15s;
+}
+.note-toggle:hover {
+ background: var(--ui-primary-soft);
+ color: var(--ui-primary);
+}
+.note-toggle.active {
+ color: var(--ui-primary);
+ border-color: var(--ui-border);
+ background: var(--ui-panel);
+}
+.note-toggle-icon { font-size: 13px; line-height: 1; }
+.note-dot {
+ width: 6px; height: 6px;
+ border-radius: 50%;
+ background: var(--ui-primary);
+}
+.canvas-note {
+ margin-top: 8px;
+ flex: none;
+ /* 与 .canvas-frame 同宽，保持对齐 */
+ width: min(100%, calc((100vh - 54px - 116px) * 16 / 9));
+ max-width: 100%;
+}
+.canvas-note-input {
+ display: block;
+ width: 100%;
+ box-sizing: border-box;
+ resize: vertical;
+ min-height: 44px;
+ max-height: 120px;
+ padding: 8px 12px;
+ border: 1px solid var(--ui-border);
+ border-radius: 8px;
+ font-size: 13px;
+ line-height: 1.5;
+ color: var(--ui-text);
+ background: var(--ui-panel);
+ font-family: inherit;
+ outline: none;
+ transition: border-color .15s, box-shadow .15s;
+}
+.canvas-note-input:focus {
+ border-color: var(--ui-primary);
+ box-shadow: 0 0 0 3px var(--ui-primary-soft);
+}
+.canvas-note-input::placeholder {
+ color: var(--ui-muted);
+}
/* ---------- 画布元素 ---------- */
.el { position: absolute; overflow: hidden; }
@@ -107,7 +178,41 @@
.el-stat .num { font-weight: 800; line-height: 1; }
.el-stat .label { margin-top: .35em; text-align: center; }
.el-shape { width: 100%; height: 100%; }
+/* 形状文字层：覆盖在图形上方、居中；颜色默认白（形状为填充色底），字号/粗斜继承 style。
+ padding 稍大：clip-path 多边形（箭头/星形等）边缘收窄，文字留出安全区 */
+.el-shape-text {
+ position: absolute;
+ inset: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 8% 12%;
+ box-sizing: border-box;
+ white-space: pre-wrap;
+ word-break: break-word;
+ text-align: center;
+ outline: none;
+}
+/* rect/椭圆这类满幅形状，文字安全区可以小 */
+.el[data-type="shape"][data-shape="rect"] > .el-shape-text,
+.el[data-type="shape"][data-shape="circle"] > .el-shape-text,
+.el[data-type="shape"][data-shape="ellipse"] > .el-shape-text {
+ padding: 6px 10px;
+}
+/* 空形状不显示文字占位：装饰形状（分隔条/小三角）保持纯净，
+ 加文字的引导由属性面板「内容」输入框承担 */
.el-image { width: 100%; height: 100%; object-fit: cover; }
+.el-video { width: 100%; height: 100%; background: #000; border-radius: 8px; display: block; }
+/* 视频缩略图降级：不加载视频，poster 静态图 / 黑底▶占位 */
+.el-video-thumb {
+ width: 100%; height: 100%;
+ background: #0f172a;
+ border-radius: 8px;
+ display: flex; align-items: center; justify-content: center;
+ overflow: hidden;
+}
+.el-video-thumb img { width: 100%; height: 100%; object-fit: cover; }
+.el-video-thumb-play { color: rgba(255,255,255,.75); font-size: 28px; }
/* 空图片元素占位（未填 content 时不渲染裂图） */
.el-image-empty {
width: 100%; height: 100%;