This commit is contained in:
qing committed 2026-07-21 11:29:32 +08:00
1 parent 6db8c9b413
commit 41fa9dd8cc
2 files changed
+19 -5

No files matched your search

+5 -3
View File
@@ -101,7 +101,8 @@ textarea.form-control { /* 针对同时具有 form-control 类的 <textarea> 元
border-radius:4px; /* 给节点添加 4px 的圆角边框,使边角呈现柔和的圆弧效果,减少生硬感,与页面中其他元素(如表单区域)的圆角设计形成风格统一。 */
border-left:3px solid #888; /* 在节点左侧设置 3px 宽的深灰色(#888)实线边框,作为视觉标识。这种左侧边框设计常用于突出条目重要性或进行分类标记,能快速吸引用户注意力并形成视觉焦点。 */
box-shadow:0 1px 2px #eee; /* 为节点添加轻微的阴影效果(水平偏移 0、垂直偏移 1px、模糊半径 2px,颜色为极浅灰色 #eee),使节点产生轻微的悬浮感,增强与背景的层次感,但又不会过于抢眼。 */
margin-bottom:10px /* 在节点底部设置 10px 的外边距,使列表中的多个节点之间保持适当距离,避免条目紧贴,保证列表的清晰可读性。 */
margin-bottom:10px; /* 在节点底部设置 10px 的外边距,使列表中的多个节点之间保持适当距离,避免条目紧贴,保证列表的清晰可读性。 */
cursor:pointer /* 整张卡片可点击进入节点,显示手型光标 */
}
.node:hover { /* .node 元素的鼠标悬浮状态样式,用于在用户将鼠标指针移到节点条目上时,提供视觉反馈以增强交互体验 */
@@ -141,10 +142,11 @@ textarea.form-control { /* 针对同时具有 form-control 类的 <textarea> 元
margin-top: 5px; /* 使其与上方的内容(如节点描述)保持微小距离,避免紧贴,提升布局清晰度。 */
}
.node-actions { /* 用于定义类名为 .node-actions 的元素样式,从命名和样式来看,该元素通常是节点(.node)内部的操作按钮容器(如 “编辑”“删除”“查看” 等按钮) */
.node-actions { /* 用于定义类名为 .node-actions 的元素样式,从命名和样式来看,该元素通常是节点(.node)内部的操作按钮容器(如 “编辑””删除””查看” 等按钮) */
display:flex; /* 使内部的操作按钮能够沿水平方向排列,方便控制按钮间的间距和对齐方式 */
gap:8px; /* 避免多个按钮紧贴在一起,使每个操作选项更易区分,提升点击准确性 */
justify-content:flex-end /* 控制按钮在水平方向的对齐方式:将所有操作按钮靠右对齐。这是内容条目中操作区的常见布局,既不干扰左侧主要内容的阅读,又符合用户寻找操作按钮的视觉习惯(通常在条目右侧)。 */
justify-content:flex-end; /* 控制按钮在水平方向的对齐方式:将所有操作按钮靠右对齐。这是内容条目中操作区的常见布局,既不干扰左侧主要内容的阅读,又符合用户寻找操作按钮的视觉习惯(通常在条目右侧)。 */
cursor:default /* 操作区不跟随卡片的 pointer 光标,提示用户这里是按钮区 */
}
.btn { /* 定义了一个基础按钮(.btn)的通用样式,适用于页面中各类按钮元素,具体解析如下 */
+14 -2
View File
@@ -315,8 +315,8 @@ function renderNodes(nodes) {
: '';
return `
<div class="node ${parsed.hasFile ? 'has-file' : ''}">
<div class="node-title" onclick="enterNode(${n.id})">
<div class="node ${parsed.hasFile ? 'has-file' : ''}" onclick="handleNodeClick(event, ${n.id})">
<div class="node-title">
<i class="fas ${parsed.hasFile ? 'fa-file' : 'fa-folder'}"></i> ${displayTitle}
</div>
${contentDisplay}
@@ -363,6 +363,18 @@ async function load(pid = 0) {
}
}
// 整个节点卡片的点击处理(点击卡片任意非按钮区域进入节点)
function handleNodeClick(event, id) {
var el = event.target;
while (el && el !== event.currentTarget) {
if (el.tagName === 'BUTTON' || el.closest('button') || el.closest('.node-actions')) {
return; // 点击了按钮或操作区,不进入节点
}
el = el.parentElement;
}
enterNode(id);
}
// 进入节点
function enterNode(id) {
const numericId = Number(id);