耗时一个月,我用Electron开发了一个剪贴板工具

开发背景与动机

一个月前,我从Mac换到了Windows,失去了之前一直使用的Mac剪贴板工具 Paste。由于这个工具只支持Mac,我决定自己动手开发一款Windows版的剪贴板工具。作为一名Java开发者,我对Windows软件开发并不熟悉,但最终通过不断尝试和学习,成功完成了这个项目。

技术选型与开发过程

技术栈

  • Electron:用于构建跨平台桌面应用
  • Vue 3:作为前端框架
  • Sqlite:用于本地数据存储
  • Ant Design Vue 4:UI组件库(后续计划替换为Native UI以提升原生体验)

开发历程

  1. 从Python到Electron的探索 最初尝试用Python开发,但发现其UI框架选择有限且不够美观。接着尝试C++和Qt,但学习成本过高。最终选择了Electron,因为它允许用HTML和JavaScript开发桌面应用,这正好契合我的技能。
  2. 从VUE 2到VUE 3的挑战 由于只熟悉VUE 2,我最初尝试用原生HTML开发第一个版本,但发现效率较低。后来通过学习Electron + Vite,成功运行了VUE 3项目,完成了第二个版本。
  3. 从零到一的迭代
    • 第一版:实现了基础功能,但打包失败,配置问题较多。
    • 前往查看
    • 第二版:优化了架构,加入了更多功能,成功实现了自动更新和系统托盘等特性。
    • 前往查看

功能详解

1. 剪贴板列表

  • 文字与图片支持:支持文字和图片的复制与粘贴(Windows不支持文件复制功能)。
  • 双击复制:双击列表项即可快速复制内容。
  • 图片懒加载:优化性能,降低资源占用。
  • 快捷键唤醒 :默认快捷键为Win+C,可在设置中修改。
  • 窗口固定:支持固定窗口位置,避免误关闭。

2. 搜索功能

  • 快捷键搜索 :使用Win+F快速唤起剪贴板搜索。
  • 标签筛选:通过标签绑定内容,实现精准搜索。

3. 标签绑定

  • 拖拽绑定:通过拖拽内容到标签上,快速实现标签绑定。

4. 主题切换

  • 支持浅色、深色、蓝色、粉色四种主题,自由切换。

PS:我不是专业前端,色彩美观度设计没有前端和UI好,后续会进一步优化。

5. 设置

  • 程序设置:包括开机自启、窗口大小固定、语言选择等。
  • 存储设置:可设置记录数、存储限制、自动清理等。
  • 快捷键设置:自定义搜索和唤醒快捷键。

6. 标签管理

  • 支持标签的增删改,操作后剪贴板列表实时更新。

7. 自动更新

  • 使用 Electron-updater 实现自动更新,支持延迟更新提醒。

8. 系统托盘

  • 右键菜单功能:偏好设置、检查更新、关于、重新启动、退出。

功能对比

以下是与Ditto、CopyQ等剪贴板工具的功能对比表格:

