|
|
{% extends "base.html" %} |
|
|
|
|
|
{% block title %}管理面板 - Wisdom Hub{% endblock %} |
|
|
|
|
|
{% block content %} |
|
|
<div class="dashboard-container" style=" |
|
|
max-width: 1200px; |
|
|
margin: 0 auto; |
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8)); |
|
|
backdrop-filter: blur(10px); |
|
|
border-radius: 24px; |
|
|
box-shadow: 0 8px 32px rgba(99, 145, 197, 0.15); |
|
|
border: 1px solid rgba(99, 145, 197, 0.2); |
|
|
padding: 2rem; |
|
|
"> |
|
|
<div class="dashboard-header" style=" |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
margin-bottom: 2rem; |
|
|
padding-bottom: 1.5rem; |
|
|
border-bottom: 2px solid #B3CFEF; |
|
|
"> |
|
|
<div style="display: flex; align-items: center; gap: 1rem;"> |
|
|
<i class="fas fa-chart-line" style=" |
|
|
font-size: 2rem; |
|
|
color: #6391C5; |
|
|
"></i> |
|
|
<h2 style=" |
|
|
font-size: 1.75rem; |
|
|
font-weight: 600; |
|
|
color: #6391C5; |
|
|
margin: 0; |
|
|
">文章管理</h2> |
|
|
</div> |
|
|
|
|
|
<div class="dashboard-actions" style=" |
|
|
display: flex; |
|
|
gap: 1rem; |
|
|
"> |
|
|
<button onclick="location.href='{{ url_for('admin.editor') }}'" style=" |
|
|
padding: 0.75rem 1.5rem; |
|
|
background: linear-gradient(135deg, #6391C5, #C5CDFD); |
|
|
color: white; |
|
|
border: none; |
|
|
border-radius: 12px; |
|
|
font-weight: 500; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.5rem; |
|
|
"> |
|
|
<i class="fas fa-plus"></i> |
|
|
新建文章 |
|
|
</button> |
|
|
|
|
|
<button onclick="exportData()" style=" |
|
|
padding: 0.75rem 1.5rem; |
|
|
background: rgba(99, 145, 197, 0.1); |
|
|
color: #6391C5; |
|
|
border: 2px solid #B3CFEF; |
|
|
border-radius: 12px; |
|
|
font-weight: 500; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.5rem; |
|
|
"> |
|
|
<i class="fas fa-download"></i> |
|
|
导出数据 |
|
|
</button> |
|
|
|
|
|
<button onclick="document.getElementById('importInput').click()" style=" |
|
|
padding: 0.75rem 1.5rem; |
|
|
background: rgba(99, 145, 197, 0.1); |
|
|
color: #6391C5; |
|
|
border: 2px solid #B3CFEF; |
|
|
border-radius: 12px; |
|
|
font-weight: 500; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.5rem; |
|
|
"> |
|
|
<i class="fas fa-upload"></i> |
|
|
导入数据 |
|
|
</button> |
|
|
<input type="file" id="importInput" style="display: none" accept=".db"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="articles-table" style=" |
|
|
background: white; |
|
|
border-radius: 16px; |
|
|
box-shadow: 0 4px 16px rgba(99, 145, 197, 0.1); |
|
|
overflow: hidden; |
|
|
"> |
|
|
<table style="width: 100%; border-collapse: collapse;"> |
|
|
<thead> |
|
|
<tr style="background: #FEEEDA;"> |
|
|
<th style=" |
|
|
text-align: left; |
|
|
padding: 1rem 1.5rem; |
|
|
color: #6391C5; |
|
|
font-weight: 600; |
|
|
border-bottom: 2px solid #B3CFEF; |
|
|
">标题</th> |
|
|
<th style=" |
|
|
text-align: left; |
|
|
padding: 1rem 1.5rem; |
|
|
color: #6391C5; |
|
|
font-weight: 600; |
|
|
border-bottom: 2px solid #B3CFEF; |
|
|
">创建时间</th> |
|
|
<th style=" |
|
|
text-align: left; |
|
|
padding: 1rem 1.5rem; |
|
|
color: #6391C5; |
|
|
font-weight: 600; |
|
|
border-bottom: 2px solid #B3CFEF; |
|
|
">更新时间</th> |
|
|
<th style=" |
|
|
text-align: left; |
|
|
padding: 1rem 1.5rem; |
|
|
color: #6391C5; |
|
|
font-weight: 600; |
|
|
border-bottom: 2px solid #B3CFEF; |
|
|
">操作</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody> |
|
|
{% for article in articles %} |
|
|
<tr style="transition: all 0.3s ease;"> |
|
|
<td style=" |
|
|
padding: 1rem 1.5rem; |
|
|
border-bottom: 1px solid #B3CFEF; |
|
|
color: #6391C5; |
|
|
">{{ article.title }}</td> |
|
|
<td style=" |
|
|
padding: 1rem 1.5rem; |
|
|
border-bottom: 1px solid #B3CFEF; |
|
|
color: #6391C5; |
|
|
">{{ article.created_at.strftime('%Y-%m-%d') }}</td> |
|
|
<td style=" |
|
|
padding: 1rem 1.5rem; |
|
|
border-bottom: 1px solid #B3CFEF; |
|
|
color: #6391C5; |
|
|
">{{ article.updated_at.strftime('%Y-%m-%d') }}</td> |
|
|
<td style=" |
|
|
padding: 1rem 1.5rem; |
|
|
border-bottom: 1px solid #B3CFEF; |
|
|
"> |
|
|
<div style="display: flex; gap: 0.5rem;"> |
|
|
<a href="{{ url_for('admin.editor', slug=article.slug) }}" style=" |
|
|
padding: 0.5rem 1rem; |
|
|
background: linear-gradient(135deg, #6391C5, #C5CDFD); |
|
|
color: white; |
|
|
border-radius: 8px; |
|
|
text-decoration: none; |
|
|
font-size: 0.875rem; |
|
|
transition: all 0.3s ease; |
|
|
">编辑</a> |
|
|
<button onclick="deleteArticle('{{ article.slug }}')" style=" |
|
|
padding: 0.5rem 1rem; |
|
|
background: rgba(255, 71, 87, 0.1); |
|
|
color: #ff4757; |
|
|
border: 1px solid rgba(255, 71, 87, 0.2); |
|
|
border-radius: 8px; |
|
|
font-size: 0.875rem; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
">删除</button> |
|
|
</div> |
|
|
</td> |
|
|
</tr> |
|
|
{% endfor %} |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.querySelectorAll('tbody tr').forEach(row => { |
|
|
row.addEventListener('mouseenter', () => { |
|
|
row.style.background = 'rgba(99, 145, 197, 0.05)'; |
|
|
}); |
|
|
row.addEventListener('mouseleave', () => { |
|
|
row.style.background = 'white'; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('button').forEach(button => { |
|
|
button.addEventListener('mouseenter', () => { |
|
|
if (button.style.background.includes('linear-gradient')) { |
|
|
button.style.transform = 'translateY(-2px)'; |
|
|
button.style.boxShadow = '0 4px 12px rgba(99, 145, 197, 0.2)'; |
|
|
} else if (button.style.background.includes('rgba(255, 71, 87')) { |
|
|
button.style.background = 'rgba(255, 71, 87, 0.2)'; |
|
|
} else { |
|
|
button.style.borderColor = '#6391C5'; |
|
|
button.style.background = 'rgba(99, 145, 197, 0.15)'; |
|
|
} |
|
|
}); |
|
|
|
|
|
button.addEventListener('mouseleave', () => { |
|
|
if (button.style.background.includes('linear-gradient')) { |
|
|
button.style.transform = 'none'; |
|
|
button.style.boxShadow = 'none'; |
|
|
} else if (button.style.background.includes('rgba(255, 71, 87')) { |
|
|
button.style.background = 'rgba(255, 71, 87, 0.1)'; |
|
|
} else { |
|
|
button.style.borderColor = '#B3CFEF'; |
|
|
button.style.background = 'rgba(99, 145, 197, 0.1)'; |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a').forEach(link => { |
|
|
if (link.style.background.includes('linear-gradient')) { |
|
|
link.addEventListener('mouseenter', () => { |
|
|
link.style.transform = 'translateY(-2px)'; |
|
|
link.style.boxShadow = '0 4px 12px rgba(99, 145, 197, 0.2)'; |
|
|
}); |
|
|
|
|
|
link.addEventListener('mouseleave', () => { |
|
|
link.style.transform = 'none'; |
|
|
link.style.boxShadow = 'none'; |
|
|
}); |
|
|
} |
|
|
}); |
|
|
|
|
|
async function deleteArticle(slug) { |
|
|
if (!confirm('确定要删除这篇文章吗？')) return; |
|
|
|
|
|
try { |
|
|
const response = await fetch(`/api/articles/${slug}`, { |
|
|
method: 'DELETE' |
|
|
}); |
|
|
|
|
|
if (response.ok) { |
|
|
location.reload(); |
|
|
} |
|
|
} catch (error) { |
|
|
console.error('Error:', error); |
|
|
alert('删除失败，请重试'); |
|
|
} |
|
|
} |
|
|
|
|
|
async function exportData() { |
|
|
try { |
|
|
window.location.href = '/api/export'; |
|
|
} catch (error) { |
|
|
console.error('Error:', error); |
|
|
alert('导出失败，请重试'); |
|
|
} |
|
|
} |
|
|
|
|
|
document.getElementById('importInput').addEventListener('change', async (event) => { |
|
|
const file = event.target.files[0]; |
|
|
if (!file) return; |
|
|
|
|
|
try { |
|
|
const formData = new FormData(); |
|
|
formData.append('file', file); |
|
|
|
|
|
const response = await fetch('/api/import', { |
|
|
method: 'POST', |
|
|
body: formData |
|
|
}); |
|
|
|
|
|
const data = await response.json(); |
|
|
if (response.ok) { |
|
|
alert('导入成功，页面将刷新'); |
|
|
location.reload(); |
|
|
} else { |
|
|
throw new Error(data.error || '导入失败'); |
|
|
} |
|
|
} catch (error) { |
|
|
console.error('Error:', error); |
|
|
alert('导入失败：' + error.message); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
{% endblock %} |
