项目概述

剪贴板管理器是一个功能齐全的Electron桌面应用，允许用户监控、记录和管理系统剪贴板历史记录。该应用支持文本、HTML、图像等多种剪贴板格式，并提供搜索、标签、分类和导出功能。

核心功能

• 📋 剪贴板监控：自动捕获并保存剪贴板内容
• 🔍 内容搜索：快速查找历史剪贴板记录
• 🏷️ 标签管理：为剪贴板内容添加自定义标签
• 📤 导出功能：支持将剪贴板历史导出为JSON或文本格式
• 🖼️ 多媒体支持：处理文本、HTML和图像等多种格式
• ⚡ 快捷键操作：支持全局快捷键快速访问功能
• 🌓 深色模式：提供浅色/深色主题切换

技术架构

主进程 (main.js)

主进程负责应用生命周期管理、窗口创建、剪贴板监控和数据持久化。

• 窗口管理：创建和控制应用窗口，处理窗口事件
• 剪贴板监控：定期检查系统剪贴板变化
• 数据存储：使用文件系统保存剪贴板历史
• IPC通信：与渲染进程通信，处理API请求

预加载脚本 (preload.js)

预加载脚本在渲染进程加载前执行，用于安全地暴露Node.js API。

• 上下文隔离：确保渲染进程安全运行
• API暴露：通过contextBridge暴露必要的功能接口
• 权限控制：限制渲染进程对系统资源的访问

渲染进程 (renderer.js)

渲染进程负责用户界面和交互逻辑。

• UI渲染：展示剪贴板历史记录列表
• 事件处理：响应用户操作和交互
• 数据过滤：实现搜索、分类等功能
• 状态管理：维护应用的内部状态

文件结构

09-clipboard-manager/
├── main.js         # 主进程代码
├── preload.js      # 预加载脚本
├── index.html      # 主界面
├── style.css       # 样式文件
├── renderer.js     # 渲染进程代码
└── README.md       # 项目说明文档

鸿蒙适配后结构（需整合到 Electron 鸿蒙项目模板中）：

ohos_hap/
├── electron/
│   ├── libs/
│   │   └── arm64-v8a/  # 鸿蒙核心库文件
│   │       ├── libelectron.so
│   │       ├── libadapter.so
│   │       ├── libffmpeg.so
│   │       └── libc++_shared.so
├── web_engine/
│   └── src/
│       └── main/
│           └── resources/
│               └── resfile/
│                   └── resources/
│                       └── app/  # 放置electron应用代码
│                           ├── main.js
│                           ├── package.json
│                           └── src/
└── module.json5        # 鸿蒙应用配置文件

核心代码解析

剪贴板监控机制

// 简化版的剪贴板监控逻辑
let lastText = '';

function monitorClipboard() {
  const currentText = clipboard.readText();
  if (currentText !== lastText && currentText.trim()) {
    lastText = currentText;
    // 保存新的剪贴板内容
    saveToHistory({
      text: currentText,
      type: 'text',
      timestamp: Date.now(),
      tags: []
    });
  }
}

// 定期检查剪贴板变化
setInterval(monitorClipboard, 1000);

数据持久化

// 保存剪贴板历史到文件
function saveHistoryToFile() {
  const historyJson = JSON.stringify(clipboardHistory, null, 2);
  fs.writeFileSync(historyFilePath, historyJson);
}

// 从文件加载剪贴板历史
function loadHistoryFromFile() {
  try {
    if (fs.existsSync(historyFilePath)) {
      const data = fs.readFileSync(historyFilePath, 'utf8');
      return JSON.parse(data);
    }
  } catch (error) {
    console.error('加载历史记录失败:', error);
  }
  return [];
}

安全的IPC通信

// 在preload.js中
contextBridge.exposeInMainWorld('electronAPI', {
  // 剪贴板历史相关
  getClipboardHistory: () => ipcRenderer.invoke('clipboard:get-history'),
  saveToClipboard: (content) => ipcRenderer.invoke('clipboard:save', content),
  deleteFromHistory: (id) => ipcRenderer.invoke('clipboard:delete', id),
  
  // 监控控制
  startMonitoring: () => ipcRenderer.invoke('clipboard:start-monitoring'),
  stopMonitoring: () => ipcRenderer.invoke('clipboard:stop-monitoring'),
  
  // 导出功能
  exportHistory: (format) => ipcRenderer.invoke('clipboard:export', format)
});

使用指南

1. 启动应用：运行 npm start 启动应用
2. 监控设置：在工具栏中点击监控开关开始/停止监控
3. 添加标签：右键点击剪贴板项添加自定义标签
4. 搜索内容：在搜索框中输入关键词查找内容
5. 导出历史：点击导出按钮选择格式导出数据

性能优化

• 延迟加载：大量历史记录时采用虚拟滚动
• 批量处理：剪贴板数据批量保存
• 内存管理：定期清理过期数据
• 缓存机制：搜索结果缓存

扩展建议

• 实现云同步功能
• 添加更丰富的内容预览
• 支持更多文件格式
• 实现智能分类和推荐
• 增加安全功能（加密敏感数据）

开发说明

安装依赖

npm install

运行应用

npm start

构建应用

npm run build

技术栈

• Electron：跨平台桌面应用框架
• HTML/CSS/JavaScript：前端开发技术
• Node.js：后端功能支持
• IPC：进程间通信

鸿蒙PC适配改造指南

详细操作指南请看这篇文章：
Electron 鸿蒙pc开发环境搭建完整保姆级教程（window）

1. 环境准备

• 系统要求：Windows 10/11、8GB RAM以上、20GB可用空间

• 工具安装：
  DevEco Studio 5.0+（安装鸿蒙SDK API 20+）

• Node.js 18.x+

2. 获取Electron鸿蒙编译产物

1. 登录Electron 鸿蒙官方仓库

2. 下载Electron 34+版本的Release包（.zip格式）

3. 解压到项目目录，确认electron/libs/arm64-v8a/下包含核心.so库

3. 部署应用代码

将Electron应用代码按以下目录结构放置：

web_engine/src/main/resources/resfile/resources/app/
├── main.js
├── package.json
└── src/
    ├── index.html
    ├── preload.js
    ├── renderer.js
    └── style.css

4. 配置与运行

1. 打开项目：在DevEco Studio中打开ohos_hap目录

2. 配置签名：
   进入File → Project Structure → Signing Configs

3. 自动生成调试签名或导入已有签名

4. 连接设备：
   启用鸿蒙设备开发者模式和USB调试

5. 通过USB Type-C连接电脑

6. 编译运行：点击Run按钮或按Shift+F10

跨平台兼容性

平台	适配策略	特殊处理
Windows	标准Electron运行	无特殊配置
macOS	标准Electron运行	保留dock图标激活逻辑
Linux	标准Electron运行	确保系统依赖库完整
鸿蒙PC	通过Electron鸿蒙适配层	禁用硬件加速，使用特定目录结构

鸿蒙开发调试技巧

1. 日志查看

在DevEco Studio的Log面板中过滤"Electron"关键词，查看应用运行日志和错误信息。

2. 常见问题解决

• "SysCap不匹配"错误：检查module.json5中的reqSysCapabilities，只保留必要系统能力

• "找不到.so文件"错误：确认arm64-v8a目录下四个核心库文件完整

• 窗口不显示：在main.js中添加app.disableHardwareAcceleration()

• 动画卡顿：简化CSS动画效果，减少重绘频率