dsh-notify-tone 0.2.0 → 0.2.2

package/README.md

@@ -1,5 +1,7 @@
 # dsh-notify-tone（声音 + 视觉 + 系统通知提醒插件）
 
+> 本项目由 **DeepSeek** 贡献（协助设计、开发与测试）
+
 dsh web GUI 的提醒插件：
 
 - **需要操作提醒**：AI 执行任务中遇到需要用户授权或选择时（沙箱权限授权弹窗、`ask_user_question` 提问、计划审批等），同时触发提示音、屏幕光效与系统通知，提醒你回到窗口处理。
@@ -11,14 +13,19 @@ dsh web GUI 的提醒插件：
 - **视觉提醒**：屏幕四周大圆弧光带 + 泡泡式弹性向内挤压脉冲（柔和、不遮挡、不拦截鼠标）；「需要操作」「回答完成」**各自独立配色**（8 种预设 + 🌈 自定义色相），选色即时预览。
 - **系统通知**：触发时弹出**操作系统级桌面通知**（含系统声音），**在浏览器外、其他窗口、浏览器最小化时也能看到**；点击通知可跳回 dsh 窗口。首次使用需在浏览器中授权（打开开关时自动请求）。
 - **分别开关**：总开关、声音开关、视觉开关、系统通知开关**四者独立**，互不影响。
-- **持久生效**：所有开关、音色、颜色都存 `localStorage`，重启后保持；旧版设置（`dsh.notify-sound.*`）自动迁移。
+- **🔔 按钮可拖动**：按住 🔔 拖动即可移动到任意位置（不与其他插件按钮冲突），位置自动记忆，**重启后保持**。
+- **菜单方向自适应**：按钮靠近屏幕边缘时，设置菜单自动选择向上/向下弹出，**不会被裁剪、不遮挡按钮**。
+- **持久生效**：所有开关、音色、颜色、按钮位置都存 `localStorage`，重启后保持；旧版设置（`dsh.notify-sound.*`）自动迁移。
 - **悬浮设置菜单**：鼠标悬停页面右下角 🔔 按钮自动弹出：总开关、声音/视觉/系统通知分别开关、音色选择（点击试听）、颜色选择（展开面板，点击预览）。
 - **不侵入**：不改动 dsh 任何原有组件与第三方插件；插件只做「监听会话状态 + 发声 + 视觉层 + 系统通知 + 一个悬浮按钮/菜单」。  
 ![alt text](/image_1.jpg)  
 ![alt text](/image_3.jpg)  
 ![alt text](/image_2.jpg)
 
-## 安装
+## 安装  
+
+### 前置  
+已安装DeepSeek Harness，`dsh web`能正常启动
 
 ### 方式一：npm 安装（已发布到npm）
 
@@ -40,14 +47,8 @@ dsh plugin --profile web add link:/绝对路径/dsh-notify-tone
 
 安装后**重启 dsh**（完全退出 `dsh web` 进程再启动）即生效。
 
-本机当前以本地目录方式挂载：包位于 `~/.dsh/profiles/web/node_modules/dsh-notify-tone/`，
-启用条目在 `~/.dsh/profiles/web/cordis.patch.yml`：
-
-```yaml
-- insert:
-    - id: notify-tone
-      name: 'dsh-notify-tone'
-```
+> 说明：本插件通过 npm 安装后，由 dsh 自动登记进 profile 的 `dsh.profile.bundles` 并激活，
+> 无需手动修改 `cordis.patch.yml`。
 
 ## 卸载
 
@@ -58,4 +59,42 @@ dsh plugin --profile web add link:/绝对路径/dsh-notify-tone
 
 - 听不到声音：浏览器自动播放策略要求页面至少被点击过一次；点击页面任意位置后再试。
 - 收不到系统通知：① 打开 🔔 菜单「系统通知」开关并允许浏览器的授权询问；② 若显示"权限已被禁用"，需到浏览器站点设置（地址栏左侧锁图标 → 网站设置）中把「通知」改为允许；③ Windows 还需确认系统"通知和操作"未对浏览器静音。
+- **通知横幅不弹出、直接进通知中心**：这是浏览器/系统的正常行为——**当 dsh 页面正处于前台时，浏览器不会弹横幅**（你正在看页面，横幅会打扰），通知会直接收进通知中心；**切到其他应用/桌面后，通知才会以横幅 + 系统提示音弹出**。若你希望在页面前台时也看到横幅，可尝试：Windows 设置 → 系统 → 通知 → 应用列表中找到浏览器 → 确认「显示通知横幅」已开启。
 - 若之后运行过 `pnpm install` 导致手动放置的包被清理，请重新复制本目录到 `~/.dsh/profiles/web/node_modules/`（或在 profile 目录执行 `dsh plugin --profile web add link:<本目录绝对路径>`）。
