dsh-notify-tone 0.1.0 → 0.2.0

package/README.md

@@ -1,23 +1,26 @@
-# dsh-notify-tone（提示音插件）
+# dsh-notify-tone（声音 + 视觉 + 系统通知提醒插件）
 
-dsh web GUI 的提示音插件：
+dsh web GUI 的提醒插件：
 
-- **需要操作提醒**：AI 执行任务中遇到需要用户授权或选择时（沙箱权限授权弹窗、`ask_user_question` 提问、计划审批等），播放急促提示音，提醒你回到窗口处理。
-- **回答完成提醒**：AI 每轮回答结束时，播放提示音，提醒你回复已生成。
+- **需要操作提醒**：AI 执行任务中遇到需要用户授权或选择时（沙箱权限授权弹窗、`ask_user_question` 提问、计划审批等），同时触发提示音、屏幕光效与系统通知，提醒你回到窗口处理。
+- **回答完成提醒**：AI 每轮回答结束时，同样触发三重提醒，提醒你回复已生成。
 
 ## 特性
 
-- **零依赖**：只用浏览器 Web Audio API 合成提示音（基频 + 泛音，声音更明显），无需任何音频文件。
-- **持久生效**：开关状态与所选提示音都保存在 `localStorage`，刷新页面、重启后依然保持。
-- **悬浮设置菜单**：鼠标悬停页面右下角的 🔔 按钮，自动弹出二级菜单：
-  - **功能开关**：一键开/关（打开时播放当前音色试听反馈）；
-  - **提示音选择**：内置 4 套提示音——经典双音、清脆叮咚（叮——）、明亮三连、柔和轻音，点击选项即选中生效（带 ✓ 标记）；
-  - **试听预览**：每套音色右侧有「▶ 试听」按钮，点击可先听完整效果（需要操作 + 回答完成连播），再决定是否应用。
-- **不侵入**：不改动 dsh 任何原有组件与第三方插件；插件只做「监听会话状态 + 发声 + 一个悬浮按钮/菜单」。
+- **声音提醒**：Web Audio 合成（基频 + 泛音，无音频文件），内置 **5 套音色**——经典双音、清脆叮咚（叮——）、明亮三连、柔和轻音、**尖锐警示**（方波高频，最醒目），点击即可试听并选中。
+- **视觉提醒**：屏幕四周大圆弧光带 + 泡泡式弹性向内挤压脉冲（柔和、不遮挡、不拦截鼠标）；「需要操作」「回答完成」**各自独立配色**（8 种预设 + 🌈 自定义色相），选色即时预览。
+- **系统通知**：触发时弹出**操作系统级桌面通知**（含系统声音），**在浏览器外、其他窗口、浏览器最小化时也能看到**；点击通知可跳回 dsh 窗口。首次使用需在浏览器中授权（打开开关时自动请求）。
+- **分别开关**：总开关、声音开关、视觉开关、系统通知开关**四者独立**，互不影响。
+- **持久生效**：所有开关、音色、颜色都存 `localStorage`，重启后保持；旧版设置（`dsh.notify-sound.*`）自动迁移。
+- **悬浮设置菜单**：鼠标悬停页面右下角 🔔 按钮自动弹出：总开关、声音/视觉/系统通知分别开关、音色选择（点击试听）、颜色选择（展开面板，点击预览）。
+- **不侵入**：不改动 dsh 任何原有组件与第三方插件；插件只做「监听会话状态 + 发声 + 视觉层 + 系统通知 + 一个悬浮按钮/菜单」。  
+![alt text](/image_1.jpg)  
+![alt text](/image_3.jpg)  
+![alt text](/image_2.jpg)
 
 ## 安装
 
