feat: 碎片信息记录网站初始版本
功能： - 实时保存记录到本地 - 大模型自动生成标题 - 左侧列表显示所有记录 - 搜索功能 - 新建/编辑/删除记录
This commit is contained in:
224
templates/index.html
Normal file
224
templates/index.html
Normal file
@@ -0,0 +1,224 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>碎片记录</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
|
||||
<style>
|
||||
.note-item:hover { background: #f3f4f6; }
|
||||
.note-item.active { background: #e0e7ff; border-left: 3px solid #6366f1; }
|
||||
.editor-area:focus { outline: none; }
|
||||
.fade-in { animation: fadeIn 0.3s ease; }
|
||||
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
||||
.gradient-bg { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-100 h-screen overflow-hidden">
|
||||
<div class="flex h-full">
|
||||
<!-- 左侧：笔记列表 -->
|
||||
<aside class="w-72 bg-white border-r flex flex-col">
|
||||
<!-- 顶部：搜索和新建 -->
|
||||
<div class="p-4 border-b">
|
||||
<div class="relative mb-3">
|
||||
<i class="ri-search-line absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
|
||||
<input type="text" id="searchInput" placeholder="搜索..."
|
||||
class="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:border-purple-400"
|
||||
oninput="searchNotes()">
|
||||
</div>
|
||||
<button onclick="createNote()" class="w-full py-2 gradient-bg text-white rounded-lg hover:opacity-90 transition">
|
||||
<i class="ri-add-line mr-1"></i> 新建记录
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 笔记列表 -->
|
||||
<div id="noteList" class="flex-1 overflow-auto">
|
||||
<div class="p-4 text-center text-gray-400">
|
||||
<i class="ri-file-text-line text-4xl mb-2"></i>
|
||||
<p>暂无记录</p>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 右侧：编辑区域 -->
|
||||
<main class="flex-1 flex flex-col bg-gray-50">
|
||||
<!-- 顶部工具栏 -->
|
||||
<div id="toolbar" class="hidden p-4 bg-white border-b flex justify-between items-center">
|
||||
<div>
|
||||
<h2 id="currentTitle" class="text-lg font-semibold text-gray-800"></h2>
|
||||
<p id="currentTime" class="text-sm text-gray-500"></p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button onclick="regenerateTitle()" class="px-3 py-1 text-sm text-purple-600 hover:bg-purple-50 rounded-lg">
|
||||
<i class="ri-magic-line mr-1"></i> 重新生成标题
|
||||
</button>
|
||||
<button onclick="deleteCurrentNote()" class="px-3 py-1 text-sm text-red-500 hover:bg-red-50 rounded-lg">
|
||||
<i class="ri-delete-bin-line mr-1"></i> 删除
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 编辑区域 -->
|
||||
<div id="editorContainer" class="hidden flex-1 p-6 fade-in">
|
||||
<textarea id="editor"
|
||||
class="w-full h-full p-4 bg-white rounded-xl border border-gray-200 resize-none editor-area text-gray-700 leading-relaxed"
|
||||
placeholder="在这里记录你的想法..."
|
||||
oninput="saveContent()"></textarea>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div id="emptyState" class="flex-1 flex items-center justify-center">
|
||||
<div class="text-center text-gray-400">
|
||||
<i class="ri-quill-pen-line text-6xl mb-4"></i>
|
||||
<p class="text-lg">选择一个记录，或新建一个</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let currentNoteId = null;
|
||||
let saveTimer = null;
|
||||
let notes = [];
|
||||
|
||||
// 加载笔记列表
|
||||
async function loadNotes() {
|
||||
const keyword = document.getElementById('searchInput').value.trim();
|
||||
const url = keyword ? `/api/search?q=${encodeURIComponent(keyword)}` : '/api/notes';
|
||||
|
||||
const res = await fetch(url);
|
||||
notes = await res.json();
|
||||
|
||||
const container = document.getElementById('noteList');
|
||||
|
||||
if (notes.length === 0) {
|
||||
container.innerHTML = `
|
||||
<div class="p-4 text-center text-gray-400">
|
||||
<i class="ri-file-text-line text-4xl mb-2"></i>
|
||||
<p>${keyword ? '未找到相关记录' : '暂无记录'}</p>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = notes.map(n => `
|
||||
<div class="note-item p-4 cursor-pointer border-b ${currentNoteId === n.id ? 'active' : ''}"
|
||||
onclick="selectNote('${n.id}')">
|
||||
<h3 class="font-medium text-gray-800 truncate">${n.title || '新记录'}</h3>
|
||||
<p class="text-sm text-gray-500 truncate mt-1">${n.preview || '空白记录'}</p>
|
||||
<p class="text-xs text-gray-400 mt-1">${n.updated_at}</p>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
// 创建新笔记
|
||||
async function createNote() {
|
||||
const res = await fetch('/api/notes', { method: 'POST' });
|
||||
const note = await res.json();
|
||||
|
||||
currentNoteId = note.id;
|
||||
loadNotes();
|
||||
showEditor(note);
|
||||
}
|
||||
|
||||
// 选择笔记
|
||||
async function selectNote(id) {
|
||||
currentNoteId = id;
|
||||
|
||||
const res = await fetch(`/api/notes/${id}`);
|
||||
const note = await res.json();
|
||||
|
||||
showEditor(note);
|
||||
loadNotes(); // 更新高亮状态
|
||||
}
|
||||
|
||||
// 显示编辑器
|
||||
function showEditor(note) {
|
||||
document.getElementById('toolbar').classList.remove('hidden');
|
||||
document.getElementById('editorContainer').classList.remove('hidden');
|
||||
document.getElementById('emptyState').classList.add('hidden');
|
||||
|
||||
document.getElementById('currentTitle').textContent = note.title || '新记录';
|
||||
document.getElementById('currentTime').textContent = `创建于 ${note.created_at} · 更新于 ${note.updated_at}`;
|
||||
document.getElementById('editor').value = note.content || '';
|
||||
}
|
||||
|
||||
// 保存内容（延迟保存）
|
||||
function saveContent() {
|
||||
if (!currentNoteId) return;
|
||||
|
||||
// 延迟保存，避免频繁请求
|
||||
if (saveTimer) clearTimeout(saveTimer);
|
||||
|
||||
saveTimer = setTimeout(async () => {
|
||||
const content = document.getElementById('editor').value;
|
||||
|
||||
const res = await fetch(`/api/notes/${currentNoteId}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ content })
|
||||
});
|
||||
|
||||
const note = await res.json();
|
||||
|
||||
// 更新显示
|
||||
document.getElementById('currentTitle').textContent = note.title;
|
||||
document.getElementById('currentTime').textContent = `创建于 ${note.created_at} · 更新于 ${note.updated_at}`;
|
||||
|
||||
// 更新列表
|
||||
loadNotes();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
// 搜索笔记
|
||||
function searchNotes() {
|
||||
loadNotes();
|
||||
}
|
||||
|
||||
// 重新生成标题
|
||||
async function regenerateTitle() {
|
||||
if (!currentNoteId) return;
|
||||
|
||||
const btn = event.target.closest('button');
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '<i class="ri-loader-4-line animate-spin mr-1"></i> 生成中...';
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/notes/${currentNoteId}/title`, { method: 'POST' });
|
||||
const data = await res.json();
|
||||
|
||||
if (data.success) {
|
||||
document.getElementById('currentTitle').textContent = data.title;
|
||||
loadNotes();
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
|
||||
btn.disabled = false;
|
||||
btn.innerHTML = '<i class="ri-magic-line mr-1"></i> 重新生成标题';
|
||||
}
|
||||
|
||||
// 删除笔记
|
||||
async function deleteCurrentNote() {
|
||||
if (!currentNoteId) return;
|
||||
|
||||
if (!confirm('确定删除这条记录？')) return;
|
||||
|
||||
await fetch(`/api/notes/${currentNoteId}`, { method: 'DELETE' });
|
||||
|
||||
currentNoteId = null;
|
||||
|
||||
document.getElementById('toolbar').classList.add('hidden');
|
||||
document.getElementById('editorContainer').classList.add('hidden');
|
||||
document.getElementById('emptyState').classList.remove('hidden');
|
||||
|
||||
loadNotes();
|
||||
}
|
||||
|
||||
// 初始化
|
||||
loadNotes();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user