共享剪贴板/Clipboard

一个支持多用户实时同步的共享剪贴板应用，具有彩色文件夹管理、搜索功能和响应式设计，适合团队协作与个人使用。/A modern shared clipboard application supporting real-time synchronization among multiple users, featuring colored folder management, search functionality, and responsive design, ideal for team collaboration and personal use.

🌟 功能特性

• 双栏布局：左侧文件夹树，右侧内容输入区，直观易用
• 文件夹管理：创建彩色文件夹来组织不同类型的内容，便于分类
• 实时同步：所有用户都能看到最新的数据更新，无缝协作
• 搜索功能：快速搜索剪贴板内容，立即找到所需信息
• 一键复制：点击即可复制内容到系统剪贴板，提高效率
• 响应式设计：完美适配桌面和移动设备，随时随地使用
• 无需登录：开箱即用，无需注册账户，减少使用障碍
• 附件上传：支持多种文件格式的附件上传，丰富内容类型
• 文件预览：支持图片直接预览，提升用户体验
• 拖放上传：支持拖放和粘贴上传图片，操作更便捷
• 状态指示：连接状态实时显示，掌握同步情况

🛠️ 技术栈

• 前端：HTML5 + CSS3 + JavaScript (ES6+)

  • 纯原生JavaScript实现，无需外部框架依赖
  • 使用Font Awesome图标库美化界面
  • 响应式CSS设计，适配各种设备屏幕

• 后端：PHP 7.4+

  • 轻量级RESTful API设计
  • PDO数据库抽象层确保安全连接
  • 完善的错误处理和日志记录

• 数据库：MySQL 5.7+

  • 优化的数据表结构
  • 高效的查询性能

• 部署：适配宝塔面板，便于快速部署

📦 安装部署

环境要求

• PHP 7.4 或更高版本
• MySQL 5.7 或更高版本
• Web服务器 (Nginx/Apache)
• 宝塔面板 (推荐)

部署步骤

1. 上传文件

   # 将所有文件上传到网站根目录
   # 确保保持目录结构完整

2. 创建数据库

   • 在宝塔面板中创建一个新的MySQL数据库
   • 记录数据库名、用户名和密码

3. 运行安装向导

   • 访问 http://你的域名/install.php
   • 填写数据库连接信息
   • 点击"开始安装"

4. 完成安装

   • 安装成功后删除 install.php 文件
   • 访问 http://你的域名/index.html 开始使用

目录权限设置

确保以下目录有适当的读写权限：

