{"_id":"@carlory/slidev-theme-daocloud","name":"@carlory/slidev-theme-daocloud","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@carlory/slidev-theme-daocloud","version":"0.1.0","description":"A DaoCloud theme for Slidev presentations","license":"MIT","type":"module","author":{"name":"Carlory"},"homepage":"https://github.com/carlory/slidev-theme-daocloud#readme","bugs":{"url":"https://github.com/carlory/slidev-theme-daocloud/issues"},"repository":{"type":"git","url":"git+https://github.com/carlory/slidev-theme-daocloud.git"},"keywords":["slidev","slidev-theme","daocloud","presentation"],"engines":{"node":">=22.12.0","slidev":">=52.19.1 <53"},"publishConfig":{"access":"public"},"overrides":{"dompurify":"3.4.15","floating-vue":"5.2.2"},"slidev":{"colorSchema":"both"},"scripts":{"dev":"slidev example.md --theme ./","docs:previews":"node scripts/docs/generate-previews.mjs","lint":"eslint . --max-warnings 0","typecheck":"vue-tsc --noEmit","test:e2e":"SLIDEV_E2E_COMMAND='npm exec -- slidev example.md --theme ./ --port 4173' playwright test tests/e2e","test:visual":"SLIDEV_E2E_COMMAND='npm exec -- slidev example.md --theme ./ --port 4173' playwright test tests/visual","build":"slidev build example.md --theme ./ --out dist --without-notes","export:pdf":"slidev export example.md --theme ./ --output artifacts/slidev-theme-daocloud.pdf --timeout 60000","export:pptx":"slidev export example.md --theme ./ --format pptx --output artifacts/slidev-theme-daocloud.pptx --timeout 60000 && node scripts/release/fix-pptx.mjs artifacts/slidev-theme-daocloud.pptx","export:png":"slidev export example.md --theme ./ --format png --output artifacts/png --timeout 60000","check:exports":"npm run export:pdf && npm run export:pptx && npm run export:png && node scripts/release/check-exports.mjs","check:pack":"node scripts/release/validate-pack.mjs","test:consumer":"node scripts/release/test-consumer.mjs","release:validate":"node scripts/release/validate-release.mjs"},"devDependencies":{"@fontsource-variable/noto-sans-sc":"5.3.0","@playwright/test":"1.63.0","@slidev/cli":"52.19.1","@slidev/types":"52.19.1","@types/node":"22.20.2","eslint":"9.39.5","eslint-plugin-vue":"10.11.0","jszip":"3.10.2","pdf-lib":"1.17.1","playwright-chromium":"1.63.0","typescript":"5.9.3","typescript-eslint":"8.70.0","vue":"3.5.42","vue-tsc":"3.3.11"},"gitHead":"2fac06cad3ca7c10a35dc118af29de9f4c4ab032","_id":"@carlory/slidev-theme-daocloud@0.1.0","_nodeVersion":"24.18.0","_npmVersion":"11.16.0","dist":{"integrity":"sha512-eZ0EFletkq+pQrV7wJwwZ3rZ/lIY9dX3zeqjmkbnkcpUx6R4x7fPBG3B5QAPbCqFNunVWUT/DZ7Cukx+zy7tFg==","shasum":"434c57472003d591f89d56f22395c10a2e8d19e0","tarball":"https://registry.npmjs.org/@carlory/slidev-theme-daocloud/-/slidev-theme-daocloud-0.1.0.tgz","fileCount":66,"unpackedSize":6342186,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDkRTMoDdxGuqX7eK+ObSTskyd4ndkpyHrtkO+bdYzQfQIhALVf8X0pHwF5kpY9CU/tKCd0VRY5zfJvpsucuffHbL1V"}]},"_npmUser":{"name":"carlory","email":"fanbaofa@gmail.com"},"directories":{},"maintainers":[{"name":"carlory","email":"fanbaofa@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/slidev-theme-daocloud_0.1.0_1789124905622_0.7129700450827103"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-11T11:08:25.410Z","0.1.0":"2026-09-11T11:08:25.924Z","modified":"2026-09-11T11:08:26.228Z"},"maintainers":[{"name":"carlory","email":"fanbaofa@gmail.com"}],"description":"A DaoCloud theme for Slidev presentations","homepage":"https://github.com/carlory/slidev-theme-daocloud#readme","keywords":["slidev","slidev-theme","daocloud","presentation"],"repository":{"type":"git","url":"git+https://github.com/carlory/slidev-theme-daocloud.git"},"author":{"name":"Carlory"},"bugs":{"url":"https://github.com/carlory/slidev-theme-daocloud/issues"},"license":"MIT","readme":"# DaoCloud Slidev 主题\n\n`@carlory/slidev-theme-daocloud` 是一套基于 DaoCloud 演示文稿视觉设计的中英文双语 16:9 Slidev 主题。它提供深色与浅色布局、品牌化图片样式、可复用卡片与指标组件，以及适合导出的页眉页脚元素。\n\n## 环境要求\n\n- Node.js `>=22.12.0`\n- Slidev `>=52.19.1 <53`\n- 浏览器测试与导出需要 `playwright-chromium` 提供的 Chromium\n\n当前仓库门禁使用 Slidev 52.19.1 作为可复现的测试基线，主题本身支持兼容的 Slidev 52.x 版本，不要求使用者固定到该补丁版本。\n\n## 安装与使用\n\n在演示文稿项目中安装主题和兼容的 Slidev CLI：\n\n```bash\nnpm install @carlory/slidev-theme-daocloud @slidev/cli@^52.19.1\n```\n\n作用域主题必须在第一个 frontmatter 中使用完整包名：\n\n```md\n---\ntheme: '@carlory/slidev-theme-daocloud'\ntitle: 平台评审\n---\n\n# 平台评审\n```\n\n使用演示文稿入口文件启动 Slidev：\n\n```bash\nnpm exec -- slidev slides.md\n```\n\n[example.md](./example.md) 是完整的示例演示文稿，覆盖全部主题布局、两个公共内容组件、中英文长文本、代码、表格、图片、Mermaid、KaTeX 和溢出边界测试内容。\n\n## 公共 API\n\n### 布局\n\n| 布局 | 用途 | 属性和插槽 |\n| --- | --- | --- |\n| `cover` | 标准 DaoCloud 封面 | `author`、`company`、`date`；默认插槽；无页脚 |\n| `intro` | 深色介绍内容页 | 默认插槽 |\n| `toc` | 编号目录页 | `items?: string[]`；默认插槽用于介绍内容 |\n| `section` | 深色章节分隔页 | `section?: string \\| number`、`partLabel?: string`、`subtitle?: string`；默认插槽 |\n| `default` | 标准深色内容页 | 默认插槽 |\n| `default-light` | 标准浅色内容页 | 默认插槽 |\n| `center` | 深色居中内容页 | 默认插槽 |\n| `two-cols` | 等宽双栏内容页 | 默认插槽位于左侧；`right` 插槽位于右侧 |\n| `two-cols-header` | 带顶部标题的等宽双栏内容页 | 默认插槽用于顶部标题；`left` 和 `right` 插槽用于双栏内容 |\n| `image-left` | 左侧图片、右侧内容 | 必填 `image`、`imageAlt`；可选 `backgroundSize: cover \\| contain`；默认插槽 |\n| `image-right` | 左侧内容、右侧图片 | 必填 `image`、`imageAlt`；可选 `backgroundSize: cover \\| contain`；默认插槽 |\n| `quote` | 居中引用页 | 默认插槽 |\n| `fact` | 大号事实或数字页 | 默认插槽 |\n| `statement` | 居中陈述页 | 默认插槽 |\n| `blank` | 无内容内边距的深色品牌画布 | 默认插槽 |\n| `blank-light` | 无内容内边距的浅色品牌画布 | 默认插槽 |\n| `full` | 无预设内边距的深色全画布 | 默认插槽 |\n| `end` | 结束页 | `contact?: string`；默认插槽 |\n\n`blank` 系列布局保留主题框架和页脚，但不会添加标准内容安全区。使用时需要自行设置内容内边距。如需全高居中布局，可以使用兼容导出的 `dao-safe-center` 类。\n\n#### 布局效果预览\n\n<table>\n  <tr>\n    <td><strong><code>cover</code></strong><br><img src=\"./docs/previews/cover.png\" alt=\"cover 布局渲染效果\" width=\"420\"></td>\n    <td><strong><code>intro</code></strong><br><img src=\"./docs/previews/intro.png\" alt=\"intro 布局渲染效果\" width=\"420\"></td>\n  </tr>\n  <tr>\n    <td><strong><code>toc</code></strong><br><img src=\"./docs/previews/toc.png\" alt=\"toc 布局渲染效果\" width=\"420\"></td>\n    <td><strong><code>section</code></strong><br><img src=\"./docs/previews/section.png\" alt=\"section 布局渲染效果\" width=\"420\"></td>\n  </tr>\n  <tr>\n    <td><strong><code>default</code></strong><br><img src=\"./docs/previews/default.png\" alt=\"default 布局渲染效果\" width=\"420\"></td>\n    <td><strong><code>default-light</code></strong><br><img src=\"./docs/previews/default-light.png\" alt=\"default-light 布局渲染效果\" width=\"420\"></td>\n  </tr>\n  <tr>\n    <td><strong><code>center</code></strong><br><img src=\"./docs/previews/center.png\" alt=\"center 布局渲染效果\" width=\"420\"></td>\n    <td><strong><code>two-cols</code></strong><br><img src=\"./docs/previews/two-cols.png\" alt=\"two-cols 布局渲染效果\" width=\"420\"></td>\n  </tr>\n  <tr>\n    <td><strong><code>two-cols-header</code></strong><br><img src=\"./docs/previews/two-cols-header.png\" alt=\"two-cols-header 布局渲染效果\" width=\"420\"></td>\n    <td><strong><code>image-left</code></strong><br><img src=\"./docs/previews/image-left.png\" alt=\"image-left 布局渲染效果\" width=\"420\"></td>\n  </tr>\n  <tr>\n    <td><strong><code>image-right</code></strong><br><img src=\"./docs/previews/image-right.png\" alt=\"image-right 布局渲染效果\" width=\"420\"></td>\n    <td><strong><code>quote</code></strong><br><img src=\"./docs/previews/quote.png\" alt=\"quote 布局渲染效果\" width=\"420\"></td>\n  </tr>\n  <tr>\n    <td><strong><code>fact</code></strong><br><img src=\"./docs/previews/fact.png\" alt=\"fact 布局渲染效果\" width=\"420\"></td>\n    <td><strong><code>statement</code></strong><br><img src=\"./docs/previews/statement.png\" alt=\"statement 布局渲染效果\" width=\"420\"></td>\n  </tr>\n  <tr>\n    <td><strong><code>blank</code></strong><br><img src=\"./docs/previews/blank.png\" alt=\"blank 布局渲染效果\" width=\"420\"></td>\n    <td><strong><code>blank-light</code></strong><br><img src=\"./docs/previews/blank-light.png\" alt=\"blank-light 布局渲染效果\" width=\"420\"></td>\n  </tr>\n  <tr>\n    <td><strong><code>full</code></strong><br><img src=\"./docs/previews/full.png\" alt=\"full 布局渲染效果\" width=\"420\"></td>\n    <td><strong><code>end</code></strong><br><img src=\"./docs/previews/end.png\" alt=\"end 布局渲染效果\" width=\"420\"></td>\n  </tr>\n</table>\n\n具名插槽示例：\n\n```md\n---\nlayout: two-cols-header\n---\n\n# 发布依据\n\n::left::\n\n## 决策\n\n在质量门禁全部通过后发布。\n\n::right::\n\n## 依据\n\n浏览器与导出检查均已通过。\n```\n\n### `DaoCard`\n\n将标题和默认插槽内容组合为浅色、深色或主色卡片。\n\n| 属性 | 类型 | 默认值 |\n| --- | --- | --- |\n| `title` | `string` | 无 |\n| `tone` | `'dark' \\| 'light'` | `'light'` |\n| `accent` | `boolean` | `false` |\n\n```vue\n<DaoCard title=\"升级策略\" tone=\"dark\" accent>\n  每次发布前验证所有受支持的导出格式。\n</DaoCard>\n```\n\n渲染效果：\n\n<img src=\"./docs/previews/dao-card.png\" alt=\"DaoCard 浅色强调卡片和深色卡片渲染效果\" width=\"720\">\n\n### `DaoMetric`\n\n展示大号指标值及可选的上下文信息。\n\n| 属性 | 类型 | 默认值 |\n| --- | --- | --- |\n| `value` | `string \\| number` | 必填 |\n| `label` | `string` | 无 |\n| `detail` | `string` | 无 |\n| `trend` | `string` | 无 |\n| `accent` | `boolean` | `false` |\n\n```vue\n<DaoMetric value=\"99.95%\" label=\"可用性\" detail=\"提升 0.08%\" accent />\n```\n\n渲染效果：\n\n<img src=\"./docs/previews/dao-metric.png\" alt=\"DaoMetric 标准指标和强调指标渲染效果\" width=\"720\">\n\n`DaoCloudFrame`、`DaoCloudFooter` 和 `DaoCloudLogo` 用于支持内置布局，属于主题内部实现组件，不是稳定的内容组件 API。\n\n## 主题配置\n\n主题 token 直接放在 `themeConfig` 下，不要嵌套在 `daocloud` 或 `colors` 对象中。Slidev 会通过 `$slidev.themeConfigs` 将这些值提供给主题。\n\n| Token | 默认值 | 用途 |\n| --- | --- | --- |\n| `primary` | `#0fd05d` | 主绿色和事实数据 |\n| `primaryDark` | `#0e833b` | 深绿色品牌 token |\n| `secondary` | `#0167e4` | 次要蓝色和强调指标 |\n| `secondaryDark` | `#014498` | 深蓝色品牌 token |\n| `accent` | `#0fd05d` | 焦点和组件强调色 |\n| `background` | `#161a16` | 深色画布 |\n| `backgroundLight` | `#ffffff` | 浅色画布和浅色卡片 |\n| `foreground` | `#171a17` | 浅色表面上的前景色 |\n| `text` | `#ffffff` | 深色表面上的文字色 |\n| `textLight` | `#171a17` | 浅色表面上的文字色 |\n| `muted` | `#a8b0aa` | 页脚和次要文字 |\n| `mutedLight` | `#59635d` | 浅色页面上的页脚和次要文字 |\n| `surface` | `#f3f8f5` | 浅色组件表面 |\n| `border` | `#cfe0d5` | 浅色边框和表格分隔线 |\n| `footer` | `为数字世界寻找全局最优解` | 页脚文案 |\n\n```yaml\nthemeConfig:\n  primary: '#0fd05d'\n  primaryDark: '#0e833b'\n  secondary: '#0167e4'\n  secondaryDark: '#014498'\n  accent: '#0fd05d'\n  background: '#161a16'\n  backgroundLight: '#ffffff'\n  foreground: '#171a17'\n  text: '#ffffff'\n  textLight: '#171a17'\n  muted: '#a8b0aa'\n  mutedLight: '#59635d'\n  surface: '#f3f8f5'\n  border: '#cfe0d5'\n  footer: '为数字世界寻找全局最优解'\n```\n\n非字符串值和未知的嵌套结构会被忽略，并自动使用对应的默认值。颜色 token 应填写有效的 CSS 颜色字符串。\n\n## 开发与质量检查\n\n安装依赖并运行本地示例：\n\n```bash\nnpm ci\nnpm exec -- slidev example.md --theme ./\n```\n\n除非 `PLAYWRIGHT_BASE_URL` 指向已经运行的服务，否则 E2E 测试会自动启动真实的 Slidev 服务。测试会从 Slidev 导航中获取总页数，使用键盘逐页浏览，并检查浏览器错误、404 响应、图片、页码、具名插槽、组件和内容溢出。\n\n```bash\nnpx playwright install chromium\nnpm run test:e2e\n```\n\n视觉测试固定使用 1920 × 1080 CSS 视口的 Chromium。只有在逐张审核图片后，才能创建或更新视觉基线：\n\n```bash\nnpm run test:visual -- --update-snapshots\nnpm run test:visual\n```\n\n审核并更新视觉基线后，可以重新生成 README 效果预览图：\n\n```bash\nnpm run docs:previews\n```\n\n运行静态检查和可部署 SPA 构建：\n\n```bash\nnpm run lint\nnpm run typecheck\nnpm run build\n```\n\n`--theme ./` 仅用于源码仓库，因为此时该包并未以自身作用域名称安装。使用者应按前文示例，在 `example.md` 等演示文稿入口中填写完整主题名称，无需添加此覆盖参数。\n\n### 导出验证\n\n仓库脚本会验证 PDF、PNG 和 PPTX 均为 25 页，检查 PNG 是否为 16:9，并验证 PPTX 演示文稿的元素顺序：\n\n```bash\nnpm run check:exports\n```\n\n扩展测试脚本会验证静态构建，以及位于 `tests/.artifacts/export` 中的 PDF、PNG 和 PPTX 导出结果：\n\n```bash\nnode tests/scripts/build-and-export.mjs\n```\n\nSlidev 导出需要已经安装 Chromium。在新设备或 CI 镜像中，请先运行一次 `npx playwright install chromium`。\n\nSlidev 当前生成的 PPTX 会把每一页作为整页栅格图片写入演示文稿，适合播放和交付，但页面元素不可逐项编辑，也不具备原生 PowerPoint 的语义与无障碍结构。如需可编辑源稿，请保留 Markdown、Vue 和主题源码。\n\n### 发布包消费测试\n\n该检查会创建真实的 npm tarball，将它和 Slidev 安装到新的临时消费项目中，然后以 `/talks/demo/` 非根路径构建并启动该项目。浏览器会检查运行时错误、HTTP 失败以及所有图片是否加载成功，从而发现发布包文件缺失、绝对资源路径和对仓库内部路径的意外依赖。\n\n```bash\nnpm run check:pack\nnpm run test:consumer\n```\n\n`node tests/scripts/tarball-consumer.mjs` 会使用完整示例演示文稿执行同类安装检查。该脚本需要访问 npm registry 以安装消费项目的 Slidev 依赖。除非设置 `KEEP_CONSUMER_FIXTURE=1`，否则脚本完成后会删除临时目录。\n\n## 权利与归属\n\n源代码采用 MIT License，详情参见 [LICENSE](./LICENSE) 和 [NOTICE](./NOTICE)。\n\nDaoCloud 名称、Logo、文字商标和其他品牌标识归其各自权利人所有。MIT License 不授予任何商标权，也不表示 DaoCloud 对本项目的认可或背书。除非文件另有说明，源码仓库中的大会与演示文稿素材仍归其各自权利人所有。`assets/template.pptx` 仅作为设计参考，不会包含在 npm 发布包中。\n","readmeFilename":"README.md","_rev":"1-0ae2d9fe7fbcbc9de5406341af115ce6"}