Loading Space page tree...
`;
const status = root.querySelector('#cft-tree-status');
const treeContainer = root.querySelector('#cft-space-tree');
let treeState = null;
let currentSpaceKey = '';
root.querySelector('#cft-tree-back').addEventListener(
'click',
() => {
panelView = 'features';
render(true);
}
);
root.querySelector('#cft-close-btn').addEventListener(
'click',
() => setMinimized(true)
);
function renderNodes(nodes) {
const list = document.createElement('ul');
list.className = 'cft-tree-list';
nodes.forEach((node) => {
const item = document.createElement('li');
item.className = 'cft-tree-item';
item.dataset.pageId = node.id;
item.dataset.spaceKey = currentSpaceKey;
item.dataset.nodeType = node.page?.type || 'page';
const row = document.createElement('div');
row.className = 'cft-tree-row';
if (node.id === String(pageId)) {
row.classList.add('cft-tree-current');
row.dataset.treeCurrent = '1';
}
if (node.children.length) {
const toggle = document.createElement('button');
const isExpanded = treeState.expanded.has(node.id);
toggle.className = 'cft-tree-toggle';
toggle.innerText = isExpanded ? '▾' : '▸';
toggle.title = isExpanded
? 'Collapse children'
: 'Expand children';
toggle.addEventListener('click', () => {
if (treeState.expanded.has(node.id)) {
treeState.expanded.delete(node.id);
} else {
treeState.expanded.add(node.id);
}
renderTree(true);
});
row.appendChild(toggle);
} else {
const spacer = document.createElement('span');
spacer.className = 'cft-tree-toggle-spacer';
row.appendChild(spacer);
}
const titleWrap = document.createElement('span');
titleWrap.className = 'cft-tree-title-wrap';
const title = document.createElement('span');
title.className = 'cft-tree-title';
title.innerText = node.title;
title.title = `${node.title} (${node.id})`;
titleWrap.appendChild(title);
if (node.children.length > 0) {
const childCount = document.createElement('span');
childCount.className = 'cft-tree-child-count';
childCount.innerText = `(${node.children.length})`;
childCount.title = `${node.children.length} child page(s)`;
titleWrap.appendChild(childCount);
}
if (node.id === String(pageId)) {
const badge = document.createElement('span');
badge.className = 'cft-tree-current-badge';
badge.innerText = 'Current';
titleWrap.appendChild(badge);
}
row.appendChild(titleWrap);
item.appendChild(row);
if (
node.children.length &&
treeState.expanded.has(node.id)
) {
item.appendChild(renderNodes(node.children));
}
list.appendChild(item);
});
return list;
}
function renderTree(preserveScroll = false) {
const scrollTop = preserveScroll ? treeContainer.scrollTop : 0;
treeContainer.innerHTML = '';
if (!treeState.roots.length) {
treeContainer.innerText = 'No pages found in this Space.';
return;
}
treeContainer.appendChild(renderNodes(treeState.roots));
if (preserveScroll) {
treeContainer.scrollTop = scrollTop;
return;
}
const current = treeContainer.querySelector(
'[data-tree-current="1"]'
);
current?.scrollIntoView({
block: 'center',
behavior: 'smooth',
});
}
async function loadTree() {
status.className = 'cft-modal-status';
status.innerText = 'Loading Space page tree...';
treeContainer.innerHTML = '';
try {
let space = null;
if (!Utils.isValidPageId(pageId)) {
const spaceMatch = location.pathname.match(
/\/spaces\/([^/]+)/i
);
const spaceKeyFromUrl = spaceMatch
? decodeURIComponent(spaceMatch[1])
: '';
if (spaceKeyFromUrl) {
space = await ConfluenceApi.spaces.getByKey(
spaceKeyFromUrl
);
pageId = String(
space?.homepageId || space?.homepage?.id || ''
);
}
}
if (!Utils.isValidPageId(pageId)) {
throw new Error('当前页面没有有效的 Confluence Page ID');
}
const currentPage = await ConfluenceApi.pages.get(pageId);
const spaceId = currentPage.spaceId || space?.id;
if (!spaceId) {
throw new Error('当前页面没有可识别的 Space ID');
}
if (!space || String(space.id) !== String(spaceId)) {
space = await ConfluenceApi.spaces.get(spaceId);
}
Store.setContext({ pageId });
const spaceName = (space.name || '').trim();
currentSpaceKey = (space.key || '').trim();
if (!spaceName || !currentSpaceKey) {
throw new Error('当前 Space 没有可识别的名称或 Space Key');
}
const pages = await SpaceTreeService.load(spaceId);
treeState = SpaceTreeService.buildTree(
pages,
pageId,
spaceName
);
renderTree();
status.className = 'cft-modal-status success';
status.innerText = `Loaded ${treeState.filteredCount} page(s)`;
} catch (error) {
status.className = 'cft-modal-status error';
status.innerText = error.message;
Logger.error('space-tree.load-failed', error);
}
}
root.querySelector('#cft-tree-refresh').addEventListener(
'click',
loadTree
);
loadTree();
}
function renderAiLabelsPage() {
const pageId = Store.getContext().pageId;
if (!Utils.isValidPageId(pageId)) {
toast('当前页面没有有效的 Confluence Page ID', 'error');
panelView = 'features';
render();
return;
}
root.innerHTML = `
Generate suggestions for the current page
The page title and content will be sent to the configured Azure OpenAI endpoint.
`;
const status = root.querySelector('#cft-label-status');
const results = root.querySelector('#cft-label-results');
const generateButton = root.querySelector('#cft-label-generate');
let existingLabels = [];
root.querySelector('#cft-label-back').addEventListener(
'click',
() => {
panelView = 'features';
render(true);
}
);
root.querySelector('#cft-close-btn').addEventListener(
'click',
() => setMinimized(true)
);
function renderSuggestions(suggestions) {
results.innerHTML = `
`;
const endpointInput = root.querySelector('#cft-ai-endpoint');
const apiKeyInput = root.querySelector('#cft-ai-api-key');
const deploymentInput = root.querySelector('#cft-ai-deployment');
const modelsList = root.querySelector('#cft-ai-model-options');
const status = root.querySelector('#cft-ai-status');
endpointInput.value = config.endpoint;
apiKeyInput.value = config.apiKey;
deploymentInput.value = config.deployment;
function getCandidate() {
return {
endpoint: endpointInput.value,
apiKey: apiKeyInput.value,
apiVersion: config.apiVersion,
modelsApiVersion: config.modelsApiVersion,
deployment: deploymentInput.value,
models: loadedModels,
};
}
function renderModels(models) {
modelsList.innerHTML = '';
models.forEach((model) => {
const option = document.createElement('option');
option.value = model.id;
option.label = model.label;
modelsList.appendChild(option);
});
}
renderModels(config.models);
root.querySelector('#cft-ai-back').addEventListener(
'click',
() => {
panelView = 'config';
render(true);
}
);
root.querySelector('#cft-close-btn').addEventListener(
'click',
() => setMinimized(true)
);
root.querySelector('#cft-ai-load-models').addEventListener(
'click',
async (event) => {
const button = event.currentTarget;
button.disabled = true;
status.className = 'cft-modal-status';
status.innerText = 'Connecting...';
try {
const candidate = AIConfig.validate(getCandidate());
const result = await AzureOpenAI.testConnection(candidate);
loadedModels = result.models;
lastTest = {
ok: true,
message: result.message,
endpoint: candidate.endpoint,
};
renderModels(result.models);
status.innerText = result.message;
status.className = 'cft-modal-status success';
} catch (error) {
lastTest = {
ok: false,
message: error.message,
endpoint: endpointInput.value,
};
status.innerText = error.message;
status.className = 'cft-modal-status error';
} finally {
button.disabled = false;
}
}
);
root.querySelector('#cft-ai-save').addEventListener(
'click',
() => {
try {
const candidate = AIConfig.validate(getCandidate());
const health = lastTest &&
lastTest.endpoint === candidate.endpoint
? {
ok: lastTest.ok,
message: lastTest.message,
endpoint: candidate.endpoint,
checkedAt: Date.now(),
}
: null;
const saved = AIConfig.save({
...candidate,
models: loadedModels,
lastCheck: health,
});
panelView = 'config';
render();
toast(
saved.deployment
? 'AI configuration saved'
: 'AI configuration saved; select a Deployment before use'
);
} catch (error) {
status.innerText = error.message;
status.className = 'cft-modal-status error';
}
}
);
root.querySelector('#cft-ai-clear').addEventListener(
'click',
() => {
AIConfig.clear();
panelView = 'config';
render(true);
toast('AI configuration cleared');
}
);
}
function openMenu() {
panelView = 'features';
if (Store.getUi().docked) centerPanel();
Store.updateUi({ minimized: false });
render();
}
function openConfigPage() {
panelView = 'config';
if (Store.getUi().docked) centerPanel();
Store.updateUi({ minimized: false });
render();
}
function renderConfigMenu() {
const status = AIConfig.getStatus();
const maximized = Store.getUi().maximized;
root.innerHTML = `
`;
root.querySelector('#cft-close-btn').addEventListener(
'click',
() => setMinimized(true)
);
root.querySelector('#cft-switch-features').addEventListener(
'click',
() => {
panelView = 'features';
render(true);
}
);
root.querySelector('#cft-ai-settings').addEventListener(
'click',
() => {
panelView = 'ai-config';
render(true);
}
);
}
function renderMenu() {
const aiStatus = AIConfig.getStatus();
const maximized = Store.getUi().maximized;
const aiReady = aiStatus.key === 'available';
const aiLabelTitle = aiReady
? 'Analyze the current article and suggest labels using the configured AI'
: `Requires a ready AI configuration (${aiStatus.label}). Open the Configuration Menu to configure it`;
root.innerHTML = `
`;
root.querySelector('#cft-close-btn').addEventListener(
'click',
() => setMinimized(true)
);
root.querySelector('#cft-switch-config').addEventListener(
'click',
() => {
panelView = 'config';
render(true);
}
);
root.querySelector('#cft-space-tree-btn').addEventListener(
'click', () => {
panelView = 'space-tree';
render(true);
}
);
root.querySelector('#cft-ai-label-btn').addEventListener(
'click', () => {
if (AIConfig.getStatus().key !== 'available') {
return;
}
panelView = 'ai-labels';
render(true);
}
);
}
function protectHeaderControls() {
root.querySelectorAll(
'.cft-header-actions, .cft-header button, .cft-header-back'
).forEach((element) => {
['mousedown', 'pointerdown', 'touchstart'].forEach((eventName) => {
element.addEventListener(eventName, (event) => {
event.stopPropagation();
});
});
});
}
function render(preserveLayout = false) {
if (!root) return;
// Menu navigation must not alter the panel geometry, even when a page
// has very different content from the previous one.
const layoutBeforeRender = preserveLayout
? { ...Store.getUi() }
: null;
applyLayout();
if (Store.getUi().minimized) {
hideMenuOverlay();
removePersistentFab();
root.innerHTML = `