AaronXu
228 lines
7.2 KiB
PHP
228 lines
7.2 KiB
PHP
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>笔记管理 - 后台 - 笔记小站</title>
|
||
<link rel="stylesheet" href="css/style.css">
|
||
</head>
|
||
<body>
|
||
|
||
<nav class="navbar">
|
||
<a class="navbar-brand" href="index.html"><span class="logo-icon">📝</span> 笔记小站</a>
|
||
<div class="navbar-actions" id="navbarActions"></div>
|
||
</nav>
|
||
|
||
<div class="admin-layout">
|
||
<aside class="admin-sidebar">
|
||
<nav class="admin-nav">
|
||
<a class="admin-nav-item" href="admin_categories.php">
|
||
<span>📂</span> 分类管理
|
||
</a>
|
||
<a class="admin-nav-item active" href="admin_notes.php">
|
||
<span>📝</span> 笔记管理
|
||
</a>
|
||
<a class="admin-nav-item" href="admin_comments.php">
|
||
<span>💬</span> 评论管理
|
||
</a>
|
||
<a class="admin-nav-item" href="admin_users.php">
|
||
<span>👥</span> 用户管理
|
||
</a>
|
||
</nav>
|
||
</aside>
|
||
|
||
<main class="admin-main">
|
||
<div class="admin-panel">
|
||
<div class="admin-panel-header">
|
||
<h3>📝 笔记管理</h3>
|
||
<button class="btn btn-primary btn-sm" onclick="openNoteModal(0)">+ 新增笔记</button>
|
||
</div>
|
||
<div class="admin-panel-body">
|
||
<table class="admin-table">
|
||
<thead>
|
||
<tr>
|
||
<th>ID</th>
|
||
<th>标题</th>
|
||
<th>分类</th>
|
||
<th>作者</th>
|
||
<th>时间</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<!--
|
||
========================================
|
||
后端循环输出 <tr>，示例：
|
||
<tr>
|
||
<td>1</td>
|
||
<td>如何搭建个人博客</td>
|
||
<td>📂 技术笔记</td>
|
||
<td>admin</td>
|
||
<td>2026-01-10</td>
|
||
<td class="actions">
|
||
<button class="btn btn-sm" onclick="openNoteModal(1)">编辑</button>
|
||
<button class="btn btn-sm btn-danger" onclick="deleteNote(1)">删除</button>
|
||
</td>
|
||
</tr>
|
||
========================================
|
||
-->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<!-- ==================== 新增 / 编辑笔记 模态框 ==================== -->
|
||
<div class="modal-overlay" id="noteModal" style="display:none;">
|
||
<div class="form-modal" onclick="event.stopPropagation()" style="width:580px;max-width:95vw;">
|
||
<h3 id="noteModalTitle">新增笔记</h3>
|
||
<input type="hidden" id="fnid" value="0">
|
||
|
||
<div class="form-group">
|
||
<label>标题</label>
|
||
<input type="text" id="fntitle" placeholder="请输入笔记标题">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>分类</label>
|
||
<select id="fncat">
|
||
<!--
|
||
========================================
|
||
后端循环输出 <option>，示例：
|
||
<option value="1">📂 技术笔记</option>
|
||
<option value="2">📂 生活随笔</option>
|
||
========================================
|
||
-->
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>内容</label>
|
||
<textarea id="fncontent" rows="8" placeholder="请输入笔记内容"></textarea>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button class="btn" onclick="closeNoteModal()">取消</button>
|
||
<button class="btn btn-primary" onclick="saveNote()">保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== 删除确认模态框 ==================== -->
|
||
<div class="modal-overlay" id="deleteModal" style="display:none;">
|
||
<div class="form-modal" onclick="event.stopPropagation()">
|
||
<h3>⚠️ 确认删除</h3>
|
||
<input type="hidden" id="deleteId" value="">
|
||
<p style="margin-bottom:16px;">确定要删除该笔记吗？此操作不可恢复。</p>
|
||
<div class="form-actions">
|
||
<button class="btn" onclick="closeDeleteModal()">取消</button>
|
||
<button class="btn btn-danger" onclick="confirmDeleteNote()">确认删除</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="toast-container" id="toastContainer"></div>
|
||
|
||
<script src="js/common.js"></script>
|
||
<script>
|
||
/* ==================== 笔记模态框 ==================== */
|
||
|
||
/**
|
||
* 打开新增 / 编辑笔记弹窗
|
||
* @param {number} id - 笔记 ID，0 = 新增，>0 = 编辑
|
||
*/
|
||
function openNoteModal(id) {
|
||
var titleEl = document.getElementById('noteModalTitle');
|
||
var nidEl = document.getElementById('fnid');
|
||
var titleVal = document.getElementById('fntitle');
|
||
var catVal = document.getElementById('fncat');
|
||
var contentVal = document.getElementById('fncontent');
|
||
|
||
if (id === 0) {
|
||
titleEl.textContent = '新增笔记';
|
||
nidEl.value = '0';
|
||
titleVal.value = '';
|
||
catVal.value = '';
|
||
contentVal.value = '';
|
||
} else {
|
||
titleEl.textContent = '编辑笔记';
|
||
nidEl.value = id;
|
||
|
||
// TODO: 开发者自行拉取笔记数据并填入
|
||
// titleVal.value = data.title;
|
||
// catVal.value = data.categoryId;
|
||
// contentVal.value = data.content;
|
||
}
|
||
|
||
document.getElementById('noteModal').style.display = 'flex';
|
||
}
|
||
|
||
/** 关闭笔记模态框 */
|
||
function closeNoteModal() {
|
||
document.getElementById('noteModal').style.display = 'none';
|
||
document.getElementById('fnid').value = '0';
|
||
}
|
||
|
||
/** 保存笔记 */
|
||
function saveNote() {
|
||
var id = document.getElementById('fnid').value;
|
||
var title = document.getElementById('fntitle').value.trim();
|
||
var catId = document.getElementById('fncat').value;
|
||
var content = document.getElementById('fncontent').value.trim();
|
||
|
||
if (!title || !content) { showToast('请填写标题和内容', 'error'); return; }
|
||
|
||
// TODO: 发送请求到后端保存
|
||
// fetch('/function/admin.php', {
|
||
// method: 'POST',
|
||
// headers: { 'Content-Type': 'application/json' },
|
||
// body: JSON.stringify({
|
||
// action: id === '0' ? 'addNote' : 'editNote',
|
||
// id: id === '0' ? null : parseInt(id),
|
||
// title: title,
|
||
// categoryId: parseInt(catId),
|
||
// content: content
|
||
// })
|
||
// }).then(...)
|
||
|
||
console.log('保存笔记:', { id, title, catId, content: content.slice(0, 50) + '...' });
|
||
|
||
closeNoteModal();
|
||
showToast('保存成功', 'success');
|
||
|
||
// window.location.reload();
|
||
}
|
||
|
||
/* ==================== 删除确认 ==================== */
|
||
|
||
function deleteNote(id) {
|
||
document.getElementById('deleteId').value = id;
|
||
document.getElementById('deleteModal').style.display = 'flex';
|
||
}
|
||
|
||
function closeDeleteModal() {
|
||
document.getElementById('deleteModal').style.display = 'none';
|
||
}
|
||
|
||
function confirmDeleteNote() {
|
||
var id = document.getElementById('deleteId').value;
|
||
|
||
// TODO: 发送删除请求
|
||
console.log('删除笔记, id:', id);
|
||
|
||
closeDeleteModal();
|
||
showToast('已删除', 'info');
|
||
|
||
// window.location.reload();
|
||
}
|
||
|
||
/* ==================== 点击遮罩关闭 ==================== */
|
||
document.getElementById('noteModal').addEventListener('click', function(e) {
|
||
if (e.target === this) closeNoteModal();
|
||
});
|
||
document.getElementById('deleteModal').addEventListener('click', function(e) {
|
||
if (e.target === this) closeDeleteModal();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|