slidev-zhiqi-ppt（幻灯片制作 ppt）

网易智企 Slidev PPT

基于网易智企 2026 PPT 模板的 Slidev 主题，用于创建和编辑企业演示文稿。支持通过配置文件或目录方式引入新风格。

• 主题文档：template/theme/README.md
• 完整用法示例：template/theme/example.md

零、引入新风格（主题扩展机制）

当用户希望使用非内置业务线的新风格时，提供两种方式：

方式 A：配置文件描述（轻量，推荐）

用户提供风格描述，AI 自动生成 CSS 变量块并注册到主题。

触发词：「换个风格」「用 xxx 风格」「新主题」「自定义主题」「引入风格」

操作步骤：

1. 收集风格信息，向用户确认以下字段（可逐步澄清）： 字段 说明 示例 name 风格名称（英文或中文，用作标识） my-brand / 暗黑风 primaryColor 主品牌色 #0055FF bgGradientFrom 背景渐变起始色 #1A1A2E bgGradientTo 背景渐变结束色 #16213E textPrimary 主文字颜色 #FFFFFF textSecondary 辅助文字颜色 #AAAAAA accentColor 强调色（卡片/装饰） #00CFFF bgImage 封面背景图路径（可选） ~/Desktop/my-bg.png logoImage Logo 图片路径（可选） ~/Desktop/my-logo.png 若用户描述的是「暗黑」「科技感」「清新」等风格词汇，AI 应根据语义自动推断色值并展示给用户确认。
2. 若有图片资源：将用户提供的图片复制到目标 PPT 项目的 theme/assets/ 目录下，按命名规范重命名： theme/assets/{name}-bg.png theme/assets/{name}-logo.png
3. 在 <项目>/theme/styles/variables.css 中追加新风格的 CSS 变量块，格式如下： /* ==== 自定义风格：{name} ==== */ /* --netease-zhiqi-red: {primaryColor}; --netease-zhiqi-red-dark: {primaryColor 加深10%}; --netease-zhiqi-red-light: {primaryColor 提亮20%}; --netease-zhiqi-bg-primary: {bgGradientFrom}; --netease-zhiqi-bg-secondary: {bgGradientTo}; --netease-zhiqi-bg-gradient: linear-gradient(135deg, {bgGradientFrom} 0%, {bgGradientTo} 100%); --netease-zhiqi-text-primary: {textPrimary}; --netease-zhiqi-text-secondary: {textSecondary}; --netease-zhiqi-accent-pink: {accentColor}; --netease-zhiqi-bg-image: url('../assets/{name}-bg.png'); /* 若无图片则省略此行 */ --netease-zhiqi-logo-image: url('../assets/{name}-logo.png'); /* 若无图片则省略此行 */ */ 新风格默认注释状态（/*... */），需要用户手动放开，或由 AI 帮用户切换（见下方「切换风格」步骤）。
4. 同步更新 variables.css 中的「按业务线放开」注释区：在现有业务线注释块后追加新风格的注释块，保持格式统一。
5. 帮用户切换到新风格：将原来生效的变量块注释掉，将新风格的变量块取消注释，使其生效。
6. 告知用户结果：说明已注册的风格名称、生效状态，以及如何在 variables.css 中手动切换回其他风格。

方式 B：目录导入（完整风格包）

用户提供一个完整的风格目录（含图片 + CSS 文件），AI 执行导入。

目录结构要求（由 AI 向用户说明）：

my-theme/
├── variables.css        # 必须：CSS 变量定义（参考上方格式）
├── bg.png               # 可选：封面背景图
├── logo.png             # 可选：Logo 图
└── theme.json           # 可选：风格元信息（name 字段至少要有）

theme.json 示例：

{
  "name": "my-brand",
  "displayName": "My Brand 风格",
  "description": "科技感深色主题"
}

操作步骤：

1. 读取 my-theme/theme.json（若存在）获取 name，否则用目录名作为 name
2. 将 bg.png → theme/assets/{name}-bg.png，logo.png → theme/assets/{name}-logo.png（若存在则复制）
3. 读取 my-theme/variables.css，将其中的变量块追加到 <项目>/theme/styles/variables.css，包裹在注释块中（同方式 A 步骤 3）
4. 询问用户是否立即切换到该风格，若是则执行切换（同方式 A 步骤 5）

切换已注册的风格

当用户说「切换回智企风格」「换成暗黑风格」等时：

1. 读取 <项目>/theme/styles/variables.css
2. 将当前生效的变量块（未被 /* */ 包裹的那组）注释掉
3. 将目标风格的变量块取消注释
4. 保存文件，告知用户已切换