功能/工具 自制剪贴板工具 Ditto CopyQ QQ输入法 Windows自带
界面易用性 ★★★★ ★★★ ★★★★ ★★★★ ★★
跨平台支持 Windows、MacOS Windows Windows、macOS、Linux Windows Windows
多格式支持 文本、图片 文本、图片、文件 文本、图片、HTML等 文本 文本
快捷键设置 自定义 自定义 自定义 固定(如Ctrl+V 固定(如Win+V
历史记录保存 永久 永久 永久 临时(重启后消失) 临时(重启后消失)
标签与分类 支持标签管理 支持分组 支持标签页和标记
自动更新 支持
系统托盘支持 支持 支持 支持
脚本支持 支持
多语言支持 中文、英文 英文 英文 中文
适用场景 需要自定义功能的用户 轻量化办公、个人使用 高级用户、开发者 日常办公、多设备协作 简单需求
适用人群 开发者、追求个性化 追求简洁易用 需要复杂功能 一般用户 无特殊需求

PS: 表格内容由AI生成,我仅用过Windows自带剪贴板,Ditto和CopyQ因为功能复杂,而且界面比较丑,所以我弃用了

功能对比说明

  • 界面易用性:自制剪贴板工具和Ditto界面简洁,CopyQ界面美观,QQ输入法和Windows自带功能较为简单。
  • 跨平台支持:自制工具和Ditto仅支持Windows,CopyQ支持多平台,QQ输入法和Windows自带功能仅限Windows。
  • 多格式支持:自制工具支持文本和图片,Ditto支持更多格式,CopyQ支持多种格式,QQ输入法和Windows自带功能仅支持文本。
  • 快捷键设置:自制工具和Ditto、CopyQ支持自定义快捷键,QQ输入法和Windows自带功能使用固定快捷键。
  • 历史记录保存:自制工具和Ditto、CopyQ支持永久保存,QQ输入法和Windows自带功能为临时保存。
  • 标签与分类:自制工具和CopyQ支持标签管理,Ditto支持分组,QQ输入法和Windows自带功能无此功能。
  • 自动更新:自制工具支持自动更新,其他工具无此功能。
  • 系统托盘支持:自制工具、Ditto和CopyQ支持系统托盘,QQ输入法和Windows自带功能无此功能。
  • 脚本支持:CopyQ支持脚本功能,其他工具无此功能。
  • 多语言支持:自制工具支持中英文,Ditto和CopyQ支持英文,QQ输入法支持中文,Windows自带功能无多语言支持。
  • 适用场景:自制工具适合需要自定义功能的用户,Ditto适合轻量化办公,CopyQ适合高级用户,QQ输入法适合日常办公,Windows自带功能适合简单需求。
  • 适用人群:自制工具适合开发者,Ditto和CopyQ适合不同需求的用户,QQ输入法适合一般用户,Windows自带功能适合无特殊需求的用户。

作为一个仅用一个月开发完成的项目,我的软件在稳定性方面确实无法与那些经过多年打磨的成熟软件相提并论。目前,我的开发主要参考了Windows自带的剪贴板工具,力求实现基础功能的稳定与实用。然而,我也深知,优秀的剪贴板工具绝不止步于此。

未来,我计划深入研究其他广受好评的剪贴板管理软件,如Ditto和CopyQ等,汲取它们在用户体验、功能设计和性能优化上的精髓。同时,我也会密切关注用户反馈,将大家的实际需求融入到软件的迭代中。毕竟,工具的好用性永远是衡量其价值的关键标准,而用户的满意度则是推动我不断前行的最大动力。

我深知,软件的完善是一个持续进化的过程。虽然目前我的工具尚显稚嫩,但我对它的未来充满信心。随着功能的逐步丰富和优化,我相信它将能够为更多用户带来高效、便捷的剪贴板管理体验。再次感谢您对这个项目的关注与支持,您的每一条建议都将是我改进软件的重要参考。

软件截图

测试与反馈

测试版本说明

目前发布的版本为测试版本,主要用于功能验证。如果您在使用过程中遇到任何问题,我们非常欢迎您提供反馈,以便我们进一步改进产品。

如何提供反馈

如果您遇到问题,请在 GitHub Issues 中提交问题报告,并提供以下信息:

  • 问题描述:详细描述您遇到的问题。
  • 复现步骤:列出导致问题出现的操作步骤。
  • 系统环境:包括操作系统版本、硬件配置等。
  • 错误日志 (如有):提供相关的错误日志或截图。 我们还欢迎通过 Pull Requests 提交代码改进,如果您有能力并愿意直接参与开发。

感谢参与

感谢您参与测试,您的反馈将帮助我们不断优化产品,为更多用户带来更好的体验。

未来规划

  1. UI优化:计划替换Ant Design Vue 4为Native UI,提升视觉体验。
  2. 功能扩展:支持文件复制、多语言优化、更丰富的快捷键功能。
  3. 性能优化:进一步降低资源占用,提升响应速度。

结语

这次开发让我深刻体会到技术选型的重要性,以及不断尝试和迭代的力量。希望这款工具能帮助更多人提高效率,也期待未来能加入更多实用功能。

最如果您觉得这个项目有潜力,欢迎给我一个小小的 Star 鼓励!您的支持是我继续优化和扩展功能的最大动力。同时,我也非常期待您的宝贵意见和建议,无论是功能上的需求,还是使用中的问题,都请随时告诉我。让我们一起让这个工具变得更好!

感谢您对这个项目的关注与支持!

以上内容均为原创内容,另外几个网站也均由本人发布

CSDN:blog.csdn.net/wjia_lin/ar...

知乎:www.zhihu.com/people/--55...

相关推荐
gqkmiss3 天前
Electron 开发:获取当前客户端 IP
tcp/ip·electron·nodejs·os
eli9604 天前
node-ddk,electron,文件目录选择对话框,dialog
前端·javascript·electron
小韩本韩!4 天前
解决electron-builder vue 打包后element-ui字体图标不显示问题
vue.js·ui·electron
戒不掉的伤怀5 天前
electron打包vue2项目流程
前端·javascript·electron
前端的阶梯5 天前
Electron中深度解读实现多tabs的几种方式
electron·node.js
unthapy5 天前
Trae的使用体验:继桌面录制应用后的待办应用
前端·electron
TrueHappy6 天前
Electron 进程通信机制详解
electron
TrueHappy6 天前
Electron 学习简单教程
electron
gqkmiss6 天前
Electron 项目开机自启动
前端·javascript·electron·开机自启动·auto-launch·electron-log