deepSeek的使用（剪贴板历史管理器）生成小工具
deepSeek的使用（剪贴板历史管理器）生成小工具
·
文章说明
在发现 deepSeek 这个GPT工具后，我来体验了一下，我发现它的输出速度，以及生成效果方面，我感觉还是蛮不错的，比通义千问的生成速度要快一些，不过美中不足的是它没有分享功能；我采用这个工具生成了这个小demo–剪贴板历史管理器
deepSeek 似乎它还可以和VSCode扩展，直接可以像cursor一样使用
核心代码
一个单独的HTML文件；可以读取剪切板内容，包括图片和文字，然后采用indexDB存储，效果还可以，代码基本完全由GPT生成，只在样式方面我做了很少的微调
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>剪贴板历史管理器</title>
<style>
/* 全局样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
color: #333;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 1rem;
}
/* 容器样式 */
.container {
background-color: #fff;
padding: 2rem;
border-radius: 1rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
text-align: center;
width: 100%;
max-width: 40rem;
}
h1 {
font-size: 2rem;
margin-bottom: 1.5rem;
color: #2c3e50;
}
/* 添加按钮和提示信息布局 */
.action-group {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
#add-clipboard-btn {
padding: 0.75rem 1.5rem;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 0.5rem;
cursor: pointer;
font-size: 1rem;
transition: background-color 0.3s ease;
}
#add-clipboard-btn:hover {
background-color: #2980b9;
}
.tip {
font-size: 0.9rem;
color: #7f8c8d;
text-align: right;
}
/* 历史记录列表样式 */
.history-list {
margin-top: 1.5rem;
max-height: 20rem;
overflow-y: auto;
padding-right: 0.5rem;
}
/* 自定义滚动条 */
.history-list::-webkit-scrollbar {
width: 0.5rem;
}
.history-list::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 0.5rem;
}
.history-list::-webkit-scrollbar-thumb {
background: #3498db;
border-radius: 0.5rem;
}
.history-list::-webkit-scrollbar-thumb:hover {
background: #2980b9;
}
/* 历史记录项样式 */
.history-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem;
border: 1px solid #ddd;
border-radius: 0.5rem;
background-color: #f9f9f9;
margin-bottom: 0.75rem;
transition: all 0.3s ease;
overflow: hidden;
}
.history-item:hover {
transform: translateY(-0.2rem);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
.history-item .content {
flex: 1;
margin-right: 1rem;
overflow: hidden;
max-width: 100%;
}
.history-item .content img {
max-width: 100%;
max-height: 5rem;
border-radius: 0.5rem;
}
.history-item .content span {
width: 100%;
display: block;
font-size: 1rem;
color: #34495e;
white-space: nowrap;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
}
.history-item .button-group {
display: flex;
gap: 0.5rem;
}
.history-item button {
padding: 0.5rem 1rem;
border: none;
border-radius: 0.5rem;
cursor: pointer;
font-size: 0.9rem;
transition: background-color 0.3s ease;
}
.history-item button.copy-btn {
background-color: #2ecc71;
color: #fff;
}
.history-item button.copy-btn:hover {
background-color: #27ae60;
}
.history-item button.delete-btn {
background-color: #e74c3c;
color: #fff;
}
.history-item button.delete-btn:hover {
background-color: #c0392b;
}
/* 响应式布局 */
@media (max-width: 480px) {
.history-item {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.history-item .button-group {
width: 100%;
}
.history-item button {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<h1>剪贴板历史管理器</h1>
<!-- 添加按钮和提示信息 -->
<div class="action-group">
<button id="add-clipboard-btn">添加剪贴板内容</button>
<div class="tip">复制内容后点击按钮添加</div>
</div>
<!-- 历史记录列表 -->
<div class="history-list" id="history-list"></div>
</div>
<script>
// 打开或创建 IndexedDB 数据库
const dbName = "ClipboardHistoryDB";
const storeName = "history";
let db;
const request = indexedDB.open(dbName, 1);
request.onupgradeneeded = (event) => {
db = event.target.result;
if (!db.objectStoreNames.contains(storeName)) {
db.createObjectStore(storeName, {keyPath: "id", autoIncrement: true});
}
};
request.onsuccess = (event) => {
db = event.target.result;
renderHistory(); // 初始化渲染
};
request.onerror = (event) => {
console.error("无法打开数据库：", event.target.error);
};
// 获取 DOM 元素
const addClipboardBtn = document.getElementById("add-clipboard-btn");
const historyList = document.getElementById("history-list");
// 渲染历史记录
function renderHistory() {
const transaction = db.transaction(storeName, "readonly");
const store = transaction.objectStore(storeName);
const request = store.getAll();
request.onsuccess = () => {
const history = request.result;
historyList.innerHTML = ""; // 清空当前内容
history.forEach((item) => {
const historyItem = document.createElement("div");
historyItem.className = "history-item";
// 内容部分
const content = document.createElement("div");
content.className = "content";
if (item.type === "text") {
const text = document.createElement("span");
text.textContent = item.data;
content.appendChild(text);
} else if (item.type === "image") {
const img = document.createElement("img");
img.src = URL.createObjectURL(item.data); // 从 Blob 创建 URL
content.appendChild(img);
}
// 按钮容器
const buttonGroup = document.createElement("div");
buttonGroup.className = "button-group";
// 复制按钮
const copyButton = document.createElement("button");
copyButton.textContent = "复制";
copyButton.className = "copy-btn";
copyButton.addEventListener("click", () => {
if (item.type === "text") {
navigator.clipboard.writeText(item.data).then(() => {
alert("已复制到剪贴板！");
});
} else if (item.type === "image") {
navigator.clipboard.write([new ClipboardItem({[item.data.type]: item.data})]).then(() => {
alert("已复制图片到剪贴板！");
});
}
});
// 删除按钮
const deleteButton = document.createElement("button");
deleteButton.textContent = "删除";
deleteButton.className = "delete-btn";
deleteButton.addEventListener("click", () => {
const transaction = db.transaction(storeName, "readwrite");
const store = transaction.objectStore(storeName);
store.delete(item.id); // 删除当前记录
transaction.oncomplete = () => {
renderHistory(); // 重新渲染
};
});
buttonGroup.appendChild(copyButton);
buttonGroup.appendChild(deleteButton);
historyItem.appendChild(content);
historyItem.appendChild(buttonGroup);
historyList.appendChild(historyItem);
});
};
}
// 添加剪贴板内容到历史记录
addClipboardBtn.addEventListener("click", async () => {
try {
// 读取剪贴板内容
const clipboardItems = await navigator.clipboard.read();
for (const item of clipboardItems) {
for (const type of item.types) {
if (type === "text/plain") {
const text = await (await item.getType(type)).text();
addToHistory({type: "text", data: text});
} else if (type.startsWith("image/")) {
const blob = await item.getType(type);
addToHistory({type: "image", data: blob});
}
}
}
} catch (error) {
alert("无法读取剪贴板内容，请确保已授予权限。");
}
});
// 将内容添加到 IndexedDB
function addToHistory(item) {
const transaction = db.transaction(storeName, "readwrite");
const store = transaction.objectStore(storeName);
store.add(item); // 添加新记录
transaction.oncomplete = () => {
renderHistory(); // 重新渲染
};
}
</script>
</body>
</html>
效果展示
运行效果
源码下载
这个仓库里面还包含一些别的小demo，都是用GPT生成的小玩具，之前是用通义千问生成的，不过我感觉这个deepSeek生成的样式方面会精美一些
欢迎加入DeepSeek 技术社区。在这里，你可以找到志同道合的朋友，共同探索AI技术的奥秘。
更多推荐
20
0- 0
已为社区贡献1条内容
所有评论(0)