+
+### pnpm 11 + dsh-better-sidebar：安装后插件不生效
+
+**现象**：执行 `dsh plugin --profile web add dsh-notify-tone` 时提示安装成功（`+ dsh-notify-tone ^0.2.0`），但末尾报
+`[ERR_PNPM_IGNORED_BUILDS] Ignored build scripts: node-pty@1.1.0` 和 `dsh: pnpm failed ...`；
+重启 dsh 后插件没有出现。
+
+**原因**：pnpm 11 的安全策略默认**阻止依赖运行构建脚本**。`node-pty` 是
+`dsh-better-sidebar`（另一个第三方插件）的依赖，与本插件无关；当它的构建脚本被忽略时，
+pnpm 会以**非零退出码**结束，而 dsh 只在 pnpm 成功（退出码 0）时才把插件同步进
+`dsh.profile.bundles`，导致本插件依赖已装、但未进入 bundles 层、不加载。
+
+**解决**：编辑 profile 的 `pnpm-workspace.yaml`（`~/.dsh/profiles/web/pnpm-workspace.yaml`），
+在 `allowBuilds:` 下把 node-pty 设为允许构建：
+
+```yaml
+allowBuilds:
+  node-pty: true
+```
+
+（如果该行是占位文本 `node-pty: set this to true or false`，直接改成 `true`；
+也可以运行 pnpm 提示的 `pnpm approve-builds` 交互式批准。）然后**重新执行**：
+
+```bash
+dsh plugin --profile web add dsh-notify-tone
+```
+
+确认输出末尾为 `Done`、无 `ERR_PNPM_IGNORED_BUILDS` 后重启 dsh 即可。
+
+> 本插件自身零依赖、无构建脚本、纯浏览器端，这个问题只在你同时安装
+> `dsh-better-sidebar` 且使用 pnpm 11 时可能出现。
+
+## 致谢
+
+本项目由 **DeepSeek** 贡献：功能设计、代码实现、测试验证与文档编写均由 DeepSeek 协助完成，作者负责需求提出与验收。
+
+MIT License

package/lib/client.js

