diff --git a/static/app.js b/static/app.js index 281da5e..1e86448 100644 --- a/static/app.js +++ b/static/app.js @@ -25,7 +25,7 @@ import { buildTree, buildRealFilterTree, expandAll, collapseAll } from './tree-u import { releaseAllLocks, startEditFolder, startEditLeaf, cancelEditFolder, cancelEditLeaf, previewFolderCLI, previewLeafCLI, - hideSideCLI, executeSideCLI + hideSideCLI, executeSideCLI, previewNodeCLI } from './edit-mode.js'; // 6. MAC Domain 配置模組 (MAC Domain) @@ -595,6 +595,11 @@ document.addEventListener('DOMContentLoaded', () => { const btn = document.getElementById(id); if (btn) btn.style.display = 'inline-block'; }); + + // 🌟 新增:解鎖樹狀圖裡的所有 🔍 預覽按鈕 + document.querySelectorAll('.debug-preview-btn').forEach(btn => { + btn.style.display = 'inline-block'; + }); } const urlParams = new URLSearchParams(window.location.search); @@ -701,6 +706,7 @@ window.scanVisibleMissingOptions = scanVisibleMissingOptions; window.scanGlobalMissingOptions = scanGlobalMissingOptions; window.clearVisibleCache = clearVisibleCache; window.clearGlobalCache = clearGlobalCache; +window.previewNodeCLI = previewNodeCLI; // --- 樹狀圖展開與編輯操作 --- window.expandAll = expandAll; diff --git a/static/edit-mode.js b/static/edit-mode.js index d8a7959..9507ed8 100644 --- a/static/edit-mode.js +++ b/static/edit-mode.js @@ -589,3 +589,85 @@ function transformNoToActive(elementId, newCommand) { if (actionBtns) actionBtns.style.display = 'none'; if (editBtn) editBtn.style.display = 'none'; } + +// ============================================================================ +// 💻 開發者工具:預覽節點完整指令 (唯讀 Debug 模式) +// ============================================================================ +export function previewNodeCLI(btnElement, rootPath) { + // 1. 定位當前點擊的容器 + let container = btnElement.closest('details'); + if (!container) { + const leafNode = btnElement.closest('.tree-leaf-node'); + if (leafNode) container = leafNode.querySelector('.leaf-container'); + } + if (!container) return; + + let cliOutput = `! =========================================\n`; + cliOutput += `! 🔍 [Debug] 節點預覽: ${rootPath}\n`; + cliOutput += `! =========================================\n`; + cliOutput += `${rootPath.replace(/::/g, ' ')}\n`; + + // 2. 找出該節點下所有的葉節點 (包含自己) + const allLeaves = container.classList.contains('leaf-container') + ? [container] + : Array.from(container.querySelectorAll('.leaf-container')); + + if (allLeaves.length === 1 && allLeaves[0] === container) { + // 情況 A:它自己就是最底層的葉節點 + const val = container.getAttribute('data-original'); + if (val) cliOutput += ` ${val}\n`; + } else { + // 情況 B:它是一個資料夾,遞迴列出所有子項目的相對路徑與值 + allLeaves.forEach(leaf => { + const leafPath = leaf.getAttribute('data-path'); + const leafVal = leaf.getAttribute('data-original'); + + if (leafPath && leafVal !== null) { + const relativePath = leafPath.replace(rootPath, '').replace(/^::/, '').replace(/::/g, ' '); + cliOutput += ` ${relativePath} ${leafVal}\n`; + } + }); + } + + cliOutput += `exit\n`; + + // 3. 呼叫現有的樹狀圖側邊欄 (Side Pane) 顯示 + const leftPane = document.getElementById('tree-container'); + const resizer = document.getElementById('drag-resizer'); + const rightPane = document.getElementById('side-cli-preview'); + + if (!rightPane) { + console.error("找不到側邊欄元素 'side-cli-preview'"); + return; + } + + // 設定標題與樣式 + document.getElementById('side-pane-title').innerHTML = '🔍 節點指令預覽 (唯讀)'; + document.getElementById('side-pane-title').style.color = '#3498db'; + + // 隱藏「確認寫入」按鈕,只顯示「取消/關閉」按鈕 + document.getElementById('btn-side-confirm').style.display = 'none'; + document.getElementById('btn-side-cancel').style.display = 'inline-block'; + document.getElementById('btn-side-close').style.display = 'none'; + + // 顯示 Textarea 並填入內容 + const textarea = document.getElementById('side-cli-textarea'); + textarea.style.display = 'block'; + textarea.value = cliOutput; + textarea.style.backgroundColor = '#1e1e1e'; // 終端機深色背景 + textarea.style.color = '#d4d4d4'; + + document.getElementById('side-execution-result').style.display = 'none'; + + // 展開側邊欄 + leftPane.style.width = 'calc(50% - 11px)'; + rightPane.style.width = 'calc(50% - 11px)'; + if (resizer) resizer.style.display = 'flex'; + rightPane.style.display = 'block'; + + // 初始化拖拉分隔線 (如果尚未初始化) + if (!window.isResizerInitialized && typeof initResizer === 'function') { + initResizer(); + window.isResizerInitialized = true; + } +} \ No newline at end of file diff --git a/static/tree-ui.js b/static/tree-ui.js index 989ed3c..e8a2f20 100644 --- a/static/tree-ui.js +++ b/static/tree-ui.js @@ -81,6 +81,14 @@ export function buildTree(node, path = '', isParentCommandGroup = false) { ${expandCollapseBtns}
+ @@ -151,6 +159,14 @@ export function buildTree(node, path = '', isParentCommandGroup = false) { ${displayContent}
+