【学习工作赛道】ClipVault v2.0 — 一个 HTML 文件里的智能剪贴板工作台
标签
学习工作
0. 先和大家打个招呼吧 
你是谁：
一名习惯自己动手解决痛点的全栈项目经理。
你是怎么用 TRAE 把 Demo 做出来的：
作为全栈，我平时写代码习惯了字斟句酌，但这次用 TRAE，感觉像是身边坐了一个默契的“结对编程”搭档。我负责把控全局架构和核心逻辑，把那些繁琐的 UI 交互和第三方库接入交给它。比如在做“多类型粘贴捕获”时，我只是提了需要支持文字、图片、富文本和代码，它不仅帮我处理了复杂的剪贴板事件，还顺手接好了 highlight.js 做代码语法高亮；在实现“链接智能预览”时，我描述了自动抓取标题和缩略图的需求，它直接帮我写好了 URL 识别逻辑，甚至连二维码生成功能都一并搞定了。
最让我觉得“原来这么简单”的，是让它处理“收藏夹 + 标签系统”的拖拽交互和左侧标签云筛选时，它没让我手写一行复杂的 DOM 操作，直接给出了优雅的组件方案。它帮我跨过的最大坎，就是打破了全栈开发时的“精力瓶颈”——原来只要把需求描述得像 PRD 一样清晰，AI 真的能帮你把那些复杂的工程化细节（比如本地缓存暗黑模式偏好、固定置顶逻辑），变成几分钟就能跑起来的完美 Demo。
1. Demo 简介
是什么： 一个纯 HTML 文件（打开浏览器就能用）的剪贴板管理器，把系统只能存一条的剪贴板扩展成能存文字、图片、富文本、代码、链接的"剪贴板仓库"，支持收藏夹归类、标签管理、暗黑主题切换。
面向谁：
-
写论文时需要在多个网页间来回收集资料的学生
-
写报告时从多个文档复制数据、需要对比的办公人员
-
写代码时从 Stack Overflow 复制片段、需要按项目分类的程序员
-
做设计时截图保存参考、需要提取图片文字的创作者
主要功能：
| 功能 | 说明 |
|------|------|
| 多类型粘贴捕获 | 支持文字、图片、富文本（保留格式）、代码（自动高亮）、链接（自动抓取标题缩略图） |
| 收藏夹 + 标签系统 | 拖拽记录到收藏夹归类，给记录打多个标签，左侧标签云一键筛选 |
| 暗黑/白天主题 | 顶部按钮一键切换，偏好保存在浏览器本地 |
| 固定置顶 | 常用内容固定到顶部，不受清理影响 |
| 链接智能预览 | 粘贴 URL 自动识别，抓取标题/描述/缩略图，支持二维码生成 |
| 代码语法高亮 | 自动检测语言（JS/Python/Java 等），highlight.js 高亮显示 |
产品截图：
2. Demo 创作思路
灵感来源
这个项目的起点是一个真实的 frustrations。
上个月我在赶一个技术调研报告，需要在 7、8 个网页之间来回切换——从一个页面复制一段引用，粘贴到文档里，再切到另一个页面复制数据，粘贴，再切回来……系统剪贴板只能存一条，每次新复制都会覆盖之前的内容。我不得不打开一个记事本，把所有要复制的内容先丢进去，再从记事本里一条条复制出来。这个"记事本中转"的流程我重复了太多次。
那天晚上我就想：为什么剪贴板不能有个历史记录？为什么我不能像浏览器历
ClipVault.zip (21.3 KB)
史一样，翻看我之前复制过的所有内容？
我搜了一下，发现 Windows 有 Win+V 剪贴板历史，Mac 有第三方工具 Paste，但这些要么需要安装软件，要么需要付费，要么在公司电脑上根本装不了。作为一个全栈工程师，我想到：能不能用纯 HTML 做一个？打开浏览器就能用，不需要安装，不需要注册，数据存在本地，完全隐私。
想解决的问题
核心痛点：系统剪贴板的"单条覆盖"问题
具体场景：
-
你在写论文，从 3 篇文献各复制了一段引用，粘贴到 Word 时发现只有最后一段，前两段被覆盖了
-
你在做设计，截了 5 张参考图，想对比时只能一张一张重新截图
-
你在写代码，从 GitHub 复制了一个函数，又从文档复制了一个配置，回头想再看那个函数时已经找不到了
现有的解决方案：
-
记事本中转：操作繁琐，格式丢失，图片无法保存
-
安装第三方剪贴板工具：公司电脑受限、需要付费、有隐私顾虑
-
浏览器扩展：部分浏览器不支持，功能有限
ClipVault 的解决思路：把剪贴板做成一个"仓库"而不是"单条通道"。你复制的内容全部自动保存，随时可以翻阅、搜索、复用。
为什么做这个方向
判断 1：纯前端可行
现代浏览器的 Clipboard API 可以读取剪贴板内容，FileReader 可以处理图片，LocalStorage/IndexedDB 可以持久化存储。技术上完全不需要后端。
判断 2：差异化定位
市面上的剪贴板工具（Ditto、Paste、CopyQ）都是桌面应用，需要安装。ClipVault 的核心差异化是"零安装、跨平台、打开即用"。对于无法安装软件的场景（公司电脑、公共设备、临时使用），这是唯一可行的方案。
取舍：
-
不做云同步（保持纯本地，保护隐私）
-
不做后端（降低复杂度，确保单文件可运行）
-
先聚焦"存储+组织"，再做"智能处理"
3. Demo 体验地址
方式一：直接下载 HTML 文件打开
下载 ClipVault-v2.0.html，双击用浏览器打开即可使用。所有数据保存在浏览器 localStorage 中。
4. 开发过程实录
4.1 任务拆解
整个项目分 4 个阶段迭代：
Phase 1：MVP（v1.0）— 证明概念可行
-
目标：实现最基本的文字+图片粘贴、存储、展示
-
核心挑战：如何让浏览器捕获粘贴事件并区分文字/图片
-
成果：一个 60KB 的 HTML 文件，验证了"纯前端剪贴板仓库"可行
4123616532766969:8e73d8c7d047ab1806b7506e2f49faf7_6a3346ae52a7efcae1edecf5.6a3346ae52a7efcae1edecf8.6a3346ae52a7efcae1edecf6:TRAE Work CN.0.1.21.no_sid.no_ppe.T(2026/6/18 09:15:26)
Phase 2：组织能力（v2.0 核心）
-
收藏夹系统：左侧导航栏 + 拖拽归类 + 层级管理
-
标签系统：多标签 + 标签云筛选
-
主题切换：CSS 变量 + class 切换实现暗黑/白天
4123616532766969:88cc486fc480d28b7d06aa441a861109_6a3346ae52a7efcae1edecf5.6a334a0b52a7efcae1eded54.6a334a0b52a7efcae1eded52:TRAE Work CN.0.1.21.no_sid.no_ppe.T(2026/6/18 09:29:47)
Phase 3：内容类型扩展
-
富文本：检测 text/html MIME 类型，DOMPurify 净化后渲染
-
代码片段：正则匹配代码特征，highlight.js 语法高亮
-
链接预览：CORS 代理抓取 Open Graph 元数据
4123616532766969:cd01d334f883135f1be77742181f88ad_6a3346ae52a7efcae1edecf5.6a38f06e0ff64dfc3e471920.6a38f06e0ff64dfc3e47191e:TRAE Work CN.0.1.21.no_sid.no_ppe.T(2026/6/22 16:21:02)
Phase 4：打磨优化
-
字体大小调整、响应式适配、动画优化
-
修复图片复制 bug（Clipboard API write 方式）
-
修复全局函数作用域问题（IIFE 改为全局函数）
4123616532766969:bfbcf4debf9a8bc48c4a8ab1d959ba25_6a3346ae52a7efcae1edecf5.6a38f2690ff64dfc3e471944.6a38f2690ff64dfc3e471942:TRAE Work CN.0.1.21.no_sid.no_ppe.T(2026/6/22 16:29:29)
4.2 使用的 TRAE 能力
Builder 模式：
整个项目全程使用 TRAE Builder 模式开发。我只需要描述需求，TRAE 自动生成代码结构，我负责审查和微调。
关键 Prompt 示例：
Prompt 1（MVP）：
"我要做一个 HTML 剪贴板管理器，打开浏览器就能用。
功能：1）捕获 Ctrl+V 粘贴的文字和图片；2）保存在 localStorage；
3）以卡片形式展示历史记录；4）支持搜索和删除。
要求：纯 HTML/CSS/JS 单文件，暗黑主题，现代 UI 设计。"
Prompt 2（v2.0 升级）：
"继续优化 v2.0，增加功能但仍保持 HTML 单文件形式：
1. 支持暗黑和白天主题切换
2. 收藏夹系统：左侧导航栏，创建收藏夹，拖拽记录归类
3. 标签系统：给记录打标签，标签云筛选
4. 富文本支持：保留 HTML 格式粘贴
5. 链接智能处理：自动识别 URL，显示标题缩略图预览
6. 代码片段增强：自动检测语言并高亮显示"
Prompt 3（Bug 修复）：
"修改 bug，剪贴板应用报错 setFilter is not defined"
→ TRAE 分析后发现是 IIFE 包裹导致全局函数不可见，改为全局作用域定义
Prompt 4（样式优化）：
"左侧导航栏字体大一点，16px，然后标题 ClipVault 和 V2.0 也调整一下大小"
→ TRAE 批量调整了 10 处 CSS 字体大小
代码审查与迭代：
TRAE 生成的代码我会逐段检查，特别是：
-
事件处理函数是否正确绑定到 window（避免 IIFE 作用域问题）
-
CSS 变量是否正确使用 var() 引用（确保主题切换生效）
-
存储结构是否兼容旧版本（migration 逻辑）
4.3 踩过的坑
坑 1：IIFE 导致全局函数不可见
最初 TRAE 生成的代码把所有 JS 包在 (function() { ... })() 里，结果 HTML 内联的 onclick="setFilter('text')" 运行时报错 setFilter is not defined。
原因：IIFE 里的函数是局部作用域，HTML 属性里的字符串是在全局作用域执行的。
解决：去掉 IIFE 包裹，让所有函数直接定义在全局作用域。虽然污染了全局命名空间，但对于单文件应用这是最简单可靠的方案。
坑 2：图片复制只能打开新标签，无法写入剪贴板
v1.0 的图片复制逻辑是 window.open(dataUrl)，用户反馈点击复制后只是打开了一个新标签页，图片并没有真正复制到系统剪贴板。
原因：早期的实现只做了"展示图片"，没有调用 Clipboard API 的 write 方法。
解决：用 fetch(dataUrl).then(r => r.blob()) 把 Data URL 转成 Blob，再包装成 ClipboardItem，调用 navigator.clipboard.write([item])。同时加了 fallback：如果浏览器不支持 Clipboard API，就打开新窗口让用户手动复制。
function copyImageToClipboard(dataUrl) {
if (navigator.clipboard && navigator.clipboard.write) {
fetch(dataUrl).then(r => r.blob()).then(blob => {
var item = new ClipboardItem({ [blob.type]: blob });
navigator.clipboard.write([item]).then(() => showToast('图片已复制'));
});
} else {
// fallback: 打开新窗口让用户手动复制
var w = window.open();
w.document.write('<img src="' + dataUrl + '">');
}
}
坑 3：CORS 代理不稳定，链接预览经常失败
链接预览功能需要抓取目标网页的 Open Graph 元数据，但浏览器有 CORS 限制，不能直接 fetch 第三方网页。
解决：使用 allorigins.win 作为 CORS 代理。但免费代理有稳定性问题，有些网站会返回 403。最终做了容错处理：如果抓取失败，卡片仍然显示原始 URL，只是没有标题和缩略图，不影响核心功能。
坑 4：v1.0 数据迁移到 v2.0 的字段缺失
v1.0 的数据结构只有 id, type, content, timestamp。v2.0 新增了 folderIds, tags, plainText, meta 等字段。如果直接读取旧数据，访问 item.folderIds 会返回 undefined，导致收藏夹筛选逻辑出错。
解决：在初始化时加了 migration 逻辑：
items.forEach(function(item) {
if (!item.folderIds) item.folderIds = [];
if (!item.tags) item.tags = [];
if (!item.plainText) item.plainText = item.content || '';
if (!item.meta) item.meta = {};
});
坑 5：暗黑/白天主题切换时闪烁
最初用 JS 逐个修改元素颜色，切换时有明显闪烁。
解决：改用 CSS 变量（var(--bg)）+ body.theme-dark class 切换。所有颜色都通过变量引用，切换时只需要改 body 的 class，浏览器一次性重绘，零闪烁。
:root { --bg: #f8fafc; --ink: #0f172a; }
body.theme-dark { --bg: #060b14; --ink: #f0f4fc; }
.card { background: var(--card-bg); color: var(--ink); }
坑 6：代码类型检测误判
早期的代码检测只有简单的正则，把 “if (true) console.log(‘ok’)” 这样的普通句子也识别成了代码。
解决：引入"评分制"，多个代码特征各加 1 分，同时满足"行数 >= 3"和"包含特殊符号"才额外加分，总分 >= 2 才判定为代码。这样大幅降低了误判率。
const codePatterns = [
/^(function|class|import|export|const|let|var|def)\b/m,
/^[ \t]*(if|for|while|switch|try|catch)\s*[\(]/m,
/[{}\[\]\(\);]{3,}/,
/\/\/.*$|^\/\*|\*\/|\/\*.*\*\//m,
/^[ \t]{2,}\S/m,
/^(public|private|protected|static|void|int|string|return)\b/m
];
let score = 0;
codePatterns.forEach(p => { if (p.test(t)) score++; });
const lines = t.split('\n').filter(l => l.trim());
if (lines.length >= 3 && /[{}();]/.test(t)) score += 1;
if (score >= 2) return 'code';
5. 经验总结与开发心得
5.1 单文件架构的取舍
坚持"一个 HTML 文件"的约束，带来了一些有趣的取舍：
好处：
-
零依赖管理：不需要 npm install，不需要构建工具
-
极致便携：U 盘一拷就走，任何有浏览器的设备都能打开
-
部署简单：丢到任何静态托管服务就能运行
代价：
-
代码量大了之后，单个文件接近 2000 行，维护成本上升
-
不能拆模块，所有代码挤在一起，容易互相影响
-
外部库只能通过 CDN 引入，离线环境无法使用
我的做法： 用清晰的注释分隔代码区域（/* ===== CARD ===== */），按功能模块组织代码顺序：STATE → HELPERS → THEME → FOLDERS → TAGS → RENDER → EVENTS → INIT。
5.2 Prompt 工程技巧
经过这个项目，我总结了几条和 TRAE 高效协作的经验：
-
先给约束，再给功能：“保持 HTML 单文件，浏览器本地存储，不对接后端” 这个约束放在 Prompt 开头，比放在结尾效果好。TRAE 会在设计阶段就考虑约束，而不是写完再改。
-
分阶段迭代，不要一次给太多需求：v1.0 只做核心功能，验证可行后再加功能。如果一开始就说"我要一个支持收藏夹、标签、主题、富文本、代码高亮、链接预览的剪贴板"，TRAE 可能会生成过于复杂的结构，调试困难。
-
Bug 修复 Prompt 要包含错误信息：“报错 setFilter is not defined” 比 “有个 bug 帮我修一下” 高效得多。TRAE 能根据错误信息直接定位问题。
-
样式调整用具体数值：“左侧导航栏字体大一点” → 不够具体；“左侧导航栏字体 16px，标题 1.35rem” → TRAE 能精确执行。
5.3 数据持久化的教训
LocalStorage 有 5MB 限制，对于纯文本剪贴板历史来说够用，但如果用户大量粘贴图片（Data URL 很大），很快就会满。
当前方案：图片以 Data URL 形式存储，简单但占空间。
未来改进方向：
-
图片超过一定大小时，提示用户"图片较大，是否压缩存储"
-
使用 IndexedDB 替代 LocalStorage，容量更大
-
提供"导出数据"功能，让用户定期备份到本地文件
5.4 浏览器兼容性
Clipboard API 的 read 方法在部分浏览器中需要 HTTPS 或用户授权，但 write 方法支持较好。本项目主要依赖 paste 事件（用户主动粘贴）和 write 方法（复制到剪贴板），兼容性覆盖 Chrome、Edge、Firefox、Safari 最新版。
对于旧版浏览器，核心功能（粘贴捕获）仍然可用，只是图片复制会 fallback 到新窗口打开。
6. 未来规划
如果继续迭代，我会考虑以下方向：
| 优先级 | 功能 | 说明 |
|--------|------|------|
| P1 | 数据导出/导入 | 支持 JSON 备份和恢复，换浏览器时迁移数据 |
| P1 | 图片压缩 | 大图片自动压缩后再存 Data URL，节省空间 |
| P2 | 全文搜索增强 | 支持正则搜索、按时间范围筛选 |
| P2 | 快捷键系统 | Ctrl+数字快速复制前 N 条记录 |
| P3 | 多设备同步 | 可选的 WebDAV/坚果云同步，保持本地优先 |
| P3 | OCR 文字识别 | 粘贴图片时自动提取图片中的文字 |
7. 结语
ClipVault 从一个"我不想再被剪贴板覆盖折磨"的朴素想法，变成了一个能真正解决日常问题的工具。整个开发过程让我深刻体会到：AI 编程助手（TRAE）的价值不在于替代开发者思考，而在于把"从想法到可运行代码"的距离缩短到几分钟。我可以专注于产品逻辑和用户体验，把繁琐的代码实现交给 TRAE。
如果你也经常被剪贴板的"单条覆盖"困扰，欢迎下载试用。如果有任何建议或 bug 反馈，也欢迎留言交流。
ClipVault.zip (21.3 KB)