-### 方式一：npm 发布安装（推荐，需先发布到 npm）
+### 方式一：npm 安装（已发布到npm）
 
 ```bash
 dsh plugin --profile web add dsh-notify-tone
@@ -54,4 +57,5 @@ dsh plugin --profile web add link:/绝对路径/dsh-notify-tone
 ## 故障排查
 
 - 听不到声音：浏览器自动播放策略要求页面至少被点击过一次；点击页面任意位置后再试。
+- 收不到系统通知：① 打开 🔔 菜单「系统通知」开关并允许浏览器的授权询问；② 若显示"权限已被禁用"，需到浏览器站点设置（地址栏左侧锁图标 → 网站设置）中把「通知」改为允许；③ Windows 还需确认系统"通知和操作"未对浏览器静音。
 - 若之后运行过 `pnpm install` 导致手动放置的包被清理，请重新复制本目录到 `~/.dsh/profiles/web/node_modules/`（或在 profile 目录执行 `dsh plugin --profile web add link:<本目录绝对路径>`）。

package/lib/client.js

@@ -2,17 +2,20 @@
 //
 // 功能：
 //   1. AI 执行任务中需要用户授权/选择时（sandbox 授权弹窗、ask_user_question、
-//      plan review 等，即会话出现 pendingInteraction）播放「需要操作」提示音；
-//   2. AI 每轮回答结束时（会话 running -> false）播放「回答完成」提示音。
-//   3. 多种提示音可选（经典双音 / 清脆叮咚 / 明亮三连 / 柔和轻音），
-//      鼠标悬停 🔔 按钮弹出设置菜单：功能开关、提示音选择、点击试听预览。
+//      plan review 等，即会话出现 pendingInteraction）触发「需要操作」提醒；
+//   2. AI 每轮回答结束时（会话 running -> false）触发「回答完成」提醒。
+//   3. 提醒 = 声音 + 视觉，可分别开关：
+//      - 声音：多套内置音色（经典双音 / 清脆叮咚 / 明亮三连 / 柔和轻音），
+//        用 Web Audio 合成（基频 + 泛音，无需音频文件）；
+//      - 视觉：屏幕四周大圆弧光带 + 泡泡式弹性向内挤压脉冲，
+//        「需要操作」「回答完成」各自独立配色（预设 8 色 + 自定义色相）。
+//   4. 鼠标悬停 🔔 按钮弹出设置菜单：总开关、声音/视觉分别开关、
+//      音色选择（点击试听）、颜色选择（点击预览）。
 //
 // 实现要点：
-//   - 零依赖：不 require 任何 dsh 客户端模块，只用注入的 ctx.sessions 服务
-//     与 Web Audio API（无需音频文件）。
-//   - 声音更明显：基频 + 泛音合成、指数衰减包络、音量提升。
-//   - 开关与所选提示音存 localStorage，持久生效。
-//   - 不改动 dsh 任何原有组件：只做「监听 + 发声 + 一个悬浮按钮/菜单」。
+//   - 零依赖：不 require 任何 dsh 客户端模块，只用注入的 ctx.sessions 服务。
+//   - 所有设置存 localStorage，持久生效；旧版 key（dsh.notify-sound.*）自动迁移。
+//   - 不改动 dsh 任何原有组件：只做「监听 + 发声 + 视觉层 + 一个悬浮按钮/菜单」。
 
 window.__ModuleLoader__.load({
 	id: "dsh-notify-tone",
@@ -22,15 +25,21 @@ window.__ModuleLoader__.load({
 		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 
 		// ===================== 常量 =====================
-		const KEY_ENABLED = "dsh.notify-sound.enabled";
-		const KEY_PRESET = "dsh.notify-sound.preset";
+		const KEY_ENABLED = "dsh.notify-tone.enabled";
+		const KEY_SOUND_ENABLED = "dsh.notify-tone.sound.enabled";
+		const KEY_PRESET = "dsh.notify-tone.sound.preset";
+		const KEY_VISUAL_ENABLED = "dsh.notify-tone.visual.enabled";
+		const KEY_HUE_INTERACT = "dsh.notify-tone.visual.interactHue";
+		const KEY_HUE_DONE = "dsh.notify-tone.visual.doneHue";
+		const KEY_NOTIFICATION_ENABLED = "dsh.notify-tone.notification.enabled";
+
 		const ROOT_ID = "dsh-notify-tone-root";
 		const TOGGLE_ID = "dsh-notify-tone-toggle";
 		const MENU_ID = "dsh-notify-tone-menu";
+		const FX_ID = "dsh-notify-tone-fx";
+		const FX_STYLE_ID = "dsh-notify-tone-fx-style";
 
 		// ===================== 提示音预设 =====================
-		// 每个预设含 interact（需要授权/选择）与 done（回答完成）两组音符。
-		// 音符格式：[频率Hz, 时长s]；gap 为音符间隔（秒）。
 		const PRESETS = {
 			classic: {
 				label: "经典双音",
@@ -52,11 +61,43 @@ window.__ModuleLoader__.load({
 				interact: { tones: [[523, 0.2], [659, 0.25]], gap: 0.09 },
 				done: { tones: [[659, 0.28]], gap: 0 },
 			},
+			sharp: {
+				label: "尖锐警示",
+				wave: "square",
+				volume: 0.26,
+				interact: { tones: [[1760, 0.09], [2093, 0.09], [2637, 0.16]], gap: 0.06 },
+				done: { tones: [[2093, 0.28]], gap: 0 },
+			},
 		};
 		const PRESET_IDS = Object.keys(PRESETS);
-		/** 默认音色：清脆叮咚（比经典双音更明显，如「叮——」）。 */
 		const DEFAULT_PRESET = "ding";
 
+		// 预设颜色（色相值），与 demo 一致
+		const COLOR_PRESETS = [35, 15, 0, 320, 270, 215, 180, 145];
+		const DEFAULT_HUE_INTERACT = 35;
+		const DEFAULT_HUE_DONE = 145;
+
+		// 视觉固定参数（demo 确认过的默认值；暂不提供菜单滑块，保持简洁）
+		const VISUAL = { amp: "26px", glow: "0.55", dur: "1.3s", radius: "34px" };
+
+		// ===================== 旧版设置迁移（dsh.notify-sound.* → dsh.notify-tone.*） =====================
+		(function migrateOldKeys() {
+			try {
+				const map = {
+					"dsh.notify-sound.enabled": KEY_ENABLED,
+					"dsh.notify-sound.preset": KEY_PRESET,
+				};
+				for (const [oldKey, newKey] of Object.entries(map)) {
+					if (localStorage.getItem(oldKey) !== null && localStorage.getItem(newKey) === null) {
+						localStorage.setItem(newKey, localStorage.getItem(oldKey));
+						localStorage.removeItem(oldKey);
+					}
+				}
+			} catch {
+				/* 迁移失败不影响使用 */
+			}
+		})();
+
 		// ===================== 声音引擎（Web Audio，无音频文件） =====================
 		let audioCtx = null;
 
@@ -79,13 +120,13 @@ window.__ModuleLoader__.load({
 
 		/**
 		 * 播放一个音符：基频 + 2 倍频泛音（更明亮、更明显），指数衰减包络。
+		 * @param wave - 波形（sine/square/triangle/sawtooth），尖锐音用 square。
 		 */
-		function playTone(ctx, freq, dur, start, volume) {
+		function playTone(ctx, freq, dur, start, volume, wave) {
 			const stop = start + dur + 0.05;
-			// 基频
 			const osc = ctx.createOscillator();
 			const gain = ctx.createGain();
-			osc.type = "sine";
+			osc.type = wave ?? "sine";
 			osc.frequency.setValueAtTime(freq, start);
 			gain.gain.setValueAtTime(0.0001, start);
 			gain.gain.exponentialRampToValueAtTime(volume, start + 0.02);
@@ -97,7 +138,7 @@ window.__ModuleLoader__.load({
 			// 泛音（2 倍频，音量更低，增强穿透力）
 			const osc2 = ctx.createOscillator();
 			const gain2 = ctx.createGain();
-			osc2.type = "sine";
+			osc2.type = wave ?? "sine";
 			osc2.frequency.setValueAtTime(freq * 2, start);
 			gain2.gain.setValueAtTime(0.0001, start);
 			gain2.gain.exponentialRampToValueAtTime(volume * 0.35, start + 0.02);
@@ -108,18 +149,105 @@ window.__ModuleLoader__.load({
 			osc2.stop(stop);
 		}
 
-		/** 按音符序列播放一组提示音。 */
-		function playPreset(tones, gap) {
+		/** 按音符序列播放一组提示音（支持预设波形与音量）。 */
+		function playPreset(tones, gap, wave, volume) {
 			const ctx = ensureAudio();
 			if (ctx === null) return;
-			const volume = 0.22;
+			const vol = volume ?? 0.22;
 			let t = ctx.currentTime + 0.02;
 			for (const [freq, dur] of tones) {
-				playTone(ctx, freq, dur, t, volume);
+				playTone(ctx, freq, dur, t, vol, wave);
 				t += dur + (gap ?? 0);
 			}
 		}
 
+		// ===================== 视觉层 CSS（注入 <style>） =====================
+		const FX_CSS = `
+#${FX_ID} {
+  position: fixed; inset: 0;
+  pointer-events: none;
+  z-index: 2147483000;
+  --hue: 35;
+  --amp: ${VISUAL.amp};
+  --glow: ${VISUAL.glow};
+  --dur: ${VISUAL.dur};
+  --radius: ${VISUAL.radius};
+}
+#${FX_ID} .halo {
+  position: absolute; inset: 0;
+  border-radius: var(--radius);
+  opacity: 0;
+  box-shadow:
+    inset 0 0 calc(150px * var(--glow)) calc(22px * var(--glow)) hsla(var(--hue), 90%, 62%, calc(var(--glow) * 0.5)),
+    inset 0 0 calc(50px * var(--glow)) calc(10px * var(--glow)) hsla(var(--hue), 95%, 70%, calc(var(--glow) * 0.4));
+}
+#${FX_ID} .arc {
+  position: absolute;
+  opacity: 0;
+  filter: blur(3px);
+}
+#${FX_ID} .arc.top {
+  top: -40px; left: -8%; right: -8%; height: 280px;
+  background: radial-gradient(150% 100% at 50% 0%, hsla(var(--hue), 95%, 74%, calc(var(--glow) * 0.95)), transparent 60%);
+}
+#${FX_ID} .arc.bottom {
+  bottom: -40px; left: -8%; right: -8%; height: 280px;
+  background: radial-gradient(150% 100% at 50% 100%, hsla(var(--hue), 95%, 74%, calc(var(--glow) * 0.95)), transparent 60%);
+}
+#${FX_ID} .arc.left {
+  left: -40px; top: -8%; bottom: -8%; width: 280px;
+  background: radial-gradient(100% 150% at 0% 50%, hsla(var(--hue), 95%, 74%, calc(var(--glow) * 0.95)), transparent 60%);
+}
+#${FX_ID} .arc.right {
+  right: -40px; top: -8%; bottom: -8%; width: 280px;
+  background: radial-gradient(100% 150% at 100% 50%, hsla(var(--hue), 95%, 74%, calc(var(--glow) * 0.95)), transparent 60%);
+}
+#${FX_ID}.play .halo { animation: dshnt-halo var(--dur) ease-out forwards; }
+#${FX_ID}.play .arc.top { animation: dshnt-pop-top var(--dur) cubic-bezier(.22, 1.5, .36, 1) forwards; }
+#${FX_ID}.play .arc.bottom { animation: dshnt-pop-bottom var(--dur) cubic-bezier(.22, 1.5, .36, 1) forwards; }
+#${FX_ID}.play .arc.left { animation: dshnt-pop-left var(--dur) cubic-bezier(.22, 1.5, .36, 1) forwards; }
+#${FX_ID}.play .arc.right { animation: dshnt-pop-right var(--dur) cubic-bezier(.22, 1.5, .36, 1) forwards; }
+@keyframes dshnt-halo {
+  0% { opacity: 0; }
+  12% { opacity: calc(var(--glow)); }
+  40% { opacity: calc(var(--glow) * 1.0); }
+  72% { opacity: calc(var(--glow) * 0.5); }
+  100% { opacity: 0; }
+}
+@keyframes dshnt-pop-top {
+  0% { opacity: 0; transform: translateY(0); }
+  10% { opacity: 1; }
+  38% { opacity: 1; transform: translateY(var(--amp)); }
+  62% { transform: translateY(calc(var(--amp) * -0.12)); }
+  82% { transform: translateY(0); }
+  100% { opacity: 0; }
+}
+@keyframes dshnt-pop-bottom {
+  0% { opacity: 0; transform: translateY(0); }
+  10% { opacity: 1; }
+  38% { opacity: 1; transform: translateY(calc(var(--amp) * -1)); }
+  62% { transform: translateY(calc(var(--amp) * 0.12)); }
+  82% { transform: translateY(0); }
+  100% { opacity: 0; }
+}
+@keyframes dshnt-pop-left {
+  0% { opacity: 0; transform: translateX(0); }
+  10% { opacity: 1; }
+  38% { opacity: 1; transform: translateX(var(--amp)); }
+  62% { transform: translateX(calc(var(--amp) * -0.12)); }
+  82% { transform: translateX(0); }
+  100% { opacity: 0; }
+}
+@keyframes dshnt-pop-right {
+  0% { opacity: 0; transform: translateX(0); }
+  10% { opacity: 1; }
+  38% { opacity: 1; transform: translateX(calc(var(--amp) * -1)); }
+  62% { transform: translateX(calc(var(--amp) * 0.12)); }
+  82% { transform: translateX(0); }
+  100% { opacity: 0; }
+}
+`;
+
 		// ===================== 状态（localStorage 持久化） =====================
 		function storageGet(key, fallback) {
 			try {
@@ -137,6 +265,7 @@ window.__ModuleLoader__.load({
 			}
 		}
 
+		// 总开关
 		function isEnabled() {
 			return storageGet(KEY_ENABLED, "true") !== "false";
 		}
@@ -144,6 +273,23 @@ window.__ModuleLoader__.load({
 			storageSet(KEY_ENABLED, value ? "true" : "false");
 		}
 
+		// 声音开关
+		function isSoundEnabled() {
+			return storageGet(KEY_SOUND_ENABLED, "true") !== "false";
+		}
+		function setSoundEnabled(value) {
+			storageSet(KEY_SOUND_ENABLED, value ? "true" : "false");
+		}
+
+		// 视觉开关
+		function isVisualEnabled() {
+			return storageGet(KEY_VISUAL_ENABLED, "true") !== "false";
+		}
+		function setVisualEnabled(value) {
+			storageSet(KEY_VISUAL_ENABLED, value ? "true" : "false");
+		}
+
+		// 音色预设
 		function currentPresetId() {
 			const id = storageGet(KEY_PRESET, DEFAULT_PRESET);
 			return PRESETS[id] ? id : DEFAULT_PRESET;
@@ -152,6 +298,65 @@ window.__ModuleLoader__.load({
 			if (PRESETS[id]) storageSet(KEY_PRESET, id);
 		}
 
+		// 各功能颜色（色相）
+		function interactHue() {
+			const v = Number(storageGet(KEY_HUE_INTERACT, String(DEFAULT_HUE_INTERACT)));
+			return Number.isFinite(v) ? v : DEFAULT_HUE_INTERACT;
+		}
+		function doneHue() {
+			const v = Number(storageGet(KEY_HUE_DONE, String(DEFAULT_HUE_DONE)));
+			return Number.isFinite(v) ? v : DEFAULT_HUE_DONE;
+		}
+		function setInteractHue(h) {
+			if (Number.isFinite(h)) storageSet(KEY_HUE_INTERACT, String(Math.round(h)));
+		}
+		function setDoneHue(h) {
+			if (Number.isFinite(h)) storageSet(KEY_HUE_DONE, String(Math.round(h)));
+		}
+
+		// 系统通知开关
+		function isNotificationEnabled() {
+			return storageGet(KEY_NOTIFICATION_ENABLED, "true") !== "false";
+		}
+		function setNotificationEnabled(value) {
+			storageSet(KEY_NOTIFICATION_ENABLED, value ? "true" : "false");
+		}
+
+		// ===================== 系统通知（桌面通知，浏览器外可见） =====================
+		/** 若权限未定，请求一次通知权限（需在用户交互后调用才有效）。 */
+		function ensureNotificationPermission() {
+			if (typeof Notification === "undefined") return;
+			if (Notification.permission === "default" && typeof Notification.requestPermission === "function") {
+				Notification.requestPermission().catch(() => {});
+			}
+		}
+
+		/** 弹桌面系统通知（任何窗口下都能看到；随系统声音提醒）。 */
+		function notifyUser(kind) {
+			if (typeof Notification === "undefined") return;
+			if (Notification.permission !== "granted") return;
+			const isInteract = kind === "interact";
+			try {
+				const n = new Notification(
+					isInteract ? "dsh：AI 需要你的操作" : "dsh：AI 回答完成",
+					{
+						body: isInteract
+							? "有授权或选择等待处理，请回到 dsh 窗口"
+							: "本轮回答已生成，可以回来查看了",
+						tag: "dsh-notify-tone",
+					}
+				);
+				n.onclick = () => {
+					try {
+						if (typeof window !== "undefined" && typeof window.focus === "function") window.focus();
+					} catch { /* 忽略 */ }
+					n.close();
+				};
+			} catch {
+				/* 通知被浏览器拦截时静默 */
+			}
+		}
+
 		// ===================== 事件节流（防连发） =====================
 		const lastPlayed = { interact: 0, done: 0 };
 		function throttledPlay(kind, minGapMs) {
@@ -159,13 +364,21 @@ window.__ModuleLoader__.load({
 			const now = Date.now();
 			if (now - lastPlayed[kind] < minGapMs) return;
 			lastPlayed[kind] = now;
-			const spec = PRESETS[currentPresetId()][kind];
-			playPreset(spec.tones, spec.gap);
+			// 声音 + 视觉 + 系统通知同时触发（各自可独立开关）
+			if (isSoundEnabled()) {
+				const preset = PRESETS[currentPresetId()];
+				const spec = preset[kind];
+				playPreset(spec.tones, spec.gap, preset.wave, preset.volume);
+			}
+			if (isVisualEnabled()) {
+				playFx(kind);
+			}
+			if (isNotificationEnabled()) {
+				notifyUser(kind);
+			}
 		}
 
 		// ===================== 会话状态订阅 =====================
-		// 基线：id -> { running, pending }。首次快照只建基线不发声，
-		// 避免页面刷新时对「正在运行」的会话误报。
 		let prevBySession = new Map();
 
 		function handleListChange(ctx) {
@@ -184,22 +397,54 @@ window.__ModuleLoader__.load({
 			for (const [id, cur] of now) {
 				const prev = prevBySession.get(id);
 				if (prev === undefined) continue; // 新出现的会话：只入基线
-				// 需要用户授权/选择：pendingInteraction 从无到有
 				if (prev.pending === undefined && cur.pending !== undefined) {
 					throttledPlay("interact", 1200);
 				}
-				// 每轮回答结束：running true -> false
 				if (prev.running && !cur.running) {
 					throttledPlay("done", 2000);
 				}
 			}
-			// 已被移除的会话从基线中清理
 			for (const id of prevBySession.keys()) {
 				if (!now.has(id)) prevBySession.delete(id);
 			}
 			prevBySession = now;
 		}
 
+		// ===================== 视觉层（挂载 + 播放） =====================
+		function mountFx() {
+			if (typeof document === "undefined") return;
+			if (document.getElementById(FX_ID)) return;
+			if (!document.body || !document.head) {
+				document.addEventListener("DOMContentLoaded", mountFx, { once: true });
+				return;
+			}
+			if (!document.getElementById(FX_STYLE_ID)) {
+				const style = document.createElement("style");
+				style.id = FX_STYLE_ID;
+				style.textContent = FX_CSS;
+				document.head.appendChild(style);
+			}
+			const root = document.createElement("div");
+			root.id = FX_ID;
+			root.innerHTML =
+				'<div class="halo"></div>' +
+				'<div class="arc top"></div>' +
+				'<div class="arc bottom"></div>' +
+				'<div class="arc left"></div>' +
+				'<div class="arc right"></div>';
+			document.body.appendChild(root);
+		}
+
+		function playFx(kind) {
+			if (typeof document === "undefined") return;
+			const root = document.getElementById(FX_ID);
+			if (!root) return;
+			root.style.setProperty("--hue", kind === "interact" ? interactHue() : doneHue());
+			root.classList.remove("play");
+			void root.offsetWidth; // 强制 reflow 重启动画
+			root.classList.add("play");
+		}
+
 		// ===================== 悬浮按钮 + hover 设置菜单 =====================
 		function el(tag, text, css) {
 			const node = document.createElement(tag);
@@ -212,79 +457,209 @@ window.__ModuleLoader__.load({
 			const on = isEnabled();
 			btn.textContent = on ? "🔔" : "🔕";
 			btn.title = on
-				? "提示音：已开启。鼠标悬停可设置音色/开关"
-				: "提示音：已关闭。鼠标悬停可设置音色/开关";
-			btn.setAttribute("aria-label", on ? "提示音已开启" : "提示音已关闭");
+				? "提醒已开启。鼠标悬停可设置声音/视觉/颜色"
+				: "提醒已关闭。鼠标悬停可设置";
+			btn.setAttribute("aria-label", on ? "提醒已开启" : "提醒已关闭");
 			btn.style.opacity = on ? "0.9" : "0.55";
 		}
 
-		/** 渲染设置菜单内容（每次调用重建，简单可靠）。 */
+		// 菜单内通用小组件
+		function switchButton(current, onToggle) {
+			const btn = el("button", current ? "已开启" : "已关闭",
+				"font-family:system-ui,sans-serif;border:1px solid rgba(128,128,128,0.4);background:rgba(255,255,255,0.08);color:#e8e8ea;border-radius:6px;padding:1px 9px;cursor:pointer;font-size:12px;");
+			btn.addEventListener("click", (event) => {
+				event.stopPropagation();
+				onToggle(!current);
+			});
+			return btn;
+		}
+
+		function presetButtons(onPick) {
+			const wrap = el("div", "", "display:flex;flex-wrap:wrap;gap:5px;margin-top:4px;");
+			for (const id of PRESET_IDS) {
+				const p = PRESETS[id];
+				const sel = id === currentPresetId();
+				const b = el("button", p.label,
+					"font-family:system-ui,sans-serif;font-size:11px;border-radius:6px;padding:3px 8px;cursor:pointer;border:1px solid " +
+					(sel ? "rgba(122,184,255,0.9)" : "rgba(128,128,128,0.35)") + ";" +
+					(sel ? "background:rgba(64,128,255,0.28);color:#dbe9ff;" : "background:rgba(255,255,255,0.06);color:#e8e8ea;"));
+				b.addEventListener("click", (event) => {
+					event.stopPropagation();
+					onPick(id);
+				});
+				wrap.appendChild(b);
+			}
+			return wrap;
+		}
+
+		/**
+		 * 颜色选择器：预设色块 + 自定义色相滑块。
+		 * @param currentHue - 当前色相。
+		 * @param onPick - 颜色变化回调（只改值 + 预览，不重建菜单，保证滑块可连续拖动）。
+		 * @param onCommitted - 提交回调（重建菜单刷新选中态；色块点击与滑块松手时调用）。
+		 */
+		function colorPicker(currentHue, onPick, onCommitted) {
+			const wrap = el("div", "", "display:flex;flex-direction:column;gap:4px;margin-top:4px;");
+			const dots = el("div", "", "display:flex;gap:4px;flex-wrap:wrap;");
+			for (const h of COLOR_PRESETS) {
+				const sel = Math.abs(h - currentHue) < 2;
+				const d = el("div", "", "width:16px;height:16px;border-radius:50%;cursor:pointer;flex:none;background:hsl(" + h + " 85% 60%);border:1px solid rgba(255,255,255,0.35);box-sizing:border-box;" + (sel ? "outline:2px solid #fff;outline-offset:1px;" : ""));
+				d.addEventListener("click", (event) => {
+					event.stopPropagation();
+					onPick(h);
+					if (typeof onCommitted === "function") onCommitted();
+				});
+				dots.appendChild(d);
+			}
+			wrap.appendChild(dots);
+			const hueRow = el("div", "", "display:flex;align-items:center;gap:6px;");
+			hueRow.appendChild(el("span", "🌈", "font-size:12px;"));
+			const slider = document.createElement("input");
+			slider.type = "range";
+			slider.min = "0";
+			slider.max = "360";
+			slider.step = "1";
+			slider.value = String(Math.round(currentHue));
+			slider.style.cssText = "flex:1;accent-color:#58a6ff;height:18px;";
+			slider.addEventListener("input", () => {
+				onPick(Number(slider.value)); // 拖动中只改色+预览，不重建菜单
+			});
+			slider.addEventListener("change", () => {
+				if (typeof onCommitted === "function") onCommitted(); // 松手后重建刷新 UI
+			});
+			hueRow.appendChild(slider);
+			wrap.appendChild(hueRow);
+			return wrap;
+		}
+
+		let expandedColor = null; // "interact" | "done" | null（菜单中当前展开的颜色选择器）
+
 		function renderMenu(menu, btn) {
 			updateToggle(btn);
 			menu.textContent = "";
 			const base = "font-family:system-ui,-apple-system,sans-serif;";
 
-			menu.appendChild(el("div", "🔔 提示音设置", `${base}font-weight:600;font-size:13px;margin-bottom:8px;`));
+			menu.appendChild(el("div", "🔔 提醒设置", base + "font-weight:600;font-size:13px;margin-bottom:8px;"));
 
-			// —— 功能开关 ——
-			const toggleRow = el("div", "", `${base}display:flex;justify-content:space-between;align-items:center;padding:5px 2px;`);
-			toggleRow.appendChild(el("span", "功能开关"));
-			const sw = el("button", isEnabled() ? "已开启" : "已关闭", `${base}border:1px solid rgba(128,128,128,0.4);background:rgba(255,255,255,0.08);color:#e8e8ea;border-radius:6px;padding:2px 10px;cursor:pointer;font-size:12px;`);
-			sw.addEventListener("click", (event) => {
-				event.stopPropagation();
-				const next = !isEnabled();
+			// —— 总开关 ——
+			const masterRow = el("div", "", base + "display:flex;justify-content:space-between;align-items:center;padding:4px 2px;");
+			masterRow.appendChild(el("span", "功能开关"));
+			masterRow.appendChild(switchButton(isEnabled(), (next) => {
 				setEnabled(next);
 				renderMenu(menu, btn);
+				if (next && isSoundEnabled()) {
+					const preset = PRESETS[currentPresetId()];
+					const spec = preset.done;
+					playPreset(spec.tones, spec.gap, preset.wave, preset.volume);
+				}
+			}));
+			menu.appendChild(masterRow);
+
+			menu.appendChild(el("div", "", "border-top:1px solid rgba(128,128,128,0.22);margin:7px 0;"));
+
+			// —— 声音提醒 ——
+			const soundRow = el("div", "", base + "display:flex;justify-content:space-between;align-items:center;padding:4px 2px;");
+			soundRow.appendChild(el("span", "声音提醒"));
+			soundRow.appendChild(switchButton(isSoundEnabled(), (next) => {
+				setSoundEnabled(next);
+				renderMenu(menu, btn);
 				if (next) {
-					const spec = PRESETS[currentPresetId()].done;
-					playPreset(spec.tones, spec.gap); // 打开时试听当前音色的「完成」音
+					const preset = PRESETS[currentPresetId()];
+					const spec = preset.done;
+					playPreset(spec.tones, spec.gap, preset.wave, preset.volume);
 				}
-			});
-			toggleRow.appendChild(sw);
-			menu.appendChild(toggleRow);
+			}));
+			menu.appendChild(soundRow);
+			if (isSoundEnabled()) {
+				menu.appendChild(presetButtons((id) => {
+					setPresetId(id);
+					const preset = PRESETS[id];
+					const spec = preset.interact;
+					playPreset(spec.tones, spec.gap, preset.wave, preset.volume); // 点击音色试听
+					renderMenu(menu, btn);
+				}));
+			}
 
