Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions plugins/spotlight/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
node_modules/
dist/
.env
.env.*
.DS_Store
Thumbs.db
*.log
15 changes: 15 additions & 0 deletions plugins/spotlight/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# Changelog

## 1.0.0

### Added

- 聚光灯核心效果:全屏变暗,圆形亮区跟随鼠标指针平滑移动(rAF 插值 + 合成器位移)
- 入场动画:黑幕从屏幕四角向鼠标位置收拢,退出时淡出
- 多显示器支持:每块屏幕独立遮罩窗口,光圈跨屏平滑跟随,兼容不同分辨率 / DPI 缩放
- 设置页:光圈大小(60–600px)、背景暗度(30%–95%)、边缘柔化(0–150px)实时预览调节
- 开关项:点击屏幕任意处退出、多屏覆盖
- 快捷键引导:一键跳转 ZTools 全局快捷键设置页(redirectHotKeySetting)
- 退出方式:Esc / 点击 / 切换窗口(Alt+Tab)自动退出,多窗口 localStorage 令牌联动
- 显示器诊断:设置页展示检测到的屏幕数量、分辨率、坐标与缩放比
- macOS 适配:遮罩窗口在所有桌面 Space 及全屏 App 之上可见
77 changes: 77 additions & 0 deletions plugins/spotlight/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
# 聚光灯 (Spotlight)

一款 ZTools 插件:按下快捷键,全屏瞬间变暗,只有鼠标指针周围的一圈保持明亮,并跟随鼠标平滑移动。适用于演示讲解、录屏教学、远程协作时指示光标位置,让观众的视线聚焦在你想表达的地方。

## 功能特性

- 🔦 **一键聚光**:全屏变暗,圆形光圈实时跟随鼠标指针
- 🌊 **平滑跟随**:基于 `requestAnimationFrame` 的插值动画,光圈移动顺滑无卡顿
- 🖥️ **多显示器支持**:遮罩窗口精确覆盖鼠标所在的屏幕
- ⚙️ **可视化设置页**:光圈大小、背景暗度、边缘柔化自由调节,内置实时预览
- ⌨️ **自定义快捷键**:设置页录制组合键,配合 ZTools 全局快捷键全局唤起
- 💾 **设置自动保存**:所有配置通过 `dbStorage` 持久化,即时生效

## 安装

1. 下载或克隆本仓库
2. 打开 ZTools → 插件中心 → 开发者模式(本地插件)
3. 添加本插件所在目录(包含 `plugin.json` 的目录)

## 使用

| 操作 | 方式 |
| --- | --- |
| 开启聚光灯 | 搜索框输入 `聚光灯` / `spotlight` / `jgd`,或使用绑定的全局快捷键 |
| 打开设置页 | 搜索框输入 `聚光灯设置` / `聚光灯配置` |
| 退出聚光灯 | 按 `Esc`、点击屏幕任意处(可在设置中关闭)、或切换窗口(Alt+Tab) |

### 绑定全局快捷键

点击设置页的「去绑定全局快捷键」按钮(自动跳转 ZTools 快捷键设置页),为本插件的「聚光灯」功能录入组合键(如 `Ctrl + Alt + S`)即可。

## 设置项

| 设置 | 范围 | 默认值 | 说明 |
| --- | --- | --- | --- |
| 光圈大小 | 60 – 600 px | 180 px | 亮圆区域的半径 |
| 背景暗度 | 30% – 95% | 75% | 光圈之外区域的压暗程度 |
| 边缘柔化 | 0 – 150 px | 60 px | 光圈边缘的羽化过渡宽度 |
| 点击退出 | 开 / 关 | 开 | 开启后点击屏幕任意处退出聚光灯 |
| 多屏覆盖 | 开 / 关 | 开 | 开启后黑幕横跨所有显示器,光圈跨屏跟随鼠标 |

## 技术实现

- 纯 HTML / CSS / JavaScript,无构建步骤,无第三方依赖
- 遮罩窗口由 `ztools.createBrowserWindow` 创建:全屏、透明、无边框、置顶、跳过任务栏
- 多屏支持:每块显示器创建一个独立遮罩窗口,各自精确覆盖自身 bounds(规避混合 DPI / 不同分辨率下单窗口跨屏被系统裁剪的问题);窗口间通过 localStorage 会话令牌联动退出,通过焦点心跳识别用户切走
- 光圈渲染:圆形元素 + 超大扩散 `box-shadow`(`0 0 {柔化}px 300vmax rgba(0,0,0,{暗度})`),圆外遮暗、圆内透亮
- 位置跟踪:遮罩窗口 `mousemove` 事件为主通道,`ztools.getCursorScreenPoint()` 轮询为兜底
- 平滑算法:每帧 `pos += (target - pos) × 0.3` 线性插值,位移仅更新 `transform`,由浏览器合成器处理

## 文件结构

```
spotlight/
├── plugin.json 插件配置(功能入口定义)
├── index.html 设置页面(UI)
├── app.js 主页面逻辑:设置存取 + 聚光灯激活控制
├── overlay.html 全屏遮罩窗口页面
├── overlay.js 遮罩窗口逻辑:光圈渲染 + 平滑跟随 + 退出
├── preload.js preload 脚本(补充原生信息)
└── logo.png 插件图标
```

## 发布

本插件符合 ZTools 插件规范(preload 未压缩混淆)。发布流程:

```bash
git init && git add . && git commit -m "Add plugin spotlight v1.0.0"
ztools publish
```

详见 [ZTools 开发者文档](https://ztoolscenter.github.io/ZTools-doc/getting-started.html)。

## License

MIT
Loading
Loading