enha: debug tool in god-mode
This commit is contained in:
swpa
parent
bee63b78ec
commit
f86a449642
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -81,6 +81,14 @@ export function buildTree(node, path = '', isParentCommandGroup = false) {
|
|||
${expandCollapseBtns}
|
||||
|
||||
<div style="margin-left: auto; display: flex; align-items: center;">
|
||||
<span class="debug-preview-btn admin-only"
|
||||
onclick="event.stopPropagation(); event.preventDefault(); previewNodeCLI(this, '${currentPath}')"
|
||||
style="display: none; cursor: pointer; margin-right: 8px; font-size: 14px; transition: transform 0.2s;"
|
||||
title="[開發者] 預覽此節點下所有指令"
|
||||
onmouseover="this.style.transform='scale(1.2)'"
|
||||
onmouseout="this.style.transform='scale(1)'">
|
||||
🔍
|
||||
</span>
|
||||
<span id="edit-btn-${elementId}" onclick="event.stopPropagation(); event.preventDefault(); startEditFolder('${currentPath}', '${elementId}')"
|
||||
style="cursor: pointer; font-size: 14px; opacity: 0.3; transition: opacity 0.2s;"
|
||||
onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=0.3" title="鎖定並編輯此群組">
|
||||
|
|
@ -151,6 +159,14 @@ export function buildTree(node, path = '', isParentCommandGroup = false) {
|
|||
${displayContent}
|
||||
|
||||
<div style="margin-left: auto; display: flex; align-items: center;">
|
||||
<span class="debug-preview-btn admin-only"
|
||||
onclick="event.stopPropagation(); event.preventDefault(); previewNodeCLI(this, '${currentPath}')"
|
||||
style="display: none; cursor: pointer; margin-right: 8px; font-size: 14px; transition: transform 0.2s;"
|
||||
title="[開發者] 預覽此節點下所有指令"
|
||||
onmouseover="this.style.transform='scale(1.2)'"
|
||||
onmouseout="this.style.transform='scale(1)'">
|
||||
🔍
|
||||
</span>
|
||||
<span id="edit-btn-${elementId}" onclick="event.stopPropagation(); event.preventDefault(); startEditLeaf('${currentPath}', '${elementId}')"
|
||||
style="cursor: pointer; font-size: 14px; opacity: 0.3; transition: opacity 0.2s;"
|
||||
onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=0.3" title="鎖定並編輯此項目">
|
||||
|
|
|
|||
Loading…
Reference in New Issue