yiwaima / ERP图片放大显示

Published:

Version: 3.4+d864194 updated

Summary: 监控ERP系统中特定POST请求并放大显示图片,支持拖动、按网址位置记忆、尺寸调整、自适应字体和智能滑动显示

Homepage: https://openuserjs.org/scripts/yiwaima/ERP图片放大显示

Support: https://github.com/yiwaima/erp-image-zoom-display/issues

License: MIT

Antifeature: unspecified

ERP图片放大显示脚本信息

基本信息

属性 说明
脚本名称 ERP图片放大显示
作者 yiwaima
版本 3.2
许可证 MIT
适用网站 https://www.erp321.com/, https://ww.erp321.com/
脚本类型 Tampermonkey 用户脚本
OpenUserJS地址 https://openuserjs.org/scripts/yiwaima/ERP图片放大显示
支持URL https://github.com/yiwaima/erp-image-zoom-display/issues
应用图标 https://src.erp321.com/epaas-container/static/enterprise_icon.91c92482.png

功能描述

该脚本是一个为ERP系统设计的图片放大显示工具,主要功能包括:

1. POST请求监控

  • 监控ERP系统中特定的POST请求
  • 识别包含__CALLBACKPARAMMethodCheckQtyLoadDataToJSON的请求
  • 支持监控XMLHttpRequestfetch请求

2. 图片提取与放大显示

  • 从请求响应中提取产品图片URL
  • 在页面右上角放大显示产品图片
  • 图片自动适应显示框大小,保持比例

3. 交互式图片放大框

  • 支持拖动调整显示位置
  • 拖动时自动提高层级,避免被其他元素遮挡
  • 拖动结束后自动恢复层级

4. 位置与尺寸记忆功能

  • 按网址保存图片放大框的位置和尺寸
  • 使用localStorage持久化存储位置和尺寸信息
  • 下次访问同一网址时自动恢复上次位置和尺寸

5. 智能提示信息

  • 根据产品名称识别金镶嵌产品,显示"金镶嵌,注意包装"提示
  • 根据产品价格识别贵重物品,显示"货品贵重,注意包装"提示
  • 提示信息背景透明度30%,美观不刺眼
  • 提示信息位置固定在图片放大框顶部

6. 尺寸调整功能

  • 放大缩小切换按钮:点击可在100x100和自定义尺寸之间切换
  • 尺寸加按钮:点击后图片长宽各增加50px
  • 尺寸减按钮:点击后图片长宽各减少50px
  • 尺寸限制:最小150x150px

7. 自适应字体大小

  • 提示信息字体大小随图片框尺寸自动调整
  • 使用平方根缩放算法,缩小更平缓
  • 最小字体12px,确保清晰可见
  • 最大字体24px,避免过大影响美观

8. 智能滑动显示

  • 高度大于宽度时:上下滑动,宽度100%填充容器,高度自适应
  • 宽度大于高度时:居中裁剪显示,高度100%填充容器,裁剪两边保留中间
  • 自动滚动到图片中间位置,提供最佳视觉体验
  • 平滑滚动过渡效果

9. 优化的滚动体验

  • 隐藏默认滚动条,提升视觉美观度
  • 支持鼠标滚轮和触摸板滚动
  • 滚动区域内置在图片窗口内

10. 价格变动提示

  • 自动检查产品价格变动记录
  • 向ERP系统发送POST请求获取产品日志
  • 提取成本价变动信息:"成本价:xxx->xxx"
  • 显示红字提示:"价格有变动: xxx->xxx"
  • 从cookie中自动提取认证信息
  • 支持监控特定产品编码的价格变动

技术实现

1. 请求监控实现

// 重写XMLHttpRequest的send方法
XMLHttpRequest.prototype.send = function(data) {
    // 监控相关请求...
    // 调用原始send方法
    originalXHRSend.call(xhr, data);
};

// 重写window.fetch函数
window.fetch = async function(url, options) {
    // 监控相关请求...
    // 发送原始请求
    const response = await originalFetch.call(this, url, options);
    // 处理响应...
    return response;
};

2. 图片放大框创建

function createImageDisplay() {
    const display = document.createElement('div');
    // 设置样式和初始位置
    // 添加拖动功能
    // 添加提示信息容器
    // 添加图片元素
    document.body.appendChild(display);
    return display;
}

3. 位置记忆实现

// 保存位置
function saveDisplayPosition(top, right) {
    const baseUrl = getBaseUrl();
    const positions = JSON.parse(localStorage.getItem('erpImageDisplayPositions') || '{}');
    positions[baseUrl] = { top, right };
    localStorage.setItem('erpImageDisplayPositions', JSON.stringify(positions));
}

