diff --git a/pages/popup.js b/pages/popup.js index 4b980ea..401acab 100644 --- a/pages/popup.js +++ b/pages/popup.js @@ -1,4 +1,59 @@ document.addEventListener("DOMContentLoaded", async () => { + // 标签页/弹窗自适应:宽大则自动全屏自适应 + if (window.innerWidth > 900 && window.innerHeight > 700) { + document.body.classList.add('fullscreen'); + // 禁用拖拽 + const panel = document.getElementById('draggablePanel'); + if (panel) { + panel.style.left = ''; + panel.style.top = ''; + panel.style.position = 'fixed'; + } + } else { + // 弹窗环境支持拖拽 + const panel = document.getElementById('draggablePanel'); + const header = document.querySelector('.header'); + let dragging = false, offsetX = 0, offsetY = 0; + if (panel && header) { + header.addEventListener('mousedown', function(e) { + dragging = true; + offsetX = e.clientX - panel.offsetLeft; + offsetY = e.clientY - panel.offsetTop; + document.body.style.userSelect = 'none'; + }); + + document.addEventListener('mousemove', function(e) { + if (dragging) { + let left = Math.max(0, e.clientX - offsetX); + let top = Math.max(0, e.clientY - offsetY); + panel.style.left = left + 'px'; + panel.style.top = top + 'px'; + } + }); + + document.addEventListener('mouseup', function() { + dragging = false; + document.body.style.userSelect = ''; + }); + } + } + + // 标签页打开按钮 + const openTabBtn = document.getElementById('openTabBtn'); + if (openTabBtn) { + openTabBtn.onclick = function () { + if (window.chrome && chrome.runtime && chrome.runtime.id && chrome.tabs && chrome.runtime.getURL) { + try { + chrome.tabs.create({ url: chrome.runtime.getURL("pages/popup.html") }); + } catch (e) { + window.open("popup.html", "_blank"); + } + } else { + window.open("popup.html", "_blank"); + } + }; + } + const input = document.getElementById("searchInput"); const searchBtn = document.getElementById("searchBtn"); const clearHistoryBtn = document.getElementById("clearHistoryBtn"); diff --git a/pages/styles.css b/pages/styles.css index 0e5307f..b179571 100644 --- a/pages/styles.css +++ b/pages/styles.css @@ -5,6 +5,23 @@ body { background-color: #fefefe; } +/* 新增:标签页下自动全屏自适应,内容居中不可拖拽 */ +body.fullscreen .draggable-panel { + position: fixed !important; + left: 50% !important; + top: 50% !important; + transform: translate(-50%, -50%) !important; + width: 90vw !important; + max-width: 1200px !important; + height: 94vh !important; + max-height: 98vh !important; + min-width: 360px !important; + min-height: 320px !important; + box-shadow: 0 10px 40px #3070ed22; + resize: none !important; +} + + .header { display: flex; align-items: center;