refactor: split sidebar shell runtime
This commit is contained in:
lix-2026
@@ -0,0 +1,95 @@
|
||||
# 3-22 Sidebar Tree Runtime 二阶段拆分 v1
|
||||
|
||||
> 创建时间：2026-05-25
|
||||
> 完成时间：2026-05-25
|
||||
> 状态：`done`
|
||||
> 来源：承接 `3-19` / `3-20` / `3-21` 完成后的剩余规模问题。
|
||||
|
||||
## 1. 背景
|
||||
|
||||
`3-21` 已经解决原始痛点：CodeGraph 不能有效定位 `layout.rs` 内大型 Rust raw string。现在 `SIDEBAR_TREE_JS` 已外置为：
|
||||
|
||||
```text
|
||||
rust/crates/mnote-web/browser/sidebar-tree-runtime.js
|
||||
```
|
||||
|
||||
这让 CodeGraph、IDE、浏览器 stack trace 都能把它当作一等 JavaScript 文件处理。但该文件仍约 1 万行，职责仍包含 sidebar workspace、page tree、file tree、Page AI panel、local folder/mindmap observer、resource open intent、secondary pane 目标、外部 drop 和 resize 等多条链路。
|
||||
|
||||
因此二阶段目标不是再解决 raw string，而是把一个可索引的 JS 巨文件继续拆成可审计、可派发、可测试的小模块。
|
||||
|
||||
## 2. 原则
|
||||
|
||||
- 保持 Rust kernel / mnote-web projection / tree command 语义不变。
|
||||
- 每一刀只迁一个边界清楚的 helper 或 runtime 簇。
|
||||
- 不重写 sidebar，不改变用户可见行为。
|
||||
- 不把 Page AI panel 混入 tree/filetree runtime；AI 相关大块应转入 `07-ai`。
|
||||
- `layout.rs` 继续只承担 SSR/bootstrap 和 asset script 注入。
|
||||
|
||||
## 3. 推荐拆分顺序
|
||||
|
||||
### Batch A：Page AI panel 边界审计
|
||||
|
||||
- [x] 只读审计 `sidebar-tree-runtime.js` 中 Page AI panel 状态、消息、profile、skills、permission requests、gateway health 等代码块。
|
||||
- [x] 判断是否新建 `design/07-ai/process/...` 承接，而不是继续放在 `03-rust-web`。
|
||||
- [x] 本批不迁代码，只输出 owner 和最小 smoke 建议。
|
||||
|
||||
执行结果：Page AI panel 已拆到 `design/07-ai/process/7-38-page-ai-sidebar-runtime-owner-split-v1.md`，后续由 `07-ai` 承接。当前粗略搜索 `pageAi*` / `data-page-ai` / `PAGE_AI` 仍约 800 处，不能继续作为 tree/filetree runtime 的普通剩余项处理。
|
||||
|
||||
### Batch B：local folder / mindmap fetch observer
|
||||
|
||||
- [x] 只读审计 `installMindmapAssetFetchObserver`、local mindmap source 参数、fetch hook、sidebar snapshot refresh 的边界。
|
||||
- [x] 只迁纯 URL/body/method/file name/helper 层以外仍适合外置的最小 runtime。
|
||||
- [x] 将后续实现和 `task455-local-folder-mindmap-clean-smoke.js` / `task479-local-folder-markdown-resource-lifecycle-smoke.js` 验证要求拆到新的 owner 文档。
|
||||
|
||||
执行结果：本批不在 `3-22` 中继续迁代码，后续拆到 `design/03-rust-web/process/3-23-sidebar-local-folder-resource-runtime-followup-v1.md`。原因是剩余边界仍强依赖 fetch hook、projection render、workspace/root/document 状态和 selection/focus 恢复，不能作为 sidebar shell helper 同批处理。
|
||||
|
||||
### Batch C：sidebar workspace / tab / resize shell helper
|
||||
|
||||
- [x] 拆出 workspace sidebar collapse、tab restore、resize 相关的纯 DOM/state helper。
|
||||
- [x] 不迁 page tree / filetree projection 语义。
|
||||
- [x] 用轻量 DOM 单测或浏览器 smoke 证明侧栏首屏不回归。
|
||||
|
||||
执行结果：新增 `rust/crates/mnote-web/browser/sidebar-shell-runtime.js`，迁出 `toggleWorkspaceSidebar`、`installWorkspaceSidebarResizer`、`readStoredSidebarTreeMode`、`persistSidebarTreeMode`、`activeSidebarTreeMode`、`applySidebarTreeTab`、`switchSidebarTreeTab`、`restoreSidebarTreeTab`。`sidebar-tree-runtime.js` 仅保留薄 wrapper，未触碰 page tree / filetree projection 语义。
|
||||
|
||||
### Batch D：resource/filetree 编排剩余薄壳
|
||||
|
||||
- [x] 复核 `refreshLocalFolderSidebarSnapshot`、`appendUploadedAssetRow`、`resolveFileTreeUploadTarget` 目前有意保留在 shell 的原因是否仍成立。
|
||||
- [x] 只迁稳定的 DOM helper，不迁 fetch、projection render、selection/focus 编排。
|
||||
- [x] 继续用 `task479` 覆盖本地 Markdown 附件和文件树 drop 目标。
|
||||
|
||||
执行结果：后续拆到 `design/03-rust-web/process/3-23-sidebar-local-folder-resource-runtime-followup-v1.md`，本文件不继续承接 local folder/resource 编排。
|
||||
|
||||
## 4. 不建议的下一步
|
||||
|
||||
- 不建议直接整体重写 `sidebar-tree-runtime.js`。
|
||||
- 不建议把 `mnote-web --lib` 全量失败作为本文件前置阻塞；该问题已拆到 `bugs/03-rust-web/process/3-24-mnote-web-lib-test-failures-v1.md`。
|
||||
- 不建议为了 DRY 把 shell 业务编排强行迁入小 helper，尤其是需要 workspace/root/document/session 状态的函数。
|
||||
|
||||
## 5. 验收基线
|
||||
|
||||
每个实现批次至少选择相关命令：
|
||||
|
||||
```bash
|
||||
node --check rust/crates/mnote-web/browser/sidebar-tree-runtime.js
|
||||
cargo fmt --manifest-path rust/Cargo.toml --all --check
|
||||
cargo check --manifest-path rust/Cargo.toml -p mnote-web
|
||||
NODE_PATH=/mnt/Data1T/mnote/node_modules node scripts/task479-local-folder-markdown-resource-lifecycle-smoke.js
|
||||
NODE_PATH=/mnt/Data1T/mnote/node_modules node scripts/task455-local-folder-mindmap-clean-smoke.js
|
||||
```
|
||||
|
||||
涉及 AI panel 的批次应另走 `07-ai` 设计和页面 AI smoke。
|
||||
|
||||
## 6. 归档条件
|
||||
|
||||
- [x] `sidebar-tree-runtime.js` 的下一批高风险职责已有 owner，不再把 Page AI、local folder、filetree 编排混在一个无边界任务里。
|
||||
- [x] 至少一个二阶段实现批次落地，且 smoke 通过。
|
||||
- [x] 后续剩余项已经拆到对应 owner 文档，而不是继续堆在本文件。
|
||||
|
||||
## 7. 验证记录
|
||||
|
||||
- 2026-05-25：Batch C 落地 `sidebar-shell-runtime.js`。`sidebar-tree-runtime.js` 从 10,654 行降至 10,594 行，新模块 150 行。
|
||||
- 2026-05-25：已验证 `node --check rust/crates/mnote-web/browser/sidebar-shell-runtime.js` 与 `node --check rust/crates/mnote-web/browser/sidebar-tree-runtime.js`。
|
||||
- 2026-05-25：已验证 `cargo fmt --manifest-path rust/Cargo.toml --all --check`、`cargo check --manifest-path rust/Cargo.toml -p mnote-web`。
|
||||
- 2026-05-25：已验证专项 Rust 单测：`cargo test --manifest-path rust/Cargo.toml -p mnote-web ssr::pages::layout::tests:: -- --test-threads=1`，38/38 通过；`cargo test --manifest-path rust/Cargo.toml -p mnote-web routes::tests::mnote_browser_runtime_assets_are_explicitly_mounted -- --test-threads=1`，1/1 通过。
|
||||
- 2026-05-25：已启动当前源码临时服务 `MNOTE_WEB_BIND=127.0.0.1:3024 MNOTE_WEB_PUBLIC_BIND=127.0.0.1:3024 cargo run --manifest-path rust/Cargo.toml -p mnote-web`，并通过 `MNOTE_WEB_SMOKE_BASE_URL=http://127.0.0.1:3024 NODE_PATH=/mnt/Data1T/mnote/node_modules node scripts/task479-local-folder-markdown-resource-lifecycle-smoke.js`。结果 `ok:true`，截图：`/tmp/mnote-task479-lifecycle-MZEmnG/screenshots-1779720559336/final-state.png`。
|
||||
- 2026-05-25：Playwright 轻量断言通过：`window.__mnoteSidebarShellRuntime` 存在，页面同时加载 `sidebar-shell-runtime.js` 与 `sidebar-tree-runtime.js` module script，`data-mnote-sidebar-resizer-bound="true"`。
|
||||
@@ -1,77 +0,0 @@
|
||||
# 3-22 Sidebar Tree Runtime 二阶段拆分 v1
|
||||
|
||||
> 创建时间：2026-05-25
|
||||
> 状态：`process`
|
||||
> 来源：承接 `3-19` / `3-20` / `3-21` 完成后的剩余规模问题。
|
||||
|
||||
## 1. 背景
|
||||
|
||||
`3-21` 已经解决原始痛点：CodeGraph 不能有效定位 `layout.rs` 内大型 Rust raw string。现在 `SIDEBAR_TREE_JS` 已外置为：
|
||||
|
||||
```text
|
||||
rust/crates/mnote-web/browser/sidebar-tree-runtime.js
|
||||
```
|
||||
|
||||
这让 CodeGraph、IDE、浏览器 stack trace 都能把它当作一等 JavaScript 文件处理。但该文件仍约 1 万行，职责仍包含 sidebar workspace、page tree、file tree、Page AI panel、local folder/mindmap observer、resource open intent、secondary pane 目标、外部 drop 和 resize 等多条链路。
|
||||
|
||||
因此二阶段目标不是再解决 raw string，而是把一个可索引的 JS 巨文件继续拆成可审计、可派发、可测试的小模块。
|
||||
|
||||
## 2. 原则
|
||||
|
||||
- 保持 Rust kernel / mnote-web projection / tree command 语义不变。
|
||||
- 每一刀只迁一个边界清楚的 helper 或 runtime 簇。
|
||||
- 不重写 sidebar，不改变用户可见行为。
|
||||
- 不把 Page AI panel 混入 tree/filetree runtime；AI 相关大块应转入 `07-ai`。
|
||||
- `layout.rs` 继续只承担 SSR/bootstrap 和 asset script 注入。
|
||||
|
||||
## 3. 推荐拆分顺序
|
||||
|
||||
### Batch A：Page AI panel 边界审计
|
||||
|
||||
- [ ] 只读审计 `sidebar-tree-runtime.js` 中 Page AI panel 状态、消息、profile、skills、permission requests、gateway health 等代码块。
|
||||
- [ ] 判断是否新建 `design/07-ai/process/...` 承接，而不是继续放在 `03-rust-web`。
|
||||
- [ ] 本批不迁代码，只输出 owner 和最小 smoke 建议。
|
||||
|
||||
### Batch B：local folder / mindmap fetch observer
|
||||
|
||||
- [ ] 只读审计 `installMindmapAssetFetchObserver`、local mindmap source 参数、fetch hook、sidebar snapshot refresh 的边界。
|
||||
- [ ] 只迁纯 URL/body/method/file name/helper 层以外仍适合外置的最小 runtime。
|
||||
- [ ] 验证 `task455-local-folder-mindmap-clean-smoke.js` 和 `task479-local-folder-markdown-resource-lifecycle-smoke.js`。
|
||||
|
||||
### Batch C：sidebar workspace / tab / resize shell helper
|
||||
|
||||
- [ ] 拆出 workspace sidebar collapse、tab restore、recent roots、resize 相关的纯 DOM/state helper。
|
||||
- [ ] 不迁 page tree / filetree projection 语义。
|
||||
- [ ] 用轻量 DOM 单测或浏览器 smoke 证明侧栏首屏不回归。
|
||||
|
||||
### Batch D：resource/filetree 编排剩余薄壳
|
||||
|
||||
- [ ] 复核 `refreshLocalFolderSidebarSnapshot`、`appendUploadedAssetRow`、`resolveFileTreeUploadTarget` 目前有意保留在 shell 的原因是否仍成立。
|
||||
- [ ] 只迁稳定的 DOM helper，不迁 fetch、projection render、selection/focus 编排。
|
||||
- [ ] 继续用 `task479` 覆盖本地 Markdown 附件和文件树 drop 目标。
|
||||
|
||||
## 4. 不建议的下一步
|
||||
|
||||
- 不建议直接整体重写 `sidebar-tree-runtime.js`。
|
||||
- 不建议把 `mnote-web --lib` 全量失败作为本文件前置阻塞；该问题已拆到 `bugs/03-rust-web/process/3-24-mnote-web-lib-test-failures-v1.md`。
|
||||
- 不建议为了 DRY 把 shell 业务编排强行迁入小 helper，尤其是需要 workspace/root/document/session 状态的函数。
|
||||
|
||||
## 5. 验收基线
|
||||
|
||||
每个实现批次至少选择相关命令：
|
||||
|
||||
```bash
|
||||
node --check rust/crates/mnote-web/browser/sidebar-tree-runtime.js
|
||||
cargo fmt --manifest-path rust/Cargo.toml --all --check
|
||||
cargo check --manifest-path rust/Cargo.toml -p mnote-web
|
||||
NODE_PATH=/mnt/Data1T/mnote/node_modules node scripts/task479-local-folder-markdown-resource-lifecycle-smoke.js
|
||||
NODE_PATH=/mnt/Data1T/mnote/node_modules node scripts/task455-local-folder-mindmap-clean-smoke.js
|
||||
```
|
||||
|
||||
涉及 AI panel 的批次应另走 `07-ai` 设计和页面 AI smoke。
|
||||
|
||||
## 6. 归档条件
|
||||
|
||||
- `sidebar-tree-runtime.js` 的下一批高风险职责已有 owner，不再把 Page AI、local folder、filetree 编排混在一个无边界任务里。
|
||||
- 至少一个二阶段实现批次落地，且 smoke 通过。
|
||||
- 后续剩余项已经拆到对应 owner 文档，而不是继续堆在本文件。
|
||||
@@ -0,0 +1,33 @@
|
||||
# 3-23 Sidebar local folder / resource runtime follow-up v1
|
||||
|
||||
> 创建时间：2026-05-25
|
||||
> 状态：`process`
|
||||
> 来源：`design/03-rust-web/process/3-22-sidebar-tree-runtime-second-stage-split-v1.md` Batch B / Batch D。
|
||||
|
||||
## 1. 背景
|
||||
|
||||
`3-22` 已完成 sidebar shell helper 第一刀，但 `sidebar-tree-runtime.js` 中 local folder、mindmap fetch observer、resource/filetree 编排仍是下一批 03-rust-web owner。
|
||||
|
||||
这些代码仍涉及：
|
||||
|
||||
- `installMindmapAssetFetchObserver`
|
||||
- `withLocalMindmapSourceParams`
|
||||
- `applyMindmapApiMutationToFileTree`
|
||||
- `refreshLocalFolderSidebarSnapshot`
|
||||
- `appendUploadedAssetRow`
|
||||
- `resolveFileTreeUploadTarget`
|
||||
|
||||
其中纯 URL/body/method/file name helper 已有一部分迁入 `filetree-runtime.js`。剩余函数多涉及 fetch hook、workspace/root/document 状态、projection render、selection/focus 恢复、watcher 标记和资源行 patch，因此不能整体迁出。
|
||||
|
||||
## 2. 下一批边界
|
||||
|
||||
- [ ] 只读审计 mindmap fetch observer，确认是否有新的纯 helper 可迁入 `filetree-runtime.js`。
|
||||
- [ ] 只读审计 `refreshLocalFolderSidebarSnapshot` 的 post-apply 副作用，避免重复拆已经确认应留在 shell 的 fetch/projection 编排。
|
||||
- [ ] 若实现，只迁稳定 DOM helper 或 payload normalize helper，不迁 fetch hook 与 projection render。
|
||||
- [ ] 验证 `task455-local-folder-mindmap-clean-smoke.js` 和 `task479-local-folder-markdown-resource-lifecycle-smoke.js`。
|
||||
|
||||
## 3. 非目标
|
||||
|
||||
- 不改变 local folder 资源归属语义。
|
||||
- 不迁 Rust tree command / projection 语义到前端。
|
||||
- 不把 Page AI panel 混入本文件；AI owner 已拆到 `design/07-ai/process/7-38-page-ai-sidebar-runtime-owner-split-v1.md`。
|
||||
@@ -0,0 +1,32 @@
|
||||
# 7-38 Page AI sidebar runtime owner split v1
|
||||
|
||||
> 创建时间：2026-05-25
|
||||
> 状态：`process`
|
||||
> 来源：`design/03-rust-web/process/3-22-sidebar-tree-runtime-second-stage-split-v1.md` Batch A。
|
||||
|
||||
## 1. 背景
|
||||
|
||||
`rust/crates/mnote-web/browser/sidebar-tree-runtime.js` 中仍有大量 Page AI panel 代码：会话、消息、profile、skills、gateway health、ACP runtime、permission dialog、plan/status event、session search/resume 等。当前粗略搜索 `pageAi*` / `data-page-ai` / `PAGE_AI` 命中约 800 处。
|
||||
|
||||
这些代码不是 tree/filetree runtime 的长期 owner。继续把 Page AI 面板放在 `03-rust-web` 的 sidebar runtime 拆分里，会让 tree shell、local folder、AI session 三条边界继续混在一起。
|
||||
|
||||
## 2. Owner 判断
|
||||
|
||||
- owner：`07-ai`
|
||||
- 运行位置：当前仍可挂在 sidebar UI，但 runtime 模块应独立于 tree/filetree runtime。
|
||||
- 目标模块候选：`rust/crates/mnote-web/browser/page-ai-panel-runtime.js`
|
||||
- 主壳职责：只加载 asset、提供当前 document/workspace/root/bootstrap。
|
||||
|
||||
## 3. 后续执行建议
|
||||
|
||||
- [ ] 只读审计 Page AI panel 的状态入口：`pageUiState.pageAi*`、storage、session 列表、profile/skills、permission dialog。
|
||||
- [ ] 新增 `page-ai-panel-runtime.js`，先迁纯数据 normalize / storage helper，不迁事件流和 DOM 面板。
|
||||
- [ ] 第二刀迁 permission dialog DOM helper，保持 `/api/hermes/client/runs/*/resolve-permission` 业务调用不变。
|
||||
- [ ] 第三刀迁 session list/search/resume DOM helper。
|
||||
- [ ] 浏览器验证使用页面 AI / ACP smoke，而不是 tree/filetree smoke 替代。
|
||||
|
||||
## 4. 非目标
|
||||
|
||||
- 不在 03-rust-web 的 sidebar runtime 二阶段里继续扩大 Page AI 实现。
|
||||
- 不改变 Hermes / Reasonix ACP runtime 协议。
|
||||
- 不把 local-first agent 文件编辑链路改回粗粒度 `mnote.page.save`。
|
||||
@@ -0,0 +1,148 @@
|
||||
var MNOTE_SIDEBAR_TREE_MODE_KEY = 'mnote.sidebar.tree.mode';
|
||||
var MNOTE_SIDEBAR_WIDTH_STORAGE_KEY = 'mnote.workspace.sidebarWidth.v1';
|
||||
var MNOTE_SIDEBAR_MIN_WIDTH = 220;
|
||||
var MNOTE_SIDEBAR_MAX_WIDTH = 520;
|
||||
var MNOTE_SIDEBAR_DEFAULT_WIDTH = 248;
|
||||
|
||||
function normalizeSidebarTreeModeForShell(mode) {
|
||||
return mode === 'filetree' ? 'filetree' : 'page';
|
||||
}
|
||||
|
||||
function readStoredSidebarTreeMode() {
|
||||
var params = new URLSearchParams(window.location.search);
|
||||
var fromUrl = normalizeSidebarTreeModeForShell(params.get('treeView') || params.get('sidebarTree'));
|
||||
if (params.has('treeView') || params.has('sidebarTree')) return fromUrl;
|
||||
try {
|
||||
var stored = window.sessionStorage ? window.sessionStorage.getItem(MNOTE_SIDEBAR_TREE_MODE_KEY) : '';
|
||||
return normalizeSidebarTreeModeForShell(stored);
|
||||
} catch (_) {
|
||||
return 'page';
|
||||
}
|
||||
}
|
||||
|
||||
function persistSidebarTreeMode(mode) {
|
||||
var normalized = normalizeSidebarTreeModeForShell(mode);
|
||||
document.documentElement.setAttribute('data-mnote-sidebar-tree-mode', normalized);
|
||||
try {
|
||||
if (window.sessionStorage) window.sessionStorage.setItem(MNOTE_SIDEBAR_TREE_MODE_KEY, normalized);
|
||||
} catch (_) {}
|
||||
return normalized;
|
||||
}
|
||||
|
||||
function activeSidebarTreeMode() {
|
||||
var active = document.querySelector('[data-mnote-sidebar-tree-tab][aria-selected="true"]');
|
||||
if (active instanceof HTMLElement) {
|
||||
return normalizeSidebarTreeModeForShell(active.getAttribute('data-mnote-sidebar-tree-tab'));
|
||||
}
|
||||
return readStoredSidebarTreeMode();
|
||||
}
|
||||
|
||||
function toggleWorkspaceSidebar(trigger) {
|
||||
var shell = document.querySelector('.mnote-shell, .wolai-workspace-shell');
|
||||
if (!(shell instanceof HTMLElement)) return;
|
||||
var collapsed = shell.getAttribute('data-mnote-sidebar-collapsed') === 'true';
|
||||
var next = !collapsed;
|
||||
shell.setAttribute('data-mnote-sidebar-collapsed', String(next));
|
||||
document.documentElement.setAttribute('data-mnote-sidebar-collapsed', String(next));
|
||||
document.documentElement.setAttribute('data-mnote-sidebar-toggle-applied', 'true');
|
||||
if (trigger instanceof HTMLElement) {
|
||||
trigger.setAttribute('aria-pressed', String(next));
|
||||
trigger.setAttribute('title', next ? '展开侧栏' : '切换侧栏');
|
||||
}
|
||||
}
|
||||
|
||||
function clampSidebarWidth(value) {
|
||||
var width = Number(value);
|
||||
if (!Number.isFinite(width)) return MNOTE_SIDEBAR_DEFAULT_WIDTH;
|
||||
return Math.max(MNOTE_SIDEBAR_MIN_WIDTH, Math.min(MNOTE_SIDEBAR_MAX_WIDTH, width));
|
||||
}
|
||||
|
||||
function installWorkspaceSidebarResizer() {
|
||||
var shell = document.querySelector('.mnote-shell, .wolai-workspace-shell');
|
||||
var sidebar = document.querySelector('[data-testid="wolai-sidebar"]');
|
||||
var resizer = document.querySelector('[data-mnote-sidebar-resizer="true"]');
|
||||
if (!(shell instanceof HTMLElement) || !(sidebar instanceof HTMLElement) || !(resizer instanceof HTMLElement)) return;
|
||||
if (resizer.getAttribute('data-mnote-sidebar-resizer-bound') === 'true') return;
|
||||
resizer.setAttribute('data-mnote-sidebar-resizer-bound', 'true');
|
||||
|
||||
function applyWidth(value) {
|
||||
var width = clampSidebarWidth(value);
|
||||
shell.style.setProperty('--mnote-sidebar-width', width + 'px');
|
||||
document.documentElement.setAttribute('data-mnote-sidebar-width', String(width));
|
||||
return width;
|
||||
}
|
||||
|
||||
try {
|
||||
var stored = Number(window.localStorage.getItem(MNOTE_SIDEBAR_WIDTH_STORAGE_KEY) || '');
|
||||
if (stored) applyWidth(stored);
|
||||
} catch (_) {}
|
||||
|
||||
resizer.addEventListener('wheel', function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}, { passive: false });
|
||||
resizer.addEventListener('pointerdown', function(event) {
|
||||
if (event.button !== 0) return;
|
||||
event.preventDefault();
|
||||
var startX = event.clientX;
|
||||
var startWidth = sidebar.getBoundingClientRect().width || clampSidebarWidth(0);
|
||||
resizer.setPointerCapture(event.pointerId);
|
||||
document.documentElement.setAttribute('data-mnote-sidebar-resizing', 'true');
|
||||
function onMove(moveEvent) {
|
||||
applyWidth(startWidth + moveEvent.clientX - startX);
|
||||
}
|
||||
function onEnd(endEvent) {
|
||||
resizer.removeEventListener('pointermove', onMove);
|
||||
resizer.removeEventListener('pointerup', onEnd);
|
||||
resizer.removeEventListener('pointercancel', onEnd);
|
||||
try { resizer.releasePointerCapture(endEvent.pointerId); } catch (_) {}
|
||||
document.documentElement.removeAttribute('data-mnote-sidebar-resizing');
|
||||
try {
|
||||
window.localStorage.setItem(MNOTE_SIDEBAR_WIDTH_STORAGE_KEY, String(Math.round(sidebar.getBoundingClientRect().width)));
|
||||
} catch (_) {}
|
||||
}
|
||||
resizer.addEventListener('pointermove', onMove);
|
||||
resizer.addEventListener('pointerup', onEnd);
|
||||
resizer.addEventListener('pointercancel', onEnd);
|
||||
});
|
||||
}
|
||||
|
||||
function applySidebarTreeTab(mode, shell) {
|
||||
mode = persistSidebarTreeMode(mode);
|
||||
shell = shell || document.querySelector('[data-testid="wolai-sidebar-page-tree-shell"]');
|
||||
if (!shell) return;
|
||||
var tabs = shell.querySelectorAll('[data-mnote-sidebar-tree-tab]');
|
||||
for (var i = 0; i < tabs.length; i++) {
|
||||
var isActive = tabs[i].getAttribute('data-mnote-sidebar-tree-tab') === mode;
|
||||
tabs[i].setAttribute('aria-selected', isActive ? 'true' : 'false');
|
||||
tabs[i].classList.toggle('wolai-sidebar-tab-active', isActive);
|
||||
tabs[i].classList.toggle('wolai-sidebar-tab-muted', !isActive);
|
||||
}
|
||||
var panels = shell.querySelectorAll('[data-mnote-sidebar-tree-panel]');
|
||||
for (var j = 0; j < panels.length; j++) {
|
||||
var isCurrentPanel = panels[j].getAttribute('data-mnote-sidebar-tree-panel') === mode;
|
||||
panels[j].hidden = !isCurrentPanel;
|
||||
}
|
||||
}
|
||||
|
||||
function switchSidebarTreeTab(trigger) {
|
||||
var mode = trigger ? trigger.getAttribute('data-mnote-sidebar-tree-tab') : 'page';
|
||||
applySidebarTreeTab(mode, trigger ? trigger.closest('[data-testid="wolai-sidebar-page-tree-shell"]') : null);
|
||||
}
|
||||
|
||||
function restoreSidebarTreeTab() {
|
||||
applySidebarTreeTab(readStoredSidebarTreeMode(), null);
|
||||
}
|
||||
|
||||
if (!window.__mnoteSidebarShellRuntime) {
|
||||
window.__mnoteSidebarShellRuntime = {
|
||||
activeSidebarTreeMode: activeSidebarTreeMode,
|
||||
applySidebarTreeTab: applySidebarTreeTab,
|
||||
installWorkspaceSidebarResizer: installWorkspaceSidebarResizer,
|
||||
persistSidebarTreeMode: persistSidebarTreeMode,
|
||||
readStoredSidebarTreeMode: readStoredSidebarTreeMode,
|
||||
restoreSidebarTreeTab: restoreSidebarTreeTab,
|
||||
switchSidebarTreeTab: switchSidebarTreeTab,
|
||||
toggleWorkspaceSidebar: toggleWorkspaceSidebar
|
||||
};
|
||||
}
|
||||
@@ -77,73 +77,19 @@
|
||||
return node && typeof node.closest === 'function' ? node.closest(selector) : null;
|
||||
}
|
||||
|
||||
function sidebarShellRuntimeFunction(name) {
|
||||
var runtime = window.__mnoteSidebarShellRuntime;
|
||||
return runtime && typeof runtime[name] === 'function' ? runtime[name] : null;
|
||||
}
|
||||
|
||||
function toggleWorkspaceSidebar(trigger) {
|
||||
var shell = document.querySelector('.mnote-shell, .wolai-workspace-shell');
|
||||
if (!(shell instanceof HTMLElement)) return;
|
||||
var collapsed = shell.getAttribute('data-mnote-sidebar-collapsed') === 'true';
|
||||
var next = !collapsed;
|
||||
shell.setAttribute('data-mnote-sidebar-collapsed', String(next));
|
||||
document.documentElement.setAttribute('data-mnote-sidebar-collapsed', String(next));
|
||||
document.documentElement.setAttribute('data-mnote-sidebar-toggle-applied', 'true');
|
||||
if (trigger instanceof HTMLElement) {
|
||||
trigger.setAttribute('aria-pressed', String(next));
|
||||
trigger.setAttribute('title', next ? '展开侧栏' : '切换侧栏');
|
||||
}
|
||||
var runtimeFn = sidebarShellRuntimeFunction('toggleWorkspaceSidebar');
|
||||
if (runtimeFn) return runtimeFn(trigger);
|
||||
}
|
||||
|
||||
function installWorkspaceSidebarResizer() {
|
||||
var shell = document.querySelector('.mnote-shell, .wolai-workspace-shell');
|
||||
var sidebar = document.querySelector('[data-testid="wolai-sidebar"]');
|
||||
var resizer = document.querySelector('[data-mnote-sidebar-resizer="true"]');
|
||||
if (!(shell instanceof HTMLElement) || !(sidebar instanceof HTMLElement) || !(resizer instanceof HTMLElement)) return;
|
||||
if (resizer.getAttribute('data-mnote-sidebar-resizer-bound') === 'true') return;
|
||||
resizer.setAttribute('data-mnote-sidebar-resizer-bound', 'true');
|
||||
var storageKey = 'mnote.workspace.sidebarWidth.v1';
|
||||
var minWidth = 220;
|
||||
var maxWidth = 520;
|
||||
function clampWidth(value) {
|
||||
var width = Number(value);
|
||||
if (!Number.isFinite(width)) return 248;
|
||||
return Math.max(minWidth, Math.min(maxWidth, width));
|
||||
}
|
||||
function applyWidth(value) {
|
||||
var width = clampWidth(value);
|
||||
shell.style.setProperty('--mnote-sidebar-width', width + 'px');
|
||||
document.documentElement.setAttribute('data-mnote-sidebar-width', String(width));
|
||||
return width;
|
||||
}
|
||||
try {
|
||||
var stored = Number(window.localStorage.getItem(storageKey) || '');
|
||||
if (stored) applyWidth(stored);
|
||||
} catch (_) {}
|
||||
resizer.addEventListener('wheel', function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}, { passive: false });
|
||||
resizer.addEventListener('pointerdown', function(event) {
|
||||
if (event.button !== 0) return;
|
||||
event.preventDefault();
|
||||
var startX = event.clientX;
|
||||
var startWidth = sidebar.getBoundingClientRect().width || clampWidth(0);
|
||||
resizer.setPointerCapture(event.pointerId);
|
||||
document.documentElement.setAttribute('data-mnote-sidebar-resizing', 'true');
|
||||
function onMove(moveEvent) {
|
||||
applyWidth(startWidth + moveEvent.clientX - startX);
|
||||
}
|
||||
function onEnd(endEvent) {
|
||||
resizer.removeEventListener('pointermove', onMove);
|
||||
resizer.removeEventListener('pointerup', onEnd);
|
||||
resizer.removeEventListener('pointercancel', onEnd);
|
||||
try { resizer.releasePointerCapture(endEvent.pointerId); } catch (_) {}
|
||||
document.documentElement.removeAttribute('data-mnote-sidebar-resizing');
|
||||
try {
|
||||
window.localStorage.setItem(storageKey, String(Math.round(sidebar.getBoundingClientRect().width)));
|
||||
} catch (_) {}
|
||||
}
|
||||
resizer.addEventListener('pointermove', onMove);
|
||||
resizer.addEventListener('pointerup', onEnd);
|
||||
resizer.addEventListener('pointercancel', onEnd);
|
||||
});
|
||||
var runtimeFn = sidebarShellRuntimeFunction('installWorkspaceSidebarResizer');
|
||||
if (runtimeFn) return runtimeFn();
|
||||
}
|
||||
|
||||
function escapeHtml(value) {
|
||||
@@ -680,6 +626,8 @@
|
||||
}
|
||||
|
||||
function readStoredSidebarTreeMode() {
|
||||
var runtimeFn = sidebarShellRuntimeFunction('readStoredSidebarTreeMode');
|
||||
if (runtimeFn) return runtimeFn();
|
||||
var params = new URLSearchParams(window.location.search);
|
||||
var fromUrl = normalizeSidebarTreeMode(params.get('treeView') || params.get('sidebarTree'));
|
||||
if (params.has('treeView') || params.has('sidebarTree')) return fromUrl;
|
||||
@@ -692,6 +640,8 @@
|
||||
}
|
||||
|
||||
function persistSidebarTreeMode(mode) {
|
||||
var runtimeFn = sidebarShellRuntimeFunction('persistSidebarTreeMode');
|
||||
if (runtimeFn) return runtimeFn(mode);
|
||||
var normalized = normalizeSidebarTreeMode(mode);
|
||||
document.documentElement.setAttribute('data-mnote-sidebar-tree-mode', normalized);
|
||||
try {
|
||||
@@ -701,6 +651,8 @@
|
||||
}
|
||||
|
||||
function activeSidebarTreeMode() {
|
||||
var runtimeFn = sidebarShellRuntimeFunction('activeSidebarTreeMode');
|
||||
if (runtimeFn) return runtimeFn();
|
||||
var active = document.querySelector('[data-mnote-sidebar-tree-tab][aria-selected="true"]');
|
||||
if (active instanceof HTMLElement) {
|
||||
return normalizeSidebarTreeMode(active.getAttribute('data-mnote-sidebar-tree-tab'));
|
||||
@@ -1782,30 +1734,18 @@
|
||||
}
|
||||
|
||||
function applySidebarTreeTab(mode, shell) {
|
||||
mode = persistSidebarTreeMode(mode);
|
||||
shell = shell || document.querySelector('[data-testid="wolai-sidebar-page-tree-shell"]');
|
||||
if (!shell) return;
|
||||
var tabs = shell.querySelectorAll('[data-mnote-sidebar-tree-tab]');
|
||||
for (var i = 0; i < tabs.length; i++) {
|
||||
var isActive = tabs[i].getAttribute('data-mnote-sidebar-tree-tab') === mode;
|
||||
tabs[i].setAttribute('aria-selected', isActive ? 'true' : 'false');
|
||||
tabs[i].classList.toggle('wolai-sidebar-tab-active', isActive);
|
||||
tabs[i].classList.toggle('wolai-sidebar-tab-muted', !isActive);
|
||||
}
|
||||
var panels = shell.querySelectorAll('[data-mnote-sidebar-tree-panel]');
|
||||
for (var j = 0; j < panels.length; j++) {
|
||||
var isCurrentPanel = panels[j].getAttribute('data-mnote-sidebar-tree-panel') === mode;
|
||||
panels[j].hidden = !isCurrentPanel;
|
||||
}
|
||||
var runtimeFn = sidebarShellRuntimeFunction('applySidebarTreeTab');
|
||||
if (runtimeFn) return runtimeFn(mode, shell);
|
||||
}
|
||||
|
||||
function switchSidebarTreeTab(trigger) {
|
||||
var mode = trigger ? trigger.getAttribute('data-mnote-sidebar-tree-tab') : 'page';
|
||||
applySidebarTreeTab(mode, trigger ? trigger.closest('[data-testid="wolai-sidebar-page-tree-shell"]') : null);
|
||||
var runtimeFn = sidebarShellRuntimeFunction('switchSidebarTreeTab');
|
||||
if (runtimeFn) return runtimeFn(trigger);
|
||||
}
|
||||
|
||||
function restoreSidebarTreeTab() {
|
||||
applySidebarTreeTab(readStoredSidebarTreeMode(), null);
|
||||
var runtimeFn = sidebarShellRuntimeFunction('restoreSidebarTreeTab');
|
||||
if (runtimeFn) return runtimeFn();
|
||||
}
|
||||
|
||||
function updateTitleEverywhere(documentId, title) {
|
||||
|
||||
@@ -122,6 +122,10 @@ pub fn build_router(state: AppState) -> Router {
|
||||
"/api/mnote-browser-runtime/filetree-keyboard-runtime.js",
|
||||
get(web_shell::filetree_keyboard_runtime_asset),
|
||||
)
|
||||
.route(
|
||||
"/api/mnote-browser-runtime/sidebar-shell-runtime.js",
|
||||
get(web_shell::sidebar_shell_runtime_asset),
|
||||
)
|
||||
.route(
|
||||
"/api/mnote-browser-runtime/sidebar-tree-runtime.js",
|
||||
get(web_shell::sidebar_tree_runtime_asset),
|
||||
@@ -544,6 +548,10 @@ mod tests {
|
||||
"/api/mnote-browser-runtime/filetree-runtime.js",
|
||||
"/api/mnote-browser-runtime/filetree-selection-runtime.js",
|
||||
"/api/mnote-browser-runtime/filetree-context-menu-runtime.js",
|
||||
"/api/mnote-browser-runtime/filetree-dnd-runtime.js",
|
||||
"/api/mnote-browser-runtime/filetree-keyboard-runtime.js",
|
||||
"/api/mnote-browser-runtime/sidebar-shell-runtime.js",
|
||||
"/api/mnote-browser-runtime/sidebar-tree-runtime.js",
|
||||
"/api/mnote-browser-runtime/tree-live-controller.js",
|
||||
"/api/mnote-browser-runtime/tree-shell-runtime.js",
|
||||
"/api/mnote-browser-runtime/document-conflict-panel-runtime.js",
|
||||
|
||||
@@ -4516,6 +4516,20 @@ pub async fn sidebar_tree_runtime_asset() -> Response {
|
||||
.unwrap_or_else(|_| Response::new(Body::empty()))
|
||||
}
|
||||
|
||||
pub async fn sidebar_shell_runtime_asset() -> Response {
|
||||
const JS: &str = include_str!("../../browser/sidebar-shell-runtime.js");
|
||||
Response::builder()
|
||||
.status(StatusCode::OK)
|
||||
.header(
|
||||
header::CONTENT_TYPE,
|
||||
"application/javascript; charset=utf-8",
|
||||
)
|
||||
.header(header::CACHE_CONTROL, "no-store")
|
||||
.header(HEADER_MNOTE_WEB_OWNER, "mnote-web")
|
||||
.body(Body::from(JS))
|
||||
.unwrap_or_else(|_| Response::new(Body::empty()))
|
||||
}
|
||||
|
||||
pub async fn filetree_keyboard_runtime_asset() -> Response {
|
||||
const JS: &str = include_str!("../../browser/filetree-keyboard-runtime.js");
|
||||
Response::builder()
|
||||
|
||||
@@ -157,6 +157,7 @@ pub fn PageLayout(
|
||||
<script type="module" src="/api/mnote-browser-runtime/filetree-context-menu-runtime.js"></script>
|
||||
<script type="module" src="/api/mnote-browser-runtime/filetree-dnd-runtime.js"></script>
|
||||
<script type="module" src="/api/mnote-browser-runtime/filetree-keyboard-runtime.js"></script>
|
||||
<script type="module" src="/api/mnote-browser-runtime/sidebar-shell-runtime.js"></script>
|
||||
<script type="module" src="/api/mnote-browser-runtime/sidebar-tree-runtime.js"></script>
|
||||
<script inner_html={SIDEBAR_TREE_JS.to_string()}></script>
|
||||
<script type="module" src="/api/mnote-browser-runtime/tree-live-controller.js"></script>
|
||||
@@ -198,6 +199,8 @@ pub fn PageLayout(
|
||||
#[cfg(test)]
|
||||
mod tests {
|
||||
const SIDEBAR_TREE_RUNTIME_JS: &str = include_str!("../../../browser/sidebar-tree-runtime.js");
|
||||
const SIDEBAR_SHELL_RUNTIME_JS: &str =
|
||||
include_str!("../../../browser/sidebar-shell-runtime.js");
|
||||
const FILETREE_CONTEXT_MENU_RUNTIME_JS: &str =
|
||||
include_str!("../../../browser/filetree-context-menu-runtime.js");
|
||||
const FILETREE_DND_RUNTIME_JS: &str = include_str!("../../../browser/filetree-dnd-runtime.js");
|
||||
@@ -430,7 +433,12 @@ mod tests {
|
||||
#[test]
|
||||
fn page_layout_sidebar_toggle_is_wired_to_shell_state() {
|
||||
assert!(SIDEBAR_TREE_RUNTIME_JS.contains("function toggleWorkspaceSidebar"));
|
||||
assert!(SIDEBAR_TREE_RUNTIME_JS.contains("data-mnote-sidebar-collapsed"));
|
||||
assert!(SIDEBAR_TREE_RUNTIME_JS
|
||||
.contains("sidebarShellRuntimeFunction('toggleWorkspaceSidebar')"));
|
||||
assert!(SIDEBAR_SHELL_RUNTIME_JS.contains("function toggleWorkspaceSidebar"));
|
||||
assert!(SIDEBAR_SHELL_RUNTIME_JS.contains("data-mnote-sidebar-collapsed"));
|
||||
assert!(SIDEBAR_SHELL_RUNTIME_JS.contains("function installWorkspaceSidebarResizer"));
|
||||
assert!(SIDEBAR_SHELL_RUNTIME_JS.contains("function restoreSidebarTreeTab"));
|
||||
assert!(SIDEBAR_TREE_RUNTIME_JS.contains("[data-mnote-action=\"toggle-sidebar\"]"));
|
||||
}
|
||||
|
||||
@@ -805,9 +813,15 @@ mod tests {
|
||||
#[test]
|
||||
fn sidebar_runtime_supports_resizable_filetree_and_hover_titles() {
|
||||
assert!(SIDEBAR_TREE_RUNTIME_JS.contains("function installWorkspaceSidebarResizer()"));
|
||||
assert!(SIDEBAR_TREE_RUNTIME_JS.contains("data-mnote-sidebar-resizer"));
|
||||
assert!(SIDEBAR_TREE_RUNTIME_JS.contains("mnote.workspace.sidebarWidth.v1"));
|
||||
assert!(SIDEBAR_TREE_RUNTIME_JS.contains("shell.style.setProperty('--mnote-sidebar-width'"));
|
||||
assert!(SIDEBAR_TREE_RUNTIME_JS
|
||||
.contains("sidebarShellRuntimeFunction('installWorkspaceSidebarResizer')"));
|
||||
assert!(SIDEBAR_SHELL_RUNTIME_JS.contains("data-mnote-sidebar-resizer"));
|
||||
assert!(SIDEBAR_SHELL_RUNTIME_JS.contains("mnote.workspace.sidebarWidth.v1"));
|
||||
assert!(
|
||||
SIDEBAR_SHELL_RUNTIME_JS.contains("shell.style.setProperty('--mnote-sidebar-width'")
|
||||
);
|
||||
assert!(FILETREE_DND_RUNTIME_JS.contains("window.__mnoteFileTreeDndRuntime"));
|
||||
assert!(FILETREE_KEYBOARD_RUNTIME_JS.contains("window.__mnoteFileTreeKeyboardRuntime"));
|
||||
assert!(SIDEBAR_TREE_RUNTIME_JS.contains("installWorkspaceSidebarResizer();"));
|
||||
assert!(SIDEBAR_TREE_RUNTIME_JS.contains(r#"" title="' + escapeHtml(title) + '""#));
|
||||
assert!(SIDEBAR_TREE_RUNTIME_JS
|
||||
|
||||
Reference in New Issue
Block a user