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,126 @@
+<!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">
+
+  <!-- Hero -->
+  <div class="hero">
+    <h1>📝 发现精彩内容</h1>
+    <p>分享技术、记录生活、沉淀思考——这里有你想看的一切</p>
+  </div>
+
+  <div class="main-content">
+
+    <!-- Sidebar: Categories -->
+    <aside class="sidebar">
+      <div class="category-panel">
+        <div class="category-panel-header">📂 笔记分类</div>
+        <ul class="category-list" id="categoryList"></ul>
+      </div>
+    </aside>
+
+    <!-- Content: Notes Grid -->
+    <main class="content-area">
+      <div class="content-header">
+        <h2 id="sectionTitle">📋 全部笔记</h2>
+        <div class="search-box">
+          <span class="search-icon">🔍</span>
+          <input type="text" id="searchInput" placeholder="搜索笔记..." value="">
+        </div>
+      </div>
+      <div class="notes-grid" id="notesGrid"></div>
+    </main>
+
+  </div>
+</div>
+
+<div class="toast-container" id="toastContainer"></div>
+
+<script src="js/data.js"></script>
+<script src="js/common.js"></script>
+<script>
+(function () {
+
+var catId = getUrlParam('cat') ? parseInt(getUrlParam('cat')) : null;
+
+function renderCategoryList() {
+  var counts = {};
+  DATA.notes.forEach(function (n) { counts[n.categoryId] = (counts[n.categoryId] || 0) + 1; });
+
+  function buildLink(id, icon, name, count) {
+    var active = catId === id ? ' active' : '';
+    return '<li class="category-item"><a class="' + active + '" href="index.html' + (id ? '?cat=' + id : '') + '">' +
+      '<span>' + icon + ' ' + name + '</span><span class="count">' + count + '</span></a></li>';
+  }
+
+  var html = buildLink(null, '📋', '全部笔记', DATA.notes.length);
+  DATA.categories.forEach(function (c) {
+    html += buildLink(c.id, c.icon, c.name, counts[c.id] || 0);
+  });
+  document.getElementById('categoryList').innerHTML = html;
+}
+
+function renderNotes() {
+  var cat = catId ? DATA.categories.find(function (c) { return c.id === catId; }) : null;
+  var q = (document.getElementById('searchInput').value || '').toLowerCase();
+
+  var notes = DATA.notes.filter(function (n) {
+    if (catId && n.categoryId !== catId) return false;
+    if (q && n.title.toLowerCase().indexOf(q) === -1 && n.excerpt.toLowerCase().indexOf(q) === -1 && n.content.toLowerCase().indexOf(q) === -1) return false;
+    return true;
+  });
+
+  document.getElementById('sectionTitle').textContent = cat ? cat.icon + ' ' + cat.name : '📋 全部笔记';
+
+  if (notes.length === 0) {
+    document.getElementById('notesGrid').innerHTML = emptyState('📭', '暂无笔记内容');
+    return;
+  }
+
+  var delays = ['anim-fade-up-d1', 'anim-fade-up-d2', 'anim-fade-up-d3', 'anim-fade-up-d4', 'anim-fade-up-d5', 'anim-fade-up-d6'];
+  document.getElementById('notesGrid').innerHTML = notes.map(function (n, i) {
+    var c = DATA.categories.find(function (x) { return x.id === n.categoryId; });
+    var cc = DATA.comments.filter(function (x) { return x.noteId === n.id; }).length;
+    return '<a href="note.html?id=' + n.id + '" class="note-card anim-fade-up ' + delays[i % 6] + '">' +
+      categoryBadge(c) +
+      '<h3 class="note-title">' + n.title + '</h3>' +
+      '<p class="note-excerpt">' + n.excerpt + '</p>' +
+      '<div class="note-meta"><span>👤 ' + n.authorName + '</span><span>👁️ ' + n.views + '</span><span>💬 ' + cc + '</span><span>❤️ ' + n.likes + '</span></div>' +
+    '</a>';
+  }).join('');
+}
+
+renderCategoryList();
+renderNotes();
+
+var searchInput = document.getElementById('searchInput');
+if (searchInput) {
+  var timer;
+  searchInput.addEventListener('input', function () {
+    clearTimeout(timer);
+    timer = setTimeout(renderNotes, 200);
+  });
+  searchInput.addEventListener('keydown', function (e) {
+    if (e.key === 'Escape') { this.value = ''; renderNotes(); }
+  });
+}
+
+})();
+</script>
+</body>
+</html>