添加历史记录管理功能
- 点击'查看全部'打开历史面板 - 按日期分组显示所有记录 - 支持编辑记录备注 - 支持删除记录 - 删除后自动刷新统计和列表
This commit is contained in:
parent
3eaecd18da
commit
b4cd0df014
110
static/app.js
110
static/app.js
@ -305,5 +305,115 @@ async function loadRecent() {
|
||||
}
|
||||
}
|
||||
|
||||
// ========== 历史记录面板 ==========
|
||||
|
||||
const historyOverlay = document.getElementById('history-overlay');
|
||||
const historyList = document.getElementById('history-list');
|
||||
|
||||
// 打开历史面板
|
||||
document.getElementById('view-all').addEventListener('click', () => {
|
||||
historyOverlay.classList.add('active');
|
||||
loadHistory();
|
||||
});
|
||||
|
||||
// 关闭历史面板
|
||||
document.getElementById('close-history').addEventListener('click', () => {
|
||||
historyOverlay.classList.remove('active');
|
||||
});
|
||||
|
||||
// 点击遮罩关闭
|
||||
historyOverlay.addEventListener('click', (e) => {
|
||||
if (e.target === historyOverlay) {
|
||||
historyOverlay.classList.remove('active');
|
||||
}
|
||||
});
|
||||
|
||||
async function loadHistory() {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/api/din?limit=100`);
|
||||
const records = await res.json();
|
||||
|
||||
if (records.length === 0) {
|
||||
historyList.innerHTML = '<div style="text-align:center;color:#666;padding:40px;">暂无记录</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
// 按日期分组
|
||||
const grouped = groupByDate(records);
|
||||
|
||||
historyList.innerHTML = Object.entries(grouped).map(([date, items]) => `
|
||||
<div class="history-group">
|
||||
<div class="history-date-header">${date}</div>
|
||||
${items.map(r => `
|
||||
<div class="history-item" data-id="${r.id}">
|
||||
<span class="history-time">${formatTimeOnly(r.created_at)}</span>
|
||||
<span class="history-content ${!r.content ? 'empty' : ''}">${r.content || '(未备注)'}</span>
|
||||
<div class="history-actions">
|
||||
<button onclick="editHistoryItem(${r.id}, '${escapeHtml(r.content || '')}')" title="编辑">✏️</button>
|
||||
<button class="btn-delete" onclick="deleteHistoryItem(${r.id})" title="删除">🗑️</button>
|
||||
</div>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
`).join('');
|
||||
} catch (err) {
|
||||
console.error('加载历史失败:', err);
|
||||
showToast('加载失败', false);
|
||||
}
|
||||
}
|
||||
|
||||
function groupByDate(records) {
|
||||
const groups = {};
|
||||
records.forEach(r => {
|
||||
const date = new Date(r.created_at);
|
||||
const key = `${date.getMonth() + 1}月${date.getDate()}日`;
|
||||
if (!groups[key]) groups[key] = [];
|
||||
groups[key].push(r);
|
||||
});
|
||||
return groups;
|
||||
}
|
||||
|
||||
// 编辑历史记录
|
||||
window.editHistoryItem = async function(id, currentContent) {
|
||||
const newContent = prompt('修改备注:', currentContent);
|
||||
if (newContent === null) return;
|
||||
|
||||
try {
|
||||
await fetch(`${API_BASE}/api/din/${id}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ content: newContent.trim() })
|
||||
});
|
||||
|
||||
showToast('已更新');
|
||||
loadHistory(); // 刷新历史列表
|
||||
loadRecent(); // 刷新最近列表
|
||||
} catch (err) {
|
||||
showToast('更新失败', false);
|
||||
}
|
||||
};
|
||||
|
||||
// 删除历史记录
|
||||
window.deleteHistoryItem = async function(id) {
|
||||
if (!confirm('确定删除这条记录？')) return;
|
||||
|
||||
try {
|
||||
await fetch(`${API_BASE}/api/din/${id}`, { method: 'DELETE' });
|
||||
|
||||
showToast('已删除');
|
||||
loadHistory(); // 刷新历史列表
|
||||
loadRecent(); // 刷新最近列表
|
||||
updateStats(); // 刷新统计
|
||||
} catch (err) {
|
||||
showToast('删除失败', false);
|
||||
}
|
||||
};
|
||||
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML.replace(/'/g, "'").replace(/"/g, """);
|
||||
}
|
||||
|
||||
// 启动
|
||||
init();
|
||||
|
||||
@ -50,7 +50,7 @@
|
||||
<div class="recent-panel" id="recent-panel">
|
||||
<div class="recent-title">
|
||||
<span>最近记录</span>
|
||||
<span class="recent-count" id="recent-count">0</span>
|
||||
<span class="view-all" id="view-all">查看全部 →</span>
|
||||
</div>
|
||||
<div class="recent-list" id="recent-list">
|
||||
<div class="recent-item">
|
||||
@ -59,6 +59,19 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 历史记录面板（全屏） -->
|
||||
<div class="history-overlay" id="history-overlay">
|
||||
<div class="history-panel">
|
||||
<div class="history-header">
|
||||
<h2>历史记录</h2>
|
||||
<button class="close-btn" id="close-history">✕</button>
|
||||
</div>
|
||||
<div class="history-list" id="history-list">
|
||||
<!-- 动态加载 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 快速输入面板 -->
|
||||
<div class="input-overlay" id="input-overlay">
|
||||
<div class="input-panel">
|
||||
|
||||
179
static/style.css
179
static/style.css
@ -324,7 +324,186 @@ body {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.view-all {
|
||||
font-size: 0.8rem;
|
||||
color: #ff4757;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.view-all:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* 历史记录面板 */
|
||||
.history-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0,0,0,0.9);
|
||||
backdrop-filter: blur(20px);
|
||||
z-index: 150;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.history-overlay.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.history-panel {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.history-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.history-header h2 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: rgba(255,255,255,0.1);
|
||||
color: #fff;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background: rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
.history-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.history-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
background: rgba(255,255,255,0.05);
|
||||
border-radius: 16px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.history-item:hover {
|
||||
background: rgba(255,255,255,0.08);
|
||||
}
|
||||
|
||||
.history-date {
|
||||
font-size: 0.7rem;
|
||||
color: #666;
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.history-date .day {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.history-date .month {
|
||||
font-size: 0.6rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.history-time {
|
||||
font-size: 0.75rem;
|
||||
color: #888;
|
||||
min-width: 50px;
|
||||
font-family: 'SF Mono', monospace;
|
||||
}
|
||||
|
||||
.history-content {
|
||||
flex: 1;
|
||||
font-size: 0.95rem;
|
||||
color: #ddd;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.history-content.empty {
|
||||
color: #555;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.history-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.history-actions button {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: rgba(255,255,255,0.1);
|
||||
color: #888;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.history-actions button:hover {
|
||||
background: rgba(255,255,255,0.15);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.history-actions .btn-delete:hover {
|
||||
background: #ff4757;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 历史记录分组 */
|
||||
.history-group {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.history-date-header {
|
||||
font-size: 0.8rem;
|
||||
color: #666;
|
||||
padding: 8px 0;
|
||||
margin-bottom: 8px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* Toast */
|
||||
.toast {
|
||||
.toast {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user