基于 Electron 實作 uTools 的超級面闆

前言

為了進一步提高開發工作效率，最近我們基于

electron

開發了一款媲美

uTools

的開源工具箱 rubick。該工具箱不僅僅開源，最重要的是可以使用

uTools

生态内所有開源插件！這将是巨大的能力，意味着

uTools

生态内所有插件可以無差異化使用到 rubick 中。

設計互動上為了更能提高使用者的使用效率，我們又嘗試去實作了

uTools

中非常優秀的一些設計，比如：超級面闆。該功能可以通過滑鼠快速喚起

uTools

插件能力，而不用再打開應用。比如上傳圖檔，隻要我們安裝了圖床插件，那麼當滑鼠選擇桌面上某張圖檔時，即可快速呼出上傳圖檔的菜單選項，友善省事。接下來一起看看實作方式吧！

代碼倉庫

Rubick github

功能截圖：

檔案夾下長按右建

選擇檔案後長按右鍵

選擇文字後長按右鍵

實作原理

擷取選中文案

要實作改功能核心是要讀取目前使用者選中的文案或者檔案，根據目前選擇内容進行不同功能展示。但是核心有一個問題是如何來實作擷取目前選中的内容。這個問題思考了很久很久，要想擷取選中的文案，感覺唯一的辦法是使用

ctrl + c

或者

command + c

來先複制到剪切闆，再通過

electron clipboard

來擷取目前剪切闆内容。但是

utools

可不是通過先複制再長按這樣的操作來實作的，而是直接選中文本或者檔案長按後呼起超級面闆。是以一定要在右擊長按前擷取到目前選中的内容。

如果要這麼幹，可能真的無解了，之前就因為這麼想，才被無解了。正确的思路應該是先長按再擷取選中的内容。别看隻是掉了個個，但實作确實天壤之别：

先擷取選中内容：這就要求我們必須監聽原生系統選中事件，但是 electron 并沒有提供能力，我們也無法監聽系統選擇事件。
先右擊，後擷取内容，這樣的好處在于先右擊可以通過監聽滑鼠右擊事件，相比選擇事件更加容易。

是以思路就有了，先監聽長按右擊事件：

// macos
const mouseEvents = require("osx-mouse");

const mouseTrack = mouseEvents();
// 按下去的 time
let down_time = 0;

// 是否彈起
let isPress = false;

// 監聽右擊
mouseTrack.on('right-down', () => {
    isPress = true;
    down_time = Date.now();
    // 長按 500ms 後觸發
    setTimeout(async () => {
      if (isPress) {
        // 擷取選中内容
        const copyResult = await getSelectedText();
    }, 500);
})
mouseTrack.on('right-up', () => {
    isPress = false;
});

接下來一步就是要去實作擷取選中内容，要擷取選中内容有個比較騷的操作，就是：

通過 clipboard 先擷取目前剪切闆内容，并存下 A
robot.js 來調用系統 command + c ctrl + c
再通過 clipboard 先擷取目前剪切闆内容，并存下 B
再将 A 寫到剪切闆中，傳回 B

先存剪切闆内容的目的在于我們是偷偷幫使用者執行了複制動作，當讀取完使用者選擇内容後，需要回複使用者之前的剪切闆内容。接下來看一下簡單的實作：

const getSelected = () => {
  return new Promise((resolve) => {
    // 緩存之前的文案
    const lastText = clipboard.readText('clipboard');

    const platform = process.platform;
    
    // 執行複制動作
    if (platform === 'darwin') {
      robot.keyTap('c', 'command');
    } else {
      robot.keyTap('c', 'control');
    }

    setTimeout(() => {
      // 讀取剪切闆内容
      const text = clipboard.readText('clipboard') || ''
      const fileUrl = clipboard.read('public.file-url');
      
      // 恢複剪切闆内容
      clipboard.writeText(lastText);

      resolve({
        text,
        fileUrl
      })
    }, 300);
  })
}

通知超級面闆視窗目前選中内容

當擷取到了選中内容後，接下來就是需要建立超級面闆的

BrowserWindow

const { BrowserWindow, ipcMain, app } = require("electron");

module.exports = () => {
  let win;

  let init = (mainWindow) => {
    if (win === null || win === undefined) {
      createWindow();
    }
  };

  let createWindow = () => {
    win = new BrowserWindow({
      frame: false,
      autoHideMenuBar: true,
      width: 250,
      height: 50,
      show: false,
      alwaysOnTop: true,
      webPreferences: {
        webSecurity: false,
        enableRemoteModule: true,
        backgroundThrottling: false,
        nodeIntegration: true,
        devTools: false,
      },
    });
    win.loadURL(`file://${__static}/plugins/superPanel/index.html`);
    win.once('ready-to-show', () => win.show());
    win.on("closed", () => {
      win = undefined;
    });
  };

  let getWindow = () => win;

  return {
    init: init,
    getWindow: getWindow,
  };
};

然後再通知

superPanel

進行内容展示：

win.webContents.send('trigger-super-panel', {
  ...copyResult,
  optionPlugin: optionPlugin.plugins,
});

超級面闆點選操作

接下來要實作超級面闆點選操作，這塊也是比較簡單的了，直接上代碼好了：

1. 打開 Terminal

const { spawn } = require ('child_process');

spawn('open', [ '-a', 'Terminal', fileUrl ]);

2. 建立檔案

remote.dialog.showSaveDialog({
  title: "請選擇要儲存的檔案名",
  buttonLabel: "儲存",
  defaultPath: fileUrl.replace('file://', ''),
  showsTagField: false,
  nameFieldLabel: '',
}).then(result => {
  fs.writeFileSync(result.filePath, '');
});

3. 複制路徑

clipboard.writeText(fileUrl.replace('file://', ''))

最後

本篇主要介紹如何實作一個類似于 utools 的超級面闆功能，當然這遠遠不是 utools 的全部，下期我們再繼續介紹如何實作 utools 其他能力。歡迎大家前往體驗 Rubick 有問題可以随時提 issue 我們會及時回報。

另外，如果覺得設計實作思路對你有用，也歡迎給個 Star：https://github.com/clouDr-f2e/rubick