我开发了一个 Obsidian 插件「带宠物的锁屏」—— 保护我的笔记隐私

我开发了一个 Obsidian 插件「带宠物的锁屏」------ 保护我的笔记隐私

摘要：在 Vibe Coding 时代，本文分享我开发 Obsidian 锁屏插件 MineLock 的初衷、功能亮点，以及 PBKDF2 密码安全、SVG 宠物表情系统等技术实现细节。

一、开发初衷：Vibe Coding 时代的「离座焦虑」

现在的开发模式变了。越来越多的团队开始使用 Vibe Coding（AI 辅助编程）来提升效率，程序员的角色逐渐从「写代码」转向「Review AI 生成的代码」。

我平时用 Obsidian 记录工作笔记和学习心得。但在 Vibe Coding 的工作流中，我遇到了一个尴尬的场景：

离开座位时，到底要不要锁屏？

如果锁屏，AI 的长任务会被中断，回来得重新触发
如果不锁屏，同事路过就能看到我的私人笔记

去趟茶水间倒水、去个洗手间，这个矛盾就会反复出现。

于是我想：能不能在 Obsidian 里做一个轻量级的锁屏？ 只锁定笔记界面，不影响 AI 在浏览器里继续工作。既能保护隐私，又有点趣味性，不至于每次解锁都像在过安检。

就这样，MineLock 诞生了。

二、功能一览

MineLock 是一个 Obsidian 锁屏插件，核心功能如下：

功能	说明
🔒 一键锁屏	点击侧边栏图标或命令面板，瞬间覆盖整个工作区
🔑 密码管理	支持设置/修改/移除密码，PBKDF2 哈希加密
⏱️ 自动锁定	无操作 1~60 分钟后自动锁屏
🚀 启动锁定	Obsidian 启动时自动弹出锁屏
🐾 宠物陪伴	21 种通过 AI 辅助设计、反复打磨优化的 SVG 宠物，6 种心情表情互动
🌐 多语言	支持中文/英文，自动跟随 Obsidian 语言设置

2.1 锁屏效果

图 1：锁屏界面，输入密码时宠物进入「思考」状态

2.2 设置页面

图 2：设置页面，支持密码管理、宠物选择、自动锁定等配置

2.3 宠物系统

每只宠物有 6 种心情，由锁屏事件触发：

心情	触发条件
😊 空闲	默认状态
🤔 思考	密码输入框获得焦点
⌨️ 输入	正在输入密码
❌ 错误	密码错误（error 错误眼，2秒后自动恢复）
✅ 成功	密码正确（触发解锁）
😴 犯困	空闲 10 秒自动打盹

目前支持 21 种宠物：狐狸、猫头鹰、仓鼠、柴犬、青蛙、浣熊、大熊猫、小鹿、老虎、小猫、水豚、地鼠、狮子、藏羚羊、兔子、小猪、小牛、北极熊、松鼠、龙猫、小熊猫。

2.4 宠物预览弹窗

图 3：宠物预览弹窗，点击可切换 idle → thinking → typing → success → sleepy 表情

2.5 状态栏宠物

图 4：状态栏宠物，鼠标悬停时切换为开心表情

三、技术实现

3.1 整体架构

graph TD A[Obsidian Plugin Entry] --> B[LockScreenView] A --> C[LockSettingTab] A --> D[AutoLock Timer] B --> E[Overlay DOM] B --> F[PetController] B --> G[Password Input] C --> H[Pet Selector] C --> I[Password Management] C --> J[Settings Controls] F --> K[SVG Pet Definitions] K --> L[21 Species 6 Moods] G --> M[Utils: PBKDF2 Hash] I --> M D --> N[mousedown/keydown/wheel 监听] N --> D

图 5：插件整体架构图

3.2 密码安全方案

密码安全是锁屏插件的核心。MineLock 使用 Web Crypto API 实现 PBKDF2 哈希，不存储明文密码。

sequenceDiagram participant U as 用户 participant UI as 锁屏界面 participant Utils as 密码工具模块 participant Crypto as Web Crypto API participant Storage as data.json U->>UI: 首次设置密码 UI->>Utils: hashPassword(password) Utils->>Crypto: crypto.getRandomValues() 生成盐值 Crypto-->>Utils: 16字节随机盐值 Utils->>Crypto: crypto.subtle.deriveBits(PBKDF2, 10万次迭代) Crypto-->>Utils: 256位哈希值 Utils-->>UI: {hash, salt} UI->>Storage: 保存 hash + salt U->>UI: 解锁时输入密码 UI->>Utils: verifyPassword(input, storedHash, salt) Utils->>Crypto: 用相同盐值重新计算哈希 Crypto-->>Utils: 新哈希值 Utils-->>UI: 比对是否一致 UI-->>U: 解锁成功 / 密码错误

