From 2fc12e7b000ba027861dac014626d445250873a0 Mon Sep 17 00:00:00 2001
From: qing <1776177662@qq.com>
Date: Wed, 29 Jul 2026 10:59:40 +0800
Subject: [PATCH] =?UTF-8?q?feat(dnfs):=20=E5=8D=A1=E7=89=87=E5=A2=9E?=
=?UTF-8?q?=E5=8A=A0=E8=A7=82=E7=9C=8B/=E7=82=B9=E8=B5=9E/=E5=88=86?=
=?UTF-8?q?=E4=BA=AB=E4=BA=92=E5=8A=A8=E7=BB=9F=E8=AE=A1=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- dnfs.js: 新增眼睛/爱心/转发 SVG 图标常量与 makeStatItem 构造函数，
统计行挂载在 owner 胶囊下方，计数缺省显示 0（后端暂无该字段）
- theme.css: 新增 card-stats/stat-item/stat-num 样式
---
static/public/css/theme.css | 26 ++++++++++++++++++++++++++
static/public/js/dnfs.js | 33 ++++++++++++++++++++++++---------
2 files changed, 50 insertions(+), 9 deletions(-)
diff --git a/static/public/css/theme.css b/static/public/css/theme.css
index 04fe2ce..3627224 100644
--- a/static/public/css/theme.css
+++ b/static/public/css/theme.css
@@ -256,6 +256,32 @@ input[type="button"]:disabled {
white-space: nowrap;
}
+/* ===== Card Stats (dnfs 互动统计：观看/点赞/分享) ===== */
+.card-stats {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 1.1rem;
+ margin-top: 0.45rem;
+}
+.stat-item {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.3rem;
+ font-size: 0.78rem;
+ color: var(--muted);
+}
+.stat-item svg {
+ width: 14px;
+ height: 14px;
+ flex-shrink: 0;
+}
+.stat-num {
+ font-weight: 600;
+ color: var(--fg-secondary);
+ font-variant-numeric: tabular-nums;
+}
+
/* ===== Minimap (dnfs) ===== */
.minimap {
position: fixed;
diff --git a/static/public/js/dnfs.js b/static/public/js/dnfs.js
index 563761e..6f617d5 100644
--- a/static/public/js/dnfs.js
+++ b/static/public/js/dnfs.js
@@ -177,6 +177,23 @@ function renderMarkdown(element, content) {
element.innerHTML = md.render(content, {html: false});
}
+/* by qing — 互动统计图标：inline SVG，stroke=currentColor 自动跟随主题色 */
+const ICON_EYE = '';
+const ICON_HEART = '';
+const ICON_SHARE = '';
+
+/* by qing — 生成一个统计项：图标 + 数字，count 缺省显示 0 */
+function makeStatItem(iconSvg, count) {
+ let span = document.createElement('span');
+ span.className = "stat-item";
+ span.innerHTML = iconSvg; // 上方固定常量字符串，不含用户输入
+ let num = document.createElement('span');
+ num.className = "stat-num";
+ num.textContent = (count == null) ? "0" : String(count);
+ span.appendChild(num);
+ return span;
+}
+
/* ---- by qing ---- */
const stack = []; /* 用于存储当前节点的路径，也就是经过的每一个节点的id， 否则就回不去上一层*/
var article_title = document.getElementById('article-title');
@@ -269,9 +286,6 @@ function load_notes(main_node) {
ttl.appendChild(ttl1);
card.appendChild(ttl);
let wrt_div = document.createElement('p');
- //let vit_div = document.createElement('p');
- //let lke_div = document.createElement('p');
- //let srd_div = document.createElement('p');
// 发帖用户：头像圆点（取昵称首字符）+ 昵称，样式见 theme.css 的 Owner Chip 段
wrt_div.className = "card-owner";
let owner_text = (item.owner == null || item.owner === "") ? "匿名" : String(item.owner);
@@ -283,13 +297,14 @@ function load_notes(main_node) {
owner_name.textContent = owner_text;
wrt_div.appendChild(owner_avatar);
wrt_div.appendChild(owner_name);
- //vit_div.textContent = "观看数：" + item.visit_count;
- //lke_div.textContent = "点赞数：" + item.like_count;
- //srd_div.textContent = "分享数：" + item.share_count;
+ // 互动统计：眼睛=观看、爱心=点赞、转发=分享（后端 Notes 表暂无计数字段，缺省显示 0）
+ let sts_div = document.createElement('div');
+ sts_div.className = "card-stats";
+ sts_div.appendChild(makeStatItem(ICON_EYE, item.visit_count));
+ sts_div.appendChild(makeStatItem(ICON_HEART, item.like_count));
+ sts_div.appendChild(makeStatItem(ICON_SHARE, item.share_count));
ttl.appendChild(wrt_div);
- //ttl.appendChild(vit_div);
- //ttl.appendChild(lke_div);
- //ttl.appendChild(srd_div);
+ ttl.appendChild(sts_div);
let ctt = document.createElement('p');
renderMarkdown(ctt, item.content);
card.appendChild(ctt)