实现超级面板

// public/main.js
const path = require('path');
 
const superPanel = (ctx) => {
  const { BrowserWindow } = ctx;
 
  let win;
 
  const init = () => {
    if (win === null || win === undefined) {
      createWindow();
    }
  };
 
  const createWindow = () => {
    win = new BrowserWindow({
      frame: false,
      autoHideMenuBar: true,
      width: 240,
      height: 50,
      show: false,
      alwaysOnTop: true,
      webPreferences: {
        contextIsolation: false,
        webSecurity: false,
        backgroundThrottling: false,
        nodeIntegration: true,
        preload: path.join(__dirname, 'panel-preload.js'),
      },
    });
 
    // 根据环境加载不同 URL
    if (process.env.NODE_ENV === 'development') {
      win.loadURL(`http://localhost:8003/main`);
    } else {
      win.loadURL(`file://${__dirname}/main.html`);
    }
 
    win.on("closed", () => {
      win = undefined;
    });
 
    // 在生产环境中，窗口失去焦点时自动隐藏
    if (process.env.NODE_ENV !== 'development') {
      win.on("blur", () => {
        win.hide();
      });
    }
  };
 
  const getWindow = () => win;
 
  return {
    init,
    getWindow,
  };
};
 
module.exports = () => {
  let panelInstance;
  return {
    onReady(ctx) {
      const { screen, globalShortcut } = ctx;
      // 初始化超级面板 window
      panelInstance = superPanel(ctx);
      panelInstance.init();
 
      globalShortcut.register('Ctrl+W', () => {
        // 获取鼠标当前位置
        const { x, y } = screen.getCursorScreenPoint();
        const win = panelInstance.getWindow();
 
        // 设置窗口位置并显示
        win.setPosition(x, y);
        win.show();
        win.focus();
      });
    },
    onUnload() {
      // 注销快捷键
      if (globalShortcut) {
        globalShortcut.unregister('Ctrl+W');
      }
    }
  };
};

# 安装依赖
npm install @nut-tree/nut-js

// public/main.js
const { keyboard, Key } = require("@nut-tree/nut-js")
const { clipboard } = require("electron")
 
// 根据操作系统判断修饰键
const modifier = process.platform === "darwin" ? Key.LeftSuper : Key.LeftControl
 
async function simulateCopy() {
  await keyboard.pressKey(modifier, Key.C)
  await keyboard.releaseKey(modifier, Key.C)
}
 
function getSelectedContent() {
  return new Promise(async (resolve) => {
    // 1. 先清空剪贴板，避免读取到旧内容
    clipboard.clear()
    // 2. 再执行模拟复制
    await simulateCopy()
    // 3. 延时一小段时间，等待操作系统将内容写入剪贴板
    setTimeout(() => {
      const text = clipboard.readText() || ""
      resolve({ text })
    }, 80) // 延时时间可根据实际情况微调
  })
}

// public/main.js -> onReady -> globalShortcut.register callback
globalShortcut.register("Ctrl+W", async () => {
  const win = panelInstance.getWindow()
  const copyResult = await getSelectedContent()
 
  // 将获取到的内容发送给渲染进程
  win.webContents.send("trigger-super-panel", {
    ...copyResult
  })
 
  // ... 显示窗口 ...
})

// 渲染进程 (e.g., in a Vue component)
import { ipcRenderer } from "electron"
 
ipcRenderer.on("trigger-super-panel", (event, args) => {
  if (args.text) {
    const word = args.text
    // 1. 调用翻译函数
    translate(word)
    // 2. 匹配可处理此文本的插件
    matchPlugins(word)
  }
})

// public/main.js
 
function getSelectedFiles(clipboard) {
  let filePaths = []
 
  if (process.platform === "darwin") {
    // macOS
    if (clipboard.has("NSFilenamesPboardType")) {
      // 多个文件
      const raw = clipboard.read("NSFilenamesPboardType")
      // 解析 XML 格式的路径列表
      filePaths =
        raw
          .match(/<string>.\*<\/string>/g)
          ?.map((item) => item.replace(/<string>|<\/string>/g, "")) || []
    } else {
      // 单个文件
      const url = clipboard.read("public.file-url").replace("file://", "")
      if (url) filePaths.push(url)
    }
  } else if (process.platform === "win32") {
    // Windows
    if (clipboard.has("CF_HDROP")) {
      // CF_HDROP 格式存储的是文件列表
      filePaths = clipboard.read("CF_HDROP")
    } else {
      // 单个文件（兼容性处理）
      const rawPath = clipboard.readBuffer("FileNameW").toString("ucs2")
      const path = rawPath.replace(new RegExp(String.fromCharCode(0), "g"), "")
      if (path) filePaths.push(path)
    }
  }
 
  // 处理从剪贴板复制的图片
  const image = clipboard.readImage()
  if (!image.isEmpty()) {
    filePaths.push({
      isImage: true,
      data: image.toPNG() // or toJPEG, toDataURL
    })
  }
 
  return filePaths.filter(Boolean) // 过滤掉空值
}

// public/main.js -> onReady -> globalShortcut.register callback
globalShortcut.register("Ctrl+W", async () => {
  // 1. 模拟复制
  await simulateCopy()
  await new Promise((resolve) => setTimeout(resolve, 80)) // 等待剪贴板更新
 
  // 2. 获取剪贴板内容
  const text = clipboard.readText() || ""
  const files = getSelectedFiles(clipboard)
  const activeApp = getActiveAppInfo() // 获取当前活动窗口信息
 
  // 3. 将信息发送给渲染进程
  const win = panelInstance.getWindow()
  win.webContents.send("trigger-super-panel", {
    text,
    files,
    activeApp
  })
 
  // ... 显示窗口 ...
})

// 渲染进程 (e.g., in a Vue component)
ipcRenderer.on("trigger-super-panel", (event, { text, files, activeApp }) => {
  let features = []
 
  if (files.length > 0) {
    // 优先处理文件
    features = getFeaturesForFiles(files)
  } else if (text.trim()) {
    // 处理文本
    features = getFeaturesForText(text)
  } else {
    // 无选择，根据当前应用显示默认功能
    features = getDefaultFeatures(activeApp)
  }
 
  // 更新组件状态，渲染 features 列表
  this.features = features
})

;[
  { id: "translate", name: "翻译", icon: "..." },
  { id: "search", name: "网页搜索", icon: "..." }
]

const { screen } = require("electron")
 
const point = screen.getCursorScreenPoint()
const display = screen.getDisplayNearestPoint(point)
const { x, y } = point
 
// 简单的处理方式，更精确的计算需要考虑窗口尺寸
win.setPosition(x, y)