麦芽田备注图片下载器
// ==UserScript==
// @name 麦芽田备注图片下载器
// @namespace http://tampermonkey.net/
// @version 0.2
// @description 一键下载麦芽田订单备注中的所有图片
// @author @Cland
// @match *://*.maiyatian.com/*
// @grant GM_download
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_registerMenuCommand
// ==/UserScript==
(function() {
'use strict';
// 添加油猴脚本设置
let isWidthAdjustEnabled = GM_getValue('isWidthAdjustEnabled', true); // 默认开启
// 注册菜单命令
GM_registerMenuCommand('✅ 开启宽度调节', () => {
isWidthAdjustEnabled = true;
GM_setValue('isWidthAdjustEnabled', true);
location.reload(); // 刷新页面使设置生效
});
GM_registerMenuCommand('❌ 关闭宽度调节', () => {
isWidthAdjustEnabled = false;
GM_setValue('isWidthAdjustEnabled', false);
location.reload(); // 刷新页面使设置生效
});
// 修改宽度调节滑块功能
function addWidthAdjustSlider() {
if (!isWidthAdjustEnabled) return;
// 获取保存的宽度设置
const savedWidth = GM_getValue('savedWidth', 25);
// 创建滑块容器
const sliderContainer = document.createElement('div');
sliderContainer.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
transform: none;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 10000;
width: 300px;
`;
// 创建标题
const title = document.createElement('div');
title.textContent = '调整区域宽度';
title.style.cssText = `
font-weight: bold;
margin-bottom: 15px;
text-align: center;
`;
// 创建滑块
const slider = document.createElement('input');
slider.type = 'range';
slider.min = '20';
slider.max = '80';
slider.value = savedWidth;
slider.style.cssText = `
width: 100%;
margin: 10px 0;
`;
// 创建数值显示
const valueDisplay = document.createElement('div');
valueDisplay.style.cssText = `
text-align: center;
margin: 10px 0;
color: #666;
`;
// 更新显示的数值和实际宽度
function updateWidth(value) {
const rightArea = document.querySelector('.main-small.fn-right');
const leftArea = document.querySelector('.main-big.main-position-left.block-order.page-order');
if (rightArea && leftArea) {
rightArea.style.width = `${value}%`;
leftArea.style.width = `${100 - value}%`;
valueDisplay.textContent = `右侧宽度: ${value}% / 左侧宽度: ${100 - value}%`;
}
}
// 使用防抖函数优化事件处理
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
// 优化 MutationObserver
const observer = new MutationObserver(
debounce((mutations, obs) => {
checkAndAddButton();
}, 100)
);
// 优化滑块事件监听
slider.addEventListener('input', debounce((e) => {
updateWidth(e.target.value);
}, 16)); // 约60fps
// 创建最小化按钮
const minimizeBtn = document.createElement('button');
minimizeBtn.textContent = '最小化';
minimizeBtn.style.cssText = `
position: absolute;
top: 10px;
right: 10px;
padding: 2px 8px;
background: none;
border: none;
color: #666;
cursor: pointer;
font-size: 12px;
`;
// 创建最小化后的按钮
const expandBtn = document.createElement('button');
expandBtn.textContent = '📐 调整宽度';
expandBtn.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
padding: 8px 16px;
background: #2DAED6;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
z-index: 10000;
display: none;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
`;
// 添加最小化/展开功能
minimizeBtn.addEventListener('click', () => {
sliderContainer.style.display = 'none';
expandBtn.style.display = 'block';
});
expandBtn.addEventListener('click', () => {
sliderContainer.style.display = 'block';
expandBtn.style.display = 'none';
});
// 创建保存按钮
const saveBtn = document.createElement('button');
saveBtn.textContent = '保存设置';
saveBtn.style.cssText = `
display: block;
margin: 15px auto 0;
padding: 6px 20px;
background: #2DAED6;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s;
`;
// 添加保存按钮的悬停效果
saveBtn.addEventListener('mouseenter', () => {
saveBtn.style.background = '#249cc0';
});
saveBtn.addEventListener('mouseleave', () => {
saveBtn.style.background = '#2DAED6';
});
// 添加保存功能
saveBtn.addEventListener('click', () => {
const currentValue = slider.value;
GM_setValue('savedWidth', currentValue);
// 显示保存成功提示
const toast = document.createElement('div');
toast.textContent = '✅ 宽度设置已保存';
toast.style.cssText = `
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 8px 16px;
border-radius: 4px;
font-size: 14px;
z-index: 10001;
`;
document.body.appendChild(toast);
// 2秒后移除提示
setTimeout(() => {
toast.remove();
}, 2000);
});
// 组装滑块窗口
sliderContainer.appendChild(title);
sliderContainer.appendChild(slider);
sliderContainer.appendChild(valueDisplay);
sliderContainer.appendChild(saveBtn); // 添加保存按钮
sliderContainer.appendChild(minimizeBtn);
// 添加到页面
document.body.appendChild(sliderContainer);
document.body.appendChild(expandBtn);
// 添加样式以确保区域平滑过渡
const style = document.createElement('style');
style.textContent = `
.main-small.fn-right,
.main-big.main-position-left.block-order.page-order {
transition: width 0.3s ease-in-out;
}
`;
document.head.appendChild(style);
// 初始化显示时使用保存的宽度
updateWidth(savedWidth);
}
// 修改监听逻辑，不再在找到元素后立即断开观察
const observer = new MutationObserver((mutations, obs) => {
checkAndAddButton();
});
// 开始观察
observer.observe(document.body, {
childList: true,
subtree: true
});
function checkAndAddButton() {
// 缓存 DOM 查询结果
const remarkElements = document.querySelectorAll('.order-goods .order-remark');
if (!remarkElements.length) return; // 提前返回
remarkElements.forEach(remarkElement => {
const titleElement = remarkElement.querySelector('.order-remark-title');
if (!titleElement || titleElement.textContent.trim() !== '用户备注') return; // 提前返回
const contentElement = remarkElement.querySelector('.order-remark-content');
if (!contentElement) return; // 提前返回
// 使用 dataset 标记已处理过的元素
if (!remarkElement.dataset.processed) {
if (!titleElement.querySelector('.download-remark-images')) {
addDownloadButton(titleElement);
}
if (!remarkElement.querySelector('.remark-preview-container')) {
addImagePreviewArea(remarkElement, contentElement);
}
colorizeRemarkText(contentElement);
updateFloatingPreview(contentElement);
remarkElement.dataset.processed = 'true';
}
});
// 添加隐藏打印贺卡按钮的功能
hideCardPrintButton();
}
function addDownloadButton(titleElement) {
// 创建下载按钮
const downloadBtn = document.createElement('button');
downloadBtn.innerHTML = '下载所有备注图片';
downloadBtn.className = 'download-remark-images';
downloadBtn.style.cssText = `
margin-left: 10px;
padding: 2px 8px;
color: #2DAED6;
border: 1px solid #2DAED6;
border-radius: 3px;
background: white;
cursor: pointer;
`;
// 添加点击事件
downloadBtn.addEventListener('click', function() {
const remarkElement = titleElement.closest('.order-remark');
downloadAllImages(remarkElement);
});
// 将按钮添加到标题元素后面
titleElement.appendChild(downloadBtn);
}
function addImagePreviewArea(remarkElement, contentElement) {
// 创建整个预览区域的容器
const previewContainer = document.createElement('div');
previewContainer.className = 'remark-preview-container';
previewContainer.style.cssText = `
margin: 10px 0;
background-color: #fff;
border-radius: 4px;
padding: 15px;
`;
// 创建图片预览区域
const previewArea = document.createElement('div');
previewArea.className = 'remark-images-preview';
previewArea.style.cssText = `
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 15px;
`;
// 解析备注内容
const text = contentElement.textContent;
const imageMatches = text.matchAll(/\[(.*?)\](https?:\/\/[^\s]+?\.(jpg|jpeg|png|gif))/g);
// 处理图片
const images = Array.from(imageMatches);
images.forEach(([_, label, url]) => {
const imageContainer = document.createElement('div');
imageContainer.style.cssText = `
aspect-ratio: 1;
position: relative;
`;
const image = document.createElement('img');
image.src = url;
image.style.cssText = `
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 4px;
cursor: pointer;
border: 1px solid #E7E7E7;
`;
const labelDiv = document.createElement('div');
labelDiv.textContent = label;
labelDiv.style.cssText = `
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.6);
color: white;
font-size: 12px;
padding: 4px;
text-align: center;
border-radius: 0 0 4px 4px;
`;
// 为定制花束图片和其他定制要求图片添加下载按钮
if (label.includes('定制花束图片') || label.includes('其他定制要求图片')) {
const downloadBtn = document.createElement('button');
downloadBtn.textContent = '⬇️';
downloadBtn.style.cssText = `
position: absolute;
top: 8px;
right: 8px;
padding: 4px 8px;
background: rgba(45, 174, 214, 0.9);
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
z-index: 2;
transition: background 0.2s;
`;
// 悬停效果
downloadBtn.addEventListener('mouseenter', () => {
downloadBtn.style.background = 'rgba(45, 174, 214, 1)';
});
downloadBtn.addEventListener('mouseleave', () => {
downloadBtn.style.background = 'rgba(45, 174, 214, 0.9)';
});
// 添加点击事件
downloadBtn.addEventListener('click', (e) => {
e.stopPropagation(); // 防止触发图片预览
const filename = `${label}.${url.split('.').pop()}`;
GM_download({
url: url,
name: filename,
saveAs: false,
onerror: (error) => console.error('下载失败:', error)
});
});
imageContainer.appendChild(downloadBtn);
}
imageContainer.appendChild(image);
imageContainer.appendChild(labelDiv);
previewArea.appendChild(imageContainer);
// 点击图片放大预览
image.addEventListener('click', () => {
const modal = createImageModal(url, label);
document.body.appendChild(modal);
});
});
// 组装所有元素
previewContainer.appendChild(previewArea);
contentElement.parentNode.insertBefore(previewContainer, contentElement.nextSibling);
}
function createImageModal(url, label) {
const modal = document.createElement('div');
modal.style.cssText = `
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.8);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
cursor: pointer;
`;
const img = document.createElement('img');
img.src = url;
img.style.cssText = `
max-width: 90vw;
max-height: 80vh;
object-fit: contain;
margin-bottom: 15px;
`;
const downloadBtn = document.createElement('button');
downloadBtn.textContent = '下载图片';
downloadBtn.style.cssText = `
padding: 8px 16px;
background: #2DAED6;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
`;
downloadBtn.addEventListener('click', (e) => {
e.stopPropagation();
const filename = `${label}.${url.split('.').pop()}`;
GM_download({
url: url,
name: filename,
saveAs: false,
onerror: (error) => console.error('下载失败:', error)
});
});
modal.appendChild(img);
modal.appendChild(downloadBtn);
modal.addEventListener('click', () => modal.remove());
return modal;
}
function downloadAllImages(remarkElement) {
if (!remarkElement) return;
const remarkContent = remarkElement.querySelector('.order-remark-content');
if (!remarkContent) return;
// 使用新的正则表达式匹配带标签的图片URL
const text = remarkContent.textContent;
const matches = text.matchAll(/\[(.*?)\](https?:\/\/[^\s]+?\.(jpg|jpeg|png|gif))/g);
const urlsWithLabels = Array.from(matches, match => ({
label: match[1],
url: match[2]
}));
if (!urlsWithLabels.length) {
alert('未找到可下载的图片链接');
return;
}
// 下载所有找到的图片
urlsWithLabels.forEach(({label, url}, index) => {
const filename = `${label}_${index + 1}.${url.split('.').pop()}`;
GM_download({
url: url,
name: filename,
saveAs: false,
onerror: (error) => console.error('下载失败:', error)
});
});
}
// 修改文本着色函数
function colorizeRemarkText(contentElement) {
let text = contentElement.textContent;
// 保存原始文本
contentElement.setAttribute('data-original-text', text);
// 创建一个总容器
const mainContainer = document.createElement('div');
mainContainer.style.cssText = `
display: flex;
flex-direction: column;
gap: 12px;
`;
// 创建格式化备注容器
const formattedContainer = document.createElement('div');
formattedContainer.style.cssText = `
display: flex;
flex-direction: column;
gap: 8px;
`;
// 解析备注内容
const parsedNote = parseNote(text);
// 遍历所有标签（包括无标签）
for (const [tag, contents] of Object.entries(parsedNote)) {
contents.forEach(content => {
if (content) {
// 创建每行的容器
const lineContainer = document.createElement('div');
lineContainer.style.cssText = `
display: flex;
align-items: flex-start;
gap: 8px;
`;
// 创建标签元素（不可复制）
const labelElement = document.createElement('div');
labelElement.style.cssText = `
user-select: none;
background: #f5f5f5;
padding: 2px 8px;
border-radius: 4px;
font-size: 13px;
white-space: nowrap;
width: 120px;
text-align: center;
flex-shrink: 0;
`;
// 根据标签类型设置颜色
if (tag.includes('图片') || tag.includes('定制花束') || tag.includes('其他定制要求')) {
labelElement.style.color = '#999999';
} else if (tag.includes('其他定制备注') || tag.includes('贺卡') || tag === '无标签') {
labelElement.style.color = '#000000';
}
labelElement.textContent = `[${tag}]`;
// 创建内容元素
const contentElement = document.createElement('div');
contentElement.style.cssText = `
flex: 1;
word-break: break-all;
`;
contentElement.textContent = content.trim();
// 根据标签类型设置内容颜色
if (tag.includes('图片') || tag.includes('定制花束') || tag.includes('其他定制要求')) {
contentElement.style.color = '#999999';
} else if (tag.includes('其他定制备注') || tag.includes('贺卡') || tag === '无标签') {
contentElement.style.color = '#000000';
}
// 组装每行的元素
lineContainer.appendChild(labelElement);
lineContainer.appendChild(contentElement);
formattedContainer.appendChild(lineContainer);
}
});
}
// 添加原始备注显示
const originalNoteContainer = document.createElement('div');
originalNoteContainer.style.cssText = `
margin-top: 12px;
padding: 8px 12px;
background-color: #f8f8f8;
border-radius: 4px;
color: #999;
font-size: 12px;
line-height: 1.4;
`;
// 添加标题
const originalNoteTitle = document.createElement('div');
originalNoteTitle.style.cssText = `
font-weight: bold;
margin-bottom: 4px;
color: #666;
`;
originalNoteTitle.textContent = '原始备注：';
// 添加内容
const originalNoteContent = document.createElement('div');
originalNoteContent.textContent = text;
// 组装原始备注
originalNoteContainer.appendChild(originalNoteTitle);
originalNoteContainer.appendChild(originalNoteContent);
// 组装所有内容
mainContainer.appendChild(formattedContainer);
mainContainer.appendChild(originalNoteContainer);
// 清空原有内容并添加新的格式化内容
contentElement.textContent = '';
contentElement.appendChild(mainContainer);
}
// 添加解析备注的函数
function parseNote(noteText) {
const PATTERNS = {
'定制花束图片': /\[定制花束图片\](https?:\/\/[^\s\[]+?\.(jpg|jpeg|png|gif)|[^\[]*?)(?=\[|$)/g,
'其他定制要求图片': /\[其他定制要求图片\](https?:\/\/[^\s\[]+?\.(jpg|jpeg|png|gif)|[^\[]*?)(?=\[|$)/g,
'贺卡内容': /\[贺卡内容\]([^\[]*?)(?=\[|$)/g,
'其他定制备注': /\[其他定制备注\]([^\[]*?)(?=\[|$)/g
};
let remainingText = noteText;
const result = {};
// 解析所有标签内容
for (const [key, pattern] of Object.entries(PATTERNS)) {
result[key] = [];
remainingText = remainingText.replace(pattern, (match, content) => {
if (content && content.trim()) {
result[key].push(content.trim());
}
return ''; // 移除已匹配的内容
});
}
// 处理剩余的无标签文本
remainingText = remainingText.trim();
if (remainingText) {
// 检查是否已经存在相同的无标签内容
if (!result['无标签']) {
result['无标签'] = [];
}
if (!result['无标签'].includes(remainingText)) {
result['无标签'].push(remainingText);
}
}
return result;
}
// 新增更新预览内容的函数
function updateFloatingPreview(contentElement) {
let floatingWindow = document.querySelector('.floating-remark-preview');
let toggleBtn = document.querySelector('.floating-preview-toggle');
// 如果预览窗口不存在，则创建
if (!floatingWindow) {
const { window: newWindow, button: newButton } = createFloatingPreview();
floatingWindow = newWindow;
toggleBtn = newButton;
}
// 获取原始文本内容，而不是处理后的内容
const originalText = contentElement.getAttribute('data-original-text') || contentElement.textContent;
// 更新预览内容
const content = floatingWindow.querySelector('.preview-content');
if (content) {
updatePreviewContent(content, originalText);
}
}
// 修改创建预览窗口的函数
function createFloatingPreview() {
// 创建悬浮窗触发按钮
const toggleBtn = document.createElement('button');
toggleBtn.className = 'floating-preview-toggle';
toggleBtn.innerHTML = '📝 备注预览';
toggleBtn.style.cssText = `
position: fixed;
right: 20px;
top: 80px;
z-index: 9998;
padding: 8px 16px;
background: #2DAED6;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
user-select: none;
`;
// 创建悬浮预览窗口
const floatingWindow = document.createElement('div');
floatingWindow.className = 'floating-remark-preview';
floatingWindow.style.cssText = `
position: fixed;
right: 20px;
top: 130px;
width: 400px;
max-height: 70vh;
background: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 9997;
overflow: hidden;
display: none;
transition: all 0.3s ease;
`;
// 创建预览窗口头部
const header = document.createElement('div');
header.style.cssText = `
padding: 12px 16px;
background: #f5f5f5;
border-bottom: 1px solid #e8e8e8;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
cursor: move;
user-select: none;
`;
header.innerHTML = '<span>备注预览</span>';
// 修改内容容器，添加类名以便后续更新
const content = document.createElement('div');
content.className = 'preview-content';
content.style.cssText = `
padding: 16px;
overflow-y: auto;
max-height: calc(70vh - 45px);
`;
// 组装窗口
floatingWindow.appendChild(header);
floatingWindow.appendChild(content);
// 添加展开/折叠功能
let isExpanded = false;
toggleBtn.addEventListener('click', () => {
isExpanded = !isExpanded;
floatingWindow.style.display = isExpanded ? 'block' : 'none';
toggleBtn.innerHTML = isExpanded ? '📝 关闭预览' : '📝 备注预览';
});
// 添加到页面
document.body.appendChild(toggleBtn);
document.body.appendChild(floatingWindow);
// 添加拖拽功能（同时支持按钮和窗口的拖拽）
let isDragging = false;
let currentX;
let currentY;
let initialX;
let initialY;
let xOffset = 0;
let yOffset = 0;
let dragTarget = null;
function dragStart(e, target) {
initialX = e.clientX - xOffset;
initialY = e.clientY - yOffset;
dragTarget = target;
isDragging = true;
}
function drag(e) {
if (isDragging) {
e.preventDefault();
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;
xOffset = currentX;
yOffset = currentY;
setTranslate(currentX, currentY, dragTarget);
// 如果拖动的是按钮，同时更新窗口位置
if (dragTarget === toggleBtn) {
const windowX = currentX + (parseFloat(floatingWindow.style.right) || 20);
const windowY = currentY + (parseFloat(floatingWindow.style.top) || 130);
setTranslate(windowX, windowY, floatingWindow);
}
}
}
function dragEnd() {
initialX = currentX;
initialY = currentY;
isDragging = false;
dragTarget = null;
}
function setTranslate(xPos, yPos, el) {
el.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`;
}
// 为按钮添加拖拽事件
toggleBtn.addEventListener('mousedown', (e) => dragStart(e, toggleBtn));
// 为窗口头部添加拖拽事件
header.addEventListener('mousedown', (e) => dragStart(e, floatingWindow));
// 添加全局拖拽事件监听
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', dragEnd);
// 返回窗口和按钮引用
return { window: floatingWindow, button: toggleBtn };
}
// 修改更新预览内容的函数
function updatePreviewContent(previewContent, originalText) {
// 清空现有内容
previewContent.textContent = '';
// 创建预览容器
const previewContainer = document.createElement('div');
previewContainer.className = 'remark-preview-container';
previewContainer.style.cssText = `
background-color: #fff;
border-radius: 4px;
`;
// 使用原始文本进行解析
const text = originalText;
// 创建图片预览区域
const previewArea = document.createElement('div');
previewArea.className = 'remark-images-preview';
previewArea.style.cssText = `
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin-bottom: 12px;
`;
// 处理图片显示
const imageMatches = text.matchAll(/\[(.*?(?:图片|定制花束|其他定制要求).*?)\](https?:\/\/[^\s]+?\.(jpg|jpeg|png|gif))/g);
const images = Array.from(imageMatches);
if (images.length > 0) {
images.forEach(([_, label, url]) => {
const imageContainer = document.createElement('div');
imageContainer.style.cssText = `
aspect-ratio: 1;
position: relative;
`;
const image = document.createElement('img');
image.src = url;
image.style.cssText = `
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 4px;
cursor: pointer;
border: 1px solid #E7E7E7;
`;
const labelDiv = document.createElement('div');
labelDiv.textContent = label;
labelDiv.style.cssText = `
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.6);
color: white;
font-size: 12px;
padding: 4px;
text-align: center;
border-radius: 0 0 4px 4px;
`;
// 为定制花束图片和其他定制要求图片添加下载按钮
if (label.includes('定制花束图片') || label.includes('其他定制要求图片')) {
const downloadBtn = document.createElement('button');
downloadBtn.textContent = '⬇️';
downloadBtn.style.cssText = `
position: absolute;
top: 8px;
right: 8px;
padding: 4px 8px;
background: rgba(45, 174, 214, 0.9);
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
z-index: 2;
transition: background 0.2s;
`;
// 悬停效果
downloadBtn.addEventListener('mouseenter', () => {
downloadBtn.style.background = 'rgba(45, 174, 214, 1)';
});
downloadBtn.addEventListener('mouseleave', () => {
downloadBtn.style.background = 'rgba(45, 174, 214, 0.9)';
});
// 添加点击事件
downloadBtn.addEventListener('click', (e) => {
e.stopPropagation(); // 防止触发图片预览
const filename = `${label}.${url.split('.').pop()}`;
GM_download({
url: url,
name: filename,
saveAs: false,
onerror: (error) => console.error('下载失败:', error)
});
});
imageContainer.appendChild(downloadBtn);
}
imageContainer.appendChild(image);
imageContainer.appendChild(labelDiv);
previewArea.appendChild(imageContainer);
// 点击图片放大预览
image.addEventListener('click', () => {
const modal = createImageModal(url, label);
document.body.appendChild(modal);
});
});
previewContainer.appendChild(previewArea);
}
// 创建文本内容容器
const mainContainer = document.createElement('div');
mainContainer.style.cssText = `
display: flex;
flex-direction: column;
gap: 12px;
`;
// 解析备注内容
const parsedNote = parseNote(text);
// 创建格式化备注容器
const formattedContainer = document.createElement('div');
formattedContainer.style.cssText = `
display: flex;
flex-direction: column;
gap: 8px;
`;
// 遍历所有标签（包括无标签）
for (const [tag, contents] of Object.entries(parsedNote)) {
contents.forEach(content => {
if (content) {
const lineContainer = document.createElement('div');
lineContainer.style.cssText = `
display: flex;
align-items: flex-start;
gap: 8px;
`;
const labelElement = document.createElement('div');
labelElement.style.cssText = `
user-select: none;
background: #f5f5f5;
padding: 2px 8px;
border-radius: 4px;
font-size: 13px;
white-space: nowrap;
width: 120px;
text-align: center;
flex-shrink: 0;
`;
if (tag.includes('图片') || tag.includes('定制花束') || tag.includes('其他定制要求')) {
labelElement.style.color = '#999999';
} else if (tag.includes('其他定制备注') || tag.includes('贺卡') || tag === '无标签') {
labelElement.style.color = '#000000';
}
labelElement.textContent = `[${tag}]`;
const contentElement = document.createElement('div');
contentElement.style.cssText = `
flex: 1;
word-break: break-all;
`;
contentElement.textContent = content.trim();
if (tag.includes('图片') || tag.includes('定制花束') || tag.includes('其他定制要求')) {
contentElement.style.color = '#999999';
} else if (tag.includes('其他定制备注') || tag.includes('贺卡') || tag === '无标签') {
contentElement.style.color = '#000000';
}
lineContainer.appendChild(labelElement);
lineContainer.appendChild(contentElement);
formattedContainer.appendChild(lineContainer);
}
});
}
// 添加原始备注显示
const originalNoteContainer = document.createElement('div');
originalNoteContainer.style.cssText = `
margin-top: 12px;
padding: 8px 12px;
background-color: #f8f8f8;
border-radius: 4px;
color: #999;
font-size: 12px;
line-height: 1.4;
`;
// 添加标题
const originalNoteTitle = document.createElement('div');
originalNoteTitle.style.cssText = `
font-weight: bold;
margin-bottom: 4px;
color: #666;
`;
originalNoteTitle.textContent = '原始备注：';
// 添加内容
const originalNoteContent = document.createElement('div');
originalNoteContent.textContent = text;
// 组装原始备注
originalNoteContainer.appendChild(originalNoteTitle);
originalNoteContainer.appendChild(originalNoteContent);
// 组装所有内容
mainContainer.appendChild(formattedContainer);
mainContainer.appendChild(originalNoteContainer);
previewContainer.appendChild(mainContainer);
previewContent.appendChild(previewContainer);
}
// 新增隐藏打印贺卡按钮的函数
function hideCardPrintButton() {
// 添加样式到页面
const style = document.createElement('style');
style.textContent = `
.order-remark-print {
display: none !important;
}
`;
// 避免重复添加样式
if (!document.querySelector('#hide-print-button-style')) {
style.id = 'hide-print-button-style';
document.head.appendChild(style);
}
}
// 修改页面加载时的宽度设置
function initSavedWidth() {
const savedWidth = GM_getValue('savedWidth', 25);
const rightArea = document.querySelector('.main-small.fn-right');
const leftArea = document.querySelector('.main-big.main-position-left.block-order.page-order');
if (rightArea && leftArea) {
rightArea.style.width = `${savedWidth}%`;
leftArea.style.width = `${100 - savedWidth}%`;
}
}
// 初始检查
checkAndAddButton();
// 监听 PJAX 件
document.addEventListener('pjax:complete', checkAndAddButton);
window.addEventListener('popstate', checkAndAddButton);
window.addEventListener('load', checkAndAddButton);
// 初始化宽度调节功能
addWidthAdjustSlider();
// 脚本初始化时调用
window.addEventListener('load', () => {
initSavedWidth();
});
// 统一管理样式
const STYLES = {
container: `
display: flex;
flex-direction: column;
gap: 8px;
`,
button: `
margin-left: 10px;
padding: 2px 8px;
color: #2DAED6;
border: 1px solid #2DAED6;
border-radius: 3px;
background: white;
cursor: pointer;
`,
// ... 其他样式
};
// 使用样式
element.style.cssText = STYLES.container;
// 添加全局错误处理
window.addEventListener('error', (error) => {
console.error('脚本运行错误:', error);
});
// 添加函数错误处理
function safeExecute(fn, ...args) {
try {
return fn(...args);
} catch (error) {
console.error('函数执行错误:', error);
return null;
}
}
// 延迟加载非关键功能
window.addEventListener('load', () => {
setTimeout(() => {
initSavedWidth();
addWidthAdjustSlider();
}, 0);
});
// 添加清理函数
function cleanup() {
observer.disconnect();
// 移除所有事件监听器
// 移除所有创建的DOM元素
}
// 在页面卸载时清理
window.addEventListener('unload', cleanup);
// 批量处理存储操作
const storage = {
get(key, defaultValue) {
try {
return GM_getValue(key, defaultValue);
} catch (error) {
console.error('获取存储值失败:', error);
return defaultValue;
}
},
set(key, value) {
try {
GM_setValue(key, value);
return true;
} catch (error) {
console.error('设置存储值失败:', error);
return false;
}
}
};
})();