pvs_agent/src/entrypoints/sidepanel/utils/index.js

import * as XLSX from 'xlsx'
import { ElMessage } from 'element-plus'
import html2canvas from 'html2canvas'

export function getPageInfo() {
  return new Promise((res, rej) => {
    chrome.runtime.sendMessage(
      {
        type: 'FROM_SIDE_PANEL_TO_GET_PAGE_INFO',
      },
      (response) => {
        if (chrome.runtime.lastError) {
          console.error('消息发送错误:', chrome.runtime.lastError, 555)
          rej(chrome.runtime.lastError)
        } else {
          res(response.data)
        }
      }
    )
  })
}
export function getPageInfoClean() {
  return new Promise((res, rej) => {
    chrome.runtime.sendMessage(
      {
        type: 'FROM_SIDE_PANEL_TO_GET_PAGE_INFO_CLEAN',
      },
      (response) => {
        if (chrome.runtime.lastError) {
          console.error('消息发送错误:', chrome.runtime.lastError, 555)
          rej(chrome.runtime.lastError)
        } else {
          res(response.data)
        }
      }
    )
  })
}
export function getPageInfoClean() {
  return new Promise((res, rej) => {
    chrome.runtime.sendMessage(
      {
        type: 'FROM_SIDE_PANEL_TO_GET_PAGE_INFO_CLEAN',
      },
      (response) => {
        if (chrome.runtime.lastError) {
          console.error('消息发送错误:', chrome.runtime.lastError, 555)
          rej(chrome.runtime.lastError)
        } else {
          res(response.data)
        }
      }
    )
  })
}
export function handleInput(xlsxData, formMap) {
  chrome.runtime.sendMessage({
    type: 'FROM_SIDE_PANEL_TO_INPUT_FORM',
    data: {
      excelData: xlsxData,
      formData: formMap
    }
  })
}

export function getXlsxValue(file) {
  return new Promise((res, rej) => {
    try {
      const reader = new FileReader()
      reader.readAsArrayBuffer(file)
      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result)
        const workbook = XLSX.read(data, {
          type: 'array',
          cellDates: false,
          cellNF: true,
          cellText: true,
          dateNF: 'yyyy-mm-dd'
        })
        // 修复日期处理
        const firstSheet = workbook.Sheets[workbook.SheetNames[0]]
        // 转换为JSON数据
        const readData = XLSX.utils.sheet_to_json(firstSheet, {
          header: 1,
          raw: false,
          defval: '',
          dateNF: 'yyyy-mm-dd'
        })
        res(readData)
      }
    } catch (error) {
      rej()
    }
  })
}
export function downloadFile(file) {
  try {
    // 创建一个下载链接
    const downloadUrl = URL.createObjectURL(file);
    // 创建一个a标签用于下载
    const downloadLink = document.createElement('a');
    downloadLink.href = downloadUrl;
    downloadLink.download = file.name;
    // 添加到文档中并触发点击
    document.body.appendChild(downloadLink);
    downloadLink.click();
    // 清理
    document.body.removeChild(downloadLink);
    URL.revokeObjectURL(downloadUrl);

    ElMessage.success(`文件 ${file.name} 已下载到本地`);
  } catch (error) {
    console.error('下载文件失败:', error);
    ElMessage.error('下载文件失败');
  }
}

export function domToCanvas() {
  return new Promise((resolve, reject) => {
    // 检查是否已经存在 Shadow Host
    const existingHost = document.querySelector('[data-shadow-host="true"]')
    if (existingHost) {
      existingHost.remove()
    }
    const host = document.createElement('div')
    host.setAttribute('data-shadow-host', 'true') // 标记 Shadow Host
    document.body.appendChild(host)
    const shadowRoot = host.attachShadow({ mode: 'open' })
    // 创建遮罩层
    const overlay = document.createElement('div')
    overlay.id = 'overlay'
    overlay.style.position = 'fixed'
    overlay.style.top = '0'
    overlay.style.left = '0'
    overlay.style.width = '100%'
    overlay.style.height = '100%'
    overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'
    overlay.style.zIndex = '9999'
    overlay.style.cursor = 'crosshair'
    shadowRoot.appendChild(overlay)

    // 创建选择框
    const selectionBox = document.createElement('div')
    selectionBox.id = 'selection-box'
    selectionBox.style.position = 'absolute'
    selectionBox.style.border = '2px dashed #3498db'
    selectionBox.style.backgroundColor = 'rgba(52, 152, 219, 0.2)'
    selectionBox.style.pointerEvents = 'none'
    overlay.appendChild(selectionBox)

    let isSelecting = false
    let startX, startY, endX, endY

    // 鼠标按下事件
    overlay.addEventListener('mousedown', (e) => {
      isSelecting = true
      startX = e.clientX
      startY = e.clientY
      selectionBox.style.left = `${startX}px`
      selectionBox.style.top = `${startY}px`
      selectionBox.style.width = '0'
      selectionBox.style.height = '0'
    })

    // 鼠标移动事件
    overlay.addEventListener('mousemove', (e) => {
      if (isSelecting) {
        endX = e.clientX
        endY = e.clientY
        const width = Math.abs(endX - startX)
        const height = Math.abs(endY - startY)
        selectionBox.style.left = `${Math.min(startX, endX)}px`
        selectionBox.style.top = `${Math.min(startY, endY)}px`
        selectionBox.style.width = `${width}px`
        selectionBox.style.height = `${height}px`
      }
    })

    // 鼠标松开事件
    overlay.addEventListener('mouseup', async () => {
      isSelecting = false

      // 获取选择区域的坐标和尺寸
      const rect = {
        x: parseInt(selectionBox.style.left),
        y: parseInt(selectionBox.style.top),
        width: parseInt(selectionBox.style.width),
        height: parseInt(selectionBox.style.height)
      }
      console.log(rect)
      // 移除遮罩层和选择框
      overlay.remove()
      html2canvas(document.body, {
        x: rect.left,
        y: rect.top,
        width: rect.width,
        height: rect.height,
        backgroundColor: null, // 背景透明
        useCORS: true,
        allowTaint: true
      }).then(canvas => {
        // 直接转换为 base64
        const base64Data = canvas.toDataURL('image/png', 0.9); // 可调整质量参数
        resolve(base64Data);
      }).catch((error) => {
        reject(error)
      })
    })
  })


}