feat: 走心评论（精选评论）+ 移动端评论框底栏布局修复

- 底栏：≤480px 压缩按钮内边距，SE 等小屏单行放下；换行时按钮组右对齐 - Worker：comments 加 is_featured；PUT /comments/:id 支持切换；新增公开接口 GET /api/v2/featured/comments（排除悄悄话/待审/已删，服务端渲染 markdown） - 前端：评论区注入「精选」按钮（回复右侧，仅管理员可见） - 关于页：走心评论板块（标题寄语通栏 + 卡片瀑布流），排在热力图上方
2026-10-05 12:08:33 +08:00
1 parent 3d7d7bd396
commit 1b71fba413
@@ -0,0 +1,146 @@
+{{/* 走心评论：管理员在评论区精选的评论，关于页展示。
+     数据走 Worker 公开接口 /api/v2/featured/comments（悄悄话评论永远不进精选列表）。
+     本地预览 / 接口故障时优雅降级：整块隐藏或显示占位文案。
+     调试参数：?featmock=1 用本地 mock 渲染（仅用于排版预览，生产无害）。 */}}
+<style>
+.featc-wrap { min-width: 0; }
+.featc-title {
+    font-size: 1.35rem; font-weight: 700; color: var(--text-title-color);
+    line-height: 1.3; margin: 0 0 10px;
+}
+.featc-title .featc-count {
+    font-size: 0.72rem; font-weight: 600; vertical-align: super;
+    margin-left: 3px; color: var(--theme-main, #07c160);
+}
+.featc-desc { font-size: 0.86rem; line-height: 1.8; color: var(--text-desc, #777); margin: 0 0 18px; }
+/* 瀑布流：CSS 多列布局，卡片高度不一时自然错落 */
+.featc-grid {
+    columns: 3; column-gap: 14px; min-width: 0;
+}
+.featc-card {
+    break-inside: avoid; -webkit-column-break-inside: avoid;
+    display: inline-flex; flex-direction: column; gap: 8px; width: 100%;
+    margin: 0 0 14px; box-sizing: border-box;
+    background: var(--bg-card, #fff);
+    border: 1px solid var(--border-main, #eee);
+    border-radius: 10px; padding: 16px 16px 12px;
+    text-decoration: none; color: inherit; min-width: 0;
+    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
+}
+.featc-card:hover {
+    transform: translateY(-3px);
+    border-color: var(--theme-main-30, rgba(7,193,96,.3));
+    box-shadow: var(--shadow-popover, 0 4px 20px rgba(0,0,0,.1));
+    text-decoration: none; color: inherit;
+}
+.featc-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
+.featc-avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; object-fit: cover; }
+.featc-nick {
+    font-size: 0.92rem; font-weight: 700; color: var(--text-title-color, #333);
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.featc-date { margin-left: auto; flex: none; font-size: 0.72rem; color: var(--text-muted, #999); }
+.featc-content {
+    font-size: 0.88rem; line-height: 1.7; color: var(--text-main, #333);
+    margin: 0; word-break: break-word;
+    display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
+}
+.featc-content img { max-height: 1.2em; vertical-align: sub; }
+.featc-content p { margin: 0; }
+.featc-foot {
+    font-size: 0.72rem; color: var(--text-muted, #999); line-height: 1.6;
+    padding-left: 8px; border-left: 2px solid var(--border-main, #eee);
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.featc-foot a { color: inherit; }
+.featc-empty { font-size: 0.86rem; color: var(--text-muted, #999); padding: 8px 0; }
+/* 暗色模式：主题对文字色是「按元素覆写」而不是重定义变量（--text-title-color
+   在暗色下仍是深色字），这里必须显式给出暗色文字色，否则标题会隐身 */
+[data-theme="dark"] .featc-title,
+[data-theme="dark"] .featc-nick { color: var(--text-title-dark-color, #e5e7eb); }
+[data-theme="dark"] .featc-content { color: var(--text-content-dark-color, #d1d5db); }
+@media (max-width: 1100px) {
+    .featc-grid { columns: 2; }
+}
+@media (max-width: 640px) {
+    .featc-grid { columns: 1; }
+    .featc-card { margin-bottom: 10px; padding: 13px 14px 10px; }
+    .featc-desc { margin-bottom: 14px; }
+}
+@media (prefers-reduced-motion: reduce) {
+    .featc-card, .featc-card:hover { transition: none; transform: none; }
+}
+</style>
+
+<div class="featc-wrap">
+  <div class="featc-title">走心评论<span class="featc-count" id="featc-count" hidden></span></div>
+  <p class="featc-desc">当我看到各位在不同的时间和故事中，发出一份份走心的评论时，一份温暖之意即笼罩在我的心头。</p>
+  <div class="featc-grid" id="featc-grid">
+    <div class="featc-empty" id="featc-loading">加载中…</div>
+  </div>
+</div>
+
+<script type="text/javascript">
+(function () {
+  var API = (window.artalkConfig && window.artalkConfig.server || 'https://api.200181.xyz').replace(/\/+$/, '') +
+    '/api/v2/featured/comments?limit=8';
+  var grid = document.getElementById('featc-grid');
+  if (!grid) return;
+
+  function esc(s) {
+    return String(s == null ? '' : s).replace(/[&<>"']/g, function (c) {
+      return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
+    });
+  }
+
+  function render(list) {
+    var countEl = document.getElementById('featc-count');
+    if (countEl && list.length) { countEl.textContent = list.length + '个'; countEl.hidden = false; }
+    if (!list.length) {
+      grid.innerHTML = '<div class="featc-empty">还没有走心评论，去和博主聊聊吧～</div>';
+      return;
+    }
+    var html = '';
+    for (var i = 0; i < list.length; i++) {
+      var c = list[i];
+      var avatar = 'https://weavatar.com/avatar/' + esc(c.email_encrypted) + '?d=mp&s=120';
+      var nick = esc(c.nick);
+      html +=
+        '<a class="featc-card" href="' + esc(c.page_url) + '#atk-comment-' + esc(c.id) + '">' +
+          '<div class="featc-head">' +
+            '<img class="featc-avatar" src="' + avatar + '" alt="" loading="lazy" referrerpolicy="no-referrer">' +
+            '<span class="featc-nick">' + nick + '</span>' +
+            '<span class="featc-date">' + esc(c.date) + '</span>' +
+          '</div>' +
+          '<div class="featc-content">' + c.content_html + '</div>' +
+          '<div class="featc-foot">发表在 ' + esc(c.page_title || '页面') + '</div>' +
+        '</a>';
+    }
+    grid.innerHTML = html;
+  }
+
+  function load() {
+    // 排版预览 mock（?featmock=1）：接口未部署 / 无精选数据时也能看样式
+    if (/[?&]featmock=1/.test(location.search)) {
+      render([
+        { id: 1, nick: '森屿', email_encrypted: '897defecd8ecc9ad844d86f615b967d2', link: '', date: '2026-06-27 20:57', content_html: '<p>“被记得”本身就是一件幸福的事</p>', page_url: '#', page_title: '碎碎念｜被记得 – 去青岛看一场迟到很久的海' },
+        { id: 2, nick: '小十', email_encrypted: 'e08b1ed883704d10a4e4b9c05b2bf019', link: '', date: '2026-05-11 17:00', content_html: '<p>哇哦🎉，环境真的太好啦，下次我也想去！</p>', page_url: '#', page_title: '碎碎念｜“撩蝉” – 去闯进其他人的生活' },
+        { id: 3, nick: '群林', email_encrypted: '897defecd8ecc9ad844d86f615b967d2', link: 'https://usj.cc', date: '2026-01-25 13:57', content_html: '<p>欢迎来做客，博客新增了留言板，有问题随时找我～</p>', page_url: '#', page_title: '留言' },
+        { id: 4, nick: '小柒', email_encrypted: 'e08b1ed883704d10a4e4b9c05b2bf019', link: '', date: '2025-01-21 01:07', content_html: '<p>2025 年新的一年，一起加油，希望一切顺利！</p>', page_url: '#', page_title: '留言' },
+        { id: 5, nick: '阿澜', email_encrypted: '897defecd8ecc9ad844d86f615b967d2', link: '', date: '2025-11-08 22:14', content_html: '<p>这篇文章我反反复复读了三遍。「把日子过成自己喜欢的样子」说起来简单，做起来才知道有多难。谢谢博主的文字，让我在加班的深夜里被治愈了一下，明天继续加油。</p>', page_url: '#', page_title: '碎碎念｜深夜书桌 – 与自己和解的十个瞬间' },
+        { id: 6, nick: 'Momo', email_encrypted: 'e08b1ed883704d10a4e4b9c05b2bf019', link: '', date: '2025-09-30 09:42', content_html: '<p>签到打卡 ~</p>', page_url: '#', page_title: '碎碎念｜秋日漫步 – 路过巷口的桂花香' },
+        { id: 7, nick: '北屿', email_encrypted: '897defecd8ecc9ad844d86f615b967d2', link: '', date: '2025-08-12 19:03', content_html: '<p>从友链跳转过来的，一口气读了五篇，博客的排版和摄影都太舒服了。已经加入 RSS 阅读器，期待更新！</p>', page_url: '#', page_title: '碎碎念｜山海之间 – 一次说走就走的旅行' }
+      ]);
+      return;
+    }
+    fetch(API)
+      .then(function (r) { return r.ok ? r.json() : Promise.reject(r.status); })
+      .then(function (data) { render((data && data.comments) || []); })
+      .catch(function () {
+        if (grid) grid.innerHTML = '<div class="featc-empty">还没有走心评论，去和博主聊聊吧～</div>';
+      });
+  }
+
+  load();
+})();
+</script>