chmod 755 api/
chmod 644 api/*.php
chmod 755 uploads/

🚀 使用说明

基本操作

1. 添加内容

   • 在右侧输入框中输入标题和内容
   • 选择文件夹（可选）
   • 可添加附件（支持图片、文档等多种格式）
   • 点击"保存"按钮

2. 创建文件夹

   • 点击左上角"新建文件夹"按钮
   • 输入文件夹名称
   • 选择颜色标识（6种预设颜色可选）
   • 点击"创建"

3. 编辑内容

   • 点击任意内容项目
   • 在弹出的编辑框中修改文本或附件
   • 点击"保存"更新内容或"删除"移除内容

4. 搜索内容

   • 在左侧搜索框中输入关键词
   • 系统会实时显示匹配结果，支持标题和内容搜索

5. 复制内容

   • 点击内容项目右上角的复制按钮
   • 内容会自动复制到系统剪贴板

6. 管理文件夹

   • 点击"编辑"按钮进入文件夹管理模式
   • 可修改名称和颜色，或删除文件夹
   • 删除文件夹会同时删除其中的所有内容

7. 上传附件

   • 点击"上传附件"按钮选择文件
   • 支持拖拽上传图片到输入框
   • 支持粘贴截图直接上传
   • 支持预览和下载图片附件

快捷键

• Ctrl + S：保存当前输入的内容
• Ctrl + V：上传附件或粘贴图片
• Esc：关闭任意模态框

🔧 配置说明

数据库配置

编辑 api/config.php 文件：

define('DB_HOST', 'localhost');     // 数据库主机
define('DB_NAME', 'clipboard_db');  // 数据库名称
define('DB_USER', 'root');          // 数据库用户名
define('DB_PASS', '');              // 数据库密码

自动刷新设置

在 script.js 中可以调整自动刷新间隔：

// 设置自动刷新间隔（毫秒）
setInterval(loadData, 30000); // 30秒刷新一次

文件上传设置

上传附件的相关配置位于 api/uploads.php：

// 支持的文件类型
$allowedTypes = ['jpg', 'jpeg', 'png', 'gif', 'pdf', 'doc', 'docx', 'xls', 'xlsx', 'txt', 'zip', '7z'];

// 文件大小限制 (10MB)
$maxFileSize = 10 * 1024 * 1024;

📱 移动端适配

项目完全支持移动设备访问：

• 响应式布局自动适配屏幕尺寸
• 触摸友好的交互设计
• 移动端专用的文件夹选择界面
• 适配各种移动设备的输入控件
• 优化的图片预览功能

🔒 安全特性

• SQL注入防护：使用PDO预处理语句
• XSS攻击防护：严格的输入数据清理和验证
• 文件上传安全：类型检查与大小限制
• 路径遍历防护：安全的文件路径处理
• 错误信息安全处理：不暴露敏感信息
• CORS配置：可控的跨域资源共享

🐛 故障排除

常见问题

1. 无法连接数据库

   • 检查数据库配置信息是否正确
   • 确认MySQL服务正常运行
   • 验证数据库用户权限是否足够

2. API请求失败

   • 检查PHP版本是否符合要求
   • 确认api目录权限设置正确
   • 查看服务器错误日志定位问题

3. 页面显示异常

   • 清除浏览器缓存后重新加载
   • 检查网络连接是否畅通
   • 确认所有文件上传完整无缺失

4. 附件上传失败

   • 检查uploads目录是否有写入权限
   • 确认文件类型和大小是否符合限制
   • 查看服务器的文件上传配置

5. 实时同步问题

   • 检查网络连接状态
   • 查看浏览器控制台是否有错误信息
   • 尝试手动点击刷新按钮

日志查看

在宝塔面板中查看：

• PHP错误日志 (/www/wwwlogs/php_error.log)
• Nginx/Apache访问日志 (/www/wwwlogs/access.log)
• MySQL慢查询日志 (相关数据库设置中查看)

🔄 更新升级

项目是测试Cursor用Ai做的，应该不会更新了

📄 API文档

文件夹接口

• GET /api/folders.php - 获取所有文件夹

  • 返回：文件夹列表，包含ID、名称、颜色和内容数量

• POST /api/folders.php - 创建新文件夹

  • 参数：name (必需)、color (可选)
  • 返回：新文件夹的ID、名称、颜色

• PUT /api/folders.php - 更新文件夹

  • 参数：id (必需)、name (必需)、color (可选)
  • 返回：更新后的文件夹信息

• DELETE /api/folders.php - 删除文件夹

  • 参数：id (必需)
  • 返回：删除成功确认

内容接口

• GET /api/items.php - 获取内容列表

  • 参数：folder_id (可选)、search (可选)
  • 返回：内容项目列表，包含文本内容和附件信息

• POST /api/items.php - 创建新内容

  • 参数：title (可选)、content (必需)、folder_id (可选)、attachment (可选)
  • 返回：新创建的内容项目信息

• PUT /api/items.php - 更新内容

  • 参数：id (必需)、title (可选)、content (必需)、update_attachment (可选)、attachment (可选)
  • 返回：更新后的内容项目信息

• DELETE /api/items.php - 删除内容

  • 参数：id (必需)
  • 返回：删除成功确认

文件上传接口

• POST /api/uploads.php - 上传文件

  • 参数：file (FormData) 或 image_data (Base64)、file_name (可选)
  • 返回：文件ID、名称、类型、大小和URL

• GET /api/uploads.php - 获取文件信息

  • 参数：file_id (必需)
  • 返回：文件名称、URL和大小

• DELETE /api/uploads.php - 删除文件

  • 参数：file_id (必需)
  • 返回：删除成功确认

🖥️ 系统架构

数据库结构

项目使用两个主要数据表：

1. folders 表：存储文件夹信息

   • id: 主键
   • name: 文件夹名称
   • color: 颜色代码
   • created_at: 创建时间
   • updated_at: 更新时间

2. items 表：存储内容项目

   • id: 主键
   • title: 标题
   • content: 内容
   • folder_id: 外键，关联folders表
   • created_at: 创建时间
   • updated_at: 更新时间
   • attachment_id: 附件ID
   • attachment_name: 附件名称
   • attachment_type: 附件类型
   • attachment_url: 附件URL
   • file_size: 文件大小

前端组件

1. 左侧栏

   • 文件夹树视图
   • 搜索框
   • 状态指示器

2. 右侧内容区

   • 输入区域（标题、内容、附件上传）
   • 内容列表显示
   • 操作按钮

3. 模态框

   • 新建/编辑文件夹
   • 编辑内容
   • 图片预览
   • 文件夹选择（移动端）

数据流程

1. 用户输入内容并保存
2. 前端通过API将数据发送到后端
3. 后端处理并存储数据到数据库
4. 其他用户定期刷新获取最新数据
5. 前端渲染显示更新的内容

📜 开源协议

本项目采用 MIT 协议开源。

📞 技术支持

如有问题，请通过以下方式联系：

• 提交GitHub Issue
• 发送邮件至邮箱：2132456840@qq.com

---

享受高效的剪贴板管理体验！ 🎉