写了一个简约风格云剪贴板

前言

苦于没找到满意且简约的云剪贴板，于是借助哈基米写了一个，主打就是简约风格~

演示地址：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" 
}

{
  "password": "my_secure_password", 
  "storageType": "local" 
}

2. 存储后端配置

CloudClip 支持三种存储后端，通过修改 storageType 切换：

🟢 方案 A：本地文件存储 (默认)

数据保存在服务器的 data/clips.json 和 data/uploads/ 中。

{
  "storageType": "local"
}

{
  "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/"
  }
}

{
  "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/"
  }
}

{
  "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。

前言