08-12-周三_14-20-35

2026-08-12 14:20:36 +08:00
parent 977f7eec96
commit 56dd5b5adf
16 changed files with 1867 additions and 4 deletions
@@ -0,0 +1,106 @@
+<!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">&larr; 返回笔记列表</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>