前言
苦于没找到满意且简约的云剪贴板，于是借助哈基米写了一个，主打就是简约风格~
演示地址：CloudClip
GitHub：https://github.com/loveyyp1314/CloudCilp
CloudClip 
CloudClip 是一个极简风格的云剪切板应用，灵感来源于 minimalist-web-notepad。它允许你在不同设备间同步文本和图片，支持本地浏览器存储和私有化服务器存储（本地文件/S3/WebDAV）两种模式。
功能特性
- 极简设计：无干扰的 UI，专注内容。
- 双重存储模式：
Local Mode: 数据仅存储在当前浏览器 LocalStorage 中，无需联网。- Server Mode: 数据存储在自托管服务器，实现多设备同步。
- 多端同步：支持 S3 对象存储和 WebDAV，轻松接入 NAS 或云存储。
- 富媒体支持：支持代码高亮、长文本折叠、图片粘贴与预览。
- 隐私安全：Server 模式支持访问密码保护。
应用场景对比：Local vs Server
| 特性 | Local Mode (本地模式) |
Server Mode (云端模式) |
|---|---|---|
| 数据位置 | 你的浏览器缓存 (LocalStorage) | 你的服务器/NAS/S3 |
| 联网要求 | 不需要 (离线可用) | 需要网络连接 |
| 多设备同步 |  仅当前设备可见 |
 所有设备实时同步 |
| 典型场景 | 临时记录、草稿、无网环境、单机使用 | 电脑复制手机粘贴、团队共享片段、长期归档 |
| 图片存储 | Base64 (占用浏览器空间) | 独立文件存储 (节省带宽) |
配置指南 (密码 & 存储)
后端服务首次启动后，会自动在项目根目录的 data/ 文件夹下生成 config.json 文件。你可以修改此文件来配置密码和存储方式。
修改配置后，需要重启后端容器生效： docker-compose restart backend
1. 基础配置 (密码)
默认密码为 admin。建议首次部署后立即修改。
{
"password": "my_secure_password",
"storageType": "local"
}
2. 存储后端配置
CloudClip 支持三种存储后端，通过修改 storageType 切换：
方案 A：本地文件存储 (默认)
数据保存在服务器的 data/clips.json 和 data/uploads/ 中。
{
"storageType": "local"
}
方案 B：S3 对象存储 (推荐)
适合部署在云服务器，将数据存入 AWS S3, Cloudflare R2, MinIO, 阿里云 OSS 等。
{
"storageType": "s3",
"s3": {
"region": "us-east-1",
"endpoint": "https://<accountid>.r2.cloudflarestorage.com",
"credentials": {
"accessKeyId": "YOUR_ACCESS_KEY",
"secretAccessKey": "YOUR_SECRET_KEY"
},
"bucketName": "cloudclip-bucket",
"keyName": "clips.json",
"uploadPrefix": "uploads/"
}
}
方案 C：WebDAV
适合接入 Nextcloud, Alist, 群晖 NAS 等。
{
"storageType": "webdav",
"webdav": {
"url": "https://dav.your-server.com",
"username": "your_user",
"password": "your_password",
"filePath": "/CloudClip/clips.json",
"uploadPath": "/CloudClip/uploads/"
}
}
部署教程
方式一：Docker Compose 一键部署（推荐）
这是最简单的部署方式，适合在 NAS、云服务器或本地电脑上快速启动。
-
下载代码
将本项目代码下载或克隆到本地目录。 -
启动服务
在项目根目录下运行：docker-compose up -d -
访问应用
前端页面: 浏览器访问 http://localhost:5173（平时用这个！）- 后端 API: 运行在
http://localhost:3001
数据将持久化保存在项目目录下的
./data文件夹中。
方式二：本地开发运行
如果你想进行代码修改或调试：
-
安装依赖
npm install -
启动前端
npm run dev -
启动后端 (在一个新的终端窗口)
# 安装后端依赖 (仅需一次) npm install express cors @aws-sdk/client-s3 webdav # 运行后端 node server.js
技术栈
- Frontend: React 18, TypeScript, Tailwind CSS, Vite
- Backend: Node.js (Express)
- Storage Adapters: FS (Local), AWS SDK (S3), WebDAV client
- Infrastructure: Docker, Docker Compose
注意事项
- 默认配置下，应用运行在 HTTP 协议。如果要在公网使用，强烈建议配合 Nginx 配置 HTTPS，以确保剪切板访问权限和密码传输安全。
- 图片上传限制默认为 50MB。