`;
document.body.appendChild(wrapper);
wrapper.querySelector('#cft-ai-back').addEventListener(
'click',
() => {
wrapper.remove();
render();
}
);
const endpointInput = wrapper.querySelector('#cft-ai-endpoint');
const apiKeyInput = wrapper.querySelector('#cft-ai-api-key');
const deploymentInput = wrapper.querySelector('#cft-ai-deployment');
const modelsList = wrapper.querySelector('#cft-ai-model-options');
const status = wrapper.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);
wrapper.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;
}
}
);
wrapper.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,
deployment: deploymentInput.value,
models: loadedModels,
lastCheck: health,
});
wrapper.remove();
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';
}
}
);
wrapper.querySelector('#cft-ai-clear').addEventListener(
'click',
() => {
AIConfig.clear();
wrapper.remove();
render();
toast('AI configuration cleared');
}
);
wrapper.querySelector('#cft-ai-cancel').addEventListener(
'click',
() => {
wrapper.remove();
render();
}
);
}
function renderSpaceTreePage() {
let pageId = Store.getContext().pageId;
root.innerHTML = `
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 = `
`;
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);
}
);
root.querySelector('#cft-toggle-maximize')?.addEventListener(
'click',
toggleMaximized
);
renderModules();
}
function renderModules() {
const container = root.querySelector('#cft-modules');
Modules.forEach((module) => {
const button = document.createElement('button');
button.className = 'cft-module-btn';
button.innerText = module.label;
button.addEventListener('click', (event) => {
ModuleRunner.run(module, event.currentTarget);
});
container.appendChild(button);
});
}
function updatePageId() {
const input = root?.querySelector('#cft-current-page-id');
if (input) {
input.value = Store.getContext().pageId;
}
}
function toast(message, type = 'info') {
const element = document.createElement('div');
element.className = `cft-toast ${type}`;
element.innerText = message;
document.body.appendChild(element);
setTimeout(() => element.remove(), 2500);
}
function hideContextMenu() {
contextMenu?.remove();
contextMenu = null;
}
function showContextMenu(event) {
if (Store.getUi().minimized) return;
event.preventDefault();
event.stopPropagation();
hideContextMenu();
const script = typeof GM_info !== 'undefined'
? GM_info.script || {}
: {};
const name = script.name || 'Confluence Plus';
const version = script.version || 'unknown';
const treeRow = event.target.closest('.cft-tree-row');
const treeItem = treeRow?.closest('.cft-tree-item');
const pageId = treeItem?.dataset.pageId || '';
const spaceKey = treeItem?.dataset.spaceKey || '';
const nodeType = treeItem?.dataset.nodeType || 'page';
const canOpenPage = Boolean(
pageId && spaceKey && nodeType !== 'folder'
);
const menuWidth = 220;
const menuHeight = canOpenPage ? 92 : 54;
const left = Math.min(
Math.max(8, event.clientX),
window.innerWidth - menuWidth - 8
);
const top = Math.min(
Math.max(8, event.clientY),
window.innerHeight - menuHeight - 8
);
contextMenu = document.createElement('div');
contextMenu.className = 'cft-context-menu';
contextMenu.setAttribute('role', 'menu');
contextMenu.style.left = `${left}px`;
contextMenu.style.top = `${top}px`;
if (canOpenPage) {
const openPage = document.createElement('button');
openPage.type = 'button';
openPage.className = 'cft-context-menu-action';
openPage.setAttribute('role', 'menuitem');
openPage.textContent = 'Open page';
openPage.addEventListener('click', (clickEvent) => {
clickEvent.preventDefault();
clickEvent.stopPropagation();
hideContextMenu();
window.location.href = `${location.origin}/wiki/spaces/${encodeURIComponent(spaceKey)}/pages/${pageId}`;
});
contextMenu.appendChild(openPage);
}
const item = document.createElement('div');
item.className = 'cft-context-menu-item cft-context-menu-info';
item.setAttribute('role', 'menuitem');
item.setAttribute('aria-disabled', 'true');
item.textContent = `${name} v${version}`;
contextMenu.appendChild(item);
document.body.appendChild(contextMenu);
setTimeout(() => {
document.addEventListener('click', hideContextMenu, {
once: true,
capture: true,
});
}, 0);
}
function enableDrag() {
let dragging = false;
let offsetX = 0;
let offsetY = 0;
root.addEventListener('dblclick', (event) => {
if (Store.getUi().minimized || event.button !== 0) return;
const header = event.target.closest('.cft-header');
const interactive = event.target.closest(
'button, input, select, textarea, a, .cft-header-actions'
);
if (!header || interactive) return;
event.preventDefault();
event.stopPropagation();
toggleMaximized();
});
root.addEventListener('mousedown', (event) => {
if (
Store.getUi().minimized ||
Store.getUi().maximized ||
event.button !== 0
) return;
const header = event.target.closest('.cft-header');
const interactive = event.target.closest(
'button, input, select, textarea, a, .cft-header-actions'
);
if (!header || interactive) {
return;
}
const rect = root.getBoundingClientRect();
dragging = true;
offsetX = event.clientX - rect.left;
offsetY = event.clientY - rect.top;
Store.updateUi({ docked: false });
document.body.style.userSelect = 'none';
});
document.addEventListener('mousemove', (event) => {
if (!dragging) return;
const rect = root.getBoundingClientRect();
const maxX = Math.max(0, window.innerWidth - rect.width);
const maxY = Math.max(0, window.innerHeight - rect.height);
const x = Math.min(
maxX,
Math.max(0, event.clientX - offsetX)
);
const y = Math.min(
maxY,
Math.max(0, event.clientY - offsetY)
);
root.style.left = `${x}px`;
root.style.top = `${y}px`;
root.style.right = 'auto';
root.style.bottom = 'auto';
Store.updateUi({ x, y });
});
document.addEventListener('mouseup', () => {
if (!dragging) return;
dragging = false;
document.body.style.userSelect = '';
});
}
function observeResize() {
if (!window.ResizeObserver) return;
const observer = new ResizeObserver(
Utils.debounce(() => {
if (!root || Store.getUi().minimized) return;
const ui = Store.getUi();
const rect = root.getBoundingClientRect();
const width = Math.round(rect.width);
const height = Math.round(rect.height);
const fullscreenWidth = Math.round(window.innerWidth);
const fullscreenHeight = Math.round(window.innerHeight);
const isFullscreenGeometry =
Math.abs(width - fullscreenWidth) <= 1 &&
Math.abs(height - fullscreenHeight) <= 1 &&
Math.abs(rect.left) <= 1 &&
Math.abs(rect.top) <= 1;
if (!ui.maximized && isFullscreenGeometry) {
// A normal window manually resized exactly to the viewport is
// logically fullscreen, so the button must switch to Restore.
Store.updateUi({
maximized: true,
_normalWidth: ui.width,
_normalHeight: ui.height,
_normalX: ui.x,
_normalY: ui.y,
});
render();
return;
}
if (ui.maximized) {
const userResized = !isFullscreenGeometry;
if (!userResized) return;
// A resize from the lower-right corner means the user wants a
// normal window again. Keep the size and location they chose.
Store.updateUi({
maximized: false,
width,
height,
x: Math.max(0, Math.round(rect.left)),
y: Math.max(0, Math.round(rect.top)),
docked: false,
});
render();
return;
}
Store.updateUi({ width, height });
})
);
observer.observe(root);
}
function handleViewportResize() {
const viewportChanged =
window.innerWidth !== lastViewport.width ||
window.innerHeight !== lastViewport.height;
lastViewport = {
width: window.innerWidth,
height: window.innerHeight,
};
if (!viewportChanged || Store.getUi().minimized) return;
// Keep the expanded panel centered whenever the browser viewport
// changes. A maximized panel first returns to its normal state.
if (Store.getUi().maximized) {
Store.updateUi({ maximized: false });
}
centerPanel();
render();
}
function init() {
root = document.createElement('div');
root.id = 'cft-root';
root.addEventListener('contextmenu', showContextMenu);
document.body.appendChild(root);
window.addEventListener('resize', handleViewportResize);
render();
enableDrag();
observeResize();
unsubscribe = Store.subscribe((type) => {
if (type === 'context') {
updatePageId();
}
if (type === 'ui' && Store.getUi().minimized) {
render();
}
});
}
return {
init,
render,
toast,
destroy() {
unsubscribe?.();
hideContextMenu();
window.removeEventListener('resize', handleViewportResize);
root?.remove();
},
};
})();
/********************************************************
* STYLES
********************************************************/
GM_addStyle(`
#cft-menu-overlay {
position: fixed;
inset: 0;
z-index: 999998;
background: rgba(9, 30, 66, .28);
backdrop-filter: blur(1px);
}
#cft-root {
position: fixed;
z-index: 999999;
font-size: 14px;
color: #333;
}
.cft-context-menu {
position: fixed;
z-index: 1000003;
width: 220px;
box-sizing: border-box;
border: 1px solid #dfe1e6;
border-radius: 6px;
background: white;
box-shadow: 0 8px 24px rgba(9, 30, 66, .24);
padding: 4px 0;
color: #172b4d;
font-size: 12px;
}
.cft-context-menu-item,
.cft-context-menu-action {
display: block;
width: 100%;
box-sizing: border-box;
border: none;
background: transparent;
padding: 9px 12px;
text-align: left;
white-space: nowrap;
user-select: none;
}
.cft-context-menu-action {
color: #172b4d;
cursor: pointer;
font: inherit;
}
.cft-context-menu-action:hover {
background: #deebff;
color: #0747a6;
}
.cft-context-menu-info {
color: #8993a4;
cursor: default;
}
#cft-root.cft-expanded {
background: white;
border: 1px solid #ddd;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
overflow: hidden;
box-sizing: border-box;
resize: both;
min-width: ${Config.ui.minWidth}px;
min-height: ${Config.ui.minHeight}px;
max-width: 100vw;
max-height: 100vh;
}
#cft-root.cft-minimized {
background: transparent;
border: none;
box-shadow: none;
overflow: visible;
resize: none;
}
#cft-fab {
width: 48px;
height: 48px;
border: none;
border-radius: 14px;
background: #172b4d;
box-shadow: 0 8px 20px rgba(9, 30, 66, .25);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
#cft-fab:hover {
transform: translateY(-1px);
}
#cft-fab-persistent {
position: fixed;
z-index: 999997;
width: 48px;
height: 48px;
border: none;
border-radius: 14px;
background: #172b4d;
box-shadow: 0 8px 20px rgba(9, 30, 66, .25);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.cft-fab-tooltip {
position: absolute;
right: 58px;
bottom: 0;
z-index: 1000002;
display: none;
width: 190px;
padding: 10px 12px;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 10px;
background: #172b4d;
box-shadow: 0 10px 28px rgba(9, 30, 66, .28);
color: white;
font-size: 12px;
line-height: 1.5;
pointer-events: none;
}
.cft-fab-tooltip div {
display: flex;
align-items: center;
gap: 8px;
}
.cft-fab-tooltip div + div {
margin-top: 5px;
}
.cft-fab-tooltip strong {
min-width: 34px;
border-radius: 4px;
background: rgba(255, 255, 255, .16);
padding: 2px 4px;
text-align: center;
color: #deebff;
}
#cft-root.cft-minimized:hover .cft-fab-tooltip {
display: block;
}
.cft-fab-image {
width: 30px;
height: 30px;
border-radius: 8px;
object-fit: cover;
}
.cft-fab-logo {
width: 28px;
height: 28px;
border-radius: 8px;
background: linear-gradient(
135deg,
#6554c0,
#00b8d9,
#36b37e,
#ffab00
);
color: white;
font-size: 12px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.cft-header {
height: 48px;
padding: 0 16px;
background: #0052cc;
color: white;
display: flex;
align-items: center;
justify-content: space-between;
cursor: move;
user-select: none;
}
.cft-header-title {
flex: 0 0 auto;
min-width: 0;
}
.cft-session-label {
margin-top: 2px;
font-size: 11px;
opacity: .8;
}
.cft-header-actions {
display: flex;
align-items: center;
gap: 6px;
}
.cft-header button {
width: 28px;
height: 28px;
border: none;
border-radius: 6px;
background: rgba(255, 255, 255, .2);
color: white;
font-size: 18px;
line-height: 1;
cursor: pointer;
}
.cft-header-icon-btn {
font-size: 15px !important;
}
.cft-body {
height: calc(100% - 48px);
overflow: auto;
padding: 12px;
box-sizing: border-box;
}
.cft-section {
margin-bottom: 20px;
}
.cft-title {
margin-bottom: 12px;
font-weight: bold;
}
.cft-label {
display: block;
margin-bottom: 4px;
color: #666;
font-size: 12px;
}
.cft-page-id {
width: 100%;
box-sizing: border-box;
border: 1px solid #ddd;
border-radius: 6px;
padding: 8px;
}
.cft-module-btn {
width: 100%;
margin-bottom: 10px;
border: none;
border-radius: 8px;
background: #0052cc;
color: white;
padding: 10px;
cursor: pointer;
}
.cft-module-btn:hover:not(:disabled) {
opacity: .9;
}
.cft-module-btn:disabled {
cursor: wait;
opacity: .6;
}
.cft-module-btn[data-loading]::after {
content: ' ...';
}
.cft-tree-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 10px;
}
.cft-tree-refresh {
width: 28px;
height: 28px;
border: 1px solid #dfe1e6;
border-radius: 6px;
background: white;
color: #172b4d;
cursor: pointer;
font-size: 17px;
}
.cft-space-tree {
max-height: calc(100% - 48px);
overflow: auto;
padding: 4px 0;
}
.cft-tree-list {
margin: 0;
padding-left: 0;
list-style: none;
}
.cft-tree-item .cft-tree-list {
margin-left: 18px;
}
.cft-tree-row {
position: relative;
display: flex;
align-items: center;
gap: 6px;
min-height: 32px;
border-radius: 6px;
padding: 3px 6px;
}
.cft-tree-row:hover {
background: #f4f5f7;
}
.cft-tree-current {
background: #deebff;
color: #0747a6;
font-weight: 600;
}
.cft-tree-toggle,
.cft-tree-toggle-spacer {
width: 22px;
height: 24px;
flex: 0 0 22px;
}
.cft-tree-toggle {
border: none;
border-radius: 4px;
background: transparent;
color: #42526e;
cursor: pointer;
font-size: 15px;
line-height: 1;
}
.cft-tree-toggle:hover {
background: #dfe1e6;
}
.cft-tree-title-wrap {
min-width: 0;
flex: 1;
display: flex;
align-items: baseline;
overflow: hidden;
}
.cft-tree-title {
min-width: 0;
flex: 0 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cft-tree-child-count {
flex: 0 0 auto;
margin-left: 4px;
color: #0052cc;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.cft-tree-current-badge {
flex: 0 0 auto;
margin-left: 4px;
border-radius: 999px;
background: #0052cc;
color: white;
padding: 2px 6px;
font-size: 10px;
white-space: nowrap;
}
.cft-label-list {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 12px;
}
.cft-label-item {
display: flex;
align-items: center;
gap: 8px;
}
.cft-label-item input[type="checkbox"] {
width: 16px;
height: 16px;
flex: 0 0 auto;
}
.cft-label-edit {
min-width: 0;
flex: 1;
border: 1px solid #ccc;
border-radius: 6px;
padding: 7px;
}
.cft-label-remove {
width: 28px;
height: 28px;
border: none;
border-radius: 6px;
background: #ffebe6;
color: #bf2600;
cursor: pointer;
font-size: 16px;
}
.cft-label-add-row {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
.cft-popconfirm-wrap {
position: fixed;
z-index: 1000002;
width: 300px;
}
.cft-popconfirm {
position: relative;
border: 1px solid #dfe1e6;
border-radius: 8px;
background: white;
box-shadow: 0 8px 24px rgba(9, 30, 66, .22);
padding: 14px;
}
.cft-popconfirm::after {
content: '';
position: absolute;
left: 24px;
bottom: -7px;
width: 12px;
height: 12px;
border-right: 1px solid #dfe1e6;
border-bottom: 1px solid #dfe1e6;
background: white;
transform: rotate(45deg);
}
.cft-popconfirm-title {
color: #172b4d;
font-size: 14px;
font-weight: 700;
}
.cft-popconfirm-message {
margin-top: 7px;
color: #42526e;
font-size: 12px;
line-height: 1.45;
word-break: break-word;
}
.cft-popconfirm-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 12px;
}
.cft-popconfirm-actions button {
border: none;
border-radius: 6px;
padding: 6px 10px;
cursor: pointer;
font-size: 12px;
}
.cft-confirm-cancel {
background: #f1f2f4;
color: #172b4d;
}
.cft-confirm-ok {
background: #0052cc;
color: white;
}
.cft-label-add-row .cft-secondary-btn {
width: auto;
}
.cft-feature-btn {
margin-bottom: 10px;
}
.cft-secondary-btn {
width: 100%;
border: 1px solid #0052cc;
border-radius: 8px;
background: white;
color: #0052cc;
padding: 9px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
text-align: left;
}
.cft-status-badge {
display: inline-block;
border-radius: 999px;
padding: 3px 7px;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.cft-status-badge.not-configured {
background: #f1f2f4;
color: #6b778c;
}
.cft-status-badge.unverified {
background: #fff0b3;
color: #7f5f01;
}
.cft-status-badge.available {
background: #abf5d1;
color: #006644;
}
.cft-status-badge.unavailable {
background: #ffbdad;
color: #bf2600;
}
.cft-menu-hint {
color: #6b778c;
font-size: 11px;
line-height: 1.5;
}
.cft-modal-wrap {
position: fixed;
inset: 0;
z-index: 10000000;
background: rgba(0, 0, 0, .4);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.cft-modal {
width: min(440px, 100%);
max-height: 90vh;
overflow: auto;
box-sizing: border-box;
border-radius: 12px;
background: white;
padding: 20px;
box-shadow: 0 12px 32px rgba(0, 0, 0, .24);
}
.cft-modal-title {
margin-bottom: 18px;
font-size: 18px;
font-weight: bold;
}
.cft-modal-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.cft-back-btn {
width: 30px;
height: 30px;
border: none;
border-radius: 6px;
background: #f1f2f4;
color: #172b4d;
cursor: pointer;
font-size: 18px;
line-height: 1;
}
.cft-title-spacer {
width: 30px;
}
.cft-modal-section-title {
margin: 18px 0 8px;
color: #172b4d;
font-size: 13px;
font-weight: 700;
border-bottom: 1px solid #ebecf0;
padding-bottom: 6px;
}
.cft-modal-section-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.cft-modal-label {
display: block;
margin: 12px 0 4px;
color: #555;
font-size: 12px;
}
.cft-modal-input {
width: 100%;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 6px;
padding: 9px;
}
.cft-modal-hint {
margin-top: 6px;
color: #6b778c;
font-size: 11px;
line-height: 1.4;
}
.cft-modal-action,
.cft-modal-actions button {
border: none;
border-radius: 7px;
background: #0052cc;
color: white;
padding: 9px 12px;
cursor: pointer;
}
.cft-modal-action {
width: 100%;
margin-top: 16px;
}
.cft-modal-action:disabled,
.cft-modal-actions button:disabled {
cursor: wait;
opacity: .6;
}
.cft-modal-actions {
display: flex;
gap: 8px;
margin-top: 16px;
}
.cft-modal-actions button {
flex: 1;
}
.cft-modal-actions button:nth-child(2) {
background: #6b778c;
}
.cft-modal-actions button:nth-child(3) {
background: #f1f2f4;
color: #172b4d;
}
.cft-modal-status {
min-height: 18px;
margin-top: 10px;
font-size: 12px;
white-space: pre-wrap;
}
.cft-modal-status.success {
color: #16803c;
}
.cft-modal-status.error {
color: #d93025;
}
.cft-toast {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 9999999;
border-radius: 8px;
background: #333;
color: white;
padding: 10px 14px;
}
.cft-toast.error {
background: #d93025;
}
`);
/********************************************************
* BOOTSTRAP
********************************************************/
function bootstrap() {
Store.init();
Router.init();
UI.init();
Logger.info('initialized', {
version: GM_info.script.version,
origin: location.origin,
});
}
bootstrap();
})();