🎨 背景颜色
`;
const colorSettingsWrapper = document.createElement("div");
colorSettingsWrapper.innerHTML = colorSettings.trim();
const colorSettingsSection = colorSettingsWrapper.firstElementChild;
// 快捷键设置区域
const hotkeysSettings = document.createElement("div");
hotkeysSettings.className = "mb-4";
hotkeysSettings.innerHTML = `
`;
// 获取当前快捷键配置
const hotkeysConfig = getHotkeysConfig();
// 快捷键项目列表
const hotkeyItems = [
{ id: "searchFocus", label: "定位到搜索框", defaultKey: "k" },
{ id: "imageSearch", label: "以图搜索功能", defaultKey: "p" },
{ id: "openSettings", label: "打开设置界面", defaultKey: "," },
];
// 创建网格容器
const hotkeysGrid = document.createElement("div");
hotkeysGrid.className = "grid grid-cols-2 gap-3";
// 创建每个快捷键设置项
hotkeyItems.forEach((item) => {
const hotkeyItem = document.createElement("div");
hotkeyItem.className =
"p-2 bg-slate-50 rounded-lg border border-slate-200";
const hotkeyConfig = hotkeysConfig[item.id] || {
ctrlCmd: true,
shift: false,
alt: false,
key: item.defaultKey,
};
hotkeyItem.innerHTML = `
${item.label
}
`;
hotkeysGrid.appendChild(hotkeyItem);
});
// 将网格容器添加到快捷键设置区域
hotkeysSettings.appendChild(hotkeysGrid);
// 操作按钮
const actions = document.createElement("div");
actions.className = "flex gap-2";
actions.innerHTML = `
`;
// 组装内容
content.appendChild(switchesSection);
content.appendChild(colorSettingsSection);
content.appendChild(hotkeysSettings);
content.appendChild(actions);
// 初始显示设置面板并设置激活态（放在这里以确保所有元素已创建）
setActive("cfg-tab-settings");
renderSettings();
// 卡片已在前面组装并添加到页面，后续只需填充 `content`（即 main）
// 获取元素
const enableCustomSwitch = document.getElementById("enableCustomSwitch");
const enableCustomThumb = document.getElementById("enableCustomThumb");
const enableCustomContainer = document.getElementById(
"enableCustomContainer"
);
const enableDragSwitch = document.getElementById("enableDragSwitch");
const enableDragThumb = document.getElementById("enableDragThumb");
const enableDragContainer = document.getElementById("enableDragContainer");
const enableRightClickSwitch = document.getElementById("enableRightClickSwitch");
const enableRightClickThumb = document.getElementById("enableRightClickThumb");
const enableRightClickContainer = document.getElementById(
"enableRightClickContainer"
);
const enableWatermarkSwitch = document.getElementById("enableWatermarkSwitch");
const enableWatermarkThumb = document.getElementById("enableWatermarkThumb");
const enableWatermarkContainer = document.getElementById(
"enableWatermarkContainer"
);
const enableHideSettingsButtonSwitch = document.getElementById("enableHideSettingsButtonSwitch");
const enableHideSettingsButtonThumb = document.getElementById("enableHideSettingsButtonThumb");
const enableHideSettingsButtonContainer = document.getElementById(
"enableHideSettingsButtonContainer"
);
const materialPreview = document.getElementById("materialPreview");
const materialPicker = document.getElementById("materialPicker");
const userPreview = document.getElementById("userPreview");
const userPicker = document.getElementById("userPicker");
const saveBtn = document.getElementById("saveBtn");
const resetBtn = document.getElementById("resetBtn");
// 开关事件处理器工厂函数 - 消除重复代码
const createSwitchHandler = (
thumbElement,
containerElement,
callback
) => {
return function () {
const isChecked = this.checked;
const switchBg = containerElement.querySelector("span:nth-child(2)");
switchBg.style.backgroundColor = isChecked ? "#3b82f6" : "#e2e8f0";
thumbElement.style.left = isChecked ? "22px" : "2px";
if (typeof callback === "function") callback(isChecked);
};
};
// 修复自定义背景色开关功能
enableCustomSwitch.addEventListener(
"change",
createSwitchHandler(
enableCustomThumb,
enableCustomContainer,
(isChecked) => {
applyStyles();
// 动态显示或隐藏颜色选择器
const colorSettingsContainer = document.getElementById(
"colorSettingsContainer"
);
if (colorSettingsContainer) {
colorSettingsContainer.style.display = isChecked ? "block" : "none";
}
}
)
);
// 拖拽下载开关功能
enableDragSwitch.addEventListener(
"change",
createSwitchHandler(
enableDragThumb,
enableDragContainer,
(isChecked) => {
debugLog("拖拽下载开关状态变化:", isChecked);
}
)
);
// 右键下载功能
enableRightClickSwitch.addEventListener(
"change",
createSwitchHandler(
enableRightClickThumb,
enableRightClickContainer,
(isChecked) => {
debugLog("右键下载开关状态变化:", isChecked);
}
)
);
// 去水印功能开关
enableWatermarkSwitch.addEventListener(
"change",
createSwitchHandler(
enableWatermarkThumb,
enableWatermarkContainer,
(isChecked) => {
debugLog("去水印开关状态变化:", isChecked);
}
)
);
// 隐藏蜡笔小新设置按钮开关
enableHideSettingsButtonSwitch.addEventListener(
"change",
createSwitchHandler(
enableHideSettingsButtonThumb,
enableHideSettingsButtonContainer,
(isChecked) => {
debugLog("隐藏蜡笔小新开关状态变化:", isChecked);
// 立即更新设置按钮的显示状态
const settingsButton = document.getElementById('hb-settings-button');
if (settingsButton) {
settingsButton.style.display = isChecked ? 'none' : 'block';
}
}
)
);
// 颜色选择器工厂函数 - 简化版本，只保留拾色器功能
const createColorPickerHandler = (
pickerElement,
previewElement
) => {
// 预览元素点击打开拾色器
previewElement.addEventListener("click", () => pickerElement.click());
// 拾色器输入事件
pickerElement.addEventListener("input", (e) => {
previewElement.style.backgroundColor = e.target.value;
});
};
// 绑定材料水印颜色选择器
createColorPickerHandler(materialPicker, materialPreview);
// 绑定用户水印颜色选择器
createColorPickerHandler(userPicker, userPreview);
// 保存配置
// 初始化快捷键设置功能
function initHotkeySettings() {
// 快捷键配置变量
let currentHotkeyInput = null;
let currentHotkeyConfig = getHotkeysConfig();
let originalHotkeyValue = null;
// 默认快捷键配置
const defaultHotkeys = DEFAULT_HOTKEYS;
// 格式化快捷键显示文本
const formatHotkeyText = (config) => {
return `${config.ctrlCmd ? "Ctrl+" : ""}${config.shift ? "Shift+" : ""
}${config.alt ? "Alt+" : ""}${config.key.toUpperCase()}`;
};
// 处理输入框激活
const handleInputFocus = (input) => {
// 移除其他输入框的激活状态
document.querySelectorAll('input[id^="hotkey-"]').forEach((i) => {
i.style.borderColor = "#e2e8f0";
// 恢复其他输入框的原始值
if (i !== input && i.dataset.originalValue) {
i.value = i.dataset.originalValue;
}
});
// 保存原始值
originalHotkeyValue = input.value;
input.dataset.originalValue = originalHotkeyValue;
// 设置当前激活的输入框
currentHotkeyInput = input;
currentHotkeyInput.style.borderColor = "#ff284b";
currentHotkeyInput.value = "请按下新的快捷键组合...";
};
// 处理输入框失焦
const handleInputBlur = (input) => {
if (currentHotkeyInput === input) {
// 如果没有完成快捷键设置，恢复原始值
input.value = input.dataset.originalValue || "";
input.style.borderColor = "#e2e8f0";
currentHotkeyInput = null;
originalHotkeyValue = null;
}
};
// 处理键盘事件
const handleKeydown = (e) => {
if (currentHotkeyInput) {
e.preventDefault();
// 获取按键信息
const ctrlCmd = e.ctrlKey || e.metaKey;
const shift = e.shiftKey;
const alt = e.altKey;
const key = e.key.toLowerCase();
// 只允许字母、数字和部分符号
if (key && key.length === 1 && !e.code.includes("F") && key !== " ") {
// 构建快捷键配置
const hotkeyConfig = {
ctrlCmd,
shift,
alt,
key,
description: currentHotkeyConfig[currentHotkeyInput.dataset.hotkeyId].description,
};
// 更新输入框显示
currentHotkeyInput.value = formatHotkeyText(hotkeyConfig);
// 保存到临时配置
currentHotkeyConfig[currentHotkeyInput.dataset.hotkeyId] = hotkeyConfig;
// 移除激活状态和原始值标记
currentHotkeyInput.style.borderColor = "#e2e8f0";
delete currentHotkeyInput.dataset.originalValue;
currentHotkeyInput = null;
originalHotkeyValue = null;
}
}
};
// 处理重置按钮点击
const handleResetClick = (btn) => {
const hotkeyId = btn.id.replace("reset-hotkey-", "");
const input = document.getElementById(`hotkey-${hotkeyId}`);
// 获取默认配置
const defaultConfig = defaultHotkeys[hotkeyId];
// 更新输入框显示
input.value = formatHotkeyText(defaultConfig);
// 更新临时配置
currentHotkeyConfig[hotkeyId] = defaultConfig;
};
// 保存快捷键配置
const saveHotkeyConfig = () => {
if (typeof GM_setValue === "function") {
GM_setValue("hotkeysConfig", currentHotkeyConfig);
}
};
// 绑定事件监听器
// 输入框点击事件
document.querySelectorAll('input[id^="hotkey-"]').forEach((input) => {
input.addEventListener("click", () => handleInputFocus(input));
input.addEventListener("blur", () => handleInputBlur(input));
});
// 键盘事件
document.addEventListener("keydown", handleKeydown);
// 重置按钮事件
document.querySelectorAll('button[id^="reset-hotkey-"]').forEach((btn) => {
btn.addEventListener("click", () => handleResetClick(btn));
});
// 返回保存配置和清理监听的方法
return {
saveHotkeyConfig,
cleanup() {
document.removeEventListener("keydown", handleKeydown);
},
};
}
// 初始化快捷键设置
const hotkeyManager = initHotkeySettings();
saveBtn.addEventListener("click", () => {
// 从颜色选择器获取颜色值
const materialColor = materialPicker.value;
const userColor = userPicker.value;
// 由于使用了颜色选择器，颜色值一定是有效的HEX格式，所以可以跳过验证
if (!isValidColor(materialColor) || !isValidColor(userColor)) {
alert("请选择有效的颜色");
return;
}
const newConfig = {
enableCustom: enableCustomSwitch.checked,
enableDragDownload: enableDragSwitch.checked,
enableRightClickDownload: enableRightClickSwitch.checked,
enableRemoveWatermark: enableWatermarkSwitch.checked,
enableHideSettingsButton: enableHideSettingsButtonSwitch.checked,
materialColor: materialColor,
userColor: userColor,
};
saveConfig(newConfig);
window.__huabanSyncContextMenuGuard?.();
// 保存快捷键配置
hotkeyManager.saveHotkeyConfig();
applyStyles();
const originalText = saveBtn.textContent;
saveBtn.textContent = "已保存！";
setTimeout(
() => (saveBtn.textContent = originalText),
TIMING.switchTransition
);
setTimeout(closeConfig, TIMING.switchTransition + 200);
});
// 恢复默认
resetBtn.addEventListener("click", () => {
if (confirm("确定恢复默认设置吗？")) {
saveConfig(DEFAULT_CONFIG);
window.__huabanSyncContextMenuGuard?.();
// 恢复所有开关状态的工厂函数
const restoreSwitchState = (
switchEl,
thumbEl,
containerEl,
isEnabled
) => {
switchEl.checked = isEnabled;
const switchBg = containerEl.querySelector("span:nth-child(2)");
switchBg.style.backgroundColor = isEnabled
? "#3b82f6"
: "#e2e8f0";
thumbEl.style.left = isEnabled ? "22px" : "2px";
};
// 恢复所有开关状态
restoreSwitchState(
enableCustomSwitch,
enableCustomThumb,
enableCustomContainer,
DEFAULT_CONFIG.enableCustom
);
restoreSwitchState(
enableDragSwitch,
enableDragThumb,
enableDragContainer,
DEFAULT_CONFIG.enableDragDownload
);
restoreSwitchState(
enableRightClickSwitch,
enableRightClickThumb,
enableRightClickContainer,
DEFAULT_CONFIG.enableRightClickDownload
);
restoreSwitchState(
enableWatermarkSwitch,
enableWatermarkThumb,
enableWatermarkContainer,
DEFAULT_CONFIG.enableRemoveWatermark
);
restoreSwitchState(
enableHideSettingsButtonSwitch,
enableHideSettingsButtonThumb,
enableHideSettingsButtonContainer,
DEFAULT_CONFIG.enableHideSettingsButton
);
// 恢复颜色设置
materialPreview.style.backgroundColor = DEFAULT_CONFIG.materialColor;
materialPicker.value = DEFAULT_CONFIG.materialColor;
userPreview.style.backgroundColor = DEFAULT_CONFIG.userColor;
userPicker.value = DEFAULT_CONFIG.userColor;
// 应用设置
applyStyles();
const originalText = resetBtn.textContent;
resetBtn.textContent = "已恢复！";
setTimeout(
() => (resetBtn.textContent = originalText),
TIMING.switchTransition
);
}
});
let isConfigClosing = false;
const handleConfigEsc = (e) => {
if (e.key === "Escape") closeConfig();
};
const cleanupConfigListeners = () => {
document.removeEventListener("keydown", handleConfigEsc);
hotkeyManager.cleanup?.();
};
container.__huabanCleanup = cleanupConfigListeners;
// 关闭配置
function closeConfig() {
if (isConfigClosing) return;
isConfigClosing = true;
cleanupConfigListeners();
container.style.opacity = "0";
setTimeout(() => {
container.remove();
// 恢复页面滚动
document.body.style.overflow = "auto";
}, 200);
}
// 点击外部关闭
container.addEventListener("click", (e) => {
if (e.target === container) closeConfig();
});
// ESC键关闭
document.addEventListener("keydown", handleConfigEsc);
}
// ==================== 初始化 ====================
// 初始化
function init() {
// 注册油猴菜单命令
GM_registerMenuCommand("⚙️ 设置首选项", createConfigUI);
// 应用样式（包含动画效果）
applyStyles();
// 立即尝试渲染素材网站列表（不等待事件）
renderMaterialSitesOnSucaiPage();
// 使用MutationObserver监听DOM变化，确保元素出现后立即渲染
const materialSitesObserver = new MutationObserver(() => {
if (window.location.href === "https://huaban.com/pages/sucai") {
const layoutContent = document.getElementById("layout-content");
if (layoutContent) {
// 检查容器是否存在，如果不存在则渲染
if (!document.getElementById("material-sites-container")) {
renderMaterialSitesOnSucaiPage();
}
}
}
});
// 观察body的子元素变化，持续监听
materialSitesObserver.observe(document.body, {
childList: true,
subtree: true,
});
// 监听URL变化，处理单页应用导航
let lastUrl = window.location.href;
new MutationObserver(() => {
const currentUrl = window.location.href;
if (currentUrl !== lastUrl) {
lastUrl = currentUrl;
if (currentUrl === "https://huaban.com/pages/sucai") {
// 延迟执行，确保DOM已更新
setTimeout(() => {
renderMaterialSitesOnSucaiPage();
}, 500);
}
}
}).observe(document, {
subtree: true,
childList: true
});
// 页面加载完成后执行初始化
window.addEventListener("load", () => {
debugLog("页面加载完成，执行初始化");
setTimeout(() => {
applyStyles();
}, 500); // 延迟一点时间，确保页面完全渲染
});
// 监听页面变化
const observer = observePageChanges();
// 拦截拖拽和右键下载事件
interceptDragAndDownload();
// 在页面左下角添加设置按钮
addSettingsButtonToPage();
// 初始化图片hover面板
initImageHover();
// 去水印功能初始化
// 监听DOM变化，处理异步加载内容
const watermarkObserver = new MutationObserver(handleUpdate);
watermarkObserver.observe(document.body, { childList: true, subtree: true });
// 定期检查更新（处理URL变化等情况）
setInterval(handleUpdate, 1000);
// 清理函数
window.addEventListener("beforeunload", () => {
observer.disconnect();
watermarkObserver.disconnect();
});
// 在页面左下角添加设置按钮
function addSettingsButtonToPage() {
try {
// 检查是否已经添加过
if (document.getElementById('hb-settings-button')) return;
// 获取配置，检查是否需要隐藏设置按钮
const config = getConfig();
if (config.enableHideSettingsButton) {
debugLog("设置按钮已隐藏");
return;
}
// 创建设置按钮
const settingsButton = document.createElement('div');
settingsButton.id = 'hb-settings-button';
settingsButton.innerHTML = '
';
// 设置固定定位，左下角，距离顶部30%
settingsButton.style.cssText = `
position: fixed;
left: 1px;
top: 50%;
z-index: 9999;
cursor: pointer;
transition: transform 0.2s ease;
`;
// 添加悬停效果
settingsButton.addEventListener('mouseenter', () => {
settingsButton.style.transform = 'scale(1.05)';
});
settingsButton.addEventListener('mouseleave', () => {
settingsButton.style.transform = 'scale(1)';
});
// 添加点击事件，打开脚本设置
settingsButton.addEventListener('click', () => {
createConfigUI();
});
// 添加到页面
document.body.appendChild(settingsButton);
debugLog("设置按钮已添加到页面左下角");
} catch (error) {
console.error("添加设置按钮失败:", error);
}
}
// 添加快捷键处理
document.addEventListener("keydown", (e) => {
// 获取当前快捷键配置
const hotkeysConfig = getHotkeysConfig();
// 快速定位到搜索框
if (isHotkeyMatch(e, hotkeysConfig.searchFocus)) {
// 阻止默认行为
e.preventDefault();
// 查找搜索框并聚焦
const searchInput = document.getElementById("hb_search_input");
if (searchInput) {
searchInput.focus();
// 选中搜索框内容，方便直接输入新内容
searchInput.select();
// 查找data-button-name="搜索框"的元素并修改其:before伪元素背景色
const searchButton = document.querySelector(
'[data-button-name="搜索框"]'
);
if (searchButton) {
// 添加类名以便修改伪元素样式
searchButton.classList.add("hb-search-focused");
// 8秒后移除类名，恢复原来的样式
setTimeout(() => {
searchButton.classList.remove("hb-search-focused");
}, 8000);
}
}
}
// 以图搜索功能
if (isHotkeyMatch(e, hotkeysConfig.imageSearch)) {
// 查找以图搜索按钮
const imageSearchButton = document.querySelector(
'[data-button-name="以图搜索按钮"]'
);
if (imageSearchButton) {
// 如果是第一次按下Ctrl+V/Cmd+V
if (!isImageSearchMode) {
// 阻止默认的粘贴行为
e.preventDefault();
// 模拟点击以图搜索按钮
imageSearchButton.click();
// 设置状态为true，表示已进入图片搜索模式
isImageSearchMode = true;
// 3秒后自动重置状态（如果用户没有进行第二次操作）
setTimeout(() => {
isImageSearchMode = false;
}, 3000);
} else {
// 如果是第二次按下Ctrl+V/Cmd+V，恢复正常粘贴功能
// 不阻止默认行为，让用户可以粘贴图片
// 重置状态，以便下次使用
isImageSearchMode = false;
}
}
}
// 打开设置界面
if (isHotkeyMatch(e, hotkeysConfig.openSettings)) {
// 阻止默认行为
e.preventDefault();
// 调用设置首选项函数
createConfigUI();
}
});
}
init();
})();
';
psBtn.addEventListener('mouseenter', () => { psBtn.style.transform = 'scale(1.1)'; });
psBtn.addEventListener('mouseleave', () => { psBtn.style.transform = 'scale(1)'; });
psBtn.addEventListener('click', async (e) => {
e.stopPropagation();
const isNewDoc = e.altKey;
const name = img.alt || '花瓣图片';
const clipboardStr = `PS_IMPORTER:${url}|||${name}${isNewDoc ? '|||NEW_DOC' : ''}`;
try { GM_setClipboard(clipboardStr); } catch { await navigator.clipboard.writeText(clipboardStr); }
showToast(isNewDoc ? '已发送至PS (新建文件)' : '已发送至PS 
';
psBtn.addEventListener('mouseenter', () => { psBtn.style.transform = 'scale(1.05)'; });
psBtn.addEventListener('mouseleave', () => { psBtn.style.transform = 'scale(1)'; });
psBtn.addEventListener('click', async (e) => {
e.stopPropagation();
const isNewDoc = e.altKey;
const name = title || img.alt || '花瓣图片';
const clipboardStr = `PS_IMPORTER:${url}|||${name}${isNewDoc ? '|||NEW_DOC' : ''}`;
try { GM_setClipboard(clipboardStr); } catch { await navigator.clipboard.writeText(clipboardStr); }
showToast(isNewDoc ? '已发送至PS (新建文件)' : '已发送至PS 