图 6：密码设置与验证时序图

关键安全措施：

PBKDF2 迭代 10 万次，暴力破解成本极高
每次设置密码生成 16 字节随机盐值，防止彩虹表攻击
仅存储 hash + salt 对，不存储明文密码
完全离线运行，零网络请求

3.3 宠物表情状态机

宠物的 6 种心情由一个状态机驱动：

stateDiagram-v2 [*] --> Idle: 初始化 Idle --> Thinking: 输入框聚焦 Idle --> Sleepy: 空闲 10 秒 Thinking --> Typing: 开始输入 Thinking --> Idle: 输入框失焦 Typing --> Thinking: 停止输入 Typing --> Error: 密码错误 Typing --> Success: 密码正确 Error --> Idle: 2 秒后自动恢复 Success --> [*]: 解锁成功 Sleepy --> Idle: 用户交互唤醒

图 7：宠物心情状态机

3.4 自动锁定流程

flowchart TD A[解锁成功] --> B[启动自动锁定计时器] B --> C{用户有操作?} C -->|鼠标/键盘/触摸/滚轮| D[重置计时器] D --> C C -->|超时| E[触发锁屏] E --> F[停止计时器] F --> G[移除状态栏宠物] H[设置变更] --> B I[插件卸载] --> J[清除计时器和监听器]

图 8：自动锁定流程图

3.5 SVG 宠物系统设计

每只宠物都是一个 100×110 viewBox 的 SVG，采用「身体 + 眼睛 + 嘴巴」分层设计。这些宠物并非传统手绘，而是通过 AI 辅助描述、反复迭代打磨生成的矢量图形。开发者通过精确描述动物的形态特征（如耳朵形状、面部斑纹、颜色搭配等），与 AI 协作不断调整 SVG 路径参数，最终呈现出既可爱又统一的 Q 版风格。

graph LR A[petSvg 函数] --> B[body 身体层] A --> C[features 特征层] A --> D[eyes 眼睛层] A --> E[mouth 嘴巴层] D --> F[EYES.open 睁眼] D --> G[EYES.happy 眯眼] D --> H[EYES.error 错误眼] D --> I[EYES.bigHappy 大眼] D --> J[EYES.sleepy 闭眼] D --> K[EYES.closed 思考眼] E --> L[MOUTH.smile 微笑] E --> M[MOUTH.sad 伤心] E --> N[MOUTH.open 张嘴] E --> O[MOUTH.tiny 小嘴] E --> P[MOUTH.wide 大笑]

图 9：SVG 宠物表情组件结构

设计亮点：

眼睛和嘴巴使用共享组件，21 种宠物复用同一套表情逻辑
每只宠物只需定义独特的 body（身体轮廓、颜色、耳朵等）
代码量控制在 1100 行 以内，维护成本低

3.6 项目结构

src/ ├── main.ts # 插件入口、设置管理、锁屏/解锁/计时器 ├── LockScreenView.ts # 锁屏覆盖层、宠物渲染、密码输入交互 ├── LockSettingTab.ts # 设置页面：宠物选择器、密码管理、多语言 ├── pet.ts # 21 种宠物 SVG × 6 种表情 + PetController ├── locale.ts # 中/英 i18n 词典 └── utils.ts # PBKDF2 哈希、盐值生成、密码验证

技术栈： TypeScript + esbuild + Obsidian API

四、为什么选择 Obsidian 插件？

Electron 环境：Obsidian 基于 Electron，天然支持 Web Crypto API，无需额外依赖
DOM 完全可控 ：可以直接操作 document.body 创建全屏覆盖层
CSS 变量适配 ：通过 --background-secondary、--interactive-accent 等变量，宠物自动适配用户主题
跨平台 ：isDesktopOnly: false，桌面和移动端均可使用

五、未来规划

更多宠物物种（用户投稿）
宠物动画效果（CSS 过渡/帧动画）
自定义宠物颜色/配饰
锁屏背景自定义（图片/渐变/动态效果）
提交到 Obsidian 社区插件市场
增加 AI 交互，可以与宠物进行交互

六、开源地址

Gitee : gitee.com/wmlce/mine-...

欢迎 Star、Fork、提 Issue 或 PR！如果觉得有趣，也可以直接安装体验。

License: MIT