797 lines
34 KiB
JavaScript
797 lines
34 KiB
JavaScript
const notes = [
|
|
{
|
|
id: "plainleaf-plan",
|
|
title: "Plainleaf 改造计划",
|
|
path: "项目/Plainleaf/Plainleaf 改造计划",
|
|
updated: "今天 10:42",
|
|
favorite: true,
|
|
tags: ["产品", "设计", "笔记"],
|
|
excerpt: "保留普通 Markdown 文件，同时把搜索、整理和移动记录体验做得更自然。",
|
|
content: `
|
|
<p>Plainleaf 会保留 SilverBullet 最重要的基础：每一篇笔记仍然是 NAS 中可以直接打开的 Markdown 文件。</p>
|
|
<blockquote>目标不是复制 Obsidian，而是让记录、查找和整理变得自然，同时保留查询与自动化能力。</blockquote>
|
|
<h2>第一阶段目标</h2>
|
|
<ul>
|
|
<li>把文件、搜索、待办和标签放进同一个稳定侧栏。</li>
|
|
<li>保留现有 <code>CodeMirror 6</code> 编辑器和 Markdown 能力。</li>
|
|
<li>让普通用户不需要理解命令、元页面和内部标签。</li>
|
|
<li>为手机设计专用的随手记和查找流程。</li>
|
|
</ul>
|
|
<h2>数据原则</h2>
|
|
<p>界面只是工作层，文件才是长期资产。即使以后停止使用 Plainleaf，也可以通过 <span class="wiki-link">Obsidian</span>、VS Code 或普通文本编辑器继续使用全部内容。</p>
|
|
<h2>下一步</h2>
|
|
<p>交互 Demo 确认后，再将新工作区接到现有页面索引和文件操作上。</p>
|
|
`,
|
|
},
|
|
{
|
|
id: "zspace",
|
|
title: "极空间部署",
|
|
path: "知识库/Docker/极空间部署",
|
|
updated: "昨天 22:16",
|
|
favorite: true,
|
|
tags: ["Docker", "NAS", "部署"],
|
|
excerpt: "极空间负责运行正式环境，Mac 用于开发和构建镜像。",
|
|
content: `
|
|
<p>极空间负责运行正式环境，Mac 用于开发和构建镜像。笔记目录通过卷挂载到容器的 <code>/space</code>。</p>
|
|
<h2>部署结构</h2>
|
|
<ul><li>固定镜像版本，避免使用 latest。</li><li>笔记目录和应用配置分别备份。</li><li>公网访问统一经过 HTTPS 与反向代理。</li></ul>
|
|
<h2>更新流程</h2>
|
|
<p>在本地完成构建和验证后，推送自定义镜像，再由极空间 Compose 切换版本。</p>
|
|
`,
|
|
},
|
|
{
|
|
id: "daily",
|
|
title: "2026-08-12",
|
|
displayTitle: "今天的日记",
|
|
path: "日记/2026/08/2026-08-12",
|
|
updated: "今天 08:30",
|
|
favorite: false,
|
|
tags: ["日记"],
|
|
excerpt: "今天继续整理个人笔记系统，希望数据保持开放，同时让 Web 端变得更易用。",
|
|
content: `
|
|
<p>今天继续整理个人笔记系统，希望数据保持开放，同时让 Web 端变得更易用。</p>
|
|
<h2>今日事项</h2>
|
|
<ul><li>确认 Plainleaf 的工作区方向。</li><li>完成桌面与手机交互 Demo。</li><li>整理正式开发任务。</li></ul>
|
|
<h2>记录</h2>
|
|
<p>文件树应该承担定位，而不是让用户记住所有命令。高级能力可以继续通过高级工具进入。</p>
|
|
`,
|
|
},
|
|
{
|
|
id: "docker-network",
|
|
title: "Docker 容器网络",
|
|
path: "知识库/Docker/Docker 容器网络",
|
|
updated: "8 月 10 日",
|
|
favorite: false,
|
|
tags: ["Docker", "网络"],
|
|
excerpt: "同一个 Compose 项目中的服务应通过服务名通信。",
|
|
content: `
|
|
<p>同一个 Compose 项目中的服务应通过服务名通信，而不是依赖宿主机端口或孤立容器名称。</p>
|
|
<h2>服务发现</h2>
|
|
<p>容器加入同一网络后，可以使用 <code>service:port</code> 作为内部地址。</p>
|
|
<h2>排查顺序</h2>
|
|
<ul><li>确认两个服务属于同一 Docker 网络。</li><li>检查服务名能否解析。</li><li>检查目标端口是否监听在 0.0.0.0。</li></ul>
|
|
`,
|
|
},
|
|
{
|
|
id: "tool-review",
|
|
title: "笔记工具对比",
|
|
path: "收件箱/笔记工具对比",
|
|
updated: "8 月 11 日",
|
|
favorite: false,
|
|
tags: ["调研", "笔记"],
|
|
excerpt: "对比 Blossom、Blinko、Notesnook、SilverBullet 和其他文件原生笔记工具。",
|
|
content: `
|
|
<p>对比了 Blossom、Blinko、Notesnook、SilverBullet 和其他文件原生笔记工具。</p>
|
|
<h2>核心结论</h2>
|
|
<p>数据库优先的产品通常拥有更现代的成品体验，但文件原生模型更符合长期迁移与多工具使用的要求。</p>
|
|
<h2>选择</h2>
|
|
<p>以 SilverBullet 为文件与能力内核，在其上构建 Plainleaf 的现代工作区。</p>
|
|
`,
|
|
},
|
|
{
|
|
id: "ideas",
|
|
title: "产品灵感收件箱",
|
|
path: "收件箱/产品灵感收件箱",
|
|
updated: "8 月 9 日",
|
|
favorite: false,
|
|
tags: ["灵感", "产品"],
|
|
excerpt: "临时想法先进入收件箱，稍后再归档到项目、知识库或日记。",
|
|
content: `
|
|
<p>临时想法先进入收件箱，稍后再归档到项目、知识库或日记。</p>
|
|
<h2>待整理</h2>
|
|
<ul><li>浏览器剪藏入口。</li><li>手机语音快速记录。</li><li>Markdown 文件历史对比。</li></ul>
|
|
`,
|
|
},
|
|
];
|
|
|
|
const tree = [
|
|
{ type: "folder", name: "收件箱", children: ["tool-review", "ideas"] },
|
|
{ type: "folder", name: "项目", children: [{ type: "folder", name: "Plainleaf", children: ["plainleaf-plan"] }] },
|
|
{ type: "folder", name: "知识库", children: [{ type: "folder", name: "Docker", children: ["zspace", "docker-network"] }] },
|
|
{ type: "folder", name: "日记", children: [{ type: "folder", name: "2026", children: [{ type: "folder", name: "08", children: ["daily"] }] }] },
|
|
];
|
|
|
|
const tasks = [
|
|
{ id: "task-demo", title: "完成桌面与手机交互 Demo", source: "Plainleaf 改造计划", noteId: "plainleaf-plan", group: "today" },
|
|
{ id: "task-backup", title: "确认笔记目录的备份策略", source: "极空间部署", noteId: "zspace", group: "today" },
|
|
{ id: "task-mobile", title: "整理手机端随手记流程", source: "2026-08-12", noteId: "daily", group: "today" },
|
|
{ id: "task-network", title: "记录反向代理网络结构", source: "Docker 容器网络", noteId: "docker-network", group: "overdue" },
|
|
];
|
|
|
|
const state = {
|
|
view: "notes",
|
|
currentNoteId: null,
|
|
settings: false,
|
|
searchQuery: "Plainleaf",
|
|
searchScope: "all",
|
|
selectedTag: "产品",
|
|
readMode: false,
|
|
offline: false,
|
|
expandedFolders: new Set(["收件箱", "项目", "项目/Plainleaf", "知识库", "知识库/Docker", "日记"]),
|
|
completedTasks: new Set(),
|
|
};
|
|
|
|
const byId = (id) => document.getElementById(id);
|
|
const currentNote = () => notes.find((note) => note.id === state.currentNoteId);
|
|
|
|
function icon(name, className = "") {
|
|
return `<i data-lucide="${name}"${className ? ` class="${className}"` : ""}></i>`;
|
|
}
|
|
|
|
function refreshIcons() {
|
|
if (window.lucide) window.lucide.createIcons();
|
|
}
|
|
|
|
function escapeHtml(value) {
|
|
return String(value)
|
|
.replaceAll("&", "&")
|
|
.replaceAll("<", "<")
|
|
.replaceAll(">", ">")
|
|
.replaceAll('"', """)
|
|
.replaceAll("'", "'");
|
|
}
|
|
|
|
function noteName(note) {
|
|
return note.displayTitle || note.title;
|
|
}
|
|
|
|
function renderTreeNode(node, depth = 0, parentPath = "") {
|
|
if (typeof node === "string") {
|
|
const note = notes.find((item) => item.id === node);
|
|
return `
|
|
<button class="tree-row ${state.currentNoteId === note.id ? "is-active" : ""}" type="button" data-open-note="${note.id}" style="padding-left:${8 + depth * 14}px">
|
|
${icon("chevron-right", "disclosure placeholder")}
|
|
${icon("file-text")}
|
|
<span class="row-label">${escapeHtml(noteName(note))}</span>
|
|
</button>`;
|
|
}
|
|
|
|
const path = parentPath ? `${parentPath}/${node.name}` : node.name;
|
|
const expanded = state.expandedFolders.has(path);
|
|
return `
|
|
<button class="tree-row" type="button" data-folder="${escapeHtml(path)}" style="padding-left:${8 + depth * 14}px">
|
|
${icon(expanded ? "chevron-down" : "chevron-right", "disclosure")}
|
|
${icon(expanded ? "folder-open" : "folder")}
|
|
<span class="row-label">${escapeHtml(node.name)}</span>
|
|
</button>
|
|
<div class="tree-children ${expanded ? "" : "is-collapsed"}">
|
|
${node.children.map((child) => renderTreeNode(child, depth + 1, path)).join("")}
|
|
</div>`;
|
|
}
|
|
|
|
function notesSidebar() {
|
|
return `
|
|
<section class="side-section">
|
|
<div class="sidebar-heading"><strong>你的笔记</strong><button type="button" data-sidebar-action="collapse" title="折叠全部" aria-label="折叠全部">${icon("list-collapse")}</button></div>
|
|
<button class="side-row ${state.currentNoteId === null ? "is-active" : ""}" type="button" data-open-home>
|
|
${icon("house")}<span class="row-label">首页</span>
|
|
</button>
|
|
<button class="side-row" type="button" data-sidebar-action="recent">
|
|
${icon("clock-3")}<span class="row-label">最近编辑</span><span class="row-meta">6</span>
|
|
</button>
|
|
<button class="side-row" type="button" data-sidebar-action="favorites">
|
|
${icon("star")}<span class="row-label">收藏</span><span class="row-meta">2</span>
|
|
</button>
|
|
</section>
|
|
<section class="side-section">
|
|
<div class="sidebar-heading"><span>文件夹</span><button type="button" data-new-folder title="新建文件夹" aria-label="新建文件夹">${icon("folder-plus")}</button></div>
|
|
${tree.map((node) => renderTreeNode(node)).join("")}
|
|
</section>`;
|
|
}
|
|
|
|
function searchableText(note, scope) {
|
|
if (scope === "title") return note.title;
|
|
if (scope === "content") return `${note.excerpt} ${note.content.replace(/<[^>]+>/g, " ")}`;
|
|
return `${note.title} ${note.path} ${note.tags.join(" ")} ${note.excerpt} ${note.content.replace(/<[^>]+>/g, " ")}`;
|
|
}
|
|
|
|
function highlight(value, query) {
|
|
const safe = escapeHtml(value);
|
|
const trimmed = query.trim();
|
|
if (!trimmed) return safe;
|
|
const escapedQuery = trimmed.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
|
|
return safe.replace(new RegExp(`(${escapedQuery})`, "ig"), "<mark>$1</mark>");
|
|
}
|
|
|
|
function filteredNotes() {
|
|
const query = state.searchQuery.trim().toLocaleLowerCase("zh-CN");
|
|
if (!query) return [...notes];
|
|
return notes.filter((note) => searchableText(note, state.searchScope).toLocaleLowerCase("zh-CN").includes(query));
|
|
}
|
|
|
|
function searchResult(note) {
|
|
return `
|
|
<button class="search-result-row ${state.currentNoteId === note.id ? "is-active" : ""}" type="button" data-open-note="${note.id}">
|
|
<span class="search-result-title"><strong>${highlight(noteName(note), state.searchQuery)}</strong><time>${escapeHtml(note.updated)}</time></span>
|
|
<p>${highlight(note.excerpt, state.searchQuery)}</p>
|
|
<span class="result-path">${escapeHtml(note.path)}</span>
|
|
</button>`;
|
|
}
|
|
|
|
function searchSidebar() {
|
|
const results = filteredNotes();
|
|
const resultContent = results.length
|
|
? results.map(searchResult).join("")
|
|
: `<div class="empty-results">
|
|
<span class="empty-symbol">${icon("file-search")}</span>
|
|
<strong>没有找到“${escapeHtml(state.searchQuery)}”</strong>
|
|
<p>可以换个关键词，或直接创建一篇同名笔记。</p>
|
|
<button class="small-primary-button" type="button" data-create-from-search>${icon("plus")}新建笔记</button>
|
|
</div>`;
|
|
|
|
return `
|
|
<div class="sidebar-heading"><strong>搜索笔记</strong><span class="row-meta">${results.length} 条</span></div>
|
|
<div class="search-box">
|
|
${icon("search")}
|
|
<input id="sidebarSearchInput" type="search" value="${escapeHtml(state.searchQuery)}" placeholder="输入标题或正文" autocomplete="off" />
|
|
${state.searchQuery ? `<button class="clear-search" type="button" data-clear-search aria-label="清空搜索">${icon("x")}</button>` : ""}
|
|
</div>
|
|
<div class="scope-control" aria-label="搜索范围">
|
|
<button class="${state.searchScope === "all" ? "is-active" : ""}" type="button" data-search-scope="all">全部</button>
|
|
<button class="${state.searchScope === "title" ? "is-active" : ""}" type="button" data-search-scope="title">标题</button>
|
|
<button class="${state.searchScope === "content" ? "is-active" : ""}" type="button" data-search-scope="content">正文</button>
|
|
</div>
|
|
<div id="searchResultList">${resultContent}</div>`;
|
|
}
|
|
|
|
function taskItem(task) {
|
|
if (state.completedTasks.has(task.id)) return "";
|
|
return `
|
|
<div class="task-item" data-task-row="${task.id}">
|
|
<button class="task-check" type="button" data-complete-task="${task.id}" aria-label="完成待办">${icon("circle")}</button>
|
|
<div class="task-copy">
|
|
<span class="task-title">${escapeHtml(task.title)}</span>
|
|
<button class="task-source" type="button" data-open-note="${task.noteId}">${escapeHtml(task.source)}</button>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
function tasksSidebar() {
|
|
const active = tasks.filter((task) => !state.completedTasks.has(task.id));
|
|
const today = active.filter((task) => task.group === "today");
|
|
const overdue = active.filter((task) => task.group === "overdue");
|
|
return `
|
|
<div class="sidebar-heading"><strong>待办</strong><span class="row-meta">${active.length} 项</span></div>
|
|
<section class="task-section">
|
|
<div class="task-group-title"><span>今天</span><span>${today.length}</span></div>
|
|
${today.length ? today.map(taskItem).join("") : '<div class="empty-results"><strong>今天都完成了</strong><p>新的待办会自动出现在这里。</p></div>'}
|
|
</section>
|
|
${overdue.length ? `<section class="task-section"><div class="task-group-title is-overdue"><span>较早</span><span>${overdue.length}</span></div>${overdue.map(taskItem).join("")}</section>` : ""}
|
|
<section class="task-section">
|
|
<div class="task-group-title"><span>无日期</span><span>0</span></div>
|
|
</section>`;
|
|
}
|
|
|
|
function tagMap() {
|
|
const counts = new Map();
|
|
for (const note of notes) {
|
|
for (const tag of note.tags) counts.set(tag, (counts.get(tag) || 0) + 1);
|
|
}
|
|
return [...counts.entries()].sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0], "zh-CN"));
|
|
}
|
|
|
|
function tagColor(index) {
|
|
return ["", "coral", "blue", "yellow"][index % 4];
|
|
}
|
|
|
|
function tagsSidebar() {
|
|
const tags = tagMap();
|
|
const matches = notes.filter((note) => note.tags.includes(state.selectedTag));
|
|
return `
|
|
<div class="sidebar-heading"><strong>标签</strong><span class="row-meta">${tags.length} 个</span></div>
|
|
<section class="side-section">
|
|
${tags.map(([tag, count], index) => `
|
|
<button class="tag-list-row ${state.selectedTag === tag ? "is-active" : ""}" type="button" data-select-tag="${escapeHtml(tag)}">
|
|
<span class="tag-dot ${tagColor(index)}"></span><span class="row-label">${escapeHtml(tag)}</span><span class="row-meta">${count}</span>
|
|
</button>`).join("")}
|
|
</section>
|
|
<section class="side-section">
|
|
<div class="sidebar-heading"><span>#${escapeHtml(state.selectedTag)}</span><span>${matches.length} 篇</span></div>
|
|
${matches.map(searchResult).join("")}
|
|
</section>`;
|
|
}
|
|
|
|
function settingsSidebar() {
|
|
return `
|
|
<div class="sidebar-heading"><strong>设置</strong></div>
|
|
<p class="settings-intro">调整写作体验和文件行为。高级能力集中放在底部，不影响日常记事。</p>
|
|
<section class="side-section">
|
|
<div class="sidebar-heading"><span>常用设置</span></div>
|
|
<div class="setting-row"><div class="setting-copy"><strong>界面主题</strong><span>明亮</span></div><select class="mini-select"><option>明亮</option><option>跟随系统</option></select></div>
|
|
<div class="setting-row"><div class="setting-copy"><strong>自动保存</strong><span>修改后自动写入文件</span></div><button class="switch is-on" type="button" data-toggle-switch aria-label="切换自动保存"></button></div>
|
|
<div class="setting-row"><div class="setting-copy"><strong>默认位置</strong><span>新笔记保存到收件箱</span></div>${icon("chevron-right")}</div>
|
|
</section>
|
|
<section class="side-section">
|
|
<div class="sidebar-heading"><span>高级工具</span></div>
|
|
${advancedRows()}
|
|
</section>`;
|
|
}
|
|
|
|
function advancedRows() {
|
|
const tools = [
|
|
["terminal-square", "命令面板", "运行自动化和不常用操作"],
|
|
["network", "关系图", "查看笔记之间的链接"],
|
|
["blocks", "扩展库", "管理兼容扩展"],
|
|
["file-cog", "配置", "调整高级行为"],
|
|
["files", "系统页面", "查看默认隐藏的内部页面"],
|
|
];
|
|
return tools.map(([toolIcon, title, subtitle]) => `
|
|
<button class="advanced-row" type="button" data-advanced-tool="${escapeHtml(title)}">
|
|
${icon(toolIcon)}<div><strong>${escapeHtml(title)}</strong><span>${escapeHtml(subtitle)}</span></div>${icon("chevron-right")}
|
|
</button>`).join("");
|
|
}
|
|
|
|
function moreSidebar() {
|
|
return `
|
|
<div class="sidebar-heading"><strong>更多</strong></div>
|
|
<section class="side-section">
|
|
<button class="side-row" type="button" data-more-target="tags">${icon("tags")}<span class="row-label">标签</span></button>
|
|
<button class="side-row" type="button" data-more-target="settings">${icon("settings")}<span class="row-label">设置</span></button>
|
|
</section>
|
|
<section class="side-section">
|
|
<div class="sidebar-heading"><span>状态</span></div>
|
|
<button class="side-row" type="button" data-toggle-offline>${icon(state.offline ? "wifi-off" : "cloud")}<span class="row-label">${state.offline ? "恢复在线" : "模拟离线"}</span></button>
|
|
</section>
|
|
<section class="side-section">
|
|
<div class="sidebar-heading"><span>高级工具</span></div>
|
|
${advancedRows()}
|
|
</section>`;
|
|
}
|
|
|
|
function renderSidebar() {
|
|
const content = byId("sidebarContent");
|
|
if (state.settings) content.innerHTML = settingsSidebar();
|
|
else if (state.view === "search") content.innerHTML = searchSidebar();
|
|
else if (state.view === "tasks") content.innerHTML = tasksSidebar();
|
|
else if (state.view === "tags") content.innerHTML = tagsSidebar();
|
|
else if (state.view === "more") content.innerHTML = moreSidebar();
|
|
else content.innerHTML = notesSidebar();
|
|
|
|
document.querySelectorAll(".primary-nav-item").forEach((button) => {
|
|
button.classList.toggle("is-active", !state.settings && button.dataset.view === state.view);
|
|
});
|
|
byId("settingsButton").classList.toggle("is-active", state.settings);
|
|
byId("taskCount").textContent = tasks.filter((task) => !state.completedTasks.has(task.id)).length;
|
|
refreshIcons();
|
|
|
|
if (state.view === "search" && !state.settings) {
|
|
const input = byId("sidebarSearchInput");
|
|
if (input && document.activeElement?.id !== "sidebarSearchInput") {
|
|
requestAnimationFrame(() => {
|
|
input.focus();
|
|
input.setSelectionRange(input.value.length, input.value.length);
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
function renderBreadcrumb(parts) {
|
|
byId("breadcrumb").innerHTML = parts.map((part, index) => `${index ? icon("chevron-right") : ""}<span>${escapeHtml(part)}</span>`).join("");
|
|
}
|
|
|
|
function homePage() {
|
|
const activeTasks = tasks.filter((task) => !state.completedTasks.has(task.id)).slice(0, 4);
|
|
return `
|
|
<section class="home-page" data-page="home">
|
|
<p class="home-date">2026 年 8 月 12 日 · 星期三</p>
|
|
<h1 class="home-title">今天想记点什么？</h1>
|
|
<p class="home-subtitle">从一条想法开始，剩下的可以晚点再整理。</p>
|
|
|
|
<div class="home-actions">
|
|
<button class="home-action green" type="button" data-home-action="capture"><span>${icon("zap")}</span><span><strong>随手记</strong><small>快速记下一条想法</small></span></button>
|
|
<button class="home-action coral" type="button" data-open-note="daily"><span>${icon("calendar-days")}</span><span><strong>今天的日记</strong><small>继续今天的记录</small></span></button>
|
|
<button class="home-action blue" type="button" data-home-action="new"><span>${icon("file-plus-2")}</span><span><strong>新建笔记</strong><small>选择标题和保存位置</small></span></button>
|
|
</div>
|
|
|
|
<div class="home-grid">
|
|
<section>
|
|
<header class="home-section-title"><h2>最近编辑</h2><button type="button" data-switch-view="notes">查看全部</button></header>
|
|
${notes.slice(0, 5).map((note) => `
|
|
<button class="recent-note-row" type="button" data-open-note="${note.id}">
|
|
<strong>${escapeHtml(noteName(note))}</strong><time>${escapeHtml(note.updated)}</time><span>${escapeHtml(note.path)}</span>
|
|
</button>`).join("")}
|
|
</section>
|
|
<section>
|
|
<header class="home-section-title"><h2>今天待办</h2><button type="button" data-switch-view="tasks">查看全部</button></header>
|
|
${activeTasks.map((task) => `
|
|
<div class="home-task-row" data-home-task="${task.id}">
|
|
<button type="button" data-complete-task="${task.id}" aria-label="完成待办">${icon("circle")}</button>
|
|
<div><strong>${escapeHtml(task.title)}</strong><small>${escapeHtml(task.source)}</small></div>
|
|
</div>`).join("")}
|
|
</section>
|
|
</div>
|
|
</section>`;
|
|
}
|
|
|
|
function documentPage(note) {
|
|
return `
|
|
<article class="document-page ${state.readMode ? "read-mode" : ""}" data-page="document">
|
|
<input class="page-title" id="pageTitleInput" aria-label="笔记标题" value="${escapeHtml(note.title)}" />
|
|
<h1 class="reading-title">${escapeHtml(note.title)}</h1>
|
|
<div class="page-meta"><span>${escapeHtml(note.updated)} 更新</span><span>·</span><span>${escapeHtml(note.path.split("/").slice(0, -1).join(" / "))}</span></div>
|
|
<div class="editor-body" id="editorBody" contenteditable="true" spellcheck="false" aria-label="笔记正文">${note.content}</div>
|
|
<div class="reading-body">${note.content}</div>
|
|
</article>`;
|
|
}
|
|
|
|
function settingsPage() {
|
|
const tools = [
|
|
["terminal-square", "命令面板", "运行自动化和不常用操作"],
|
|
["network", "关系图", "查看笔记之间的链接"],
|
|
["blocks", "扩展库", "管理兼容扩展"],
|
|
["file-cog", "配置", "编辑 Plainleaf 的高级行为"],
|
|
["files", "系统页面", "查看默认隐藏的内部页面"],
|
|
];
|
|
return `
|
|
<section class="settings-page" data-page="settings">
|
|
<h1>设置</h1>
|
|
<p>日常写作选项放在前面，高级能力需要时再打开。</p>
|
|
<section class="settings-group">
|
|
<h2>写作体验</h2>
|
|
<div class="settings-main-row"><div><strong>正文宽度</strong><span>适合长时间阅读的 760px</span></div><select class="mini-select"><option>舒适</option><option>宽屏</option></select></div>
|
|
<div class="settings-main-row"><div><strong>自动保存</strong><span>修改后自动写回 Markdown 文件</span></div><button class="switch is-on" type="button" data-toggle-switch aria-label="切换自动保存"></button></div>
|
|
<div class="settings-main-row"><div><strong>显示系统内容</strong><span>Library、Std 和 meta 页面默认隐藏</span></div><button class="switch" type="button" data-toggle-switch aria-label="显示系统内容"></button></div>
|
|
</section>
|
|
<section class="settings-group">
|
|
<h2>文件与同步</h2>
|
|
<div class="settings-main-row"><div><strong>默认新建位置</strong><span>收件箱</span></div><button class="secondary-button" type="button">更改</button></div>
|
|
<div class="settings-main-row"><div><strong>当前空间</strong><span>Markdown 文件已同步</span></div><span class="sync-dot"></span></div>
|
|
</section>
|
|
<section class="settings-group">
|
|
<h2>高级工具</h2>
|
|
<div class="advanced-tools-grid">
|
|
${tools.map(([toolIcon, title, subtitle]) => `
|
|
<button class="advanced-tool-card" type="button" data-advanced-tool="${escapeHtml(title)}">
|
|
<span class="advanced-tool-icon">${icon(toolIcon)}</span><span><strong>${escapeHtml(title)}</strong><small>${escapeHtml(subtitle)}</small></span>${icon("chevron-right")}
|
|
</button>`).join("")}
|
|
</div>
|
|
</section>
|
|
</section>`;
|
|
}
|
|
|
|
function renderWorkspace() {
|
|
const content = byId("workspaceContent");
|
|
if (state.settings) {
|
|
content.innerHTML = settingsPage();
|
|
renderBreadcrumb(["设置"]);
|
|
byId("readModeButton").disabled = true;
|
|
} else if (!state.currentNoteId) {
|
|
content.innerHTML = homePage();
|
|
renderBreadcrumb(["首页"]);
|
|
byId("readModeButton").disabled = true;
|
|
} else {
|
|
const note = currentNote();
|
|
content.innerHTML = documentPage(note);
|
|
renderBreadcrumb(note.path.split("/"));
|
|
byId("readModeButton").disabled = false;
|
|
}
|
|
byId("readModeButton").classList.toggle("is-active", state.readMode);
|
|
byId("wordCount").textContent = state.currentNoteId ? "426 字 · Markdown" : "Markdown";
|
|
refreshIcons();
|
|
}
|
|
|
|
function renderAll() {
|
|
renderSidebar();
|
|
renderWorkspace();
|
|
}
|
|
|
|
function openNote(noteId, closeMobile = true) {
|
|
state.currentNoteId = noteId;
|
|
state.settings = false;
|
|
state.readMode = false;
|
|
renderAll();
|
|
if (closeMobile) closeSidebar();
|
|
}
|
|
|
|
function openHome() {
|
|
state.currentNoteId = null;
|
|
state.settings = false;
|
|
state.view = "notes";
|
|
state.readMode = false;
|
|
renderAll();
|
|
closeSidebar();
|
|
}
|
|
|
|
function switchView(view, openMobile = false) {
|
|
state.view = view;
|
|
state.settings = false;
|
|
renderSidebar();
|
|
if (openMobile) openSidebar();
|
|
}
|
|
|
|
function openSettings(openMobile = false) {
|
|
state.settings = true;
|
|
state.view = "settings";
|
|
renderAll();
|
|
if (openMobile) openSidebar();
|
|
}
|
|
|
|
function openSidebar() {
|
|
byId("app").classList.add("sidebar-open");
|
|
}
|
|
|
|
function closeSidebar() {
|
|
byId("app").classList.remove("sidebar-open");
|
|
}
|
|
|
|
function openNewNote(preset = "blank") {
|
|
byId("newNoteModal").classList.add("is-visible");
|
|
byId("newNoteModal").setAttribute("aria-hidden", "false");
|
|
selectQuickCreate(preset);
|
|
requestAnimationFrame(() => byId("newNoteTitle").focus());
|
|
}
|
|
|
|
function closeNewNote() {
|
|
byId("newNoteModal").classList.remove("is-visible");
|
|
byId("newNoteModal").setAttribute("aria-hidden", "true");
|
|
}
|
|
|
|
function selectQuickCreate(preset) {
|
|
document.querySelectorAll("[data-quick-create]").forEach((button) => button.classList.toggle("is-selected", button.dataset.quickCreate === preset));
|
|
const titleInput = byId("newNoteTitle");
|
|
const folder = byId("newNoteFolder");
|
|
if (preset === "capture") {
|
|
titleInput.value = "随手记 11:20";
|
|
folder.value = "收件箱";
|
|
} else if (preset === "daily") {
|
|
titleInput.value = "2026-08-12";
|
|
folder.value = "日记/2026/08";
|
|
} else {
|
|
titleInput.value = "";
|
|
folder.value = "收件箱";
|
|
}
|
|
titleInput.focus();
|
|
titleInput.select();
|
|
}
|
|
|
|
let toastTimer;
|
|
function showToast(message) {
|
|
clearTimeout(toastTimer);
|
|
byId("toastText").textContent = message;
|
|
byId("toast").classList.add("is-visible");
|
|
toastTimer = setTimeout(() => byId("toast").classList.remove("is-visible"), 2200);
|
|
}
|
|
|
|
function completeTask(taskId) {
|
|
const row = document.querySelector(`[data-task-row="${taskId}"], [data-home-task="${taskId}"]`);
|
|
if (row) row.classList.add("is-complete");
|
|
setTimeout(() => {
|
|
state.completedTasks.add(taskId);
|
|
renderAll();
|
|
showToast("待办已完成，Markdown 已更新");
|
|
}, 170);
|
|
}
|
|
|
|
function toggleOffline() {
|
|
state.offline = !state.offline;
|
|
byId("offlineBanner").classList.toggle("is-visible", state.offline);
|
|
byId("syncText").textContent = state.offline ? "修改已保存在本机" : "文件已同步";
|
|
if (state.view === "more") renderSidebar();
|
|
showToast(state.offline ? "已切换到离线演示" : "连接已恢复");
|
|
}
|
|
|
|
function setSaving() {
|
|
const saveState = byId("saveState");
|
|
saveState.classList.add("is-saving");
|
|
saveState.innerHTML = `${icon("circle-dot-dashed")}<span>保存中</span>`;
|
|
refreshIcons();
|
|
clearTimeout(setSaving.timer);
|
|
setSaving.timer = setTimeout(() => {
|
|
saveState.classList.remove("is-saving");
|
|
saveState.innerHTML = `${icon("check")}<span>已保存</span>`;
|
|
refreshIcons();
|
|
}, 700);
|
|
}
|
|
|
|
document.querySelectorAll(".primary-nav-item").forEach((button) => {
|
|
button.addEventListener("click", () => switchView(button.dataset.view));
|
|
});
|
|
|
|
byId("homeButton").addEventListener("click", openHome);
|
|
byId("newNoteButton").addEventListener("click", () => openNewNote("blank"));
|
|
byId("mobileNewButton").addEventListener("click", () => openNewNote("capture"));
|
|
byId("settingsButton").addEventListener("click", () => openSettings(false));
|
|
byId("openSidebarButton").addEventListener("click", openSidebar);
|
|
byId("closeSidebarButton").addEventListener("click", closeSidebar);
|
|
byId("mobileScrim").addEventListener("click", closeSidebar);
|
|
|
|
document.querySelectorAll("[data-mobile-view]").forEach((button) => {
|
|
button.addEventListener("click", () => {
|
|
const view = button.dataset.mobileView;
|
|
state.settings = false;
|
|
switchView(view, true);
|
|
});
|
|
});
|
|
|
|
byId("sidebarContent").addEventListener("click", (event) => {
|
|
const noteButton = event.target.closest("[data-open-note]");
|
|
if (noteButton) return openNote(noteButton.dataset.openNote);
|
|
|
|
const homeButton = event.target.closest("[data-open-home]");
|
|
if (homeButton) return openHome();
|
|
|
|
const folderButton = event.target.closest("[data-folder]");
|
|
if (folderButton) {
|
|
const folder = folderButton.dataset.folder;
|
|
if (state.expandedFolders.has(folder)) state.expandedFolders.delete(folder);
|
|
else state.expandedFolders.add(folder);
|
|
return renderSidebar();
|
|
}
|
|
|
|
const scopeButton = event.target.closest("[data-search-scope]");
|
|
if (scopeButton) {
|
|
state.searchScope = scopeButton.dataset.searchScope;
|
|
return renderSidebar();
|
|
}
|
|
|
|
if (event.target.closest("[data-clear-search]")) {
|
|
state.searchQuery = "";
|
|
return renderSidebar();
|
|
}
|
|
|
|
if (event.target.closest("[data-create-from-search]")) return openNewNote("blank");
|
|
|
|
const taskButton = event.target.closest("[data-complete-task]");
|
|
if (taskButton) return completeTask(taskButton.dataset.completeTask);
|
|
|
|
const tagButton = event.target.closest("[data-select-tag]");
|
|
if (tagButton) {
|
|
state.selectedTag = tagButton.dataset.selectTag;
|
|
return renderSidebar();
|
|
}
|
|
|
|
const moreTarget = event.target.closest("[data-more-target]");
|
|
if (moreTarget) {
|
|
if (moreTarget.dataset.moreTarget === "settings") openSettings(true);
|
|
else switchView(moreTarget.dataset.moreTarget, true);
|
|
return;
|
|
}
|
|
|
|
const toolButton = event.target.closest("[data-advanced-tool]");
|
|
if (toolButton) return showToast(`${toolButton.dataset.advancedTool}已放在高级工具中`);
|
|
|
|
const sidebarAction = event.target.closest("[data-sidebar-action]");
|
|
if (sidebarAction?.dataset.sidebarAction === "collapse") {
|
|
state.expandedFolders.clear();
|
|
return renderSidebar();
|
|
}
|
|
if (sidebarAction?.dataset.sidebarAction === "recent") {
|
|
showToast("最近编辑按时间排列在首页");
|
|
return;
|
|
}
|
|
if (sidebarAction?.dataset.sidebarAction === "favorites") {
|
|
showToast("已显示 2 篇收藏笔记");
|
|
return;
|
|
}
|
|
|
|
if (event.target.closest("[data-new-folder]")) return showToast("新建文件夹入口");
|
|
if (event.target.closest("[data-toggle-offline]")) return toggleOffline();
|
|
|
|
const switchButton = event.target.closest("[data-toggle-switch]");
|
|
if (switchButton) switchButton.classList.toggle("is-on");
|
|
});
|
|
|
|
byId("sidebarContent").addEventListener("input", (event) => {
|
|
if (event.target.id !== "sidebarSearchInput") return;
|
|
state.searchQuery = event.target.value;
|
|
const selectionStart = event.target.selectionStart;
|
|
renderSidebar();
|
|
const input = byId("sidebarSearchInput");
|
|
input.focus();
|
|
input.setSelectionRange(selectionStart, selectionStart);
|
|
});
|
|
|
|
byId("workspaceContent").addEventListener("click", (event) => {
|
|
const noteButton = event.target.closest("[data-open-note]");
|
|
if (noteButton) return openNote(noteButton.dataset.openNote, false);
|
|
|
|
const taskButton = event.target.closest("[data-complete-task]");
|
|
if (taskButton) return completeTask(taskButton.dataset.completeTask);
|
|
|
|
const homeAction = event.target.closest("[data-home-action]");
|
|
if (homeAction) return openNewNote(homeAction.dataset.homeAction === "capture" ? "capture" : "blank");
|
|
|
|
const viewButton = event.target.closest("[data-switch-view]");
|
|
if (viewButton) return switchView(viewButton.dataset.switchView, window.innerWidth <= 720);
|
|
|
|
const advancedButton = event.target.closest("[data-advanced-tool]");
|
|
if (advancedButton) return showToast(`${advancedButton.dataset.advancedTool}会打开现有高级能力`);
|
|
|
|
const switchButton = event.target.closest("[data-toggle-switch]");
|
|
if (switchButton) switchButton.classList.toggle("is-on");
|
|
});
|
|
|
|
byId("workspaceContent").addEventListener("input", (event) => {
|
|
const note = currentNote();
|
|
if (!note) return;
|
|
if (event.target.id === "pageTitleInput") note.title = event.target.value;
|
|
if (event.target.id === "editorBody") note.content = event.target.innerHTML;
|
|
setSaving();
|
|
});
|
|
|
|
byId("readModeButton").addEventListener("click", () => {
|
|
if (!state.currentNoteId) return;
|
|
state.readMode = !state.readMode;
|
|
renderWorkspace();
|
|
});
|
|
|
|
byId("pageSearchButton").addEventListener("click", () => showToast("页内搜索会在正文顶部打开"));
|
|
|
|
byId("moreButton").addEventListener("click", (event) => {
|
|
event.stopPropagation();
|
|
const popover = byId("morePopover");
|
|
const visible = popover.classList.toggle("is-visible");
|
|
popover.setAttribute("aria-hidden", visible ? "false" : "true");
|
|
});
|
|
|
|
document.addEventListener("click", (event) => {
|
|
if (!event.target.closest("#morePopover") && !event.target.closest("#moreButton")) {
|
|
byId("morePopover").classList.remove("is-visible");
|
|
byId("morePopover").setAttribute("aria-hidden", "true");
|
|
}
|
|
});
|
|
|
|
byId("morePopover").addEventListener("click", (event) => {
|
|
const button = event.target.closest("button");
|
|
if (!button) return;
|
|
showToast(`${button.textContent.trim()}入口已确认`);
|
|
byId("morePopover").classList.remove("is-visible");
|
|
});
|
|
|
|
document.querySelectorAll("[data-close-modal]").forEach((button) => button.addEventListener("click", closeNewNote));
|
|
document.querySelectorAll("[data-quick-create]").forEach((button) => button.addEventListener("click", () => selectQuickCreate(button.dataset.quickCreate)));
|
|
|
|
byId("newNoteForm").addEventListener("submit", (event) => {
|
|
event.preventDefault();
|
|
const title = byId("newNoteTitle").value.trim() || "未命名笔记";
|
|
const folder = byId("newNoteFolder").value;
|
|
const id = `demo-${Date.now()}`;
|
|
notes.unshift({
|
|
id,
|
|
title,
|
|
path: `${folder}/${title}`,
|
|
updated: "刚刚",
|
|
favorite: false,
|
|
tags: [],
|
|
excerpt: "新创建的 Markdown 笔记。",
|
|
content: "<p><br></p>",
|
|
});
|
|
closeNewNote();
|
|
openNote(id, false);
|
|
showToast(`已在${folder}创建笔记`);
|
|
});
|
|
|
|
document.addEventListener("keydown", (event) => {
|
|
if (event.key === "Escape") {
|
|
closeNewNote();
|
|
closeSidebar();
|
|
byId("morePopover").classList.remove("is-visible");
|
|
}
|
|
if ((event.metaKey || event.ctrlKey) && event.key.toLocaleLowerCase() === "k") {
|
|
event.preventDefault();
|
|
switchView("search", window.innerWidth <= 720);
|
|
}
|
|
});
|
|
|
|
renderAll();
|