剪切板工具

剪切板工具 — 详细介绍

项目概述

剪切板工具是一个轻量级的纯前端网页应用，旨在提供便捷的文本复制、粘贴和管理体验。无需后端服务器，无需数据库，打开即用，数据安全存储在浏览器本地。

核心功能

1. 文本输入与编辑

应用提供大面积文本输入区域，用户可以直接输入或从其他地方粘贴文本。输入区域支持自动换行，适配长文本编辑场景。

2. 剪贴板操作

• 复制到剪贴板：一键将输入区文本复制到系统剪贴板，通过 Clipboard API 实现，复制后显示 Toast 通知提示成功。

• 从剪贴板粘贴：读取系统剪贴板内容并填充到输入区域，方便快速获取外部文本。

• 清空：一键清空文本输入区域，重置编辑状态。

3. 实时统计

输入区域配备了实时字符数和字数统计功能。每次输入变化时自动更新统计信息，帮助用户快速了解文本规模。

4. 历史记录管理

每次复制操作的内容会自动保存到历史记录列表中，使用浏览器 localStorage 持久化存储：

• 自动保存：复制时自动记录，最多保留 50 条历史

• 时间戳：每条记录显示创建时间，方便追溯

• 一键恢复：点击历史记录项可将其内容恢复到输入区域

• 单条删除：支持删除单条历史记录

• 全部清空：一键清空所有历史记录

技术架构

项目采用纯前端三件套架构，无任何外部依赖：

数据流

用户输入 → textarea → 实时统计更新
                ↓
         点击复制按钮
                ↓
     Clipboard API 写入剪贴板
                ↓
     localStorage 保存历史记录
                ↓
     历史记录列表刷新渲染

UI 设计亮点

• 渐变背景：紫色到粉色的渐变，营造现代感

• 卡片式布局：毛玻璃效果配合阴影，层次分明

• 响应式适配：手机和桌面端均有良好体验

• 按钮交互：hover 效果和点击 ripple 动画，增强反馈感

• Toast 通知：操作成功后的非侵入式提示，自动消失

使用方式

1. 直接在浏览器中打开 index.html 即可使用

2. 或启动本地服务器：python3 -m http.server 8080，然后访问 http://localhost:8080

项目亮点

• 零依赖：纯 HTML/CSS/JS，无需 npm install，无需构建工具

• 即开即用：打开 HTML 文件即可运行，无需任何配置

• 数据本地化：所有数据存储在浏览器 localStorage，隐私安全

• 体验流畅：响应式设计 + 动画效果，交互体验流畅自然