feat: 添加IP代理促销信息展示及溢出处理逻辑

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;

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;
 }

sidepanel/sidepanel.html

@@ -913,6 +913,17 @@
       <div class="data-row ip-proxy-fold-row" id="row-ip-proxy-fold" style="display:none;">
         <div id="ip-proxy-fold" class="ip-proxy-fold">
           <div class="ip-proxy-fold-body">
+            <div class="data-row ip-proxy-promo-row" id="row-ip-proxy-promo" style="display:none;">
+              <span class="data-label">渠道</span>
+              <div id="ip-proxy-promo" class="ip-proxy-promo"
+                title="711proxy动态等各大平台源头供应商，低价直冲6元1G，量大谈价.QQ:32597005">
+                <div id="ip-proxy-promo-track" class="ip-proxy-promo-track"
+                  aria-label="711proxy动态等各大平台源头供应商，低价直冲6元1G，量大谈价.QQ:32597005">
+                  <span id="ip-proxy-promo-text" class="ip-proxy-promo-item">711proxy动态等各大平台源头供应商，低价直冲6元1G，量大谈价.QQ:32597005</span>
+                  <span class="ip-proxy-promo-item ip-proxy-promo-copy" aria-hidden="true">711proxy动态等各大平台源头供应商，低价直冲6元1G，量大谈价.QQ:32597005</span>
+                </div>
+              </div>
+            </div>
             <div class="data-row" id="row-ip-proxy-service" style="display:none;">
               <span class="data-label">代理服务</span>
               <div class="data-inline">

sidepanel/sidepanel.js

@@ -104,6 +104,9 @@ const ipProxyEnabledStatusDot = document.getElementById('ip-proxy-enabled-status
 const ipProxyEnabledStatusText = document.getElementById('ip-proxy-enabled-status-text');
 const ipProxyEnabledButtons = Array.from(document.querySelectorAll('[data-ip-proxy-enabled]'));
 const rowIpProxyFold = document.getElementById('row-ip-proxy-fold');
+const rowIpProxyPromo = document.getElementById('row-ip-proxy-promo');
+const ipProxyPromo = document.getElementById('ip-proxy-promo');
+const ipProxyPromoText = document.getElementById('ip-proxy-promo-text');
 const rowIpProxyService = document.getElementById('row-ip-proxy-service');
 const selectIpProxyService = document.getElementById('select-ip-proxy-service');
 const btnIpProxyServiceLogin = document.getElementById('btn-ip-proxy-service-login');