@@ -38,6 +38,7 @@ window.__ModuleLoader__.load({
 		const MENU_ID = "dsh-notify-tone-menu";
 		const FX_ID = "dsh-notify-tone-fx";
 		const FX_STYLE_ID = "dsh-notify-tone-fx-style";
+		const KEY_POSITION = "dsh.notify-tone.ui.position"; // 🔔 按钮位置（JSON: {left, top}）
 
 		// ===================== 提示音预设 =====================
 		const PRESETS = {
@@ -670,16 +671,118 @@ window.__ModuleLoader__.load({
 				return;
 			}
 
-			const root = el("div", "", "position:fixed;right:18px;bottom:18px;z-index:2147483001;display:flex;flex-direction:column;align-items:flex-end;");
+			// touch-action:none 防止触屏拖动时页面滚动
+			const root = el("div", "", "position:fixed;right:18px;bottom:18px;z-index:2147483001;display:flex;flex-direction:column;align-items:flex-end;touch-action:none;");
+			root.id = ROOT_ID; // 必须设置 id：幂等检查 getElementById(ROOT_ID) 依赖它，否则重复 apply 会挂出多个铃铛
 
-			const menu = el("div", "", "display:none;margin-bottom:8px;min-width:240px;max-height:64vh;overflow-y:auto;background:rgba(24,24,30,0.96);border:1px solid rgba(128,128,128,0.3);border-radius:10px;padding:10px 12px;box-shadow:0 6px 24px rgba(0,0,0,0.45);backdrop-filter:blur(6px);color:#e8e8ea;");
+			// 菜单绝对定位（相对 root），由 positionMenu() 动态决定向上/向下弹出，
+			// 避免按钮靠近屏幕边缘时菜单被裁剪或遮挡按钮
+			const menu = el("div", "", "display:none;position:absolute;right:0;min-width:240px;max-height:64vh;overflow-y:auto;background:rgba(24,24,30,0.96);border:1px solid rgba(128,128,128,0.3);border-radius:10px;padding:10px 12px;box-shadow:0 6px 24px rgba(0,0,0,0.45);backdrop-filter:blur(6px);color:#e8e8ea;");
 			root.appendChild(menu);
 
-			const btn = el("button", "🔔", "width:38px;height:38px;border-radius:50%;border:1px solid rgba(128,128,128,0.35);background:rgba(28,28,34,0.75);color:#fff;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,0.35);backdrop-filter:blur(4px);transition:opacity .15s ease;");
+			const btn = el("button", "🔔", "width:38px;height:38px;border-radius:50%;border:1px solid rgba(128,128,128,0.35);background:rgba(28,28,34,0.75);color:#fff;font-size:18px;line-height:1;cursor:grab;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,0.35);backdrop-filter:blur(4px);transition:opacity .15s ease;");
 			btn.id = TOGGLE_ID;
 			btn.type = "button";
+			btn.title = "拖动可移动位置；点击开/关；悬停打开设置菜单";
+
+			let hideTimer = null;
+			let dragState = null;
+			let suppressClick = false;
+
+			// 根据按钮位置决定菜单弹出方向：上方空间不足则向下弹出
+			function positionMenu() {
+				if (typeof window === "undefined") return;
+				const vh = window.innerHeight || 0;
+				const rect = typeof btn.getBoundingClientRect === "function" ? btn.getBoundingClientRect() : null;
+				const spaceAbove = rect ? rect.top : vh;
+				const spaceBelow = rect ? vh - rect.bottom : 0;
+				const menuMaxH = (vh * 64) / 100; // 与 max-height 对齐
+				if (spaceAbove < menuMaxH && spaceBelow > spaceAbove) {
+					// 上方空间不足且下方更大 → 向下弹出
+					menu.style.top = "calc(100% + 8px)";
+					menu.style.bottom = "auto";
+				} else {
+					// 默认向上弹出
+					menu.style.top = "auto";
+					menu.style.bottom = "calc(100% + 8px)";
+				}
+			}
+
+			// 恢复上次保存的位置（持久化）
+			function applyStoredPosition() {
+				try {
+					const raw = storageGet(KEY_POSITION, "");
+					if (!raw) return;
+					const pos = JSON.parse(raw);
+					if (Number.isFinite(pos.left) && Number.isFinite(pos.top)) {
+						root.style.left = pos.left + "px";
+						root.style.top = pos.top + "px";
+						root.style.right = "auto";
+						root.style.bottom = "auto";
+					}
+				} catch {
+					/* 位置数据损坏时忽略，使用默认位置 */
+				}
+			}
+
+			// —— 🔔 拖拽移动（Pointer Events，鼠标/触屏通用）——
+			btn.addEventListener("pointerdown", (event) => {
+				if (event.button !== undefined && event.button !== 0) return; // 仅左键/触摸
+				event.preventDefault();
+				clearTimeout(hideTimer); // 拖动时收起菜单
+				menu.style.display = "none";
+				expandedColor = null;
+				dragState = {
+					startX: event.clientX,
+					startY: event.clientY,
+					left: root.offsetLeft,
+					top: root.offsetTop,
+					moved: false,
+				};
+				btn.style.cursor = "grabbing";
+				if (typeof btn.setPointerCapture === "function") {
+					try { btn.setPointerCapture(event.pointerId); } catch { /* 忽略 */ }
+				}
+			});
+
+			btn.addEventListener("pointermove", (event) => {
+				if (!dragState) return;
+				event.preventDefault();
+				const dx = event.clientX - dragState.startX;
+				const dy = event.clientY - dragState.startY;
+				if (!dragState.moved && Math.hypot(dx, dy) < 4) return; // 4px 内视为点击
+				dragState.moved = true;
+				// 限制在可视区域内
+				const vw = (typeof window !== "undefined" && window.innerWidth) || 0;
+				const vh = (typeof window !== "undefined" && window.innerHeight) || 0;
+				const bw = root.offsetWidth || 40;
+				const bh = root.offsetHeight || 40;
+				const left = Math.min(Math.max(0, dragState.left + dx), Math.max(0, vw - bw));
+				const top = Math.min(Math.max(0, dragState.top + dy), Math.max(0, vh - bh));
+				root.style.left = left + "px";
+				root.style.top = top + "px";
+				root.style.right = "auto";
+				root.style.bottom = "auto";
+			});
+
+			function endDrag() {
+				if (!dragState) return;
+				const moved = dragState.moved;
+				dragState = null;
+				btn.style.cursor = "grab";
+				if (moved) {
+					suppressClick = true; // 拖动后抑制随后的 click（避免误切换开关）
+					try {
+						storageSet(KEY_POSITION, JSON.stringify({ left: root.offsetLeft, top: root.offsetTop }));
+					} catch { /* 忽略 */ }
+				}
+			}
+			btn.addEventListener("pointerup", endDrag);
+			btn.addEventListener("pointercancel", endDrag);
+
 			btn.addEventListener("click", (event) => {
 				event.stopPropagation();
+				if (suppressClick) { suppressClick = false; return; } // 拖拽结束后的 click 不切换开关
 				const next = !isEnabled();
 				setEnabled(next);
 				updateToggle(btn);
@@ -693,10 +796,11 @@ window.__ModuleLoader__.load({
 			root.appendChild(btn);
 
 			document.body.appendChild(root);
+			applyStoredPosition(); // 恢复持久化的位置
 
-			let hideTimer = null;
 			root.addEventListener("mouseenter", () => {
 				clearTimeout(hideTimer);
+				positionMenu(); // 先根据按钮位置决定弹出方向，再显示
 				renderMenu(menu, btn);
 				menu.style.display = "block";
 			});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-notify-tone",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "dsh web GUI 提示音插件：AI 需要用户授权/选择时与每轮回答结束时播放提示音提醒用户。多套内置音色可选（经典双音/清脆叮咚/明亮三连/柔和轻音），悬停铃铛按钮可开关、选音色并试听，状态持久化。",
   "type": "module",
   "main": "lib/index.js",