高效工具DIY：告别误触，打造专属轮盘菜单

前端

2023-08-11 23:18:00

打造专属轮盘菜单工具，提升工作效率

跨平台效率利器：基于 Tauri 的轮盘菜单

在日常电脑使用中，效率工具是必不可少的助手。轮盘菜单工具因其快速、便捷地打开常用程序和文件的特性而受到广泛青睐。但市面上的轮盘菜单工具往往存在诸多局限，要么功能受限，要么触发逻辑不友好，误触频发。

为解决这些痛点，我们基于跨平台桌面应用程序框架 Tauri，打造了一款专属的轮盘菜单工具。Tauri 基于 Rust 语言和 Web 技术，具有跨平台、性能优异、开发便捷等优点。

打造专属轮盘菜单的步骤

1. 创建 Tauri 项目

使用 Tauri cli 工具创建一个新的 Tauri 项目：

cargo install tauri-cli
tauri new my-wheel-menu

2. 构建轮盘菜单界面

利用 HTML、CSS 和 JavaScript 构建轮盘菜单界面，如下所示：

<div class="wheel-menu">
  <div class="wheel-menu-item" data-action="open-file">打开文件</div>
  <div class="wheel-menu-item" data-action="open-folder">打开文件夹</div>
  <div class="wheel-menu-item" data-action="new-file">新建文件</div>
  <div class="wheel-menu-item" data-action="new-folder">新建文件夹</div>
</div>

3. 实现轮盘菜单逻辑

通过 JavaScript 实现轮盘菜单的逻辑，如下所示：

const wheelMenu = document.querySelector('.wheel-menu');

wheelMenu.addEventListener('click', (e) => {
  const action = e.target.dataset.action;

  switch (action) {
    case 'open-file':
      // 打开文件操作
      break;
    case 'open-folder':
      // 打开文件夹操作
      break;
    case 'new-file':
      // 新建文件操作
      break;
    case 'new-folder':
      // 新建文件夹操作
      break;
  }
});