From 31a68e5a6b554f3400ac96cdc31a2953bed65c0d Mon Sep 17 00:00:00 2001 From: QLHazyCoder Date: Mon, 4 May 2026 15:12:35 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0IP=E4=BB=A3=E7=90=86?= =?UTF-8?q?=E4=BF=83=E9=94=80=E4=BF=A1=E6=81=AF=E5=B1=95=E7=A4=BA=E5=8F=8A?= =?UTF-8?q?=E6=BA=A2=E5=87=BA=E5=A4=84=E7=90=86=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sidepanel/ip-proxy-panel.js | 33 ++++++++++++++++++ sidepanel/sidepanel.css | 68 +++++++++++++++++++++++++++++++++++++ sidepanel/sidepanel.html | 11 ++++++ sidepanel/sidepanel.js | 3 ++ 4 files changed, 115 insertions(+) diff --git a/sidepanel/ip-proxy-panel.js b/sidepanel/ip-proxy-panel.js index c18a4c8..5df2498 100644 --- a/sidepanel/ip-proxy-panel.js +++ b/sidepanel/ip-proxy-panel.js @@ -1252,6 +1252,35 @@ function setIpProxyEnabledInlineStatus(state = {}, enabled = getSelectedIpProxyE } } +function updateIpProxyPromoOverflow() { + if ( + typeof ipProxyPromo === 'undefined' + || typeof ipProxyPromoText === 'undefined' + || !ipProxyPromo + || !ipProxyPromoText + ) { + return; + } + if (!ipProxyPromo.getClientRects().length) { + ipProxyPromo.classList.remove('is-overflowing'); + return; + } + const overflowing = ipProxyPromoText.scrollWidth > Math.max(0, ipProxyPromo.clientWidth - 2); + ipProxyPromo.classList.toggle('is-overflowing', overflowing); +} + +function scheduleIpProxyPromoOverflowCheck() { + if (typeof globalThis.requestAnimationFrame === 'function') { + globalThis.requestAnimationFrame(updateIpProxyPromoOverflow); + return; + } + globalThis.setTimeout(updateIpProxyPromoOverflow, 0); +} + +if (typeof globalThis.addEventListener === 'function') { + globalThis.addEventListener('resize', scheduleIpProxyPromoOverflowCheck); +} + function updateIpProxyUI(state = latestState) { const enabled = getSelectedIpProxyEnabled(); const showSettings = enabled && ipProxySectionExpanded; @@ -1283,6 +1312,9 @@ function updateIpProxyUI(state = latestState) { if (rowIpProxyFold) { rowIpProxyFold.style.display = showSettings ? '' : 'none'; } + if (rowIpProxyPromo) { + rowIpProxyPromo.style.display = showSettings ? '' : 'none'; + } if (rowIpProxyService) { rowIpProxyService.style.display = showSettings ? '' : 'none'; } @@ -1345,6 +1377,7 @@ function updateIpProxyUI(state = latestState) { if (ipProxyLayout) { ipProxyLayout.classList.toggle('is-account-only', !apiModeAvailable); } + scheduleIpProxyPromoOverflowCheck(); if (selectIpProxyService) { selectIpProxyService.value = service; selectIpProxyService.disabled = true; diff --git a/sidepanel/sidepanel.css b/sidepanel/sidepanel.css index 38943ff..f3cf62f 100644 --- a/sidepanel/sidepanel.css +++ b/sidepanel/sidepanel.css @@ -841,6 +841,74 @@ header { padding-top: 0; } +.ip-proxy-promo-row { + min-height: 26px; +} + +.ip-proxy-promo { + position: relative; + flex: 1; + min-width: 0; + height: 26px; + padding: 0 9px; + display: flex; + align-items: center; + overflow: hidden; + border: 1px solid color-mix(in srgb, var(--amber) 22%, var(--border)); + border-radius: var(--radius-sm); + background: color-mix(in srgb, var(--amber-soft) 44%, var(--bg-base)); + color: color-mix(in srgb, var(--amber) 82%, var(--text-secondary)); +} + +.ip-proxy-promo-track { + min-width: 100%; + display: inline-flex; + align-items: center; + white-space: nowrap; + font-size: 12px; + font-weight: 650; + line-height: 1; + letter-spacing: 0; +} + +.ip-proxy-promo-item { + display: inline-block; + padding-right: 32px; +} + +.ip-proxy-promo-copy { + display: none; +} + +.ip-proxy-promo.is-overflowing .ip-proxy-promo-track { + min-width: auto; + animation: ip-proxy-promo-marquee 18s linear infinite; + will-change: transform; +} + +.ip-proxy-promo.is-overflowing .ip-proxy-promo-copy { + display: inline-block; +} + +.ip-proxy-promo:hover .ip-proxy-promo-track { + animation-play-state: paused; +} + +@keyframes ip-proxy-promo-marquee { + from { transform: translateX(0); } + to { transform: translateX(-50%); } +} + +@media (prefers-reduced-motion: reduce) { + .ip-proxy-promo.is-overflowing .ip-proxy-promo-track { + animation: none; + } + + .ip-proxy-promo.is-overflowing .ip-proxy-promo-copy { + display: none; + } +} + .phone-verification-card { margin-top: 10px; } diff --git a/sidepanel/sidepanel.html b/sidepanel/sidepanel.html index 816e192..ae45e57 100644 --- a/sidepanel/sidepanel.html +++ b/sidepanel/sidepanel.html @@ -913,6 +913,17 @@