-			menu.appendChild(el("div", "", "border-top:1px solid rgba(128,128,128,0.22);margin:8px 0;"));
+			menu.appendChild(el("div", "", "border-top:1px solid rgba(128,128,128,0.22);margin:7px 0;"));
 
-			// —— 提示音选择 ——
-			menu.appendChild(el("div", "提示音选择", `${base}font-weight:600;font-size:13px;margin-bottom:6px;`));
-			const active = currentPresetId();
-			for (const id of PRESET_IDS) {
-				const preset = PRESETS[id];
-				const selected = id === active;
-				const row = el("div", "", `${base}display:flex;justify-content:space-between;align-items:center;padding:5px 6px;border-radius:6px;cursor:pointer;${selected ? "background:rgba(64,128,255,0.22);" : ""}`);
-				row.addEventListener("mouseenter", () => {
-					row.style.background = "rgba(255,255,255,0.1)";
-				});
-				row.addEventListener("mouseleave", () => {
-					row.style.background = id === currentPresetId() ? "rgba(64,128,255,0.22)" : "";
-				});
-				row.appendChild(el("span", preset.label + (selected ? "  ✓" : "")));
-				const preview = el("button", "▶ 试听", `${base}border:none;background:transparent;color:#7ab8ff;cursor:pointer;font-size:12px;padding:0 2px;`);
-				preview.addEventListener("click", (event) => {
+			// —— 视觉提醒 ——
+			const visualRow = el("div", "", base + "display:flex;justify-content:space-between;align-items:center;padding:4px 2px;");
+			visualRow.appendChild(el("span", "视觉提醒"));
+			visualRow.appendChild(switchButton(isVisualEnabled(), (next) => {
+				setVisualEnabled(next);
+				renderMenu(menu, btn);
+				if (next) playFx("done");
+			}));
+			menu.appendChild(visualRow);
+
+			if (isVisualEnabled()) {
+				// 「需要操作」颜色
+				const iRow = el("div", "", base + "display:flex;align-items:center;gap:6px;padding:3px 2px;cursor:pointer;");
+				const iDot = el("span", "", "width:13px;height:13px;border-radius:50%;flex:none;background:hsl(" + interactHue() + " 85% 60%);");
+				iRow.appendChild(iDot);
+				iRow.appendChild(el("span", "需要操作", base + "flex:1;font-size:12px;"));
+				const iBtn = el("button", expandedColor === "interact" ? "▴" : "▾", base + "border:none;background:transparent;color:#7ab8ff;cursor:pointer;font-size:12px;");
+				iRow.appendChild(iBtn);
+				iRow.addEventListener("click", (event) => {
+					// 必须阻止冒泡：renderMenu 会移除本元素，事件若冒泡到 document
+					// 的「点击外部关闭」监听，contains(已移除元素) 为 false 会误关菜单
 					event.stopPropagation();
-					previewSound(id); // 先试听再决定是否应用
+					expandedColor = expandedColor === "interact" ? null : "interact";
+					renderMenu(menu, btn);
 				});
-				row.addEventListener("click", () => {
-					setPresetId(id);
+				menu.appendChild(iRow);
+				if (expandedColor === "interact") {
+					menu.appendChild(colorPicker(interactHue(),
+						(h) => { // onPick：改色 + 预览，不重建（滑块可连续拖动）
+							setInteractHue(h);
+							playFx("interact");
+						},
+						() => renderMenu(menu, btn) // onCommitted：提交后重建刷新选中态
+					));
+				}
+
+				// 「回答完成」颜色
+				const dRow = el("div", "", base + "display:flex;align-items:center;gap:6px;padding:3px 2px;cursor:pointer;");
+				const dDot = el("span", "", "width:13px;height:13px;border-radius:50%;flex:none;background:hsl(" + doneHue() + " 85% 60%);");
+				dRow.appendChild(dDot);
+				dRow.appendChild(el("span", "回答完成", base + "flex:1;font-size:12px;"));
+				const dBtn = el("button", expandedColor === "done" ? "▴" : "▾", base + "border:none;background:transparent;color:#7ab8ff;cursor:pointer;font-size:12px;");
+				dRow.appendChild(dBtn);
+				dRow.addEventListener("click", (event) => {
+					event.stopPropagation(); // 同上：防止重建后误关菜单
+					expandedColor = expandedColor === "done" ? null : "done";
 					renderMenu(menu, btn);
 				});
-				row.appendChild(preview);
-				menu.appendChild(row);
+				menu.appendChild(dRow);
+				if (expandedColor === "done") {
+					menu.appendChild(colorPicker(doneHue(),
+						(h) => {
+							setDoneHue(h);
+							playFx("done");
+						},
+						() => renderMenu(menu, btn)
+					));
+				}
 			}
 
-			menu.appendChild(el("div", "点击选项选中即生效；▶ 可先试听", `${base}color:rgba(255,255,255,0.45);font-size:11px;margin-top:8px;`));
-		}
+			menu.appendChild(el("div", "", "border-top:1px solid rgba(128,128,128,0.22);margin:7px 0;"));
 
-		/** 试听某预设：连播「需要操作」+「回答完成」两段，让用户听完整效果。 */
-		function previewSound(presetId) {
-			const preset = PRESETS[presetId];
-			if (!preset) return;
-			// 两段连播：interact 播完 0.35s 后再播 done
-			playPreset(preset.interact.tones, preset.interact.gap);
-			const total = preset.interact.tones.reduce((acc, [, dur]) => acc + dur, 0) + preset.interact.gap * (preset.interact.tones.length - 1);
-			setTimeout(() => {
-				playPreset(preset.done.tones, preset.done.gap);
-			}, (total + 0.35) * 1000);
+			// —— 系统通知 ——
+			const notifRow = el("div", "", base + "display:flex;justify-content:space-between;align-items:center;padding:4px 2px;");
+			notifRow.appendChild(el("span", "系统通知"));
+			notifRow.appendChild(switchButton(isNotificationEnabled(), (next) => {
+				setNotificationEnabled(next);
+				if (next) ensureNotificationPermission(); // 打开时若未授权则请求权限
+				renderMenu(menu, btn);
+			}));
+			menu.appendChild(notifRow);
+			if (typeof Notification !== "undefined" && Notification.permission === "denied") {
+				menu.appendChild(el("div", "⚠ 通知权限已在浏览器设置中禁用，请到浏览器站点设置中开启", base + "color:rgba(255,160,120,0.9);font-size:11px;padding:1px 2px 4px;"));
+			} else if (typeof Notification !== "undefined" && Notification.permission === "default" && isNotificationEnabled()) {
+				menu.appendChild(el("div", "ℹ 尚未授权：打开开关或点击上方任意提醒会请求通知权限", base + "color:rgba(255,255,255,0.45);font-size:11px;padding:1px 2px 4px;"));
+			}
+
+			menu.appendChild(el("div", "声音 / 视觉 / 系统通知 各自独立开关；颜色各功能独立", base + "color:rgba(255,255,255,0.45);font-size:11px;margin-top:8px;"));
 		}
 
 		function mountToggle() {
@@ -295,9 +670,9 @@ window.__ModuleLoader__.load({
 				return;
 			}
 
-			const root = el("div", "", "position:fixed;right:18px;bottom:18px;z-index:2147483000;display:flex;flex-direction:column;align-items:flex-end;");
+			const root = el("div", "", "position:fixed;right:18px;bottom:18px;z-index:2147483001;display:flex;flex-direction:column;align-items:flex-end;");
 
-			const menu = el("div", "", "display:none;margin-bottom:8px;min-width:230px;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;");
+			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.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;");
@@ -309,16 +684,16 @@ window.__ModuleLoader__.load({
 				setEnabled(next);
 				updateToggle(btn);
 				renderMenu(menu, btn);
-				if (next) {
-					const spec = PRESETS[currentPresetId()].done;
-					playPreset(spec.tones, spec.gap);
+				if (next && isSoundEnabled()) {
+					const preset = PRESETS[currentPresetId()];
+					const spec = preset.done;
+					playPreset(spec.tones, spec.gap, preset.wave, preset.volume);
 				}
 			});
 			root.appendChild(btn);
 
 			document.body.appendChild(root);
 
-			// hover 显示菜单（延迟 120ms），移出后延迟 300ms 关闭（留出移到菜单的时间）
 			let hideTimer = null;
 			root.addEventListener("mouseenter", () => {
 				clearTimeout(hideTimer);
@@ -329,16 +704,18 @@ window.__ModuleLoader__.load({
 				clearTimeout(hideTimer);
 				hideTimer = setTimeout(() => {
 					menu.style.display = "none";
+					expandedColor = null;
 				}, 300);
 			});
-			// 点击菜单外部区域时关闭菜单
 			document.addEventListener("click", (event) => {
-				if (!root.contains(event.target)) menu.style.display = "none";
+				if (!root.contains(event.target)) {
+					menu.style.display = "none";
+					expandedColor = null;
+				}
 			});
 		}
 
 		// 浏览器自动播放策略：需要用户先与页面交互过，AudioContext 才会出声。
-		// 捕获任意一次用户点击来预热音频上下文。
 		function warmupAudio() {
 			if (typeof document === "undefined") return;
 			const unlock = () => ensureAudio();
@@ -347,17 +724,14 @@ window.__ModuleLoader__.load({
 		}
 
 		// ===================== 插件主体 =====================
-		// 注意：inject 是 cordis「服务名」列表（fiber 会等待这些服务可用才激活），
-		// 不是包名/模块 id。sessions 服务由 @deepseek-ai/dsh-client-runtime 提供
-		// （rootCtx.reflect.provide("sessions", ...)）。
+		// inject 是 cordis「服务名」列表（fiber 等待服务可用才激活），
+		// 不是包名/模块 id。sessions 服务由 @deepseek-ai/dsh-client-runtime 提供。
 		const inject = ["sessions"];
 
 		function apply(ctx) {
-			// 订阅会话列表状态变化（running / pendingInteraction）
 			const list = ctx && ctx.sessions && ctx.sessions.list;
 			if (list && typeof list.subscribe === "function") {
 				ctx.effect(() => {
-					// 先建立基线快照，再订阅后续变化
 					const bootstrap = () => {
 						const snap = list.getSnapshot();
 						prevBySession = new Map();
@@ -375,9 +749,10 @@ window.__ModuleLoader__.load({
 					};
 				}, "dsh-notify-tone: sessions subscription");
 			} else {
-				console.warn("[dsh-notify-tone] ctx.sessions.list 不可用，提示音功能未启用");
+				console.warn("[dsh-notify-tone] ctx.sessions.list 不可用，提醒功能未启用");
 			}
 
+			mountFx();
 			mountToggle();
 			warmupAudio();
 		}
@@ -391,9 +766,23 @@ window.__ModuleLoader__.load({
 			setPresetId,
 			isEnabled,
 			setEnabled,
+			isSoundEnabled,
+			setSoundEnabled,
+			isVisualEnabled,
+			setVisualEnabled,
+			isNotificationEnabled,
+			setNotificationEnabled,
+			notifyUser,
+			ensureNotificationPermission,
+			interactHue,
+			doneHue,
+			setInteractHue,
+			setDoneHue,
 			playPreset,
 			playTone,
 			ensureAudio,
+			playFx,
+			FX_ID,
 			resetThrottle() {
 				lastPlayed.interact = 0;
 				lastPlayed.done = 0;

package/package.json

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