dsh-notify-yimit 0.1.3 → 0.1.5

package/lib/client.js

@@ -40,7 +40,8 @@ window.__ModuleLoader__.load({
 			'.dn-seg{display:flex;gap:2px;padding:2px;border-radius:10px;background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l1);max-width:520px}',
 			'.dn-seg-btn{flex:1;font:inherit;font-size:13px;color:var(--dsw-alias-label-secondary);border:0;border-radius:8px;padding:6px 10px;cursor:pointer;background:transparent;transition:background .15s ease,color .15s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}',
 			'.dn-seg-btn:hover{color:var(--dsw-alias-label-primary);background:var(--dsw-alias-interactive-bg-hover)}',
-			'.dn-seg-btn[data-on="true"]{background:var(--dsw-alias-bg-base);color:var(--dsw-alias-label-primary);box-shadow:var(--dsw-shadow-lv1)}',
+			'.dn-seg-btn[data-on="true"]{background:var(--dsw-alias-state-business-primary);color:var(--dsw-alias-label-primary-inverted);box-shadow:var(--dsw-shadow-lv1)}',
+			'.dn-seg-btn[data-on="true"]:hover{background:var(--dsw-alias-state-business-primary);color:var(--dsw-alias-label-primary-inverted)}',
 			'.dn-seg-btn:disabled{opacity:.45;cursor:not-allowed}',
 			'.dn-seg-btn:disabled:hover{background:transparent;color:var(--dsw-alias-label-secondary)}',
 			'.dn-collapse{display:grid;grid-template-rows:1fr;opacity:1;transition:grid-template-rows .24s ease,opacity .2s ease}',
@@ -49,14 +50,24 @@ window.__ModuleLoader__.load({
 			'.dn-collapse>.dn-collapse-body>.dn-block{min-width:0}',
 			'.dn-kind-list{display:flex;flex-direction:column;gap:8px}',
 			'.dn-kind-row{display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid var(--dsw-alias-border-l1);border-radius:10px;background:var(--dsw-alias-bg-layer-1)}',
-			'.dn-kind-swatch{flex:none;width:20px;height:20px;border-radius:6px;border:1px solid var(--dsw-alias-border-l2);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}',
-			'.dn-kind-name{flex:1;font-size:13px;font-weight:600;min-width:0}',
+			'.dn-kind-row>.dn-kind-field:first-of-type{margin-left:auto}',
+			'.dn-kind-preview{flex:none;min-width:72px;text-align:center;font-size:12px;font-weight:600;line-height:22px;padding:2px 10px;border-radius:6px;white-space:nowrap;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}',
 			'.dn-kind-field{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dsw-alias-label-tertiary);flex:none}',
 			'.dn-input{font:inherit;font-size:13px;color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-base);border:1px solid var(--dsw-alias-border-l1);border-radius:8px;padding:5px 10px;outline:none;max-width:120px}',
 			'.dn-input:focus{border-color:var(--dsw-alias-state-business-primary)}',
 			'.dn-input[type=color]{padding:2px 4px;width:48px;height:28px;cursor:pointer;max-width:none}',
 			'.dn-input:disabled{opacity:.45;cursor:not-allowed}',
-			'.dn-select{max-width:260px;cursor:pointer}',
+			'.dn-bselect{position:relative;width:280px;max-width:100%;flex:none}',
+			'.dn-bselect-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;font:inherit;font-size:13px;color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-base);border:1px solid var(--dsw-alias-border-l1);border-radius:8px;padding:5px 10px;cursor:pointer;outline:none}',
+			'.dn-bselect-trigger:hover:not(:disabled){border-color:var(--dsw-alias-border-l2)}',
+			'.dn-bselect-trigger.open{border-color:var(--dsw-alias-state-business-primary)}',
+			'.dn-bselect-trigger:disabled{opacity:.45;cursor:not-allowed}',
+			'.dn-bselect-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
+			'.dn-bselect-arrow{flex:none;font-size:10px;color:var(--dsw-alias-label-tertiary)}',
+			'.dn-bselect-pop{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:100;background:var(--dsw-alias-bg-base);border:1px solid var(--dsw-alias-border-l1);border-radius:10px;box-shadow:var(--dsw-shadow-lv3);padding:4px;max-height:240px;overflow:auto}',
+			'.dn-bselect-opt{display:block;width:100%;text-align:left;font:inherit;font-size:13px;color:var(--dsw-alias-label-primary);background:transparent;border:0;border-radius:7px;padding:6px 10px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}',
+			'.dn-bselect-opt:hover{background:var(--dsw-alias-interactive-bg-hover)}',
+			'.dn-bselect-opt.sel{color:var(--dsw-alias-state-business-primary);font-weight:600}',
 			'.dn-color-preview{font-size:12px;color:var(--dsw-alias-label-tertiary);font-family:var(--dsw-font-mono)}',
 			'.dn-btn{font:inherit;font-size:13px;color:var(--dsw-alias-label-primary);background:var(--dsw-alias-button-elevated-fill);border:1px solid var(--dsw-alias-border-l1);border-radius:8px;padding:6px 14px;cursor:pointer}',
 			'.dn-btn:hover{background:var(--dsw-alias-interactive-bg-hover)}',
@@ -120,6 +131,12 @@ window.__ModuleLoader__.load({
 			permissionDefault: '系统通知需要浏览器通知权限',
 			requestPermission: '申请通知权限',
 			triggerNote: '触发场景:任务完成、任务出错、运行中(实时内容)、等待审批、等待回答。通知标题为对话标题;点击通知或跳转按钮可打开对应会话。',
+			toastStyleTitle: '通知窗口样式',
+			toastGapLabel: '通知间距(px)',
+			enterEdit: '进入编辑模式',
+			endEdit: '完成编辑',
+			editHint: '拖动样板窗调整位置;拖拽窗口边缘调整宽度;完成后点击「完成编辑」保存。',
+			resetPosition: '恢复默认位置',
 			saveHint: '所有设置修改后自动保存。',
 			saved: '已保存',
 			saveFailed: '保存失败:{message}',
@@ -160,6 +177,12 @@ window.__ModuleLoader__.load({
 			permissionDefault: 'System notifications need browser notification permission',
 			requestPermission: 'Request permission',
 			triggerNote: 'Triggers: task completed, task failed, running (live activity), awaiting approval, awaiting answer. The title is the conversation title; clicking the notification or the jump button opens the session.',
+			toastStyleTitle: 'Toast window style',
+			toastGapLabel: 'Toast gap (px)',
+			enterEdit: 'Enter edit mode',
+			endEdit: 'Finish editing',
+			editHint: 'Drag the sample window to reposition; drag its edges to resize the width; click "Finish editing" to save.',
+			resetPosition: 'Reset to default position',
 			saveHint: 'All settings changes are auto-saved.',
 			saved: 'Saved',
 			saveFailed: 'Save failed: {message}',
@@ -283,7 +306,8 @@ window.__ModuleLoader__.load({
 					.colors) ? v.colors[key] : undefined
 				return {
 					bg: typeof entry?.bg === 'string' ? entry.bg : fallbackBg,
-					fg: typeof entry?.fg === 'string' ? entry.fg : fallbackFg
+					fg: typeof entry?.fg === 'string' ? entry.fg : fallbackFg,
+					enabled: entry?.enabled !== false
 				}
 			}
 			const topBg = typeof v.bgColor === 'string' ? v.bgColor : '#20272f'
@@ -297,6 +321,15 @@ window.__ModuleLoader__.load({
 				bgColor: topBg,
 				textColor: topFg,
 				locale: v.locale === 'zh' || v.locale === 'en' ? v.locale : 'en',
+				toast: {
+					width: typeof v.toast?.width === 'number' ? v.toast.width : 340,
+					gap: typeof v.toast?.gap === 'number' ? v.toast.gap : 12,
+					position: v.toast !== null && typeof v.toast === 'object' && v.toast.position !== null &&
+						typeof v.toast.position === 'object' && !Array.isArray(v.toast.position) &&
+						typeof v.toast.position.left === 'number' && typeof v.toast.position.top === 'number'
+						? { left: v.toast.position.left, top: v.toast.position.top }
+						: null,
+				},
 				colors: {
 					completed: kindColors('completed', topBg, topFg),
 					error: kindColors('error', topBg, topFg),
@@ -433,6 +466,34 @@ window.__ModuleLoader__.load({
 					typeSymbol: 'dsh-notify-yimit#BrowserList',
 					schema: browsersCodec
 				}
+			}, {
+				id: 'dsh-notify-yimit#notify/startEditMode',
+				service: 'notify',
+				namespace: 'notify',
+				method: 'startEditMode',
+				invocation: {
+					kind: 'direct'
+				},
+				parameters: [],
+				result: {
+					mode: 'strict',
+					typeSymbol: 'dsh-notify-yimit#AckResult',
+					schema: ackCodec
+				}
+			}, {
+				id: 'dsh-notify-yimit#notify/endEditMode',
+				service: 'notify',
+				namespace: 'notify',
+				method: 'endEditMode',
+				invocation: {
+					kind: 'direct'
+				},
+				parameters: [],
+				result: {
+					mode: 'strict',
+					typeSymbol: 'dsh-notify-yimit#AckResult',
+					schema: ackCodec
+				}
 			}]
 		}
 
@@ -510,11 +571,8 @@ window.__ModuleLoader__.load({
 				}
 
 				if (config.mode === 'custom') {
-					if (typeof Notification === 'undefined' || Notification.permission !==
-						'granted') {
-						ack();
-						return
-					}
+					ack();
+					return
 				} else if (config.mode === 'system') {
 					if (typeof Notification === 'undefined' || Notification.permission ===
 						'denied') {
@@ -585,6 +643,81 @@ window.__ModuleLoader__.load({
 				}, entry[1])))
 		}
 
+		/** 跳转浏览器选择器:原生 select 的展开列表无法贴合主题,自绘下拉(触发器 + 弹层)。 */
+		function BrowserSelect(props) {
+			const {
+				value,
+				options,
+				disabled,
+				onChange,
+				t
+			} = props
+			const [open, setOpen] = useState(false)
+			const wrapRef = useRef(null)
+			// 点击外部 / Esc 关闭弹层。
+			useEffect(() => {
+				if (!open) return
+				const onDown = (e) => {
+					if (wrapRef.current !== null && !wrapRef.current.contains(e.target)) setOpen(false)
+				}
+				const onKey = (e) => {
+					if (e.key === 'Escape') setOpen(false)
+				}
+				document.addEventListener('mousedown', onDown)
+				document.addEventListener('keydown', onKey)
+				return () => {
+					document.removeEventListener('mousedown', onDown)
+					document.removeEventListener('keydown', onKey)
+				}
+			}, [open])
+
+			const current = options.find((b) => b.path === value)
+			const pick = (path) => {
+				onChange(path)
+				setOpen(false)
+			}
+			return el('div', {
+					className: 'dn-bselect',
+					ref: wrapRef
+				},
+				el('button', {
+					type: 'button',
+					className: 'dn-bselect-trigger' + (open ? ' open' : ''),
+					disabled: disabled === true,
+					'aria-haspopup': 'listbox',
+					'aria-expanded': String(open),
+					onClick: () => {
+						if (disabled !== true) setOpen(!open)
+					},
+				},
+					el('span', {
+						className: 'dn-bselect-value'
+					}, current !== undefined ? current.name : t('browserDefault')),
+					el('span', {
+						className: 'dn-bselect-arrow'
+					}, open ? '▴' : '▾')),
+				open ? el('div', {
+						className: 'dn-bselect-pop',
+						role: 'listbox'
+					},
+					el('button', {
+						type: 'button',
+						role: 'option',
+						'aria-selected': String(value === ''),
+						className: 'dn-bselect-opt' + (value === '' ? ' sel' : ''),
+						onClick: () => pick(''),
+					}, t('browserDefault')),
+					options.map((b) => el('button', {
+						type: 'button',
+						role: 'option',
+						key: b.id,
+						'aria-selected': String(value === b.path),
+						className: 'dn-bselect-opt' + (value === b.path ? ' sel' : ''),
+						onClick: () => pick(b.path),
+					}, b.name)))
+				: null)
+		}
+
 		const KIND_ORDER = ['completed', 'error', 'running', 'approval', 'question']
 
 		function NotifySection(props) {
@@ -599,6 +732,15 @@ window.__ModuleLoader__.load({
 			const [saving, setSaving] = useState(false)
 			const [permission, setPermission] = useState(typeof Notification !== 'undefined' ? Notification
 				.permission : 'unsupported')
+			// 通知窗口编辑模式(样板窗拖拽/缩放)
+			const [editing, setEditing] = useState(false)
+			// 最新值镜像:卸载清理时读取(避免空依赖闭包拿到陈旧值)。
+			const editingRef = useRef(false)
+			editingRef.current = editing
+			useEffect(() => () => {
+				// 离开通知设置页(组件卸载)时若仍在编辑模式,自动关闭样板窗。
+				if (editingRef.current) void api.endEditMode()
+			}, [])
 
 			const saveTimerRef = useRef(null)
 			const save = useCallback((patch) => {
@@ -650,21 +792,22 @@ window.__ModuleLoader__.load({
 			const controlsDisabled = !config.enabled
 
 			const kindRows = KIND_ORDER.map((kind) => {
-				const entry = config.colors?. [kind] ?? {}
+				// 修正：去掉 `?.` 和 `[kind]` 之间的空格
+				const entry = config.colors?.[kind] ?? {}
 				const bg = entry.bg || config.bgColor || '#20272f'
 				const fg = entry.fg || config.textColor || '#e6edf3'
+				const enabled = entry.enabled !== false
 				return el('div', {
 						key: kind,
 						className: 'dn-kind-row'
 					},
+					// 样式预览:类型文字显示在配置色的纯色块内(内联样式,不受深色模式影响)
 					el('span', {
-						className: 'dn-kind-swatch',
+						className: 'dn-kind-preview',
 						style: {
-							background: bg
+							background: bg,
+							color: fg
 						}
-					}),
-					el('span', {
-						className: 'dn-kind-name'
 					}, kindLabel(kind, t)),
 					el('label', {
 							className: 'dn-kind-field'
@@ -701,7 +844,28 @@ window.__ModuleLoader__.load({
 									}
 								}
 							})
-						}), t('colorFg')))
+						}), t('colorFg')),
+					// 每类型开关:控制该类型通知是否产生(默认全开)
+					el('label', {
+							className: 'dn-kind-field'
+						},
+						el('button', {
+							type: 'button',
+							role: 'switch',
+							'aria-checked': enabled,
+							'aria-label': kindLabel(kind, t),
+							className: 'dn-switch',
+							'data-on': String(enabled),
+							disabled: controlsDisabled,
+							onClick: () => save({
+								colors: {
+									[kind]: {
+										...entry,
+										enabled: !enabled
+									}
+								}
+							})
+						})))
 			})
 
 			const customOpen = config.mode === 'custom'
@@ -764,21 +928,15 @@ window.__ModuleLoader__.load({
 						el('span', {
 							className: 'dn-label'
 						}, t('browserLabel')),
-						el('select', {
-								className: 'dn-input dn-select',
-								value: config.browser || '',
-								disabled: controlsDisabled,
-								onChange: (e) => save({
-									browser: e.target.value
-								})
-							},
-							el('option', {
-								value: ''
-							}, t('browserDefault')),
-							(state?.browsers ?? []).map((b) => el('option', {
-								key: b.id,
-								value: b.path
-							}, b.name)))),
+						el(BrowserSelect, {
+							value: config.browser || '',
+							options: state?.browsers ?? [],
+							disabled: controlsDisabled,
+							onChange: (path) => save({
+								browser: path
+							}),
+							t
+						})),
 					el('p', {
 						className: 'dn-note'
 					}, t('browserNote'))
@@ -868,7 +1026,70 @@ window.__ModuleLoader__.load({
 							}, t('colorsTitle')),
 							el('div', {
 								className: 'dn-kind-list'
-							}, kindRows))
+							}, kindRows),
+							el('div', {
+								className: 'dn-divider'
+							}),
+							el('p', {
+								className: 'dn-title'
+							}, t('toastStyleTitle')),
+							el('div', {
+									className: 'dn-row'
+								},
+								el('span', {
+									className: 'dn-label'
+								}, t('toastGapLabel')),
+								el('input', {
+									type: 'number',
+									min: 0,
+									max: 60,
+									className: 'dn-input',
+									value: config.toast?.gap ?? 12,
+									disabled: controlsDisabled,
+									onChange: (e) => {
+										const g = Math.max(0, Math.min(60, Math.floor(Number(e
+											.target.value) || 0)))
+										save({
+											toast: {
+												...(config.toast ?? {}),
+												gap: g
+											}
+										})
+									}
+								})),
+							el('div', {
+									className: 'dn-row'
+								},
+								el('button', {
+									className: 'dn-btn primary',
+									disabled: controlsDisabled,
+									onClick: () => {
+										if (editing) {
+											void api.endEditMode()
+											setEditing(false)
+										} else {
+											setEditing(true)
+											void api.startEditMode()
+										}
+									}
+								}, editing ? t('endEdit') : t('enterEdit')),
+								el('button', {
+									className: 'dn-btn',
+									disabled: controlsDisabled || !config.toast?.position,
+									onClick: () => {
+										save({
+											toast: {
+												...(config.toast ?? {}),
+												position: null
+											}
+										})
+										// 编辑模式下:重开样板窗,让其在默认位置(右下)刷新显示。
+										if (editing) void api.startEditMode()
+									}
+								}, t('resetPosition'))),
+							el('p', {
+								className: 'dn-note'
+							}, t('editHint')))
 					)),
 				el('div', {
 					className: 'dn-divider'
@@ -965,6 +1186,18 @@ window.__ModuleLoader__.load({
 					} catch {
 						/* 静默 */ }
 				},
+				startEditMode: async () => {
+					try {
+						await notify.startEditMode()
+					} catch {
+						/* 静默 */ }
+				},
+				endEditMode: async () => {
+					try {
+						await notify.endEditMode()
+					} catch {
+						/* 静默 */ }
+				},
 			}
 
 			// ===== 现在设置 __localeService 并使用 api =====
@@ -1125,4 +1358,4 @@ window.__ModuleLoader__.load({
 		exports.inject = inject
 		return module.exports
 	},
-})
+})