ZToolsCenter · zhaoyuyang8520 · Aug 29, 2026 · Aug 31, 2026 · Sep 1, 2026
diff --git a/plugins/screenshot-annotate/.gitignore b/plugins/screenshot-annotate/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+dist
+release
+*.zip
+*.log
diff --git a/plugins/screenshot-annotate/CHANGELOG.md b/plugins/screenshot-annotate/CHANGELOG.md
@@ -0,0 +1,21 @@
+# Changelog
+
+## 1.3.12
+
+- author 显示为 zyy，新增 homepage 跳转仓库
+- 插件配置路径规范化为相对无 `./` 前缀
+
+## 1.3.11
+
+- 版本号与配置同步调整
+
+## 1.3.10
+
+- 保存时弹出系统「另存为」对话框
+- 矩形等选区支持 8 个缩放手柄（4 角 + 4 边可单独拖拽）
+- 文字框按内容真实测量扩展（多行、字号准确）
+- 多次使用快捷键截图不会跳到插件详情页
+
+## 1.3.9
+
+- 选中文字样式编辑：字号 / 粗体 / 颜色
diff --git a/plugins/screenshot-annotate/README.md b/plugins/screenshot-annotate/README.md
@@ -0,0 +1,121 @@
+# screenshot-annotate
+
+一个运行在 **ZTools**（uTools 的开源 fork，Electron 41 + TypeScript）平台的**截图标注插件**。
+
+流程一句话：**框选截图 → 自由标注 → 复制 / 保存 / 钉到桌面**。
+
+## 这是干什么的
+
+按快捷键（或输入命令）唤起原生框选，选中屏幕任意区域后进入标注编辑器，用各类图形标记重点，最后复制到剪贴板、保存为图片文件、或作为置顶窗口钉在桌面上持续引用。
+
+## 已实现的功能
+
+### 截图
+- 调用平台原生**交互式框选**（`ztools.screenCapture`），无需桌面录屏权限，支持多显示器。
+- 隐藏能力：不剪切屏幕，只拿选区，隐私友好。
+
+### 标注编辑器
+9 种工具（沿右侧工具条切换）：
+
+| 工具 | 说明 |
+| --- | --- |
+| 选择 / 移动 | 拖动已有标注、移窗（选择工具下拖动空白处移动整个窗口） |
+| 矩形 | 边框 / 填充可切换 |
+| 圆形 / 椭圆 | 边框 / 填充可切换 |
+| 箭头 | 带箭头的直线 |
+| 画笔 | 自由手绘 |
+| 文字 | 多行文本，支持字号 / 粗体 / 颜色 |
+| 马赛克 | 覆盖隐私区域，支持**方格 / 球状**两种颗粒 + 格尺寸 |
+| 直线 | 两端点 |
+| 高亮 | 半透明覆盖层 |
+
+关键交互能力：
+
+- **8 个缩放手柄**：矩形 / 椭圆 / 高亮 / 马赛克选区有 4 角 + 4 边共 8 个手柄，可单独拖动任一条边或角（不必只靠 4 角）。
+- **文字框按内容扩展**：选中文字后，选中框按文字**真实测量尺寸**包裹内容（多行、字号变化都准确）。
+- **微信截图式**：不切换工具也能直接点中已有标注拖动 / 收紧手柄缩放。
+- **文字样式回显**：选中文字时工具栏自动读取其字号 / 粗体 / 颜色，改动实时应用到该文字。
+- 画布**滚轮缩放**、空白区拖动平移。
+- **撤销 / 重做**（`Ctrl+Z` / `Ctrl+Y`）、**删除**选中标注（`Del` / `Backspace`，选择工具下）。
+- **Esc 关闭**编辑窗口。
+
+### 输出
+- **复制**：`Ctrl+C` 或按钮，把标注结果以 PNG 位图写入系统剪贴板。
+- **保存**：`Ctrl+S` 或按钮，弹出系统「另存为」对话框，按偏好设置默认 PNG / JPG 及保存目录。
+- **钉到桌面**：钉图按钮，把结果开成一个**置顶、免框、可拖动缩放**的窗口，随时参考。
+
+### 偏好设置
+默认颜色、默认线宽、保存格式（PNG / JPG）、保存目录（留空走系统图片目录 Screenshots）。设置持久化于 dbStorage。
+
+## 技术栈与结构
+
+- **Vue 3 + TypeScript**（`<script setup>`），**Vite** 多页构建（`index / capture / pin` 三个入口）。
+- 标注引擎为纯前端 Canvas：`src/editor/annotations.ts`（对象模型 + 绘制 + 撤销/重做快照栈）、`src/editor/annotation-controller.ts`（交互控制器）。
+- 跨进程磁盘 / 剪贴板 / 建窗集中在 preload 桥 `public/preload/services.js`。
+- 大图用**临时文件**在窗口间传递（避免 dataURL 塞 URL 超长）。
+- 钉图窗口的移动 / 缩放 / 置顶经 `sendToParent` 中转到主窗口执行。
+
+```
+screenshot-annotate/
+├─ src/
+│  ├─ App.vue            # 主窗口：命令入口 + 偏好设置
+│  ├─ capture/
+│  │  └─ CaptureApp.vue  # 标注编辑窗口
+│  ├─ pin/
+│  │  └─ PinApp.vue      # 钉图窗口
+│  └─ editor/            # Canvas 标注引擎 + 编辑面板
+│     ├─ annotations.ts
+│     ├─ annotation-controller.ts
+│     └─ EditorPanel.vue
+├─ public/
+│  ├─ index.html  capture.html  pin.html   # 多页入口
+│  ├─ preload/services.js                   # preload 桥
+│  └─ plugin.json                           # 插件契约（打包权威版本）
+├─ plugin.json                              # 开发版契约（与 public 保持同步）
+├─ vite.config.js
+└─ package.json
+```
+
+## 使用方法
+
+### 1. 安装依赖
+
+```bash
+npm install
+```
+
+### 2. 本地开发
+
+```bash
+npm run dev
+```
+
+在 ZTools 中以「开发模式」加载 `plugin.json` 指向的 `http://localhost:5173`。
+
+> 生产构建与类型检查：`npm run build`（先 `vue-tsc --noEmit` 再 `vite build`）。构建产物在 `dist/`，`public/` 会被平铺拷贝过去。
+
+### 3. 加载到 ZTools
+
+把 `dist/` 作为插件目录安装；或直接加载仓库根（`plugin.json` 声明了 `main`、`preload`、`logo` 等契约）。
+
+### 4. 绑定快捷键
+
+安装后进入 ZTools 设置 → 快捷键 → 全局快捷键，为插件命令绑定：
+
+- **截图标注**（`ui.capture`）→ 例如 `Ctrl+Shift+A`：任何窗口唤起框选标注。
+- **截图标注并复制**（`function.capture-copy`）→ 框选后直接复制。
+- **截图并钉图**（`function.capture-pin`）→ 一键截图并钉到桌面。
+
+> 命令均声明为 `type: "window"`，确保**连续多次**唤起都能正常进入截图（不会因平台重入拦截跳到插件详情页）。
+
+### 5. 编辑与输出
+
+1. 按快捷键框选屏幕区域 → 进入深色编辑器。
+2. 选工具绘制：矩形 / 圆形 / 箭头 / 画笔 / 文字 / 马赛克 / 直线 / 高亮。
+3. 文字：选「文字」工具点击画布，输入多行文字，回车确认；点选文字可回改内容或调整字号 / 粗体 / 颜色。
+4. 调整：拖动手柄或整体移动已有标注，滚轮缩放画布，`Ctrl+Z`/`Ctrl+Y` 撤销重做。
+5. 底部按钮输出：复制 / 保存 / 钉图（`Esc` 取消）。
+
+## 版本
+
+`1.3.10` —— 含 8 手柄缩放、文字框按内容扩展、多次快捷键截图修复。
diff --git a/plugins/screenshot-annotate/capture.html b/plugins/screenshot-annotate/capture.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>截图标注 — 框选</title>
+  </head>
+  <body>
+    <div id="capture-app"></div>
+    <script type="module" src="/src/capture.ts"></script>
+  </body>
+</html>
diff --git a/plugins/screenshot-annotate/index.html b/plugins/screenshot-annotate/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>截图标注</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>