密码保护布局示例
本页演示并讲解如何使用 PasswordProtectedLayout 给整篇文档加密码门禁。它在保留默认 doc 布局（侧边栏、TOC、Giscus、贡献者、上一页/下一页）的同时，把正文裁剪为「预览」，访客输入正确密码后才显示完整内容。
实现位置：
快速开始
只需在文章 frontmatter 中加上 customLayout: PasswordProtectedLayout，并提供至少一种密码来源（correctPasswords 或 passwordKey）：
---
title: 我的受保护页面
customLayout: PasswordProtectedLayout
passwordKey:
- colton # 解析为某位员工的密码
correctPasswords:
- MyPagePassword # 本页专属的明文密码（可选）
passwordHint: 输入密码以查看隐藏内容 # 可选
previewHeight: 200 # 可选，未解锁时的预览高度
---正文照常书写——无需手动包裹任何组件，布局会自动把整篇 <Content /> 放进 <PasswordReveal>。
Frontmatter 字段一览
| 字段 | 必填 | 类型 | 说明 |
|---|---|---|---|
customLayout | ✅ | string | 固定写 PasswordProtectedLayout，启用密码门禁 |
passwordKey | 二选一* | string | string[] | 员工密钥名，解析为 passwords.ts 中 atomeoceanStaffPasswords 对应的密码 |
correctPasswords | 二选一* | string[] | 本页专属的明文密码列表 |
passwordHint | ❌ | string | 密码框上方的提示文案，默认「输入密码以查看隐藏内容」 |
previewHeight | ❌ | number | string | 未解锁时预览区高度。数字按 px 处理，字符串原样使用，默认 200px |
* passwordKey 与 correctPasswords 不必同时提供，但至少要有一个，否则除万能密码外无人能解锁。
passwordKey 详解（重点）
passwordKey 让你复用员工已有的密码，而无需把明文密码写进 frontmatter。它的值是 passwords.ts 里 atomeoceanStaffPasswords 对象的键名，组件在运行时把键名映射成真实密码。
单个员工：
passwordKey: colton多个员工（任一员工的密码均可解锁）：
passwordKey:
- mengyaoLi
- colton写法要点：
- 值是键名（如
colton），不是密码本身（如atomeoceancoltonDFile）。 - 既支持字符串，也支持数组；数组中任一员工的密码都能解锁。
- 若键名在
atomeoceanStaffPasswords中不存在，会被静默忽略（不会报错，但也不会生效）——请确保拼写正确。 - 新增员工密码时，在
passwords.ts的atomeoceanStaffPasswords中追加键名: "密码"，即可在 frontmatter 用passwordKey引用。
密码优先级与组合规则
解锁一个页面时，以下任一密码均有效（来源可叠加）：
- 万能密码
masterPassword—— 始终有效，可解锁站内所有受保护内容。⚠️ 一旦泄露会暴露全部受保护页面，请谨慎分发。 passwordKey解析出的员工密码 —— 数组里每个键名各对应一个密码。correctPasswords中列出的明文密码 —— 本页专属。
注意：
defaultPassword（默认密码）不会自动全局生效；如需启用，必须显式写进本页correctPasswords。本页就把它（Atomeocean20210821Go!）放进了correctPasswords作为演示。
预览高度 previewHeight
未解锁时，正文以「预览」形式渲染：内容被裁剪到 previewHeight 高度，底部叠加渐隐遮罩，下方显示密码输入框。
previewHeight: 200 # 数字 → 200px
previewHeight: "30vh" # 字符串 → 原样使用不填则默认 200px。
完整示例参考
仓库中的真实用法：
- 仅用
passwordKey（单员工）：work-visas/stem-opt/atomeocean-i983-instruction.md passwordKey+passwordHint：guide/transaction/pay-to-us-company.mdcorrectPasswords+ 多个passwordKey：work-visas/cpt/required-atomeocean-cpt-file.md
常见问题
- 整页空白 / 无法解锁？ 检查是否同时缺失
passwordKey和correctPasswords——此时只有万能密码可用。 - 密码不生效？ 确认
passwordKey的键名在atomeoceanStaffPasswords中确实存在且拼写一致。 - 正文重复显示？ 布局已通过样式隐藏 VitePress 默认渲染的正文（见
PasswordProtectedLayout.vue末尾的<style>），自定义改动布局时勿删除该规则。
受保护的内容（演示）
这一段以下的所有 markdown 内容都需要密码验证后才能完整查看；未解锁时仅显示被裁剪的预览。
小节 1
测试段落 1。
小节 2
测试段落 2，带 加粗 与 斜体。
// 代码块也会被保护
const secret = "only visible after unlock";