dsh-notify-tone 0.2.2 → 0.2.3

package/lib/client.js

@@ -40,6 +40,10 @@ window.__ModuleLoader__.load({
 		const FX_STYLE_ID = "dsh-notify-tone-fx-style";
 		const KEY_POSITION = "dsh.notify-tone.ui.position"; // 🔔 按钮位置（JSON: {left, top}）
 
+		// 菜单定位器：mountToggle 内注册 positionMenu，renderMenu 重建内容后可刷新位置。
+		// 用间接层是因为 renderMenu 与 positionMenu 不在同一函数作用域。
+		let menuPositioner = null;
+
 		// ===================== 提示音预设 =====================
 		const PRESETS = {
 			classic: {
@@ -661,6 +665,12 @@ window.__ModuleLoader__.load({
 			}
 
 			menu.appendChild(el("div", "声音 / 视觉 / 系统通知 各自独立开关；颜色各功能独立", base + "color:rgba(255,255,255,0.45);font-size:11px;margin-top:8px;"));
+
+			// 内容重建后（如展开颜色面板导致宽度变化）若菜单正在显示，则重新定位，
+			// 确保水平/垂直方向始终适配屏幕边缘
+			if (menu.style.display !== "none" && typeof menuPositioner === "function") {
+				menuPositioner();
+			}
 		}
 
 		function mountToggle() {
@@ -689,14 +699,21 @@ window.__ModuleLoader__.load({
 			let dragState = null;
 			let suppressClick = false;
 
-			// 根据按钮位置决定菜单弹出方向：上方空间不足则向下弹出
+			// 根据按钮位置决定菜单弹出方向：
+			//  - 垂直：上方空间不足且下方更大 → 向下弹出，否则向上弹出
+			//  - 水平：默认右对齐向左展开（right:0）；若左侧空间不足以容纳菜单宽度，
+			//    则切换为左对齐向右展开（left:0），避免菜单被屏幕左边缘裁剪
 			function positionMenu() {
 				if (typeof window === "undefined") return;
+				const vw = window.innerWidth || 0;
 				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 spaceLeft = rect ? rect.left : vw;
+				const spaceRight = rect ? vw - rect.right : 0;
 				const menuMaxH = (vh * 64) / 100; // 与 max-height 对齐
+				const menuW = menu.offsetWidth || 240; // 菜单真实宽度；隐藏时回退到 min-width
 				if (spaceAbove < menuMaxH && spaceBelow > spaceAbove) {
 					// 上方空间不足且下方更大 → 向下弹出
 					menu.style.top = "calc(100% + 8px)";
@@ -706,8 +723,28 @@ window.__ModuleLoader__.load({
 					menu.style.top = "auto";
 					menu.style.bottom = "calc(100% + 8px)";
 				}
+				if (spaceLeft >= menuW) {
+					// 左侧空间充足 → 右对齐向左展开（默认）
+					menu.style.left = "auto";
+					menu.style.right = "0";
+				} else if (spaceRight >= menuW) {
+					// 左侧不足但右侧充足 → 左对齐向右展开，避免被左边缘裁剪
+					menu.style.right = "auto";
+					menu.style.left = "0";
+				} else {
+					// 两侧都不足（极窄窗口）→ 选空间较大的一侧
+					if (spaceRight > spaceLeft) {
+						menu.style.right = "auto";
+						menu.style.left = "0";
+					} else {
+						menu.style.left = "auto";
+						menu.style.right = "0";
+					}
+				}
 			}
 
+			menuPositioner = positionMenu; // 注册到间接层，供 renderMenu 重建内容后刷新位置
+
 			// 恢复上次保存的位置（持久化）
 			function applyStoredPosition() {
 				try {
@@ -800,9 +837,9 @@ window.__ModuleLoader__.load({
 
 			root.addEventListener("mouseenter", () => {
 				clearTimeout(hideTimer);
-				positionMenu(); // 先根据按钮位置决定弹出方向，再显示
 				renderMenu(menu, btn);
 				menu.style.display = "block";
+				positionMenu(); // 先显示再定位：此时 offsetWidth 为菜单真实宽度，水平/垂直方向判断更准确
 			});
 			root.addEventListener("mouseleave", () => {
 				clearTimeout(hideTimer);

package/package.json

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