风格名称与注释标识对应关系（读取文件时按注释行 /* ====... ==== */ 识别）：

• 智企（默认） → 默认区块（文件顶部未标注的那组）
• 其他风格 → /* ==== 自定义风格：{name} ==== */ 标识

查看已注册的风格

当用户问「有哪些风格」「支持哪些主题」时：

1. 读取 <项目>/theme/styles/variables.css
2. 列出所有识别到的风格块（按注释标识），标注当前生效的那个
3. 以列表形式展示给用户

一、初始化 PPT

1. 使用 scripts/init.sh 从模板创建新项目：

bash scripts/init.sh <目标目录>

脚本会自动完成：

• 将 template/ 内容拷贝到目标目录（如目标为已存在的空目录则直接拷入）
• 将 theme/example.md 拷贝为 slides.md（作为初始内容）

1. 脚本执行完成后，在目标目录中运行 pnpm install（或 npm install）安装依赖。不要运行 pnpm dev。
2. 判断业务线：根据用户上下文（项目名、对话内容等）判断属于哪条业务线，修改 <目标目录>/theme/styles/variables.css 中的 CSS 变量。注释默认的第一组（智企），放开对应业务线的注释。判断不出则保持默认。

业务线对应关系：

操作方式：在 variables.css 中将当前生效的一组用 /* */ 注释，将目标业务线的 /* */ 注释去掉。

只有智企（默认）有 Logo short 图片，其他业务线不需要。

二、编辑内容（slides.md）

修改前准备

重要：每次修改 slides.md 前，必须先完整阅读 <项目>/theme/example.md。该文件包含所有布局和组件的完整用法示例，是你了解可用能力的唯一权威来源。不要凭猜测写组件用法，不要自己用 HTML/CSS 手写已有组件能实现的效果。 重要：每次修改 slides.md 前，必须先完整阅读 用户已有的 slides.md 文件，不能随意篡改不相关的内容。

关于样式，优先使用已有的布局（比如封面、居中页、两栏对比页等）和组件（面板、要点卡片、数据圆环、阶梯递进流程图、韦恩图、同心弧层级图、金字塔层级图等）。其次搭配 unocss 进行布局（比如默认页+内容两列、默认页+右图左文等），而不是直接改主题。

修改完成后

1. 运行 pnpm build 生成静态文件，确保 slides.md 中没有语法错误。如有错误请修复。
2. 运行 pnpm run export:pptx（或 npm run export:pptx）导出 PPTX 文件。导出依赖 Playwright，模板已包含 playwright-chromium 依赖。

布局选择

优先使用已有布局，通过 frontmatter 的 layout 字段指定：

frontmatter 保持简洁，只配必要字段。

组件使用

重要：主题内置了丰富的可视化组件，不要用纯文字列表代替。当内容涉及流程、层级、对比、数据等场景时，必须优先使用对应组件，而不是只用 Markdown 列表或表格。具体写法请参照 example.md 中的示例原样使用，不要自行猜测 Props 或插槽名称。

全局组件可直接在 Markdown 中使用：

重要： - <KeypointCard>、<DataCircle size="large">、<StepTimeline>、<VennDiagram>、<ArcDiagram>、<PyramidDiagram> 都比较大，尽量只在一页中使用。否则会很拥挤。 - <KeypointCard> 不要垂直排列，只适合水平排列。 - <DataCircle size="small"> 可搭配正文使用。

内容→组件速查

根据内容类型选择最合适的组件，不要全部用纯文字列表：

布局+UnoCSS 组合技巧

在 default 布局中搭配 UnoCSS 实现更多排版，而不是去改主题：

• 两列布局：<div class="grid grid-cols-2 gap-x-10"> 包裹两个 <div>
• 右图左文：<div class="grid grid-cols-[2fr_1fr] gap-x-12 items-center">
• 三列卡片：<div class="grid grid-cols-3 gap-8 mt-10"> 包裹三个 <KeypointCard>
• 数据圆环（大）：<div class="flex items-center justify-center -space-x-2 mt-20"> 包裹多个 <DataCircle>
• 数据圆环（图文结合）：左侧 markdown + 右侧 <DataCircle size="normal"> 或 size="small"，用 grid 布局
• 金字塔+左侧文字：<div class="grid grid-cols-[1fr_4fr] gap-4 h-full"> 左侧文字 + 右侧 <PyramidDiagram>
• 内容过多缩放：外层 <div class="scale-75 origin-top-left"> 包裹

Markdown 书写规范

1. 优先用组件 + Markdown 语法，其次用原生 HTML 标签
2. 标签内嵌 Markdown 时，内容开头和结尾必须与标签之间各空一行，内部 Markdown 不要缩进：