// 加载位置
function loadDisplayPosition() {
    const baseUrl = getBaseUrl();
    const positions = JSON.parse(localStorage.getItem('erpImageDisplayPositions') || '{}');
    return positions[baseUrl] || null;
}

4. 响应解析与图片提取

// 递归查找图片URL
function findFirstImageUrl(obj) {
    // 递归遍历对象、数组或字符串
    // 使用正则表达式查找URL
    // 返回第一个找到的URL
}

// 提取产品信息
function extractProductInfo(obj) {
    // 递归查找name和taxAfterPrice字段
    // 返回产品信息对象
}

使用说明

  1. 安装脚本:在Tampermonkey中安装该脚本
  2. 访问ERP系统:打开https://www.erp321.com/或https://ww.erp321.com/网站
  3. 自动监控:脚本会自动监控特定的POST请求
  4. 查看放大图片:当监控到相关请求时,会在页面右上角放大显示产品图片
  5. 调整位置:可以拖动图片放大框到任意位置
  6. 位置记忆:下次访问同一页面时,会自动恢复上次的位置
  7. 查看提示:根据产品信息,图片放大框顶部会显示相应的提示信息

注意事项

  • 该脚本仅在ERP系统中特定请求时才会放大显示图片
  • 拖动图片放大框时,可能会影响页面其他元素的交互
  • 位置记忆功能依赖于localStorage,清除浏览器缓存可能会丢失保存的位置
  • 脚本仅支持监控包含__CALLBACKPARAM且Method为CheckQty或LoadDataToJSON的请求

更新日志

  • 版本 3.2

    • 新增价格变动提示功能
    • 自动向ERP系统发送POST请求获取产品日志
    • 从cookie中提取u_id和u_co_id进行认证
    • 提取产品编码(sku_id)用于查询价格变动记录
    • 检测成本价变动并显示红字提示:"价格有变动: xxx->xxx"
    • 优化产品信息提取逻辑,新增sku_id提取
    • 支持监控特定产品的价格变动记录
    • 自动处理请求认证和响应解析
  • 版本 3.1

    • 新增智能滑动显示功能
    • 高度大于宽度时上下滑动,宽度填充容器
    • 宽度大于高度时居中裁剪显示,裁剪两边保留中间
    • 自动滚动到图片中间位置
    • 隐藏默认滚动条,提升视觉美观度
    • 优化滚动体验,支持鼠标滚轮和触摸板滚动
    • 平滑滚动过渡效果
    • 修复了左侧滑动条背景白色的问题
  • 版本 3.0

    • 新增尺寸调整功能:放大缩小切换、尺寸加、尺寸减按钮
    • 实现位置与尺寸记忆,保存用户调整的尺寸
    • 添加自适应字体大小,随图片框尺寸自动调整
    • 优化字体缩放算法,使用平方根让缩小更平缓
    • 调整提示信息背景透明度为30%
    • 修复了缩小后放大恢复尺寸的问题
    • 修复了功能按钮显示问题
    • 优化了代码结构和性能
  • 版本 2.5

    • 实现了图片显示框的拖动功能
    • 添加了按网址位置记忆功能
    • 优化了图片显示样式
    • 增加了智能提示信息
    • 支持监控XMLHttpRequest和fetch请求
    • 改进了响应解析逻辑,支持移除"0|"前缀
  • 版本 2.0

    • 基础功能实现
    • 监控POST请求并显示图片
    • 支持从响应中提取产品信息
  • 版本 1.0

    • 初始版本发布
    • 基本的请求监控功能
    • 简单的图片显示

开发说明

主要功能模块

  1. 请求监控模块:负责监控特定的POST请求
  2. 响应解析模块:负责解析请求响应,提取图片URL和产品信息
  3. 图片放大模块:负责创建和管理图片放大框
  4. 位置记忆模块:负责保存和加载图片放大框的位置
  5. 提示信息模块:负责根据产品信息显示提示

代码结构

├── 基本信息与元数据
├── 图片放大框创建与拖动功能
├── 位置记忆功能
├── 响应解析与图片提取
├── 请求监控实现
└── 初始化与日志

浏览器兼容性

  • Chrome/Chromium 60+
  • Firefox 55+
  • Edge 79+
  • Safari 12+

许可证

该脚本使用MIT许可证,详见脚本头部的许可证声明。

支持与反馈

如果您在使用过程中遇到问题,或者有任何建议,可以通过以下方式反馈:

贡献

欢迎提交Pull Request来改进这个脚本!

致谢

感谢所有使用和支持这个脚本的用户!

Rating: 10

10 Votes
-10