mirror of
https://github.com/Youzini-afk/ST-Bionic-Memory-Ecology.git
synced 2026-05-15 22:30:38 +08:00
fix: stabilize mobile panel viewport overlay
This commit is contained in:
79
panel.js
79
panel.js
@@ -140,6 +140,7 @@ let currentTaskProfileRuleId = "";
|
||||
let fetchedMemoryLLMModels = [];
|
||||
let fetchedBackendEmbeddingModels = [];
|
||||
let fetchedDirectEmbeddingModels = [];
|
||||
let viewportSyncBound = false;
|
||||
|
||||
// 由 index.js 注入的引用
|
||||
let _getGraph = null;
|
||||
@@ -165,6 +166,71 @@ async function loadLocalTemplate(templateName) {
|
||||
return html;
|
||||
}
|
||||
|
||||
function mountPanelHtml(html) {
|
||||
const markup = String(html || "").trim();
|
||||
if (!markup) {
|
||||
throw new Error("Panel template markup is empty");
|
||||
}
|
||||
|
||||
if (document.body?.insertAdjacentHTML) {
|
||||
document.body.insertAdjacentHTML("beforebegin", markup);
|
||||
return;
|
||||
}
|
||||
|
||||
const template = document.createElement("template");
|
||||
template.innerHTML = markup;
|
||||
const fragment = template.content.cloneNode(true);
|
||||
document.documentElement?.appendChild(fragment);
|
||||
}
|
||||
|
||||
function ensureOverlayMountedAtRoot() {
|
||||
if (!overlayEl) return;
|
||||
|
||||
const root = document.documentElement;
|
||||
const body = document.body;
|
||||
if (!root) return;
|
||||
|
||||
if (overlayEl.parentElement === root && overlayEl.nextElementSibling === body) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (body?.parentElement === root) {
|
||||
root.insertBefore(overlayEl, body);
|
||||
return;
|
||||
}
|
||||
|
||||
root.appendChild(overlayEl);
|
||||
}
|
||||
|
||||
function syncViewportCssVars() {
|
||||
const rootStyle = document.documentElement?.style;
|
||||
if (!rootStyle) return;
|
||||
|
||||
const viewport = window.visualViewport;
|
||||
const width = Math.max(
|
||||
1,
|
||||
Math.round(viewport?.width || window.innerWidth || 0),
|
||||
);
|
||||
const height = Math.max(
|
||||
1,
|
||||
Math.round(viewport?.height || window.innerHeight || 0),
|
||||
);
|
||||
|
||||
rootStyle.setProperty("--bme-viewport-width", `${width}px`);
|
||||
rootStyle.setProperty("--bme-viewport-height", `${height}px`);
|
||||
}
|
||||
|
||||
function bindViewportSync() {
|
||||
if (viewportSyncBound) return;
|
||||
viewportSyncBound = true;
|
||||
|
||||
const update = () => syncViewportCssVars();
|
||||
window.addEventListener("resize", update);
|
||||
window.addEventListener("orientationchange", update);
|
||||
window.visualViewport?.addEventListener("resize", update);
|
||||
window.visualViewport?.addEventListener("scroll", update);
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化面板(由 index.js 调用一次)
|
||||
*/
|
||||
@@ -200,7 +266,7 @@ export async function initPanel({
|
||||
|
||||
if (!overlayEl || !panelEl) {
|
||||
const html = await loadLocalTemplate("panel");
|
||||
$("body").append(html);
|
||||
mountPanelHtml(html);
|
||||
overlayEl = document.getElementById("st-bme-panel-overlay");
|
||||
panelEl = document.getElementById("st-bme-panel");
|
||||
if (!overlayEl || !panelEl) {
|
||||
@@ -210,6 +276,10 @@ export async function initPanel({
|
||||
}
|
||||
}
|
||||
|
||||
ensureOverlayMountedAtRoot();
|
||||
bindViewportSync();
|
||||
syncViewportCssVars();
|
||||
|
||||
_bindTabs();
|
||||
_bindClose();
|
||||
_bindResizeHandle();
|
||||
@@ -410,6 +480,8 @@ export function updateFloatingBallStatus(status = "idle", tooltipText = "") {
|
||||
*/
|
||||
export function openPanel() {
|
||||
if (!overlayEl) return;
|
||||
ensureOverlayMountedAtRoot();
|
||||
syncViewportCssVars();
|
||||
overlayEl.classList.add("active");
|
||||
|
||||
_restorePanelSize();
|
||||
@@ -973,6 +1045,11 @@ function _bindPanelResize() {
|
||||
|
||||
function _restorePanelSize() {
|
||||
if (!panelEl) return;
|
||||
if (_isMobile()) {
|
||||
panelEl.style.width = "";
|
||||
panelEl.style.height = "";
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const raw = localStorage.getItem(PANEL_SIZE_KEY);
|
||||
if (!raw) return;
|
||||
|
||||
14
style.css
14
style.css
@@ -4,6 +4,8 @@
|
||||
#st-bme-panel-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: var(--bme-viewport-width, 100vw);
|
||||
height: var(--bme-viewport-height, 100vh);
|
||||
z-index: 9999;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(8px);
|
||||
@@ -2086,21 +2088,13 @@
|
||||
/* ==================== 响应式 ==================== */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#st-bme-panel-overlay {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#st-bme-panel {
|
||||
flex: 1 1 0;
|
||||
width: 100vw;
|
||||
height: auto;
|
||||
width: var(--bme-viewport-width, 100vw);
|
||||
height: var(--bme-viewport-height, 100vh);
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
border-radius: 0;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
resize: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bme-panel-body {
|
||||
|
||||
Reference in New Issue
Block a user