一个剪贴板管理工具

发表于2025-11-07|更新于2025-11-07|其他

|浏览量:

MemoPaste 是一款基于 Electron + Vue 3 构建的剪贴板管理工具，自动记录每一次复制，并提供了优雅的检索与复用体验，让你从此告别“刚刚复制的内容去哪了”的尴尬。

✨ 特性一览

功能	说明
📋 历史记录	自动保存复制的文本，支持关键词搜索、按时间筛选与收藏标记
💾 本地存储	数据保存在 SQLite 中，无需联网，隐私完全由你掌控
⌨️ 快捷面板	全局快捷键唤出浮层面板（类似 Win + V 体验），选中条目后自动粘贴至当前窗口
🖥️ 系统托盘	支持最小化到托盘，后台静默运行，不打扰工作流
🗂️ 数据管理	可配置历史保留天数，支持批量删除与一键清空
🌓 主题切换	内置亮色 / 暗色主题，随系统或手动切换
🔄 自动更新	通过 GitHub Releases 检查更新，及时获取新特性与修复

🖼️ 预览

MemoPaste 主界面

🧰 技术栈

类别	技术
前端框架	Vue 3 + TypeScript
状态管理	Pinia
路由	Vue Router
UI 组件库	Element Plus
构建工具	Vite + vite-plugin-electron
桌面框架	Electron
本地存储	SQLite (better-sqlite3) + electron-store

🚀 快速开始

方式一：直接下载安装包

前往 GitHub Releases 下载对应平台的安装包（支持 Windows、macOS、Linux），双击即可安装使用。

方式二：从源码运行

适合开发者或希望自行编译的用户：

环境要求：Node.js 18+（推荐 LTS 版本）

# 克隆仓库
git clone https://github.com/hnugreycrow/MemoPaste.git
cd MemoPaste

# 安装依赖
npm install

# 若遇到 better-sqlite3 原生模块编译问题，执行
npm run sqlite3-rebuild

# 启动开发环境
npm run dev

📎 相关链接

GitHub 仓库：hnugreycrow/MemoPaste
下载页面：Releases
问题反馈：Issues

文章作者: hnugreycrow

文章链接: https://hnugreycrow.github.io/2025/11/07/d5b0bd11910e/

版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 hnugreycrow's blog！

相关推荐

Vue3 笔记：透传 Attributes

在 Vue 组件开发中，属性传递是核心场景之一。props 适用于明确声明的属性，但当需要灵活传递未声明的属性或事件、封装第三方组件时，透传 Attributes 成为更高效的解决方案。一、什么是透传 Attributes？官方定义：透传 Attributes 指传递给组件但未被声明为 props 或 emits 的 attribute 或 v-on 事件监听器，最常见的包括 class、style、id 以及自定义事件等。在 Vue3 中，透传 Attributes 会被收集到组件实例的 $attrs 中，可通过 useAttrs()（script setup）或 this.$attrs（选项式 API）访问。访问 $attrs 的两种方式 script setup 中：useAttrs () 12import { useAttrs } from 'vue';const attrs = useAttrs(); 选项式 API 中：this.$attrs 12345export default { mounted()...

Electron中导入better-sqlite3：为什么import不行，require却可以？

在Electron开发过程中，我遇到一个有趣的问题：使用import Database from "better-sqlite3"导入模块时，不仅出现类型声明文件缺失的警告，还会报__filename is not defined的运行时错误。而换成const Database = require("better-sqlite3")后，一切正常。这个现象背后，其实是JavaScript两种主流模块系统——ESM与CommonJS的差异在作祟。问题现象与直接原因当使用ES模块语法导入better-sqlite3时，会遇到两个问题：类型检查错误：无法找到模块“better-sqlite3”的声明文件运行时错误：ReferenceError: __filename is not defined 而切换到CommonJS的require语法后，这两个问题都消失了。要理解其中的原因，我们需要先深入了解ESM与CommonJS这两种模块系统的核心差异。模块化的两种 “流派”：ESM 和 CommonJSJavaScript 一开始是没有 “...

Vue3 笔记：响应式基础

最近翻 Vue3 文档，重新过了一遍响应式的基础内容。之前用的时候总有些细节记不清，比如 ref 和 reactive 到底该怎么选、为什么有时候改了数据页面不更，这次特意整理了笔记（过程中也借助了大模型辅助梳理逻辑、补充细节😉），主要是给自己后续查着方便，内容以复习要点为主，可能有理解不到位的地方，先记下来慢慢修正。官方文档：响应式基础 | Vue.js (vuejs.org) 一. 声明响应式状态1. 组合式 API：ref()定义：ref() 接收参数，并将其包裹在一个带有 .value 属性的 ref 对象中返回： 123import { ref } from 'vue'const count = ref(0)count.value++ // 修改值模板使用：无需 .value，自动解包；可直接在事件监听器中修改（如@click=”count++”）。优势：支持所有数据类型（原始值、对象等），可传递给函数并保持响应性。简化语法：在<script setup>中，顶层声明的ref和方法可直接在模板使...

Vue3 笔记：深入响应式系统

什么是响应性响应性是一种声明式处理变化的编程范式：当依赖数据变化时，依赖其计算的结果会自动更新。例如 Excel 中单元格通过公式关联，修改源单元格时目标单元格自动更新；而 JavaScript 默认不具备此特性，需通过特定机制实现。官方文档：深入响应式系统 | Vue.js (vuejs.org) Vue 中响应性的实现原理Vue 通过拦截对象属性的读写操作，追踪依赖并在数据变化时触发更新，核心依赖Proxy（用于reactive）和getter/setter（用于ref）实现。 1. 响应式对象的创建 reactive()实现：通过 Proxy 创建对象代理，拦截属性的get（读取）和set（修改）操作： 123456789101112function reactive(obj) { return new Proxy(obj, { get(target, key) { track(target, key); // 追踪依赖 return target[key]; }, set(targ...

评论