<Panel title="标题">

- 列表项1
- 列表项2

</Panel>

1. 优先配置 frontmatter 和组件 props，其次再用插槽等高级用法
2. 项目列表等正文，文字建议不要过多，一是 PPT 要精简方便阅读展示，二是文字过多容易溢出屏幕。除非用户声明。

图标基本用法

• 优先使用 @iconify-json/material-symbols-light 图标库（已引入）。推荐 outline-rounded 或 outline 风格。其次再使用 emoji
• 用法：<div class="i-material-symbols-light-{icon-name} text-2xl"></div>
• 你需要用 grep 命令确保库中有你需要的图标，否则会出现空白。脚本示例： cd <项目> && grep "arrow" node_modules/@iconify-json/material-symbols-light/metadata.json 可检索到所有与 arrow 相关的图标。
• 如果没有，可以换个相似的词语再检索。
• 注意：不是所有图标都支持 outline-rounded 或 outline 风格，你检索出来没有，用其他风格也可以。
• 完整图标列表见 Material Symbols Light。

动画基本用法

演讲时按空格或 → 触发「下一步」，常用写法：

• 逐步显示：<v-click> 第一次点击后出现 </v-click> 或 <div v-click>...</div>
• 与前一步同时出现：<v-after> 和上一句一起出现 </v-after>
• 列表逐条出现：用 <v-clicks> 包裹列表，每次点击显示一项：

<v-clicks>

- 要点一
- 要点二
- 要点三

</v-clicks>

• 同样注意：标签内嵌 Markdown 时，内容开头和结尾必须与标签之间各空一行，内部 Markdown 不要缩进
• 指定第几次点击显示：<div v-click="3"> 第 3 次点击后出现 </div>
• 幻灯片切换过渡：在 frontmatter 中写 transition: slide-left（或 fade、slide-up 等）

更多点击时机、Motion 动画、自定义过渡见 动画指南。

Slidev 官方参考

• 语法指南
• 内置布局
• 动画指南
• 演讲者备注

三、修改完成后向用户总结

AI 工具完成对 PPT 的创建或修改后，应向用户简要总结以下信息：

1. 导出文件位置 给用户指明 PPTX 导出文件的位置，如：/Users/your-name/some/path/slides-export.pptx。 默认文件名一般为 slides-export.pptx（或通过 --output 指定的名称）。用户可在该目录中直接找到并打开。
2. 网页版预览方式 给用户指明如何打开网页版预览，如执行： cd /Users/your-name/some/path npm run dev 然后在浏览器中打开终端提示的地址。默认端口一般为 3030，若被占用会使用 3031 等，以终端实际输出为准（例如 http://localhost:3030）。
3. 如何修改 PPT 内容 直接编辑项目根目录下的 slides.md 即可修改文案与结构。改完之后，网页版不需要重新启动。 如果要重新导出 PPTX，可再次执行： pnpm build pnpm run export:pptx
4. Slidev 导出 PPTX 的局限 本框架导出的 PPTX 中，每一页均为整页截图（图片），文字不可在 PowerPoint 中单独选中或编辑。详见官方说明：导出 - PPTX。 建议优先以修改 Markdown 和在网页版预览为主，以保留交互与可读性。
5. Slidev 其他用法

- PDF 导出：npm run export（默认 PDF），输出如 slides-export.pdf。 - 浏览器导出 UI：开发时访问 http://localhost:3030/export（端口以实际为准），可在页面中导出 PDF、PPTX 或 PNG。 - 静态站点部署：pnpm build 后部署 dist/ 目录，即可将演示文稿作为网页分享。 - 更多语法、演讲者备注、点击动画等详见 Slidev 官方文档，包括以下章节： - 语法指南 - 内置布局 - 演讲者备注 - 点击动画 - ...

四、高级修改主题样式

主题已是最佳实践，建议不要大改。修改前先阅读代码，保持与已有风格一致。

优先级：

1. <项目>/theme/styles/variables.css — 修改颜色、字号等变量，切换业务线主题变量。
2. 开发新的布局和组件 — 极少需要改动
3. <项目>/theme/styles/layout.css — 修改全局排版样式（谨慎）

开发新的布局和组件

现在 <项目>/theme 中的代码，特别是 layouts 和 components 的代码都已优化，效果较好，是最佳实践，尽量参考这些代码。

• 你需要思考是新加一个布局，还是新加组件的方式来解决用户需求。
• 建议优先添加组件，搭配默认布局使用。
• 组件的样式尽量在组件中添加 scoped 样式，而不是在 layout.css 中添加。
• 尽量复用主题变量。
• 减少组件间的布局样式实现，应该用 unocss 搭配布局实现。