// 认证改为 HttpOnly Cookie(gateway 下发 q4_token),浏览器同源请求自动携带,JS 不再经手 Token
/* by qing.
*
* 用于获取一个节点下的所有子节点信息,0为根节点。
*/
async function getNode(id) {
try {
obj = { "pid": id }
jsonBody = JSON.stringify(obj)
console.log(jsonBody)
const res = await fetch('/get_notes', {
method: 'POST',
headers: {
'Content-Type': 'application/json', // 告诉服务器内容为json
'Target-Url': 'http://127.0.0.1:8006'
},
body: jsonBody
});
const responseText = await res.text();
// WAF 拦截:弹提示并中止,不能落入 catch(其会误跳登录页)
if (window.WafTip && WafTip.isBlocked(res, responseText)) {
alert(WafTip.MESSAGE);
return;
}
let result;
try {
result = JSON.parse(responseText);
} catch {
console.error(`获取笔记接口返回非 JSON 内容(HTTP ${res.status}):`, responseText);
throw new Error('服务器响应格式异常,请稍后重试');
}
if (res.status === 401) {
// 凭证失效(过期或网关重启),跳转重新登录
location.href = '/login.html';
return;
}
if (!res.ok) {
throw new Error(result.message || `获取节点失败(HTTP ${res.status})`);
}
//if (result.success) {
console.log(`获取节点成功`);
return result
//...
//} else {
// alert(result.message || '获取节点失败');
//}
} catch (err) {
// 获取节点失败(非 JSON 响应 / HTTP 错误 / 网络异常),统一跳转登录页
console.error('获取节点请求异常:', err);
location.href = '/login.html';
} finally {
}
}
/* by qing
*
* 用于向dnfs添加节点
*/
async function addNode(pid, title, content) {
try {
obj = {
"pid": pid,
"title": title,
"content": content
}
jsonBody = JSON.stringify(obj)
console.log(jsonBody)
const res = await fetch('/add_note', {
method: 'POST',
headers: {
'Content-Type': 'application/json', // 告诉服务器内容为json
'Target-Url': 'http://127.0.0.1:8006'
},
body: jsonBody
});
const responseText = await res.text();
if (window.WafTip && WafTip.isBlocked(res, responseText)) throw new Error(WafTip.MESSAGE);
let result;
try {
result = JSON.parse(responseText);
} catch {
console.error(`添加笔记接口返回非 JSON 内容(HTTP ${res.status}):`, responseText);
throw new Error('服务器响应格式异常,请稍后重试');
}
if (res.status === 401) {
// 凭证失效(过期或网关重启),跳转重新登录
location.href = '/login.html';
return;
}
if (!res.ok) {
throw new Error(`添加节点失败(HTTP ${res.status})`);
}
input_note_title.value = "";
input_note_content.value = "";
cancelEdit(); /* 退出编辑模式并重置高度 */
getNode(stack[stack.length - 1]).then(load_notes);
getNode(stack[stack.length - 1]).then(loadMap)
//if (result.success) {
alert(`添加节点成功`, result);
return result
//...
//} else {
// alert(result.message || '获取节点失败');
//}
} catch (err) {
alert(err.message || '接口请求失败,请检查后端服务是否启动');
console.error('添加节点请求异常:', err);
} finally {
}
}
async function deleteNode(id) {
if (confirm("确认删除此节点?") == false) {
return;
}
try {
obj = {"id": id};
jsonBody = JSON.stringify(obj);
console.log(jsonBody);
const res = await fetch('/delete_note', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Target-Url': 'http://127.0.0.1:8006'
},
body: jsonBody
});
const responseText = await res.text();
if (window.WafTip && WafTip.isBlocked(res, responseText)) throw new Error(WafTip.MESSAGE);
let result;
try {
result = JSON.parse(responseText);
} catch {
console.error(`删除笔记接口返回非 JSON 内容(HTTP ${res.status}):`, responseText);
throw new Error('服务器响应格式异常,请稍后重试');
}
if (res.status === 401) {
// 凭证失效(过期或网关重启),跳转重新登录
location.href = '/login.html';
return;
}
if (!res.ok) {
throw new Error(`删除节点失败(HTTP ${res.status})`);
}
stack.pop();
getNode(stack[stack.length - 1]).then(load_notes);
getNode(stack[stack.length - 1]).then(loadMap)
console.log(`删除节点成功`);
return result
} catch (err) {
alert(err.message || '接口请求失败,请检查后端服务是否启动');
console.error('删除节点请求异常:', err);
}
}
/* by qing — 卡片上的"删除":删除子节点后停留在当前层,仅刷新列表(不弹栈) */
async function deleteChild(id) {
if (confirm("确认删除此节点?") == false) {
return;
}
try {
obj = {"id": id};
jsonBody = JSON.stringify(obj);
const res = await fetch('/delete_note', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Target-Url': 'http://127.0.0.1:8006'
},
body: jsonBody
});
const responseText = await res.text();
if (window.WafTip && WafTip.isBlocked(res, responseText)) throw new Error(WafTip.MESSAGE);
let result;
try {
result = JSON.parse(responseText);
} catch {
console.error(`删除笔记接口返回非 JSON 内容(HTTP ${res.status}):`, responseText);
throw new Error('服务器响应格式异常,请稍后重试');
}
if (res.status === 401) {
// 凭证失效(过期或网关重启),跳转重新登录
location.href = '/login.html';
return;
}
if (!res.ok) {
throw new Error(result.error === "It's not your note" ? '只能删除自己的节点' : (result.error || `删除节点失败(HTTP ${res.status})`));
}
// 若删掉的正是编辑中的节点,顺带退出编辑模式
if (editing_id == id) {
cancelEdit();
input_note_title.value = "";
input_note_content.value = "";
}
var cur = (stack.length == 0) ? 0 : stack[stack.length - 1];
getNode(cur).then(load_notes);
getNode(cur).then(loadMap);
console.log(`删除节点成功`);
return result;
} catch (err) {
alert(err.message || '接口请求失败,请检查后端服务是否启动');
console.error('删除节点请求异常:', err);
}
}
/* by qing — 保存编辑:调用 /update_note,成功后刷新当前层并退出编辑模式 */
async function updateNode(id, pid, title, content) {
try {
obj = {
"id": Number(id),
"pid": pid,
"title": title,
"content": content
}
jsonBody = JSON.stringify(obj)
const res = await fetch('/update_note', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Target-Url': 'http://127.0.0.1:8006'
},
body: jsonBody
});
const responseText = await res.text();
if (window.WafTip && WafTip.isBlocked(res, responseText)) throw new Error(WafTip.MESSAGE);
let result;
try {
result = JSON.parse(responseText);
} catch {
console.error(`更新笔记接口返回非 JSON 内容(HTTP ${res.status}):`, responseText);
throw new Error('服务器响应格式异常,请稍后重试');
}
if (res.status === 401) {
// 凭证失效(过期或网关重启),跳转重新登录
location.href = '/login.html';
return;
}
if (!res.ok) {
throw new Error(result.error === "It's not your note" ? '只能编辑自己的节点' : (result.error || `更新节点失败(HTTP ${res.status})`));
}
input_note_title.value = "";
input_note_content.value = "";
cancelEdit();
var cur = (stack.length == 0) ? 0 : stack[stack.length - 1];
getNode(cur).then(load_notes);
getNode(cur).then(loadMap);
alert('修改成功');
return result;
} catch (err) {
alert(err.message || '接口请求失败,请检查后端服务是否启动');
console.error('更新节点请求异常:', err);
}
}
/* by qing — 节点移动:本质是 pid 变更的 update_note,title/content 原样携带 */
async function moveNode(id, pid, title, content) {
try {
obj = {
"id": Number(id),
"pid": pid,
"title": title,
"content": content
}
jsonBody = JSON.stringify(obj)
const res = await fetch('/update_note', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Target-Url': 'http://127.0.0.1:8006'
},
body: jsonBody
});
const responseText = await res.text();
if (window.WafTip && WafTip.isBlocked(res, responseText)) throw new Error(WafTip.MESSAGE);
let result;
try {
result = JSON.parse(responseText);
} catch {
console.error(`更新笔记接口返回非 JSON 内容(HTTP ${res.status}):`, responseText);
throw new Error('服务器响应格式异常,请稍后重试');
}
if (res.status === 401) {
// 凭证失效(过期或网关重启),跳转重新登录
location.href = '/login.html';
return;
}
if (!res.ok) {
throw new Error(result.error === "It's not your note" ? '只能移动自己的节点' : (result.error || `移动节点失败(HTTP ${res.status})`));
}
var cur = (stack.length == 0) ? 0 : stack[stack.length - 1];
getNode(cur).then(load_notes);
getNode(cur).then(loadMap);
alert('移动成功');
return result;
} catch (err) {
alert(err.message || '接口请求失败,请检查后端服务是否启动');
console.error('移动节点请求异常:', err);
}
}
/* by qing — 点击卡片"移动":暂存节点信息,底部弹出移动条 */
function startMove(item) {
moving_node = { id: Number(item.id), pid: item.pid, title: item.title, content: item.content };
renderMoveBar();
}
/* by qing — 渲染底部移动条:显示待移动节点,提供"移动到当前层"和"取消" */
function renderMoveBar() {
movebar.replaceChildren();
if (moving_node == null) {
return;
}
let tip = document.createElement('span');
tip.className = "move-title";
tip.textContent = "移动中:" + moving_node.title;
let ok_btn = document.createElement('button');
ok_btn.className = "act-btn act-edit";
ok_btn.textContent = "移动到当前层";
ok_btn.addEventListener('click', confirmMove);
let cancel_btn = document.createElement('button');
cancel_btn.className = "act-btn act-del";
cancel_btn.textContent = "取消";
cancel_btn.addEventListener('click', function() {
moving_node = null;
renderMoveBar();
});
movebar.appendChild(tip);
movebar.appendChild(ok_btn);
movebar.appendChild(cancel_btn);
}
/* by qing — 执行移动:把待移动节点挂到当前层(stack 顶,根为 0)。
* 后端 update_note 会走 AI 内容审核,耗时较长,期间禁用移动条与表单按钮防止重复提交 */
async function confirmMove() {
if (moving_node == null) {
return;
}
var target_pid = (stack.length == 0) ? 0 : stack[stack.length - 1];
if (target_pid == moving_node.id) {
alert('不能移动到节点自身内部');
return;
}
if (target_pid == moving_node.pid) {
alert('该节点已在当前层');
return;
}
// 防重复点击:请求进行中禁用按钮(成功/失败都在 finally 恢复)
movebar.querySelectorAll('button').forEach(function(b) { b.disabled = true; });
input_note_submit.disabled = true;
input_note_clear.disabled = true;
delete_note.disabled = true;
try {
var result = await moveNode(moving_node.id, target_pid, moving_node.title, moving_node.content);
if (result != null) {
moving_node = null;
renderMoveBar();
}
} finally {
movebar.querySelectorAll('button').forEach(function(b) { b.disabled = false; });
input_note_submit.disabled = false;
input_note_clear.disabled = false;
delete_note.disabled = false;
}
}
/* by shufeng2012 */
function renderMarkdown(element, content) {
/*
Markdown渲染
*/
const md = window.markdownit();
element.innerHTML = md.render(content, {html: false});
}
/* by qing — 互动统计图标:inline SVG,stroke=currentColor 自动跟随主题色 */
const ICON_EYE = '';
const ICON_HEART = '';
const ICON_SHARE = '';
const ICON_EDIT = '';
const ICON_TRASH = '';
const ICON_MOVE = '';
/* 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');
var article_content = document.getElementById('article-content');
var input_note_title = document.getElementById('input-note-title');
var input_note_content = document.getElementById('input-note-content');
var input_note_submit = document.getElementById('input-note-submit');
var input_note_clear = document.getElementById('input-note-clear');
var recommend_list = document.getElementById('recommend-list');
var delete_note = document.getElementById('delete-note');
var minimap = document.getElementById("minimap");
var movebar = document.getElementById("movebar");
/* 面板默认展开的最小视口宽度(px):窄屏下面板展开会遮挡内容,默认折叠;宽屏默认展开 */
var PANEL_EXPAND_MIN_WIDTH = 768;
var is_expand = window.innerWidth >= PANEL_EXPAND_MIN_WIDTH;
var editing_id = null; /* 编辑模式:正在编辑的节点 id,null 表示当前是新增模式 */
var moving_node = null; /* 移动模式:待移动的节点 {id, pid, title, content},null 表示未在移动 */
/* ===== 输入框自动高度调整 ===== */
function autoResizeTextarea(el) {
el.style.height = 'auto';
el.style.height = Math.min(el.scrollHeight, 400) + 'px';
el.style.overflowY = el.scrollHeight > 400 ? 'auto' : 'hidden';
}
input_note_content.addEventListener('input', function() {
autoResizeTextarea(input_note_content);
});
function resetTextareaHeight() {
input_note_content.style.height = '120px';
input_note_content.style.overflowY = 'hidden';
}
autoResizeTextarea(input_note_content); /* 初始化高度 */
input_note_submit.addEventListener('click', function(event) {
if (input_note_submit.disabled) return; // 防重复点击
var title = input_note_title.value
var content = input_note_content.value
var pid = (stack.length == 0) ? 0 : stack[stack.length - 1];
//alert(stack.length)
//alert(pid)
// 发布期间同时禁用重置/删除,避免误触干扰
input_note_submit.disabled = true;
input_note_clear.disabled = true;
delete_note.disabled = true;
// 编辑模式下保存修改,否则新增节点
var req = (editing_id != null) ? updateNode(editing_id, pid, title, content) : addNode(pid, title, content);
Promise.resolve(req)
.finally(() => {
input_note_submit.disabled = false;
input_note_clear.disabled = false;
delete_note.disabled = false;
});
})
input_note_clear.addEventListener('click', function(event) {
input_note_title.value = "";
input_note_content.value = "";
cancelEdit(); // 重置时同时退出编辑模式
})
delete_note.addEventListener('click', (event) => {
if (delete_note.disabled) return; // 防重复点击
var id = (stack.length == 0) ? 0 : stack[stack.length - 1];
if (id == 0) {
alert('无法删除根节点');
console.log("节点未删除");
}
else {
delete_note.disabled = true;
// confirm 取消时 deleteNode 直接返回 undefined,统一用 Promise.resolve 兜底恢复按钮
Promise.resolve(deleteNode(id))
.finally(() => { delete_note.disabled = false; });
}
})
/* by qing — 点击卡片"编辑":把节点标题/内容载入下方表单,进入编辑模式 */
function startEdit(item) {
editing_id = item.id;
input_note_title.value = item.title;
input_note_content.value = item.content;
input_note_submit.textContent = "保存修改";
autoResizeTextarea(input_note_content); /* 根据载入内容调整高度 */
input_note_title.scrollIntoView({ behavior: 'smooth', block: 'center' });
input_note_title.focus();
}
/* by qing — 退出编辑模式,表单恢复为新增状态 */
function cancelEdit() {
editing_id = null;
input_note_submit.textContent = "提交";
resetTextareaHeight(); /* 恢复初始高度 */
}
function load_notes(main_node) {
/* 这个不能设置为空的 */
//article_title.textContent = "";
//article_content.textContent = "";
if (input_note_title.value != "" || input_note_content.value != "") {
if (confirm("是否放弃当前输入的内容?") == true) {
input_note_title.value = "";
input_note_content.value = "";
cancelEdit();
} else {
if (stack.length != 0) {
return;
}
}
} else {
input_note_title.value = "";
input_note_content.value = "";
cancelEdit();
}
recommend_list.replaceChildren();
for (let i in main_node) {
let item = main_node[i]
console.log(item)
let card = document.createElement('div');
card.className = "card";
card.addEventListener('click', function(event) {
var id = Number(item.id)
stack.push(id)
getNode(id).then(load_notes)
getNode(id).then(loadMap)
});
let ttl = document.createElement('center');
let ttl1 =document.createElement('h3');
ttl1.textContent = item.title;
card.id = item.title;
ttl.appendChild(ttl1);
card.appendChild(ttl);
let wrt_div = document.createElement('p');
// 发帖用户:头像圆点(取昵称首字符)+ 昵称,样式见 theme.css 的 Owner Chip 段
wrt_div.className = "card-owner";
let owner_text = (item.owner == null || item.owner === "") ? "匿名" : String(item.owner);
let owner_avatar = document.createElement('span');
owner_avatar.className = "owner-avatar";
owner_avatar.textContent = owner_text.trim().charAt(0).toUpperCase() || "?";
let owner_name = document.createElement('span');
owner_name.className = "owner-name";
owner_name.textContent = owner_text;
wrt_div.appendChild(owner_avatar);
wrt_div.appendChild(owner_name);
// 互动统计:眼睛=观看、爱心=点赞、转发=分享(后端 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));
// 卡片操作按钮:编辑 / 移动 / 删除(stopPropagation 防止触发卡片自身的点入跳转)
// 按钮组整体按 can_operate 显隐:操作权由后端 get_notes 按 owner / is_admin 判定,
// 与 delete_note / update_note 鉴权口径一致(移动本质也是 update_note);
// 未登录或无权时不渲染整个按钮组
ttl.appendChild(wrt_div);
ttl.appendChild(sts_div);
let ctt = document.createElement('p');
renderMarkdown(ctt, item.content);
card.appendChild(ctt)
if (item.can_operate === true) {
let act_div = document.createElement('div');
act_div.className = "card-actions";
let edit_btn = document.createElement('button');
edit_btn.className = "act-btn act-edit";
edit_btn.innerHTML = ICON_EDIT + "编辑";
edit_btn.addEventListener('click', function(event) {
event.stopPropagation();
startEdit(item);
});
let move_btn = document.createElement('button');
move_btn.className = "act-btn act-move";
move_btn.innerHTML = ICON_MOVE + "移动";
move_btn.addEventListener('click', function(event) {
event.stopPropagation();
startMove(item);
});
let del_btn = document.createElement('button');
del_btn.className = "act-btn act-del";
del_btn.innerHTML = ICON_TRASH + "删除";
del_btn.addEventListener('click', function(event) {
event.stopPropagation();
deleteChild(item.id);
});
act_div.appendChild(edit_btn);
act_div.appendChild(move_btn);
act_div.appendChild(del_btn);
card.appendChild(act_div);
}
recommend_list.appendChild(card)
recommend_list.appendChild(document.createElement('br'))
}
};
function loadMap(children_json) {
let need_return = false;
minimap.replaceChildren();
var fold_div = document.createElement("div");
fold_div.className = "tag fold-btn";
if (is_expand == true) {
fold_div.textContent = "v 折叠";
minimap.appendChild(fold_div);
} else {
fold_div.textContent = "> 展开";
minimap.appendChild(fold_div);
need_return = true;
}
fold_div.addEventListener("click", () => {
if (is_expand == true) {
is_expand = false;
getNode(stack.length == 0 ? 0 : stack[stack.length - 1]).then(loadMap);
} else {
is_expand = true;
getNode(stack.length == 0 ? 0 : stack[stack.length - 1]).then(loadMap);
}
});
if (need_return == true) {
return;
}
if (stack.length > 0) {
let back = document.createElement("div");
back.className = "tag back";
back.textContent = "← 返回上一层";
back.addEventListener("click", () => {
stack.pop();
var id = (stack.length >= 0) ? stack[stack.length - 1] : 0;
getNode(id).then(load_notes);
getNode(id).then(loadMap);
});
minimap.appendChild(back);
}
for (let i in children_json) {
let item = children_json[i];
let tag = document.createElement("div");
let title = item.title;
tag.className = "tag";
tag.textContent = title;
tag.addEventListener("click", () => {
window.location.href = `#${title}`;
console.log(`跳转到${title}`);
})
minimap.appendChild(tag);
}
}
/* by qing — 用户信息面板:左上角,默认折叠;展示用户名 / 角色 / 退出登录。
* 身份来自 dnfs /whoami(HttpOnly Cookie 模式下 JS 无法读 Token,由后端解 payload 返回) */
var userpanel = document.getElementById("userpanel");
var userpanel_expand = window.innerWidth >= PANEL_EXPAND_MIN_WIDTH; // 与 minimap 同策略:窄屏默认折叠
var current_user = null;
async function loadUserPanel() {
try {
const res = await fetch('/whoami', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: '{}'
});
if (!res.ok) return;
current_user = await res.json();
renderUserPanel();
} catch (e) {
console.error('获取用户信息失败:', e);
}
}
function renderUserPanel() {
if (current_user == null) return;
userpanel.replaceChildren();
let fold = document.createElement("div");
fold.className = "tag fold-btn";
if (userpanel_expand) {
fold.textContent = "v 折叠";
} else {
fold.textContent = "> " + (current_user.login ? current_user.user : "未登录");
}
fold.addEventListener("click", () => {
userpanel_expand = !userpanel_expand;
renderUserPanel();
});
userpanel.appendChild(fold);
if (!userpanel_expand || !current_user.login) return;
let name_tag = document.createElement("div");
name_tag.className = "tag no-hover";
name_tag.textContent = current_user.user;
userpanel.appendChild(name_tag);
let role_tag = document.createElement("div");
role_tag.className = "tag no-hover";
role_tag.textContent = current_user.is_admin ? "管理员" : "普通用户";
userpanel.appendChild(role_tag);
let logout_tag = document.createElement("div");
logout_tag.className = "tag back";
logout_tag.textContent = "退出登录";
logout_tag.addEventListener("click", async () => {
try { await fetch('/logout', {method: 'POST'}); } catch (e) {}
location.href = '/login.html';
});
userpanel.appendChild(logout_tag);
}
getNode(0).then(load_notes);
getNode(0).then(loadMap)
loadUserPanel();