AaronXu
107 lines
3.7 KiB
HTML
107 lines
3.7 KiB
HTML
<!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="container" id="app">
|
||
<a href="index.html" class="back-link">← 返回笔记列表</a>
|
||
<div id="noteDetail"></div>
|
||
</div>
|
||
|
||
<div class="toast-container" id="toastContainer"></div>
|
||
|
||
<script src="js/data.js"></script>
|
||
<script src="js/common.js"></script>
|
||
<script>
|
||
(function () {
|
||
var id = parseInt(getUrlParam('id'));
|
||
var note = null;
|
||
for (var i = 0; i < DATA.notes.length; i++) {
|
||
if (DATA.notes[i].id === id) { note = DATA.notes[i]; break; }
|
||
}
|
||
|
||
if (!note) {
|
||
document.getElementById('noteDetail').innerHTML = emptyState('😕', '笔记未找到');
|
||
return;
|
||
}
|
||
|
||
document.title = note.title + ' - 笔记小站';
|
||
var cat = findById(DATA.categories, note.categoryId);
|
||
var author = findById(DATA.users, note.userId);
|
||
var comments = DATA.comments.filter(function (c) { return c.noteId === id; });
|
||
|
||
var h = '';
|
||
h += '<div class="note-detail-header">';
|
||
h += '<h1>' + note.title + '</h1>';
|
||
h += '<div class="note-detail-meta">';
|
||
h += categoryBadge(cat);
|
||
h += '<span>👤 ' + (author ? author.nickname : '未知作者') + '</span>';
|
||
h += '<span>📅 ' + note.createdAt + '</span>';
|
||
h += '</div>';
|
||
h += '</div>';
|
||
h += '<div class="note-detail-body"><p>' + note.content + '</p></div>';
|
||
|
||
h += '<div class="comment-section">';
|
||
h += '<h3>💬 评论（' + comments.length + '）</h3>';
|
||
for (var j = 0; j < comments.length; j++) {
|
||
var c = comments[j];
|
||
var cu = findById(DATA.users, c.userId);
|
||
h += '<div class="comment-item">';
|
||
h += '<div class="comment-avatar">' + (cu ? cu.avatar : '👤') + '</div>';
|
||
h += '<div class="comment-body">';
|
||
h += '<div class="comment-meta"><strong>' + (cu ? cu.nickname : c.author || '游客') + '</strong> <span>' + c.createdAt + '</span></div>';
|
||
h += '<p>' + c.content + '</p>';
|
||
h += '</div></div>';
|
||
}
|
||
|
||
h += '<div class="comment-form-wrapper">';
|
||
h += '<h4>📝 发表评论</h4>';
|
||
h += '<div class="comment-form">';
|
||
h += '<div class="form-group"><input type="text" id="commentNick" placeholder="你的昵称" maxlength="20"></div>';
|
||
h += '<div class="form-group"><textarea id="commentContent" placeholder="写下你的想法..." rows="3"></textarea></div>';
|
||
h += '<button class="btn btn-primary" onclick="submitComment()">发布评论</button>';
|
||
h += '</div></div>';
|
||
h += '</div>';
|
||
|
||
document.getElementById('noteDetail').innerHTML = h;
|
||
|
||
window.submitComment = function () {
|
||
var nick = document.getElementById('commentNick').value.trim();
|
||
var content = document.getElementById('commentContent').value.trim();
|
||
if (!nick) { showToast('请填写昵称', 'error'); return; }
|
||
if (!content) { showToast('请输入评论内容', 'error'); return; }
|
||
|
||
var guestUser = { id: 99, nickname: nick, avatar: '💬', username: 'guest' };
|
||
DATA.comments.push({
|
||
id: DATA.comments.length + 1,
|
||
noteId: note.id,
|
||
userId: 99,
|
||
author: nick,
|
||
content: content,
|
||
createdAt: new Date().toISOString().slice(0, 16).replace('T', ' ')
|
||
});
|
||
|
||
showToast('评论发表成功', 'success');
|
||
document.getElementById('commentContent').value = '';
|
||
document.getElementById('commentNick').value = '';
|
||
setTimeout(function () { window.location.reload(); }, 600);
|
||
};
|
||
|
||
function findById(arr, id) {
|
||
for (var i = 0; i < arr.length; i++) { if (arr[i].id === id) return arr[i]; }
|
||
return null;
|
||
}
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|