⚙️
`;
document.body.appendChild(ctrlDiv);
function saveFabPosition(left, top) {
localStorage.setItem('fabPosition', JSON.stringify({ left, top }));
}
function loadFabPosition() {
const pos = JSON.parse(localStorage.getItem('fabPosition'));
if (pos && typeof pos.left === 'number' && typeof pos.top === 'number') {
wrapper.style.left = `${pos.left}px`;
wrapper.style.top = `${pos.top}px`;
}
}
const getDocument = () => {
const iframe = document.querySelector(".lc-simulator-content-frame")
return iframe?.contentDocument || iframe?.contentWindow?.document || document;
}
// 样式标签处理
const getStyleTag = () => {
const doc = getDocument();
let tag = doc.querySelector('#my-dynamic-style');
if (!tag) {
const header = doc.querySelector('head')
tag = document.createElement('style');
tag.id = 'my-dynamic-style';
header.appendChild(tag);
}
return tag;
};
// 拉取并应用 CSS
async function fetchAndApplyCSS() {
try {
const res = await fetch(remoteCssUrl);
const css = await res.text();
if (css !== lastCss) {
getStyleTag().innerHTML = borderCss + css;
lastCss = css;
console.log('[CSS] 样式已更新');
}
} catch (err) {
console.warn('[CSS] 加载失败:', err);
window.Next?.Message?.error?.(`[CSS] 加载失败, 请检查设置的css地址: ${err} ${remoteCssUrl}`);
}
}
const fabIcon = document.getElementById('css-fab');
const stopAutoLoad = () => {
clearInterval(intervalId);
intervalId = null;
autoLoad = false;
fabIcon.classList.remove('spin');
document.getElementById('auto-load-btn').innerText = '自动加载CSS';
console.log('[CSS] 自动加载已关闭');
}
function highLightHtml(times = 3) {
if (times <= 0){
return
}
getDocument()?.querySelector('html')?.classList?.add('border-animate')
setTimeout(() => {
getDocument()?.querySelector('html')?.classList?.remove('border-animate')
setTimeout(() => {
highLightHtml(times - 1)
}, 300)
}, 700)
}
document.getElementById('auto-load-btn').addEventListener('click', () => {
if (autoLoad) {
stopAutoLoad()
} else {
fetchAndApplyCSS();
highLightHtml()
intervalId = setInterval(fetchAndApplyCSS, 1000);
autoLoad = true;
fabIcon.classList.add('spin');
document.getElementById('auto-load-btn').innerText = '关闭自动加载';
console.log('[CSS] 自动加载已开启');
}
});
// 清除按钮逻辑
document.getElementById('clear-css-btn').addEventListener('click', () => {
stopAutoLoad()
const tag = getStyleTag();
if (tag) tag.remove();
lastCss = '';
console.log('[CSS] 样式已清除');
window.Next?.Message?.success?.('[CSS] 样式已清除')
});
// 手动载入按钮逻辑
document.getElementById('manual-css-btn').addEventListener('click', () => {
fetchAndApplyCSS();
highLightHtml()
console.log('[CSS] 手动载入完成');
window.Next?.Message?.success?.('[CSS] 手动载入完成')
});
// 设置按钮事件
document.getElementById('set-css-url-btn').addEventListener('click', () => {
const input = prompt('请输入新的远程 CSS 地址：', remoteCssUrl);
if (input && input.trim()) {
remoteCssUrl = input.trim();
localStorage.setItem('remoteCssUrl', remoteCssUrl);
console.log('已更新 CSS 地址');
window.Next?.Message?.success?.('已更新 CSS 地址');
}
});
// 拖动逻辑
const wrapper = document.getElementById('css-fab-wrapper');
const fab = document.getElementById('css-fab');
let isDragging = false, offsetX = 0, offsetY = 0;
loadFabPosition();
fab.addEventListener('mousedown', e => {
isDragging = true;
offsetX = e.clientX - wrapper.offsetLeft;
offsetY = e.clientY - wrapper.offsetTop;
fab.style.cursor = 'grabbing';
});
document.addEventListener('mousemove', e => {
if (isDragging) {
const halfWidth = wrapper.offsetWidth / 2;
const halfHeight = wrapper.offsetHeight / 2;
const maxLeft = window.innerWidth - halfWidth;
const maxTop = window.innerHeight - halfHeight;
let newLeft = e.clientX - offsetX;
let newTop = e.clientY - offsetY;
newLeft = Math.max(-halfWidth, Math.min(newLeft, maxLeft));
newTop = Math.max(-halfHeight, Math.min(newTop, maxTop));
wrapper.style.left = `${newLeft}px`;
wrapper.style.top = `${newTop}px`;
saveFabPosition(newLeft, newTop); // 保存位置
}
});
document.addEventListener('mouseup', () => {
isDragging = false;
fab.style.cursor = 'grab';
});
})();