// ==UserScript==
// @name 征纳互动人数和在线监控v2
// @namespace https://scriptcat.org/
// @description 实时监控征纳互动等待人数和在线状态，支持语音播报、自定义常用语
// @version 26.7.29-v11
// @author runos
// @match https://znhd.hunan.chinatax.gov.cn:8443/*
// @match https://example.com/*
// @icon https://znhd.hunan.chinatax.gov.cn:8443/favicon.ico
// @grant GM_addStyle
// @grant unsafeWindow
// @grant GM_xmlhttpRequest
// @grant GM_setClipboard
// @grant GM_notification
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_getResourceText
// @connect *
// @connect znhd-service.zeabur.app
// @homepageURL https://scriptcat.org/zh-CN/script-show-page/3650
// @require https://scriptcat.org/lib/1167/1.0.0/%E8%84%9A%E6%9C%AC%E7%8C%ABUI%E5%BA%93.js?sha384-jXdR3hCwnDJf53Ue6XHAi6tApeudgS/wXnMYBD/ZJcgge8Xnzu/s7bkEf2tPi2KS
// @require https://cdn.jsdelivr.net/npm/@fingerprintjs/fingerprintjs@5/dist/fp.min.js
// @require https://cdn.jsdelivr.net/npm/js-yaml@4.1.0/dist/js-yaml.min.js
// @require https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js
// @require https://cdn.jsdelivr.net/npm/viewerjs/dist/viewer.min.js
// @resource VIEWER_CSS https://cdn.jsdelivr.net/npm/viewerjs/dist/viewer.min.css
// ==/UserScript==
(function () {
'use strict';
// ==========配置==========
// 配置对象，集中管理可配置项
const CONFIG = {
CHECK_INTERVAL: 3000,
MAX_LOG_ENTRIES: 20,
// 提示音地址（GitHub 网页链接，运行时由 resolveGithubUrl() 按 useCdn 决定是否转 CDN）
didaUrl: 'https://github.com/Run-os/znhd-service/blob/refs/heads/main/public/dida.mp3',
// 语音播报超时保护（毫秒），防止 onend/onerror 不触发导致队列卡死
SPEECH_TIMEOUT: 15000,
// 语音队列最大长度，超过时丢弃最早（最旧）的消息，防止内存堆积
MAX_SPEECH_QUEUE: 10,
// 语音队列消息有效期（毫秒），超过该时长的陈旧消息在入队/播放前被剔除，避免播报过时内容
SPEECH_QUEUE_TTL: 30000,
};
// ==========日志管理==========
// 全局日志状态管理
let setLogEntriesCallback = null;
// 存储上一次的日志文本（用于重复内容检测）
let lastLogMessage = null;
// 添加日志条目函数
/**
* 添加一条日志条目，输出到设置面板的日志窗口（通过回调写入 React 状态）。
* 内置重复内容过滤：与上一条日志文本完全相同则忽略，避免刷屏。
* @param {string} message - 日志正文
* @param {('info'|'warning'|'success'|'error')} [type='info'] - 日志类型，决定着色
* @param {boolean} [logenabled=false] - 是否同时输出到浏览器控制台（console.log）
* @returns {void}
*/
function addLog(message, type = 'info', logenabled = false) {
const timestamp = new Date().toTimeString().slice(0, 8);
// 检查是否为重复内容
if (lastLogMessage && message === lastLogMessage) {
// 如果内容相同，不输出本次内容
console.log('[监控] 重复日志，已忽略:', message);
return;
}
// 更新上一次的日志文本
lastLogMessage = message;
const logItem = { timestamp, message, type };
// 更新React状态
if (setLogEntriesCallback) {
setLogEntriesCallback(prevEntries => {
const newEntries = [logItem, ...prevEntries];
if (newEntries.length > CONFIG.MAX_LOG_ENTRIES) {
newEntries.pop();
}
return newEntries;
});
}
if (logenabled) {
console.log(`[监控] ${timestamp} ${message}`);
}
}
// ==========存储管理==========
// 存储键名
const STORAGE_KEY = 'scriptCat_Allvalue';
// 面板位置单独存储（与设置数据解耦，避免拖拽频繁写入设置）
const PANEL_POINT_KEY = 'scriptCat_PanelPoint';
// 常用语缓存（2 小时内且 URL 未变则跳过网络请求，直接复用本地数据）
const PHRASES_CACHE_KEY = 'scriptCat_PhrasesCache';
const PHRASES_CACHE_TTL = 2 * 60 * 60 * 1000; // 缓存有效期：2 小时（毫秒）
const DEFAULTS = {
voiceEnabled: true,
// 监控时间段（单位：小时，可含小数，如 13.5 表示 13:30）
workingHours: {
morningStart: 9,
morningEnd: 12,
afternoonStart: 13.5,
afternoonEnd: 18
},
// 是否使用 CDN 加速（jsDelivr）加载项目内的 GitHub 资源（常用语 YAML、提示音 mp3 等）。
// true=经 jsDelivr 加速；false=直接走 GitHub 原始链接（raw.githubusercontent.com）。
useCdn: true,
// 常用语数据源（可配置；留空或非法时回退此默认地址）。
// 注意：此处存「GitHub 网页链接」，运行时由 resolveGithubUrl() 按 useCdn 决定是否转 CDN。
commonPhrasesUrl: 'https://github.com/Run-os/znhd-service/blob/refs/heads/main/public/commonPhrases.yaml',
// 手机图片→电脑剪贴板 中继服务器地址（需为公网可访问的 http(s):// 地址，末尾不带 /）
relayServer: 'https://znhd.122050.xyz'
};
// 读取面板保存的位置（无记录返回 null，由调用方兜底默认坐标）
/**
* 从 localStorage 读取上次保存的面板位置。
* @returns {({x:number,y:number}|null)} 命中且坐标合法时返回 {x,y}，否则返回 null（由调用方兜底默认坐标）
*/
function loadPanelPoint() {
try {
const saved = localStorage.getItem(PANEL_POINT_KEY);
if (saved) {
const p = JSON.parse(saved);
if (typeof p.x === 'number' && typeof p.y === 'number') {
return p;
}
}
} catch (error) {
addLog('读取面板位置失败: ' + error.message, 'error', true);
}
return null;
}
// 保存面板位置（带防抖，避免拖拽过程中高频写 localStorage）
let _savePointTimer = null;
/**
* 保存面板位置到 localStorage（带 requestAnimationFrame 防抖，避免拖拽中高频写入）。
* @param {{x:number,y:number}} point - 面板视口坐标
* @returns {void}
*/
function savePanelPoint(point) {
if (!point || typeof point.x !== 'number' || typeof point.y !== 'number') return;
if (_savePointTimer) return; // 已计划在下一帧保存，跳过重复
_savePointTimer = requestAnimationFrame(() => {
_savePointTimer = null;
try {
localStorage.setItem(PANEL_POINT_KEY, JSON.stringify({
x: Math.round(point.x),
y: Math.round(point.y)
}));
} catch (error) {
addLog('保存面板位置失败: ' + error.message, 'error', true);
}
});
}
// 读取常用语本地缓存（2 小时有效期内且 URL 一致则命中）
/**
* 从 localStorage 读取常用语本地缓存（含加载时间戳、数据源 URL 与数据本体）。
* @returns {({time:number,url:string,data:object}|null)} 命中且结构合法时返回缓存对象，否则返回 null
*/
function loadPhrasesCache() {
try {
const saved = localStorage.getItem(PHRASES_CACHE_KEY);
if (saved) {
const parsed = JSON.parse(saved);
if (parsed && typeof parsed.time === 'number' && typeof parsed.url === 'string' && parsed.data) {
return parsed;
}
}
} catch (error) {
addLog('读取常用语缓存失败: ' + error.message, 'error', true);
}
return null;
}
// 保存常用语本地缓存（记录加载时间戳、数据源 URL 与数据本体）
/**
* 将常用语数据连同加载时间戳与数据源 URL 写入 localStorage 缓存。
* @param {string} url - 数据源地址（用于后续判断缓存是否仍有效）
* @param {object} data - 解析后的常用语数据（键值对）
* @returns {void}
*/
function savePhrasesCache(url, data) {
try {
localStorage.setItem(PHRASES_CACHE_KEY, JSON.stringify({
time: Date.now(),
url: url,
data: data
}));
} catch (error) {
addLog('保存常用语缓存失败: ' + error.message, 'error', true);
}
}
// 从localStorage加载Allvalue数据
/**
* 从 localStorage 加载全部用户配置，并与 DEFAULTS 合并（已存储值覆盖默认值）。
* 解析失败时回退到 DEFAULTS，保证调用方始终拿到完整配置对象。
* @returns {object} 合并后的配置对象（含 voiceEnabled / workingHours / commonPhrasesUrl 等）
*/
function loadAllvalue() {
try {
const saved = localStorage.getItem(STORAGE_KEY);
if (saved) {
const parsed = JSON.parse(saved);
return { ...DEFAULTS, ...parsed };
}
} catch (error) {
addLog('加载存储数据失败: ' + error.message, 'error', true);
}
// 返回默认值
return { ...DEFAULTS };
}
// 保存Allvalue数据到localStorage
/**
* 将全部用户配置写入 localStorage，并记录成功/失败日志。
* @param {object} data - 待保存的配置对象
* @returns {void}
*/
function saveAllvalue(data) {
try {
localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
addLog('数据已保存到localStorage', 'success', true);
} catch (error) {
addLog('保存数据失败: ' + error.message, 'error', true);
CAT_UI.Message.error('保存设置失败: ' + error.message);
}
}
// ==========状态缓存==========
// 一次性读取初始配置，避免重复解析 localStorage
const _initAllvalue = loadAllvalue();
// 缓存语音启用状态，避免每次播报都读取 localStorage
let cachedVoiceEnabled = _initAllvalue.voiceEnabled;
// 缓存监控时间段，避免每次轮询都读取 localStorage
let cachedWorkingHours = _initAllvalue.workingHours;
// 缓存常用语数据源地址，避免每次请求都读取 localStorage
let cachedCommonPhrasesUrl = _initAllvalue.commonPhrasesUrl;
// 缓存「是否使用 CDN 加速」开关，供 resolveGithubUrl() 在调用时读取（随设置实时更新）
let cachedUseCdn = !!_initAllvalue.useCdn;
// ==========工具函数==========
/**
* 将 GitHub 文件链接按需转换为 jsDelivr CDN 链接（或原始 GitHub 链接）。
*
* 转换规则：
* - 开启 CDN（useCdn=true）：输出 `https://cdn.jsdelivr.net/gh/用户名/仓库名@分支/文件路径`
* （分支可含斜杠，如 `refs/heads/main`，通过字符串变换直接把 `/blob/` 或仓库后的 `/` 替换为 `@`，
* 无需拆分分支/路径，故天然支持多段分支）。
* - 关闭 CDN（useCdn=false）：输出可直接访问的 GitHub 原始链接 `https://raw.githubusercontent.com/...`。
* - 输入非 GitHub 链接（如已是 jsDelivr / npm CDN / 其他域名）：原样返回，不做转换。
*
* 支持的输入形式：
* 1. `https://github.com/用户名/仓库名/blob/分支/文件路径`
* 2. `https://raw.githubusercontent.com/用户名/仓库名/分支/文件路径`
*
* @param {string} githubUrl - GitHub 文件链接（函数唯一输入变量）
* @returns {string} 解析后的资源链接（CDN 或原始 GitHub）
*/
function resolveGithubUrl(githubUrl) {
const url = (githubUrl || '').trim();
if (!url) return url;
const useCdn = cachedUseCdn; // 读取模块级缓存（设置变更时由 updateAllvalue 同步）
// 形式一：github.com 网页链接 https://github.com/用户/仓库/blob/分支/路径
// （分支可含斜杠，如 refs/heads/main；用单次捕获 $3 兜住「分支/路径」整段，@ 插在仓库后）
const ghBlob = /^https?:\/\/github\.com\/([^/]+)\/([^/]+)\/blob\/(.+)$/i;
if (ghBlob.test(url)) {
if (useCdn) {
return url.replace(ghBlob, 'https://cdn.jsdelivr.net/gh/$1/$2@$3');
}
// 关闭 CDN：转为可直接访问的原始链接
return url.replace(ghBlob, 'https://raw.githubusercontent.com/$1/$2/$3');
}
// 形式二：raw.githubusercontent.com 原始链接 https://raw.githubusercontent.com/用户/仓库/分支/路径
const raw = /^https?:\/\/raw\.githubusercontent\.com\/([^/]+)\/([^/]+)\/(.+)$/i;
if (raw.test(url)) {
if (useCdn) {
return url.replace(raw, 'https://cdn.jsdelivr.net/gh/$1/$2@$3');
}
return url; // 已是原始链接，原样返回
}
// 非 GitHub 链接（如已是 jsDelivr / npm CDN / 其他域名）：原样返回，不做转换
return url;
}
// HTML 转义函数（复用单个 div 元素，避免重复创建）
const _escapeHelper = document.createElement('div');
/**
* 对文本做 HTML 转义，防止常用语内容中的特殊字符破坏页面结构。复用单个隐藏 div 元素，避免重复创建。
* @param {string} text - 待转义文本
* @returns {string} 转义后的 HTML 安全字符串
*/
function escapeHtml(text) {
_escapeHelper.textContent = text;
return _escapeHelper.innerHTML;
}
// 十进制小时(如 13.5) 与 "HH:mm" 字符串互转，供时间选择器使用
/**
* 将十进制小时（如 13.5）转换为 "HH:mm" 字符串，供时间选择器显示。
* 非法输入或越界值会被收敛到 [00:00, 24:00]。
* @param {number} h - 十进制小时
* @returns {string} "HH:mm" 格式字符串
*/
function hoursToHHmm(h) {
if (typeof h !== 'number' || isNaN(h)) return '00:00';
let total = Math.round(h * 60);
if (total < 0) total = 0;
if (total > 24 * 60) total = 24 * 60;
const H = Math.floor(total / 60) % 24;
const M = total % 60;
return String(H).padStart(2, '0') + ':' + String(M).padStart(2, '0');
}
/**
* 将 "HH:mm" 字符串解析为十进制小时（如 "13:30" -> 13.5），供时间选择器回写。
* 格式非法或数值越界时返回 null。
* @param {string} str - "HH:mm" 格式字符串
* @returns {(number|null)} 成功返回十进制小时，失败返回 null
*/
function hhmmToHours(str) {
if (typeof str !== 'string') return null;
const m = /^(\d{1,2}):(\d{2})$/.exec(str.trim());
if (!m) return null;
const H = parseInt(m[1], 10);
const M = parseInt(m[2], 10);
if (H < 0 || H > 23 || M < 0 || M > 59) return null;
return H + M / 60;
}
// ==========UI部分==========
// 日志面板组件
/**
* 日志面板组件：按类型着色渲染日志条目列表。
* @param {object} props - 组件属性
* @param {Array<{timestamp:string,message:string,type:string}>} props.logEntries - 日志条目数组
* @returns {object} CAT_UI React 元素
*/
function LogPanel({ logEntries }) {
// 根据日志类型定义颜色
const colorMap = {
info: "#1890ff", // 蓝色
warning: "#faad14", // 橙黄色
success: "#52c41a", // 绿色
error: "#ff4d4f" // 红色
};
return CAT_UI.createElement(
"div",
{
style: {
whiteSpace: "pre-wrap",
wordBreak: "break-word",
maxHeight: "500px",
overflowY: "auto",
backgroundColor: "#f5f5f5",
padding: "10px",
borderRadius: "4px",
fontFamily: "monospace",
fontSize: "12px"
}
},
logEntries.map((entry, index) => {
const color = colorMap[entry.type] || "#333333";
return CAT_UI.createElement(
"div",
{
key: index,
style: {
color: color,
marginBottom: "4px",
borderLeft: `3px solid ${color}`,
paddingLeft: "8px",
fontWeight: "bold"
}
},
`${entry.timestamp} - ${entry.message}`
);
})
);
}
// 设置抽屉组件
/**
* 设置抽屉组件：提供监控时间段配置、常用语数据源地址配置、脚本链接与日志查看。
* @param {object} props - 组件属性
* @param {boolean} props.visible - 抽屉是否可见
* @param {Function} props.setVisible - 设置可见性的回调
* @param {Array} props.logEntries - 日志条目
* @param {object} props.workingHours - 当前监控时间段
* @param {Function} props.onChangeWorkingHours - 时间段变更回调（入参为完整 workingHours 对象）
* @param {string} props.commonPhrasesUrl - 当前常用语数据源地址
* @param {Function} props.onChangeCommonPhrasesUrl - 数据源地址变更回调（入参为 URL 字符串）
* @param {boolean} props.useCdn - 是否使用 CDN 加速（jsDelivr）加载项目内 GitHub 资源
* @param {Function} props.onChangeUseCdn - CDN 开关变更回调（入参为布尔值）
* @returns {object} CAT_UI React 元素
*/
function SettingsDrawer({ visible, setVisible, logEntries, workingHours, onChangeWorkingHours, commonPhrasesUrl, onChangeCommonPhrasesUrl, relayServer, onChangeRelayServer, useCdn, onChangeUseCdn }) {
// 当前监控时间段（兜底默认值，避免未配置时报错）
const wh = workingHours || { morningStart: 9, morningEnd: 12, afternoonStart: 13.5, afternoonEnd: 18 };
// 更新单个时间段字段（入参为十进制小时）
const updateWh = (field, dec) => {
if (typeof dec !== 'number' || isNaN(dec)) return;
onChangeWorkingHours({ ...wh, [field]: dec });
};
// 时间选择器 onChange 兼容：CAT_UI 未导出 TimePicker，此处用原生 ，
// 其 onChange 回传原生事件（val.target.value 为 "HH:mm"）；同时兼容 arco 的 (val, str) 形式
const onTimeChange = (field) => (val, str) => {
let s;
if (val && val.target && typeof val.target.value === 'string') {
s = val.target.value; // 原生
} else if (typeof str === 'string') {
s = str; // arco (dayjsValue, timeString)
} else if (val && typeof val.format === 'function') {
s = val.format('HH:mm');
} else if (typeof val === 'string') {
s = val;
} else {
s = '';
}
const dec = hhmmToHours(s);
if (dec !== null) updateWh(field, dec);
};
// 常用语数据源地址变更处理：留空恢复默认；需以 http(s):// 开头
const DEFAULT_PHRASES_URL = DEFAULTS.commonPhrasesUrl;
const onUrlChange = (val) => {
let url = (typeof val === 'string') ? val : (val && val.target ? val.target.value : '');
url = (url || '').trim();
if (!url) {
onChangeCommonPhrasesUrl(DEFAULT_PHRASES_URL);
return;
}
if (!/^https?:\/\//i.test(url)) {
CAT_UI.Message.warning('数据源地址需以 http(s):// 开头');
return;
}
onChangeCommonPhrasesUrl(url);
};
return CAT_UI.Drawer(
CAT_UI.createElement("div", { style: { textAlign: "left" } }, [
CAT_UI.Space(
[
CAT_UI.Button("[脚本主页]", {
type: "link",
onClick: () => {
window.open('https://scriptcat.org/zh-CN/script-show-page/3650', '_blank');
},
style: {
padding: "0 8px",
color: "#1890ff", fontWeight: "bold"
}
}),
CAT_UI.Button("[更新脚本]", {
type: "link",
onClick: () => {
window.open(GM_info.scriptUpdateURL || GM_info.script.updateURL, '_blank');
},
style: {
padding: "0 8px",
color: "#1890ff", fontWeight: "bold"
}
}),
],
{ direction: "horizontal", size: "small" }
),
CAT_UI.Divider("其他设置"),
// CDN 加速开关：控制项目内 GitHub 资源（常用语 YAML、提示音）是否经 jsDelivr 加速
// 注意：① CAT_UI.Switch 运行时为 undefined；② 裸 createElement('input') 不在 CAT_UI 的
// React 渲染器白名单内，会触发 React error #137（与 img 同类）。
// 改用白名单内的 div 模拟勾选框（受控：样式随 useCdn 变化，点击触发 onChangeUseCdn 取反）。
CAT_UI.Space(
[
CAT_UI.Text("使用 CDN 加速（jsDelivr）加载资源", {
style: { display: "block", fontWeight: "bold" }
}),
CAT_UI.createElement('div', {
onClick: () => { if (typeof onChangeUseCdn === 'function') onChangeUseCdn(!useCdn); },
style: {
width: '18px', height: '18px', cursor: 'pointer', marginLeft: '8px',
boxSizing: 'border-box', userSelect: 'none',
border: '1px solid ' + (useCdn ? '#1890ff' : '#d9d9d9'),
borderRadius: '3px', background: useCdn ? '#1890ff' : '#fff',
display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
color: '#fff', fontSize: '12px', lineHeight: '1'
}
}, useCdn ? '✓' : ''),
],
{ direction: "horizontal", size: "small", style: { marginBottom: "8px" } }
),
// 监控时间段配置（使用时间选择器）
CAT_UI.Text("监控时间段（点击选择时间）", {
style: { display: "block", marginBottom: "8px", fontWeight: "bold" }
}),
CAT_UI.Space(
[
CAT_UI.Text("上午"),
CAT_UI.Input({ type: "time", value: hoursToHHmm(wh.morningStart), onChange: onTimeChange('morningStart'), style: { width: "110px" } }),
CAT_UI.Text("至"),
CAT_UI.Input({ type: "time", value: hoursToHHmm(wh.morningEnd), onChange: onTimeChange('morningEnd'), style: { width: "110px" } }),
],
{ direction: "horizontal", size: "small", style: { marginBottom: "8px", flexWrap: "wrap" } }
),
CAT_UI.Space(
[
CAT_UI.Text("下午"),
CAT_UI.Input({ type: "time", value: hoursToHHmm(wh.afternoonStart), onChange: onTimeChange('afternoonStart'), style: { width: "110px" } }),
CAT_UI.Text("至"),
CAT_UI.Input({ type: "time", value: hoursToHHmm(wh.afternoonEnd), onChange: onTimeChange('afternoonEnd'), style: { width: "110px" } }),
],
{ direction: "horizontal", size: "small", style: { marginBottom: "8px", flexWrap: "wrap" } }
),
CAT_UI.createElement(
"p",
{ style: { margin: "0 0 8px", color: "#999", fontSize: "12px", lineHeight: "1.5" } },
"提示：将「下午开始」设为与「上午结束」相同（如都设为 12:00），即可午休时段也监控。"
),
CAT_UI.Text("常用语数据地址（可自定义远程 YAML）", {
style: { display: "block", marginBottom: "8px", fontWeight: "bold" }
}),
CAT_UI.Input({
placeholder: "https://.../commonPhrases.yaml",
value: commonPhrasesUrl || DEFAULTS.commonPhrasesUrl,
onChange: onUrlChange,
allowClear: true,
style: { marginBottom: "8px", width: "100%" }
}),
CAT_UI.createElement(
"p",
{ style: { margin: "0 0 8px", color: "#999", fontSize: "12px", lineHeight: "1.5" } },
"修改后请在「常用语」面板点「重新加载常用语」生效；留空则恢复默认地址。"
),
CAT_UI.Text("中继服务器地址", {
style: { display: "block", marginBottom: "8px", fontWeight: "bold" }
}),
CAT_UI.Input({
placeholder: "https://你的服务器:端口",
value: relayServer || '',
onChange: (val) => {
let url = (typeof val === 'string') ? val : (val && val.target ? val.target.value : '');
url = (url || '').trim().replace(/\/+$/, ''); // 去掉末尾多余的 /（如用户粘贴 http://x:5689/ ）
if (url && !/^https?:\/\//i.test(url)) {
CAT_UI.Message.warning('服务器地址需以 http(s):// 开头');
return;
}
onChangeRelayServer(url);
},
allowClear: true,
style: { marginBottom: "8px", width: "100%" }
}),
CAT_UI.createElement(
"p",
{ style: { margin: "0 0 8px", color: "#999", fontSize: "12px", lineHeight: "1.5" } },
"用于「设备互联到电脑」：手机上传的图片经此服务器转发到本机剪贴板。需自行部署配套 relay-server（见项目说明）。"
),
CAT_UI.Divider("日志内容"),
CAT_UI.createElement(LogPanel, { logEntries }),
]),
{
title: "设置菜单",
visible,
width: 400,
focusLock: true,
autoFocus: false,
zIndex: 10000,
onOk: () => { setVisible(false); },
onCancel: () => { setVisible(false); },
}
);
}
// 常用语抽屉组件
/**
* 常用语抽屉组件：展示数据源、重新加载按钮、搜索框与常用语按钮列表。
* 点击常用语会复制文本并追加到 TinyMCE 编辑器。
* @param {object} props - 组件属性
* @param {boolean} props.visible - 抽屉是否可见
* @param {Function} props.setVisible - 设置可见性的回调
* @param {object} props.phrasesData - 常用语数据（键值对）
* @param {Function} props.setPhrasesData - 数据状态设置回调
* @param {boolean} props.phrasesLoading - 是否加载中
* @param {Function} props.setPhrasesLoading - 加载状态设置回调
* @param {string} props.searchKeyword - 搜索关键字
* @param {Function} props.setSearchKeyword - 搜索关键字设置回调
* @param {Function} props.loadPhrasesData - 加载常用语函数（force 参数控制是否强制刷新）
* @param {string} props.commonPhrasesUrl - 当前数据源地址
* @returns {object} CAT_UI React 元素
*/
function CommonPhrasesDrawer({
visible,
setVisible,
phrasesData,
setPhrasesData,
phrasesLoading,
setPhrasesLoading,
searchKeyword,
setSearchKeyword,
loadPhrasesData,
commonPhrasesUrl
}) {
return CAT_UI.Drawer(
CAT_UI.createElement("div", { style: { textAlign: "left" } }, [
// 显示当前数据源
CAT_UI.createElement(
"div",
{
style: {
marginBottom: "16px",
color: "#666",
fontSize: "12px",
wordBreak: "break-all"
}
},
`数据源: ${decodeURIComponent(resolveGithubUrl(commonPhrasesUrl || DEFAULTS.commonPhrasesUrl))}`
),
// 重新加载按钮
CAT_UI.Button("重新加载常用语", {
type: "primary",
loading: phrasesLoading,
onClick: () => loadPhrasesData(true),
style: { marginBottom: "16px", width: "100%" }
}),
// 搜索框
CAT_UI.Input({
placeholder: "搜索常用语(按键名称或内容)",
value: searchKeyword,
onChange: setSearchKeyword,
allowClear: true,
style: { marginBottom: "16px", width: "100%" }
}),
// 动态生成常用语按钮
phrasesLoading ?
CAT_UI.createElement("div", { style: { textAlign: "center", padding: "20px" } }, "加载中...") :
(Object.keys(phrasesData).length === 0 ?
CAT_UI.createElement("div", { style: { textAlign: "center", padding: "20px", color: "#999" } }, "暂无常用语数据，请点击上方按钮加载") :
(() => {
// 根据搜索关键字过滤常用语
const keyword = searchKeyword.trim().toLowerCase();
const filteredEntries = keyword ?
Object.entries(phrasesData).filter(([key, value]) =>
String(key).toLowerCase().includes(keyword) ||
String(value).toLowerCase().includes(keyword)
) :
Object.entries(phrasesData);
return filteredEntries.length === 0 ?
CAT_UI.createElement("div", { style: { textAlign: "center", padding: "20px", color: "#999" } }, "没有匹配的常用语") :
CAT_UI.Space(
filteredEntries.map(([key, value]) =>
CAT_UI.Button(key, {
type: "default",
onClick() {
safeCopyText(value);
setVisible(false);
appendToTinyMCE(value);
addLog(`添加文本: ${value}`, 'success');
CAT_UI.Message.success("添加文本: " + value);
},
style: { marginBottom: "8px", width: "100%" }
})
),
{ direction: "vertical", style: { width: "100%" } }
);
})()
),
CAT_UI.Divider(""),
]),
{
title: "常用语",
visible,
width: 400,
focusLock: true,
autoFocus: false,
zIndex: 10001,
onOk: () => { setVisible(false); },
onCancel: () => { setVisible(false); },
}
);
}
// 主抽屉/模态框组件
/**
* 主面板组件（DM = Dashboard/Main）：组装语音开关、设置与常用语入口及两个抽屉，
* 管理面板内全部状态（配置、日志、常用语数据等）。
* @returns {object} CAT_UI React 元素
*/
function DM() {
// 使用加载的数据初始化Allvalue
const [Allvalue, setAllvalue] = CAT_UI.useState(loadAllvalue());
// 包装setAllvalue函数，实现自动保存
const updateAllvalue = (newValue) => {
setAllvalue(newValue);
// 自动保存到localStorage
saveAllvalue(newValue);
// 同步更新语音状态缓存
cachedVoiceEnabled = newValue.voiceEnabled;
// 同步更新监控时间段缓存
cachedWorkingHours = newValue.workingHours;
// 同步更新常用语数据源缓存
cachedCommonPhrasesUrl = newValue.commonPhrasesUrl;
// 同步更新 CDN 加速开关缓存
cachedUseCdn = !!newValue.useCdn;
};
const patchAllvalue = (kv) => updateAllvalue({ ...Allvalue, ...kv });
// 解构状态变量，方便后续使用
const { voiceEnabled } = Allvalue;
const voiceEnabledText = voiceEnabled ? "🔊 语音" : "🔇 静音";
// 设置抽屉显示状态管理
const [visible, setVisible] = CAT_UI.useState(false);
// 常用语抽屉显示状态管理
const [commonPhrasesVisible, setCommonPhrasesVisible] = CAT_UI.useState(false);
// 设备互联抽屉显示状态
const [phoneVisible, setPhoneVisible] = CAT_UI.useState(false);
// 设备互联自动接收的停止函数（用 ref 避免重复启动）
const receiveStopRef = CAT_UI.useRef(null);
// 日志条目状态管理
const [logEntries, setLogEntries] = CAT_UI.useState([]);
// 常用语数据状态管理
const [phrasesData, setPhrasesData] = CAT_UI.useState({});
// 常用语加载状态
const [phrasesLoading, setPhrasesLoading] = CAT_UI.useState(false);
// 常用语搜索关键字状态管理
const [searchKeyword, setSearchKeyword] = CAT_UI.useState("");
// 设置日志回调函数
CAT_UI.useEffect(() => {
setLogEntriesCallback = setLogEntries;
return () => {
setLogEntriesCallback = null;
};
}, []);
// 脚本启动日志：首次挂载时输出一次到设置面板日志窗口
CAT_UI.useEffect(() => {
addLog('脚本已启动，版本 v' + (GM_info.script.version || '?'), 'success');
const wh = Allvalue.workingHours || cachedWorkingHours;
if (wh) {
addLog('监控时间段：上午 ' + hoursToHHmm(wh.morningStart) + '-' + hoursToHHmm(wh.morningEnd) +
'，下午 ' + hoursToHHmm(wh.afternoonStart) + '-' + hoursToHHmm(wh.afternoonEnd), 'info');
}
addLog('语音播报：' + (cachedVoiceEnabled ? '已开启' : '已静音'), 'info');
const savedPoint = loadPanelPoint();
addLog(savedPoint ? ('面板位置：已恢复上次位置 (' + Math.round(savedPoint.x) + ', ' + Math.round(savedPoint.y) + ')')
: '面板位置：使用默认位置', 'info');
}, []);
// 加载常用语数据的函数
// force=true 时强制刷新（忽略缓存），如点击「重新加载」按钮；否则命中有效缓存则跳过网络请求
const loadPhrasesData = (force) => {
// 非强制刷新：命中 2 小时内的有效缓存（URL 一致）则直接复用本地数据，不发请求
if (!force) {
const cache = loadPhrasesCache();
if (cache && cache.url === cachedCommonPhrasesUrl &&
(Date.now() - cache.time) < PHRASES_CACHE_TTL) {
setPhrasesData(cache.data);
const mins = Math.round((Date.now() - cache.time) / 60000);
addLog('常用语使用本地缓存（' + mins + ' 分钟前加载），已跳过网络请求', 'info');
CAT_UI.Message.success('常用语已加载（本地缓存）');
return;
}
}
setPhrasesLoading(true);
GM_xmlhttpRequest({
method: 'GET',
url: resolveGithubUrl(cachedCommonPhrasesUrl),
onload: function (response) {
try {
const data = jsyaml.load(response.responseText);
setPhrasesData(data);
savePhrasesCache(cachedCommonPhrasesUrl, data);
addLog('常用语加载成功，共 ' + Object.keys(data || {}).length + ' 条', 'success');
CAT_UI.Message.success('常用语加载成功');
} catch (error) {
addLog('YAML 解析失败: ' + error.message, 'error', true);
CAT_UI.Message.error('YAML 解析失败: ' + error.message);
setPhrasesData({});
} finally {
setPhrasesLoading(false);
}
},
onerror: function (error) {
// 统一处理 error 参数（可能是 Error 对象、字符串或事件）
const errMsg = (error && error.message) ? error.message
: (typeof error === 'string' ? error : '网络错误');
addLog('加载常用语失败: ' + errMsg, 'error', true);
CAT_UI.Message.error('加载常用语失败');
setPhrasesLoading(false);
setPhrasesData({});
}
});
};
// 常用语抽屉打开时自动加载数据
CAT_UI.useEffect(() => {
if (commonPhrasesVisible) {
loadPhrasesData();
}
}, [commonPhrasesVisible]);
// 设备互联：中继服务器地址填好后，默认自动开始接收（无需点击按钮）
// 收到图片即弹出网页居中的预览弹窗（含复制 / 关闭按钮，见 showImagePopup）
CAT_UI.useEffect(() => {
const s = (Allvalue.relayServer || '').trim().replace(/\/+$/, '');
if (!s) return;
if (receiveStopRef.current) return; // 已在接收，避免重复启动
// 「已自动开始接收」日志在脚本**连上服务器时立即**显示（见 startPhoneReceive 的 onConnected，
// 由首次 /recv 短轮询确认触发，约 1 秒内），不等待手机端发送图片。地址末尾的 / 已在上面归一。
const stop = startPhoneReceive({
server: s,
uuid: getDeviceId(),
onConnected: () => { addLog('[设备互联] 已自动开始接收（' + s + '）', 'info'); },
onImage: (img) => {
addLog('[设备互联] 收到图片：' + (img.name || 'image') + '（' + (img.mime || 'image') + '）', 'success');
showImagePopup(img);
},
onText: (txt) => {
const t = (txt.text || '').replace(/\s+$/, '');
addLog('[设备互联] 收到文本：' + (t.length > 40 ? t.slice(0, 40) + '…' : t), 'success');
showTextPopup(txt);
}
});
receiveStopRef.current = stop;
return () => {
if (receiveStopRef.current) { receiveStopRef.current(); receiveStopRef.current = null; }
};
}, [Allvalue.relayServer]);
// =========主UI布局==========
return CAT_UI.Space(
[
CAT_UI.Space(
[
CAT_UI.Text("语音播报状态: "),
CAT_UI.Button(voiceEnabledText, {
type: "primary",
onClick: () => {
const newVoiceEnabled = !voiceEnabled;
patchAllvalue({ voiceEnabled: newVoiceEnabled });
addLog('语音播报已' + (newVoiceEnabled ? '开启' : '静音'), 'info');
// 启用语音时，初始化语音合成（解决浏览器not-allowed限制）
if (newVoiceEnabled && 'speechSynthesis' in window) {
// 播放一个静默语音来激活语音功能
const testUtterance = new SpeechSynthesisUtterance('');
window.speechSynthesis.speak(testUtterance);
CAT_UI.Message.success('语音功能已启用');
} else if (!newVoiceEnabled) {
// 关闭语音：立即清空队列，防止旧消息堆积、再次开启时集中涌出
clearSpeechQueue();
}
},
// 动态样式：根据静音状态切换颜色
style: {
fontWeight: "bold",
backgroundColor: !voiceEnabled ? "#990018" : "#007e44",
borderColor: !voiceEnabled ? "#990018" : "#007e44",
}
}),
],
{
direction: "horizontal",
size: "middle",
style: { marginBottom: "8px" }
}
),
CAT_UI.Space(
[
CAT_UI.Space(
[
CAT_UI.Button("设置", {
type: "primary",
onClick: () => setVisible(true),
}),
CAT_UI.Button("常用语", {
type: "primary",
onClick() {
setCommonPhrasesVisible(true);
},
}),
],
{
direction: "horizontal",
size: "middle",
}
),
CAT_UI.Space(
[
CAT_UI.Button("历史文件", {
type: "primary",
onClick: () => {
if (!receivedImages.length) {
CAT_UI.Message.info('暂无待存文件');
return;
}
renderImageGallery();
},
}),
CAT_UI.Button("设备互联", {
type: "primary",
onClick: () => setPhoneVisible(true),
}),
],
{
direction: "horizontal",
size: "middle",
}
),
],
{
direction: "vertical",
size: "small",
}
),
//抽屉
CAT_UI.Space(
[
CAT_UI.createElement(SettingsDrawer, {
visible,
setVisible,
logEntries,
workingHours: Allvalue.workingHours,
onChangeWorkingHours: (wh) => {
patchAllvalue({ workingHours: wh });
addLog('监控时间段已更新：上午 ' + hoursToHHmm(wh.morningStart) + '-' + hoursToHHmm(wh.morningEnd) +
'，下午 ' + hoursToHHmm(wh.afternoonStart) + '-' + hoursToHHmm(wh.afternoonEnd), 'info');
},
commonPhrasesUrl: Allvalue.commonPhrasesUrl,
onChangeCommonPhrasesUrl: (url) => {
patchAllvalue({ commonPhrasesUrl: url });
addLog('常用语数据源已更新: ' + url, 'info');
},
relayServer: Allvalue.relayServer || '',
onChangeRelayServer: (url) => {
patchAllvalue({ relayServer: url });
addLog('中继服务器已更新: ' + (url || '（空）'), 'info');
},
useCdn: Allvalue.useCdn,
onChangeUseCdn: (v) => {
patchAllvalue({ useCdn: !!v });
addLog('CDN 加速已' + (v ? '开启' : '关闭'), 'info');
}
}),
CAT_UI.createElement(CommonPhrasesDrawer, {
visible: commonPhrasesVisible,
setVisible: setCommonPhrasesVisible,
phrasesData,
setPhrasesData,
phrasesLoading,
setPhrasesLoading,
searchKeyword,
setSearchKeyword,
loadPhrasesData,
commonPhrasesUrl: Allvalue.commonPhrasesUrl
}),
CAT_UI.createElement(PhoneImageDrawer, {
visible: phoneVisible,
setVisible: setPhoneVisible,
relayServer: Allvalue.relayServer || '',
onChangeRelayServer: (url) => {
patchAllvalue({ relayServer: url });
addLog('中继服务器已更新: ' + (url || '（空）'), 'info');
}
}),
],
{
direction: "horizontal",
size: "middle",
}
),
],
{ direction: "vertical" }
);
}
try {
CAT_UI.createPanel({
header: {
title: CAT_UI.Space(
[
CAT_UI.createElement("div", {
style: {
width: "24px",
height: "24px",
verticalAlign: "middle",
borderRadius: "4px",
display: "inline-block",
backgroundImage: 'url("https://znhd.hunan.chinatax.gov.cn:8443/favicon.ico")',
backgroundSize: "contain",
backgroundRepeat: "no-repeat",
backgroundPosition: "center"
},
}),
CAT_UI.Text("征纳互动监控", {
style: { fontSize: "16px" },
}),
// 获取并显示版本号
CAT_UI.Text(`v${GM_info.script.version}`, {
style: {
fontSize: "12px",
color: "#999",
marginLeft: "8px"
},
}),
],
{ style: { marginLeft: "5px" } }
),
style: {
borderBottom: "1px solid var(--color-neutral-3)"
},
},
render: DM,
// 面板初始位置：优先使用上次保存的位置，否则用默认坐标
point: loadPanelPoint() || {
x: window.screen.width * 0.55,
y: window.screen.height * 0.01
},
});
} catch (error) {
// UI 面板创建失败时，至少不连累监控逻辑（两者同处一个 IIFE）
console.error('[监控] 面板创建失败:', error);
if (typeof addLog === 'function') {
addLog('面板创建失败: ' + (error && error.message), 'error', true);
}
}
// ==========面板位置保存==========
// 关键事实（已核对 CAT_UI 源码）：
// 1) createPanel 不提供 onDrag 回调，位置恢复只能靠 point 选项（已在上面用 loadPanelPoint 实现）。
// 2) 面板渲染在 Shadow DOM 内（attachShadow open），普通 document 选择器穿不透，必须走 shadowRoot。
// 3) 面板由 react-draggable 实现拖拽，拖拽时改写内部层的 transform: translate(x,y)。
// 本模块只负责「保存」：定位 shadow 内的面板 → 监听拖拽 → 用 getBoundingClientRect 存真实视口坐标。
// 下次加载时 createPanel 的 point 即读取该存档，形成闭环。
(function setupPanelPositionTracking() {
const PDBG = false; // 诊断开关：验证通过后可改 false
// 收集页面上所有带 open shadowRoot 的宿主元素
/**
* 收集页面上所有带有 open shadowRoot 的宿主元素（用于穿透 Shadow DOM 定位面板）。
* @returns {Array} 带有 shadowRoot 的 DOM 元素数组
*/
function getShadowHosts() {
const hosts = [];
document.querySelectorAll('*').forEach(el => { if (el.shadowRoot) hosts.push(el); });
return hosts;
}
// 穿透 Shadow DOM 定位面板主体（shadow 内含本脚本标题、且带内联 left/top 的 div）
/**
* 穿透 Shadow DOM 定位面板主体：在带 shadowRoot 的宿主中查找含本脚本标题、且带内联 left/top 的 div。
* @returns {(Element|null)} 找到返回面板主体元素，否则返回 null
*/
function findPanelRoot() {
for (const host of getShadowHosts()) {
const sr = host.shadowRoot;
if (!sr || !sr.textContent || !sr.textContent.includes('征纳互动监控')) continue;
const divs = sr.querySelectorAll('div');
for (const el of divs) {
if (el.style && el.style.left && el.style.top) return el;
}
const container = sr.querySelector('.container');
if (container) return container;
}
return null;
}
// 在面板内找当前带 transform: translate 的拖拽层（react-draggable 施加）
/**
* 在面板子树中查找当前被 react-draggable 施加 transform: translate 的拖拽层。
* @param {Element} root - 面板根元素
* @returns {(Element|null)} 找到返回拖拽层元素，否则返回 null
*/
function findDraggableNode(root) {
const all = root.querySelectorAll('*');
for (const el of all) {
const t = el.style && el.style.transform || '';
if (t.indexOf('translate') !== -1) return el;
}
return null;
}
// 读取面板当前真实视口坐标：优先取被拖拽的层（transform 后位置随之变化），
// 否则取面板主体本身。getBoundingClientRect 与 createPanel 的 point 同坐标系。
/**
* 读取面板当前真实视口坐标：优先取被拖拽层（transform 后位置随之变化），否则取面板主体本身。
* @param {Element} root - 面板根元素
* @returns {{x:number,y:number}} 面板左上角的视口坐标（四舍五入）
*/
function getCurrentPoint(root) {
const el = findDraggableNode(root) || root;
const r = el.getBoundingClientRect();
return { x: Math.round(r.left), y: Math.round(r.top) };
}
// 边界约束：面板只有顶部标题栏可拖动，必须保证该「可抓取区域」始终可见，
// 否则拖出后就无法再抓回来。
// - 水平方向：至少保留 MIN_VISIBLE 像素在视口内（标题栏为整条宽度，露出一段即可抓取）。
// - 垂直方向：顶边不允许移出视口上方(minY=0)；且至少保留 HANDLE_MIN 高的标题栏在视口内(maxY)。
const MIN_VISIBLE = 48;
const HANDLE_MIN = 40; // 标题栏（可抓取区）至少保留的高度
/**
* 将面板坐标约束在视口内，保证顶部标题栏（唯一可抓取区）始终可见、水平方向至少保留部分在视口内。
* @param {{x:number,y:number}} pt - 待约束的坐标
* @param {{w?:number,h?:number}} [size] - 面板尺寸（缺省按 320 宽估算）
* @returns {{x:number,y:number}} 约束后的安全坐标
*/
function clampPoint(pt, size) {
const vw = window.innerWidth;
const vh = window.innerHeight;
const w = (size && size.w) ? size.w : 320;
const minX = -(w - MIN_VISIBLE);
const maxX = vw - MIN_VISIBLE;
const minY = 0; // 顶边不超出视口上方，标题栏始终可见
const maxY = vh - HANDLE_MIN; // 至少保留一条标题栏高度在视口内，可抓取
return {
x: Math.min(Math.max(pt.x, minX), maxX),
y: Math.min(Math.max(pt.y, minY), maxY)
};
}
// 读取面板当前尺寸与可见矩形（用于精确计算边界）
/**
* 读取面板当前尺寸与可见矩形（用于精确计算边界）。
* @param {Element} root - 面板根元素
* @returns {{el:Element,rect:DOMRect,w:number,h:number}} 拖拽层元素、视口矩形及宽高
*/
function getPanelRect(root) {
const el = findDraggableNode(root) || root;
const r = el.getBoundingClientRect();
return { el: el, rect: r, w: r.width, h: r.height };
}
// 计算当前点 -> 裁剪到视口内 -> 保存；若越界则同时把拖拽层 transform 拉回边界，
// 确保「视觉上」也始终留在可视范围（不止是存档安全）。
/**
* 计算当前面板坐标，裁剪到视口内后保存；若越界则同步把拖拽层 transform 拉回边界。
* @param {Element} root - 面板根元素
* @returns {{x:number,y:number}} 约束并保存后的坐标
*/
function persistAndClamp(root) {
const info = getPanelRect(root);
const pt = { x: info.rect.left, y: info.rect.top };
const clamped = clampPoint(pt, { w: info.w, h: info.h });
if (clamped.x !== pt.x || clamped.y !== pt.y) {
const dx = clamped.x - pt.x;
const dy = clamped.y - pt.y;
const el = info.el;
const t = el.style.transform || '';
const m = /translate\(\s*([-\d.]+)px\s*,\s*([-\d.]+)px\s*\)/.exec(t);
if (m) {
const nx = (parseFloat(m[1]) + dx).toFixed(1);
const ny = (parseFloat(m[2]) + dy).toFixed(1);
el.style.transform = t.replace(/translate\([^)]*\)/, 'translate(' + nx + 'px, ' + ny + 'px)');
} else if (t.indexOf('translate') === -1) {
el.style.transform = (t ? t + ' ' : '') + 'translate(' + dx.toFixed(1) + 'px, ' + dy.toFixed(1) + 'px)';
}
}
savePanelPoint(clamped);
return clamped;
}
/**
* 对面板根元素安装位置跟踪：用 MutationObserver 监听 style 变化 + mousedown/move/up 双保险，实时裁剪并保存位置。
* @param {Element} root - 面板根元素
* @returns {void}
*/
function applyTracking(root) {
// 监听整棵子树的 style 变化（transform 可能加在任意内部层）
const observer = new MutationObserver(() => {
const pt = persistAndClamp(root);
if (PDBG) console.log('[面板位置] 检测到移动，保存坐标:', pt);
});
observer.observe(root, { attributes: true, attributeFilter: ['style'], subtree: true });
// 双保险：拖拽过程（mousedown→mousemove→mouseup）中实时裁剪并保存最终位置
root.addEventListener('mousedown', () => {
const onMove = () => persistAndClamp(root);
const onUp = () => {
persistAndClamp(root);
document.removeEventListener('mousemove', onMove);
document.removeEventListener('mouseup', onUp);
};
document.addEventListener('mousemove', onMove);
document.addEventListener('mouseup', onUp);
});
}
let tries = 0;
const timer = setInterval(() => {
tries++;
const root = findPanelRoot();
if (root) {
clearInterval(timer);
// 加载即裁剪：若存档位置（或默认位置）已越界，立即拉回并写回根容器 left/top
const info = getPanelRect(root);
const clamped = clampPoint({ x: info.rect.left, y: info.rect.top }, { w: info.w, h: info.h });
root.style.left = Math.round(clamped.x) + 'px';
root.style.top = Math.round(clamped.y) + 'px';
savePanelPoint(clamped);
if (PDBG) console.log('[面板位置] 已定位面板(Shadow DOM)，初始坐标:', clamped);
applyTracking(root);
// 视口尺寸变化时重新裁剪，防止面板被挤出可视范围
window.addEventListener('resize', () => persistAndClamp(root));
} else if (tries > 80) {
clearInterval(timer);
if (PDBG) console.warn('[面板位置] 未找到面板(已尝试穿透 Shadow DOM)，放弃位置跟踪');
}
}, 150);
})();
// ==========监控部分==========
// 工具函数：获取当前小时（支持小数）
/**
* 获取当前时间的十进制小时（如 13:30 -> 13.5），供工作时间判断。
* @returns {number} 当前十进制小时
*/
function getCurrentHour() {
const now = new Date();
return now.getHours() + now.getMinutes() / 60;
}
// 检查是否在工作时间内（读取用户可配置的时间段缓存）
/**
* 判断当前是否处于用户配置的监控工作时间段内（读取缓存，无配置则视为工作时间内）。
* @returns {boolean} 在工作时间内返回 true，否则 false
*/
function isWorkingHours() {
const wh = cachedWorkingHours;
// 兜底：若未配置则视为工作时间内，避免完全停止监控
if (!wh) return true;
const currentHour = getCurrentHour();
return (currentHour >= wh.morningStart && currentHour <= wh.morningEnd) ||
(currentHour >= wh.afternoonStart && currentHour <= wh.afternoonEnd);
}
// 缓存DOM元素引用（只缓存稳定元素）
const domCache = {
ocurrentElement: null
// 注意：offlineElement 不缓存，每次重新查询
};
// 检测DOM元素是否仍然存在于文档中
/**
* 检测 DOM 元素是否仍连接在文档中（用于清理失效的缓存元素引用）。
* @param {Element} element - 待检测元素
* @returns {boolean} 仍连接返回 true，否则 false
*/
function isElementInDocument(element) {
return element && element.isConnected;
}
// 记录上一次的等待人数，用于检测状态变化
let lastWaitCount = null;
// 记录上一次的工作时间状态，用于检测「进入/离开工作时间」的变化（仅在翻转时记日志）
let lastWorkingState = null;
// 修改主要检测函数
/**
* 主检测函数：每次轮询执行。判断工作时间、读取等待人数（状态变化时记录/播报），
* 并检测掉线弹窗（发现时记录并语音告警）。
* @returns {void}
*/
function checkCount() {
// 工作时间状态变化时记录日志（进入/离开），仅在翻转时输出，避免刷屏
const inWork = isWorkingHours();
if (inWork !== lastWorkingState) {
lastWorkingState = inWork;
addLog(inWork ? '已进入工作时间，开始监控征纳互动' : '已离开工作时间，暂停监控', inWork ? 'success' : 'info');
}
if (!inWork) return;
try {
// 清理缓存中已失效的人数元素
if (!isElementInDocument(domCache.ocurrentElement)) {
domCache.ocurrentElement = null;
}
// 重新查找人数元素（相对稳定，可以缓存）
if (!domCache.ocurrentElement) {
domCache.ocurrentElement = document.querySelector('.count:nth-child(2)');
}
const ocurrentElement = domCache.ocurrentElement;
if (!ocurrentElement) {
addLog('找不到人数元素', 'warning');
return;
}
const currentCount = parseInt(ocurrentElement.textContent.trim(), 10);
if (isNaN(currentCount)) {
addLog(`无法解析等待人数: "${ocurrentElement.textContent.trim()}"`, 'warning');
return;
}
// 人数状态处理：仅在状态变化时记录日志，避免日志被重复内容填满
if (currentCount === 0) {
// 仅在从 >0 变为 0 时记录
if (lastWaitCount !== 0) {
addLog('当前等待人数为0', 'success');
}
} else {
speak("征纳互动有人来了");
addLog(`当前等待人数: ${currentCount}`, 'info');
}
lastWaitCount = currentCount;
// ========== 离线检测 ==========
// 每次重新查询，不缓存（弹窗元素动态创建/销毁）
const offlineEl = document.querySelector('.t-dialog__body__icon:nth-child(2)') ||
document.querySelector('.t-dialog__body__icon:nth-of-type(2)');
if (offlineEl) {
// 使用可选链安全读取文本
const text = (offlineEl?.innerText ?? offlineEl?.textContent ?? '').trim();
if (text.includes('掉线')) {
addLog(`掉线提示：${text}`, 'error');
speak("征纳互动已掉线");
}
}
} catch (error) {
addLog(`检测错误: ${error.message}`, 'error', true);
}
}
/**
* 向页面中第一个 TinyMCE 编辑器追加文本并立即生效。
* 优先使用 TinyMCE API，失败时降级为直接操作 iframe DOM 并派发 input 事件；
* 输入框非空时在内容前补
实现换行。
* @param {string} [text2append='xxxxx'] - 要追加的文本
* @returns {string} 追加后的编辑器完整纯文本
*/
function appendToTinyMCE(text2append = 'xxxxx') {
/* 1. 拿到编辑器实例（动态匹配，不依赖 id） */
const editors = window.tinymce?.editors ?? []; // 所有 TinyMCE 实例
const ed = editors.find(e => e.inline === false); // 先拿第一个非 inline 的
// 如果上面没拿到，再随便拿一个
const editor = ed || editors[0];
// 检查输入框是否为空
let isInputEmpty = true;
if (editor) {
const body = editor.getBody();
isInputEmpty = !body.textContent.trim();
} else {
const iframe = document.querySelector('.input-box iframe.tox-edit-area__iframe') ||
document.querySelector('iframe.tox-edit-area__iframe') ||
document.querySelector('iframe[class*="tox"]');
if (iframe) {
try {
const body = iframe.contentDocument.querySelector('body#tinymce') ||
iframe.contentDocument.body;
isInputEmpty = !body.textContent.trim();
} catch (e) {
addLog('无法访问iframe内容: ' + e.message, 'warning', true);
}
}
}
/* 2. 使用
换行处理 */
// 转义文本并将换行符替换为
const escapedText = escapeHtml(text2append);
let processedContent = escapedText.replace(/\n/g, '
');
// 如果输入框不为空，在内容前添加
实现换行
if (!isInputEmpty) {
processedContent = '
' + processedContent;
}
/* 3. 真正干活 */
if (editor) {
const body = editor.getBody(); // 等同于 iframe.body
if (isInputEmpty) {
// 输入框为空时直接设置内容（不加额外换行）
editor.setContent(processedContent);
} else {
// 输入框不为空时使用处理后的内容
editor.execCommand('mceInsertContent', false, processedContent);
}
editor.save(); // 同步回 textarea
editor.setDirty(true); // 标记脏
editor.selection.select(body, true); // 把光标放末尾
editor.selection.collapse(false);
} else {
/* 4. 兜底：直接改 DOM + 触发事件 */
const iframe = document.querySelector('iframe.tox-edit-area__iframe') ||
document.querySelector('iframe[class*="tox"]');
if (!iframe) {
addLog('找不到 TinyMCE iframe', 'error', true);
return '';
}
try {
const body = iframe.contentDocument.body;
if (!body) {
addLog('找不到 body', 'error', true);
return '';
}
if (isInputEmpty) {
body.innerHTML = processedContent;
} else {
body.insertAdjacentHTML('beforeend', processedContent);
}
// 触发单个 input 事件即可
body.dispatchEvent(new Event('input', { bubbles: true }));
} catch (e) {
addLog('无法访问 iframe 内容: ' + e.message, 'error', true);
return '';
}
}
const finalText = editor ? editor.getContent({ format: 'text' })
: document.querySelector('body#tinymce')?.textContent ?? '';
addLog('已追加文本并同步: ' + finalText, 'success', true);
return finalText;
}
// 语音播报函数
// 语音队列：元素为 { utterance, enqueuedAt }，enqueuedAt 用于过期清理；
// 队列长度受 CONFIG.MAX_SPEECH_QUEUE 限制，超出时丢弃最早（最旧）的消息。
const speechQueue = [];
let isSpeaking = false;
let speechTimer = null;
/**
* 清空语音队列并中止当前播报，重置播放状态与超时定时器。
* 主要用于语音开关关闭时，避免旧消息堆积、再次开启时集中涌出。
* @returns {void}
*/
function clearSpeechQueue() {
speechQueue.length = 0;
isSpeaking = false;
if (speechTimer) {
clearTimeout(speechTimer);
speechTimer = null;
}
if ('speechSynthesis' in window) {
try { window.speechSynthesis.cancel(); } catch (e) { /* 忽略中止异常 */ }
}
}
/**
* 移除队列中已过期的语音消息（入队时间距今超过 CONFIG.SPEECH_QUEUE_TTL）。
* @returns {number} 被移除的过期消息条数
*/
function pruneExpiredSpeechItems() {
if (speechQueue.length === 0) return 0;
const now = Date.now();
const before = speechQueue.length;
for (let i = speechQueue.length - 1; i >= 0; i--) {
if (now - speechQueue[i].enqueuedAt > CONFIG.SPEECH_QUEUE_TTL) {
speechQueue.splice(i, 1);
}
}
return before - speechQueue.length;
}
/**
* 语音播报：将文本加入语音队列并触发播放（受语音开关与浏览器能力限制）。
* 入队时执行长度上限与过期清理：队列超过 CONFIG.MAX_SPEECH_QUEUE 时丢弃最早（最旧）消息，
* 超过 CONFIG.SPEECH_QUEUE_TTL 的过期消息也会被剔除，避免播报过时内容。
* @param {string} text - 要播报的文本
* @returns {void}
*/
function speak(text) {
// 直接读取缓存的语音状态，避免每次读取 localStorage
if (!cachedVoiceEnabled || !('speechSynthesis' in window)) { return; }
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'zh-CN';
utterance.rate = 1.0;
// 添加到队列，记录入队时间用于过期判断
speechQueue.push({ utterance, enqueuedAt: Date.now() });
// 长度上限：超过则丢弃最早（最旧）的消息，保留最新内容
while (speechQueue.length > CONFIG.MAX_SPEECH_QUEUE) {
speechQueue.shift();
addLog('语音队列已满，丢弃最早的一条旧消息', 'warning', true);
}
// 过期清理：剔除超过有效期的陈旧消息
const expired = pruneExpiredSpeechItems();
if (expired > 0) {
addLog(`语音队列已清理 ${expired} 条过期消息`, 'warning', true);
}
processSpeechQueue();
}
// 处理语音队列
/**
* 从语音队列中取出一条依次播放，带超时保护（防止 onend/onerror 不触发导致队列卡死）；
* 播放前先剔除过期消息，避免播报过时内容。
* @returns {void}
*/
function processSpeechQueue() {
if (isSpeaking) { return; }
// 先清理过期消息，避免播报过时内容
pruneExpiredSpeechItems();
if (speechQueue.length === 0) { return; }
isSpeaking = true;
const item = speechQueue.shift();
const utterance = item.utterance;
// 清理上一次的超时定时器
if (speechTimer) { clearTimeout(speechTimer); }
// 超时保护：防止 onend/onerror 不触发导致队列卡死（Chrome 已知 bug）
speechTimer = setTimeout(() => {
addLog('语音播报超时，强制继续队列', 'warning', true);
isSpeaking = false;
speechTimer = null;
processSpeechQueue();
}, CONFIG.SPEECH_TIMEOUT);
const clearTimer = () => {
if (speechTimer) {
clearTimeout(speechTimer);
speechTimer = null;
}
};
utterance.onend = () => {
clearTimer();
isSpeaking = false;
processSpeechQueue();
};
utterance.onerror = (event) => {
clearTimer();
isSpeaking = false;
// 如果是not-allowed错误，清空队列避免堆积
if (event.error === 'not-allowed') {
speechQueue.length = 0;
} else {
processSpeechQueue();
}
};
// 在播放前确保语音合成已恢复（某些浏览器会暂停）
if (window.speechSynthesis.paused) {
window.speechSynthesis.resume();
}
window.speechSynthesis.speak(utterance);
}
// 全局定时器引用，用于清理
let monitoringInterval = null;
// 页面加载完成后启动监控
/**
* 启动监控：立即执行一次检测，并按 CHECK_INTERVAL 定时轮询 checkCount。
* @returns {void}
*/
function startMonitoring() {
// 立即执行一次检查
checkCount();
// 启动定时检查
monitoringInterval = setInterval(checkCount, CONFIG.CHECK_INTERVAL);
}
// 页面关闭时清理定时器
window.addEventListener('beforeunload', () => {
if (monitoringInterval) {
clearInterval(monitoringInterval);
monitoringInterval = null;
}
if (speechTimer) {
clearTimeout(speechTimer);
speechTimer = null;
}
});
// 复用的音频播放器实例（避免每次创建新对象）
let didaAudioPlayer = null;
// 播放提示音函数
/**
* 播放提示音（dida.mp3）。复用 Audio 实例，避免重复解码。
* @returns {void}
*/
function playDidaSound() {
if (!CONFIG.didaUrl) return;
try {
// 复用 Audio 实例，避免重复解码
if (!didaAudioPlayer) {
didaAudioPlayer = new Audio();
didaAudioPlayer.src = resolveGithubUrl(CONFIG.didaUrl);
didaAudioPlayer.volume = 0.5;
}
// 重置播放位置并播放
didaAudioPlayer.currentTime = 0;
didaAudioPlayer.play().catch(() => { });
} catch (e) { }
}
// 安全复制工具：仅在页面聚焦且支持 clipboard 时尝试复制
/**
* 安全复制文本到剪贴板：优先 GM_setClipboard（无需焦点），降级到 navigator.clipboard；
* 成功复制后播放提示音。失败时记录日志，不抛出。
* @param {string} text - 待复制文本（空值直接返回）
* @returns {void}
*/
function safeCopyText(text) {
if (!text) return;
// 1) 优先使用 GM_setClipboard（无需焦点）
if (typeof GM_setClipboard === 'function') {
try {
GM_setClipboard(text);
addLog('[复制] 已复制到剪贴板 (GM_setClipboard)', 'success', true);
playDidaSound();
return;
} catch (e) {
addLog('[复制] GM_setClipboard 失败: ' + e.message, 'error', true);
}
}
// 2) 浏览器异步 clipboard API
if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
navigator.clipboard.writeText(text).then(() => {
addLog('[复制] 已复制到剪贴板 (navigator.clipboard)', 'success', true);
playDidaSound();
}).catch(err => {
addLog('[复制] 复制到剪贴板失败: ' + err.message, 'error', true);
});
return;
}
}
// ========== 手机图片 → 电脑剪贴板 ==========
// 每台电脑/每个脚本安装实例一个稳定 deviceId（持久化，刷新不变），
// 拼出上传链接 /u/；手机打开该链接上传，电脑端长轮询取走。
const DEVICE_ID_KEY = 'znhd_device_id';
/**
* 取得本机稳定设备 ID：首次运行用 crypto.randomUUID() 生成并持久化（GM_setValue），
* 之后刷新/重开都读同一值。用于区分不同电脑（A、B 各自不同链接）。
* @returns {string} 设备 UUID 字符串
*/
function getDeviceId() {
let id = '';
try { id = (typeof GM_getValue === 'function') ? (GM_getValue(DEVICE_ID_KEY, '') || '') : ''; } catch (e) { id = ''; }
if (!id) {
try {
id = (window.crypto && crypto.randomUUID) ? crypto.randomUUID()
: ('d' + Date.now().toString(16) + Math.random().toString(16).slice(2));
} catch (e) { id = 'd' + Date.now().toString(16) + Math.random().toString(16).slice(2); }
try { if (typeof GM_setValue === 'function') GM_setValue(DEVICE_ID_KEY, id); } catch (e) { /* 忽略 */ }
}
return id;
}
/**
* 将 base64 字符串还原为 Blob（用于把中继返回的图片字节写剪贴板）。
* @param {string} b64 - base64 文本
* @param {string} mime - MIME 类型
* @returns {Blob} 图片 Blob
*/
function base64ToBlob(b64, mime) {
const bin = atob(b64);
const len = bin.length;
const arr = new Uint8Array(len);
for (let i = 0; i < len; i++) arr[i] = bin.charCodeAt(i);
return new Blob([arr], { type: mime || 'image/jpeg' });
}
/**
* 将图片 Blob 转成 PNG Blob（best-effort）。
* 原因：异步 Clipboard API（navigator.clipboard.write + ClipboardItem）在部分
* Chromium 内核里只可靠支持 image/png；手机传来的图多为 image/jpeg，
* 直接以 image/jpeg 写入可能失败。统一转 PNG 可规避该限制。
* 若环境不支持位图解码 / Canvas，则返回原 blob。
* @param {Blob} blob
* @returns {Promise}
*/
function blobToPng(blob) {
return new Promise((resolve) => {
if (typeof createImageBitmap !== 'function' || typeof document === 'undefined') { resolve(blob); return; }
try {
createImageBitmap(blob).then(bmp => {
const cv = document.createElement('canvas');
cv.width = bmp.width; cv.height = bmp.height;
const ctx = cv.getContext('2d');
if (!ctx) { if (bmp.close) bmp.close(); resolve(blob); return; }
ctx.drawImage(bmp, 0, 0);
if (bmp.close) bmp.close();
cv.toBlob(b => { resolve(b || blob); }, 'image/png');
}).catch(() => resolve(blob));
} catch (e) { resolve(blob); }
});
}
/**
* 尝试把图片写入剪贴板：优先「页面主世界(unsafeWindow)」的 navigator.clipboard.write，
* 失败再退回「隔离世界」的同名 API。两者都不行则返回 false。
* 页面主世界路径是文档确认的、唯一能把图片真正写进系统剪贴板的可靠方式
* （ScriptCat 隔离世界里 ClipboardItem 常缺失，且 ScriptCat 的 GM_setClipboard 仅支持文本，
* 传 Blob 会静默无效——故图片复制不再依赖 GM_setClipboard）。
* @param {Blob} data
* @param {string} type
* @returns {Promise}
*/
function attemptWriteImage(data, type) {
const doWrite = (nav, CI) => new Promise((r) => {
try {
if (nav && nav.clipboard && nav.clipboard.write && typeof CI !== 'undefined') {
nav.clipboard.write([new CI({ [type]: data })])
.then(() => r(true))
.catch(() => r(false));
return;
}
} catch (e) { /* 忽略，走降级 */ }
r(false);
});
const w = (typeof unsafeWindow !== 'undefined') ? unsafeWindow : window;
return doWrite(w && w.navigator, w && w.ClipboardItem).then(ok => {
if (ok) return true;
return doWrite(navigator, ClipboardItem);
});
}
/**
* 将图片 Blob 写入系统剪贴板（由一次「用户点击」触发，以保留浏览器要求的用户手势）。
* 流程：
* 1) 先用「原始 blob」直接写（此时点击手势最新鲜、无任何异步转换，成功率最高）；
* 2) 若失败（多半因内核仅支持 image/png 而原图为 jpeg），再统一转 PNG 后重试；
* 3) 写入一律走页面主世界的 navigator.clipboard.write（见 attemptWriteImage），
* 不再依赖 GM_setClipboard（ScriptCat 该 API 仅支持文本，传 Blob 会静默无效导致"假成功"）。
* @param {Blob} blob - 图片 Blob
* @returns {Promise} 成功返回 true，失败返回 false
*/
function copyImageToClipboard(blob) {
return new Promise((resolve) => {
if (!blob) { addLog('[复制] 图片数据为空', 'error', true); resolve(false); return; }
const type0 = (blob.type) ? blob.type : 'image/png';
// 1) 原始 blob 直接写（手势最新鲜）
attemptWriteImage(blob, type0).then(ok => {
if (ok) { addLog('[复制] 图片已复制到剪贴板', 'success', true); resolve(true); return; }
// 2) 转 PNG 后重试（规避内核仅支持 image/png 的限制）
blobToPng(blob).then(png => {
const data = png || blob;
const type = (data.type) ? data.type : 'image/png';
attemptWriteImage(data, type).then(ok2 => {
if (ok2) { addLog('[复制] 图片已复制到剪贴板 (转PNG)', 'success', true); resolve(true); }
else { addLog('[复制] 所有复制方式均失败，请长按图片手动保存', 'error', true); resolve(false); }
});
}).catch(() => {
addLog('[复制] PNG 转换失败', 'error', true); resolve(false);
});
});
});
}
// ========== 收到图片：九宫格画廊弹窗（Viewer.js 放大查看） ==========
// 收到的图片累积进 receivedImages 列表，以 3 列九宫格缩略图展示（直接挂 document.documentElement，
// 不受 CAT_UI 面板 transform 影响）。单击缩略图用 Viewer.js 放大（缩放/旋转/多图左右切换），
// 每张图下方有「复制」按钮（点击手势触发，满足浏览器剪贴板策略）和右上角 × 移除。
const MAX_GALLERY = 27; // 画廊最多保留张数，超出丢最旧（释放其 objectURL）
const receivedImages = []; // { blob, previewUrl, name, mime, ts }
let galleryViewer = null; // Viewer.js 实例（重建画廊时先销毁）
let galleryViewerObserver = null; // 监听 Viewer 全屏容器出现并移入画廊遮罩的 MutationObserver
let viewerCssInjected = false;
// 注入 Viewer.js 的 CSS：优先 @resource（GM_getResourceText），失败回退 CDN
function ensureViewerCss() {
if (viewerCssInjected) return;
let baseInjected = false;
try {
const css = (typeof GM_getResourceText === 'function') ? GM_getResourceText('VIEWER_CSS') : '';
if (css) { GM_addStyle(css); baseInjected = true; }
} catch (e) { /* 继续走 link 回退 */ }
if (!baseInjected) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://cdn.jsdelivr.net/npm/viewerjs/dist/viewer.min.css';
(document.head || document.documentElement).appendChild(link);
}
// 覆盖样式：Viewer.js 默认遮罩是半透明黑（rgba(0,0,0,0.5)），放大时会透出后面的画廊弹窗；
// 改为纯黑不透明，彻底遮住背景（!important 保证无论加载顺序都生效）
GM_addStyle('.viewer-backdrop{background-color:#000 !important;}' +
'.viewer-container{background-color:#000 !important;}');
viewerCssInjected = true;
}
/**
* 生成下载文件名：优先原始文件名；无名或无扩展名时按 mime 补扩展名。
* @param {string} name - 原始文件名（可空）
* @param {string} mime - MIME 类型
* @param {number} idx - 画廊序号（用于兜底命名）
* @returns {string} 带扩展名的文件名
*/
function downloadFileName(name, mime, idx) {
const extByMime = {
'image/jpeg': '.jpg', 'image/png': '.png', 'image/gif': '.gif',
'image/webp': '.webp', 'image/svg+xml': '.svg', 'image/bmp': '.bmp'
};
let n = String(name || '').trim();
if (!n) n = 'znhd-image-' + (idx + 1);
if (!/\.[a-z0-9]{2,5}$/i.test(n)) n += (extByMime[(mime || '').toLowerCase()] || '.jpg');
return n;
}
// 对外入口（poll 回调调用）：新图入列并打开/刷新画廊弹窗
function showImagePopup(img) {
img.ts = Date.now();
receivedImages.push(img);
while (receivedImages.length > MAX_GALLERY) {
const old = receivedImages.shift();
try { URL.revokeObjectURL(old.previewUrl); } catch (e) { /* 忽略 */ }
}
renderImageGallery();
}
function removeGalleryImage(idx) {
const it = receivedImages.splice(idx, 1)[0];
if (it) { try { URL.revokeObjectURL(it.previewUrl); } catch (e) { /* 忽略 */ } }
if (receivedImages.length === 0) closeImagePopup();
else renderImageGallery();
}
function renderImageGallery() {
closeImagePopup(); // 重建（销毁旧 Viewer 实例与旧 DOM）
installPopupKeyHandler(); // 安装全局 ESC 关闭（预览态→退出预览；画廊态→关弹窗）
ensureViewerCss();
const overlay = document.createElement('div');
overlay.id = '__znhd_img_popup__';
// 所有样式加 !important + 铺满 100vw/vh，隔绝任何外部 CSS（含扩展/页面）对弹窗的覆盖
overlay.style.cssText = 'position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;width:100vw!important;height:100vh!important;z-index:2147483647!important;display:flex!important;align-items:center!important;justify-content:center!important;background:rgba(0,0,0,0.55)!important;opacity:1!important;font-family:sans-serif!important;';
const box = document.createElement('div');
box.style.cssText = 'position:relative!important;z-index:1!important;width:min(560px,92vw)!important;max-height:88vh!important;background:#fff!important;opacity:1!important;border-radius:12px!important;padding:16px!important;box-shadow:0 8px 30px rgba(0,0,0,0.35)!important;display:flex!important;flex-direction:column!important;filter:none!important;backdrop-filter:none!important;isolation:isolate!important;';
// 标题
const title = document.createElement('div');
title.textContent = '收到的图片（' + receivedImages.length + '）· 单击放大，最新图片在最后';
title.style.cssText = 'font-size:15px!important;font-weight:bold!important;color:#333!important;margin:0 0 10px 2px!important;';
// 右上角关闭
const close = document.createElement('div');
close.textContent = '×';
close.title = '关闭（图片保留，收到新图会再次弹出）';
// 注意：box 是 display:flex 容器，标题作为 flex item 在层叠里等同 z-index:0 层；
// 关闭按钮是 position:absolute（同属 z-index:auto 层），同层按 DOM 顺序——标题在关闭按钮之后 append，
// 会画到关闭按钮之上并吃掉点击（视觉无重叠，但标题隐形盒子铺满整行）。故显式抬到 z-index:2 确保可点。
close.style.cssText = 'position:absolute!important;top:8px!important;right:10px!important;width:30px!important;height:30px!important;line-height:28px!important;text-align:center!important;font-size:22px!important;color:#fff!important;cursor:pointer!important;border-radius:50%!important;background:#e4393c!important;opacity:1!important;box-shadow:0 1px 4px rgba(0,0,0,0.3)!important;font-weight:bold!important;z-index:2!important;';
close.onmouseenter = () => { close.style.background = '#c9302c'; };
close.onmouseleave = () => { close.style.background = '#e4393c'; };
close.onclick = () => closeImagePopup();
// 九宫格容器（3 列，可滚动）
const grid = document.createElement('div');
grid.id = '__znhd_img_grid__';
grid.style.cssText = 'display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:10px!important;overflow-y:auto!important;padding:2px!important;max-height:60vh!important;filter:none!important;backdrop-filter:none!important;opacity:1!important;';
receivedImages.forEach((it, idx) => {
const cell = document.createElement('div');
cell.style.cssText = 'position:relative!important;display:flex!important;flex-direction:column!important;';
const thumbWrap = document.createElement('div');
thumbWrap.style.cssText = 'position:relative!important;width:100%!important;aspect-ratio:1/1!important;border-radius:8px!important;overflow:hidden!important;background:#f2f2f2!important;cursor:zoom-in!important;filter:none!important;backdrop-filter:none!important;opacity:1!important;';
const imgEl = document.createElement('img');
imgEl.src = it.previewUrl;
imgEl.alt = it.name || ('image-' + (idx + 1));
imgEl.style.cssText = 'width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;filter:none!important;opacity:1!important;';
thumbWrap.appendChild(imgEl);
// 单张移除 ×
const del = document.createElement('div');
del.textContent = '×';
del.title = '移除这张';
del.style.cssText = 'position:absolute!important;top:4px!important;right:4px!important;width:20px!important;height:20px!important;line-height:18px!important;text-align:center!important;font-size:14px!important;color:#fff!important;cursor:pointer!important;border-radius:50%!important;background:rgba(0,0,0,0.55)!important;font-weight:bold!important;z-index:2!important;';
del.onclick = (e) => { e.stopPropagation(); removeGalleryImage(idx); };
thumbWrap.appendChild(del);
// 按钮行：复制（写剪贴板）+ 下载（存为文件）
const btnRow = document.createElement('div');
btnRow.style.cssText = 'display:flex!important;gap:4px!important;margin-top:6px!important;';
const copyBtn = document.createElement('button');
copyBtn.textContent = '复制';
copyBtn.style.cssText = 'flex:1!important;padding:4px 0!important;border:none!important;border-radius:6px!important;background:#1890ff!important;color:#fff!important;font-size:12px!important;opacity:1!important;cursor:pointer!important;filter:none!important;backdrop-filter:none!important;';
copyBtn.onclick = (e) => {
e.stopPropagation();
copyBtn.textContent = '复制中…'; copyBtn.disabled = true;
copyImageToClipboard(it.blob).then(ok => {
copyBtn.disabled = false;
if (ok) {
copyBtn.textContent = '✓ 已复制';
copyBtn.style.background = '#52c41a';
addLog('图片已复制到剪贴板: ' + (it.name || ''), 'success');
} else {
copyBtn.textContent = '复制失败';
copyBtn.style.background = '#e4393c';
}
});
};
const dlBtn = document.createElement('button');
dlBtn.textContent = '下载';
dlBtn.style.cssText = 'flex:1!important;padding:4px 0!important;border:none!important;border-radius:6px!important;background:#722ed1!important;color:#fff!important;font-size:12px!important;opacity:1!important;cursor:pointer!important;filter:none!important;backdrop-filter:none!important;';
dlBtn.onclick = (e) => {
e.stopPropagation();
try {
const fname = downloadFileName(it.name, it.mime, idx);
const a = document.createElement('a');
const url = URL.createObjectURL(it.blob);
a.href = url; a.download = fname; a.style.display = 'none';
document.body.appendChild(a);
a.click();
a.remove();
setTimeout(() => { try { URL.revokeObjectURL(url); } catch (e2) { /* 忽略 */ } }, 3000);
dlBtn.textContent = '✓ 已下载';
dlBtn.style.background = '#52c41a';
addLog('图片已下载: ' + fname, 'success');
} catch (err) {
dlBtn.textContent = '下载失败';
dlBtn.style.background = '#e4393c';
addLog('[下载] 失败：' + err.message, 'error', true);
}
};
btnRow.appendChild(copyBtn);
btnRow.appendChild(dlBtn);
cell.appendChild(thumbWrap);
cell.appendChild(btnRow);
grid.appendChild(cell);
});
// 底部操作条
const bar = document.createElement('div');
bar.style.cssText = 'display:flex!important;justify-content:center!important;gap:12px!important;margin-top:12px!important;';
const clearBtn = document.createElement('button');
clearBtn.textContent = '清空全部';
clearBtn.style.cssText = 'padding:7px 18px!important;border:none!important;border-radius:8px!important;background:#999!important;color:#fff!important;font-size:13px!important;cursor:pointer!important;filter:none!important;backdrop-filter:none!important;';
clearBtn.onclick = () => {
receivedImages.forEach(it => { try { URL.revokeObjectURL(it.previewUrl); } catch (e) { /* 忽略 */ } });
receivedImages.length = 0;
closeImagePopup();
};
bar.appendChild(clearBtn);
box.appendChild(close);
box.appendChild(title);
box.appendChild(grid);
box.appendChild(bar);
overlay.appendChild(box);
overlay.onclick = (e) => { if (e.target === overlay) closeImagePopup(); };
document.documentElement.appendChild(overlay); // 挂到 而非 ：避开 body 级 transform/filter 改写 fixed 包含块
// 焦点隔离：弹窗内的