用途:说明如何编辑单张幻灯片,包括内容格式化、HTML 样式规则,以及更新数据库中幻灯片内容的方式。
主要能力与结构:幻灯片是存储在 deck JSON 中的 HTML 内容,每张幻灯片的 content 字段是自包含的 HTML 字符串,按 1920x1080 分辨率渲染。每张幻灯片使用统一外层容器:<div class="fmd-slide" style="padding: 80px 110px; display: flex; flex-direction: column; justify-content: flex-start;">。
样式规范:背景为纯黑 bg-[#000000];所有文字使用 font-family: 'Poppins', sans-serif;章节标签为 16px、700、字距 3px、大写、颜色 #00E5FF;标题为 40px、900、白色、行高 1.15、字距 -1px;标题页为 54px、900 并居中;项目符号用 ●(8px 白色),间距 20px、字号 22px、颜色 rgba(255,255,255,0.85);子项目符号用 ○,左内边距 36px;加粗术语用 <strong style="font-weight: 800; color: #fff;">,说明文字用 rgba(255,255,255,0.55);强调色 #00E5FF 用于章节标签、强调与高亮。
更新方式:先调用 view-screen 获取当前 deck、幻灯片 ID、HTML 及选择/编辑目标;修改目标幻灯片的 content HTML 字符串;再用 update-slide 动作,传入 deckId、slideId 和 fullContent 更新。不要直接写 deck 行,也不要为常规幻灯片编辑添加原始 /api/decks/:id PUT 调用。浏览器/编辑器代码应通过 patch-deck / DeckContext.tsx 入队细粒度 deck 操作,而非替换整个 deck JSON。
图片占位:视觉元素(图表、照片)使用占位 div:<div class="fmd-img-placeholder" style="width: 100%; height: 300px; border-radius: 12px;">图片描述</div>。不要用原始 HTML/CSS 重建复杂视觉,应使用占位符并通过图像生成流程生成正式图片。
常见版式:标题页(单个居中标题,justify-content: center)、章节分隔页(大号单词居中)、内容页(章节标签+标题+项目符号列表)、双栏(flex 行,gap: 40px,左文右图)、表格(CSS grid,交替行背景)。
限制:资料未提供具体安装命令、收费或平台信息。