From 1b5445c3611daedc6b57824f80b98e48146c4ae2 Mon Sep 17 00:00:00 2001
From: QLHazyCoder <2825305047@qq.com>
Date: Tue, 28 Apr 2026 19:47:51 +0800
Subject: [PATCH] =?UTF-8?q?feat(ip-proxy):=20=E6=B7=BB=E5=8A=A0=20IP=20?=
 =?UTF-8?q?=E4=BB=A3=E7=90=86=E9=9D=A2=E6=9D=BF=E5=8F=8A=E7=9B=B8=E5=85=B3?=
 =?UTF-8?q?=E6=B5=8B=E8=AF=95=E7=94=A8=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sidepanel/ip-proxy-panel.js                   |   2 -
 sidepanel/sidepanel.css                       |  49 +--
 sidepanel/sidepanel.html                      | 296 ++++++++----------
 ...epanel-phone-verification-settings.test.js |  19 ++
 4 files changed, 166 insertions(+), 200 deletions(-)

diff --git a/sidepanel/ip-proxy-panel.js b/sidepanel/ip-proxy-panel.js
index fe6e115..6ae4002 100644
--- a/sidepanel/ip-proxy-panel.js
+++ b/sidepanel/ip-proxy-panel.js
@@ -1172,8 +1172,6 @@ function updateIpProxyUI(state = latestState) {
   const busyAction = normalizeIpProxyActionType(actionState.action);
   const runtimeState = state || latestState || {};
 
-  setIpProxyEnabledInlineStatus(runtimeState, enabled);
-
   if (rowIpProxyEnabled) {
     rowIpProxyEnabled.style.display = '';
   }
diff --git a/sidepanel/sidepanel.css b/sidepanel/sidepanel.css
index afb0681..404c144 100644
--- a/sidepanel/sidepanel.css
+++ b/sidepanel/sidepanel.css
@@ -785,6 +785,14 @@ header {
   display: block;
 }
 
+.ip-proxy-card {
+  margin-top: 10px;
+}
+
+.ip-proxy-header-actions {
+  flex: 0 0 auto;
+}
+
 .ip-proxy-fold {
   width: 100%;
   border: none;
@@ -858,11 +866,6 @@ header {
   }
 }
 
-.ip-proxy-enabled-inline {
-  justify-content: flex-end;
-  gap: 10px;
-}
-
 .ip-proxy-actions-inline {
   flex-wrap: wrap;
   align-items: center;
@@ -888,42 +891,6 @@ header {
   color: var(--text-secondary);
 }
 
-.ip-proxy-enabled-status {
-  margin-left: auto;
-  display: inline-flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 6px;
-  min-width: 92px;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-muted);
-  text-align: right;
-  white-space: nowrap;
-}
-
-.ip-proxy-enabled-status-dot {
-  width: 7px;
-  height: 7px;
-  border-radius: 999px;
-  background: var(--text-muted);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--text-muted) 25%, transparent);
-  flex-shrink: 0;
-}
-
-.ip-proxy-enabled-status.is-on {
-  color: var(--green);
-}
-
-.ip-proxy-enabled-status.is-on .ip-proxy-enabled-status-dot {
-  background: var(--green);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 30%, transparent);
-}
-
-.ip-proxy-enabled-status.is-off {
-  color: var(--text-muted);
-}
-
 .ip-proxy-runtime-status {
   display: inline-flex;
   align-items: flex-start;
diff --git a/sidepanel/sidepanel.html b/sidepanel/sidepanel.html
index 5cc38cb..b9a7cb3 100644
--- a/sidepanel/sidepanel.html
+++ b/sidepanel/sidepanel.html
@@ -200,163 +200,6 @@
         <span class="data-label">默认代理</span>
         <input type="text" id="input-sub2api-default-proxy" class="data-input" placeholder="留空则不使用代理；或填写代理名称 / ID" />
       </div>
-      <div class="data-row" id="row-ip-proxy-enabled">
-        <span class="data-label">IP代理</span>
-        <div class="data-inline ip-proxy-enabled-inline">
-          <label class="toggle-switch" for="input-ip-proxy-enabled" title="启用或禁用 IP 代理接管">
-            <input type="checkbox" id="input-ip-proxy-enabled" />
-            <span class="toggle-switch-track" aria-hidden="true">
-              <span class="toggle-switch-thumb"></span>
-            </span>
-          </label>
-          <span id="ip-proxy-enabled-status" class="ip-proxy-enabled-status" aria-live="polite">
-            <span id="ip-proxy-enabled-status-dot" class="ip-proxy-enabled-status-dot" aria-hidden="true"></span>
-            <span id="ip-proxy-enabled-status-text" class="ip-proxy-enabled-status-text">未开启</span>
-          </span>
-        </div>
-      </div>
-      <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" id="row-ip-proxy-service" style="display:none;">
-              <span class="data-label">代理服务</span>
-              <div class="data-inline">
-                <select id="select-ip-proxy-service" class="data-select" disabled>
-                  <option value="711proxy">711Proxy（首版）</option>
-                </select>
-                <button id="btn-ip-proxy-service-login" class="btn btn-outline btn-sm data-inline-btn" type="button">
-                  注册
-                </button>
-              </div>
-            </div>
-            <div class="data-row" id="row-ip-proxy-mode" style="display:none;">
-              <span class="data-label">代理模式</span>
-              <div id="ip-proxy-mode-group" class="choice-group" role="group" aria-label="IP代理模式">
-                <button type="button" class="choice-btn" data-ip-proxy-mode="account">账号密码</button>
-                <button type="button" class="choice-btn" data-ip-proxy-mode="api" disabled title="首版暂未开放">API 拉取（暂未开放）</button>
-              </div>
-            </div>
-            <div class="data-row ip-proxy-layout-row" id="row-ip-proxy-layout" style="display:none;">
-              <div class="ip-proxy-layout" id="ip-proxy-layout">
-                <div class="ip-proxy-column ip-proxy-column-account" id="ip-proxy-account-panel">
-                  <div class="ip-proxy-column-header">账号密码模式</div>
-                  <div class="data-row ip-proxy-column-row" id="row-ip-proxy-account-list" style="display:none;">
-                    <span class="data-label">账号代理列表</span>
-                    <textarea id="input-ip-proxy-account-list" class="data-textarea mono"
-                      placeholder="每行一条：host:port 或 host:port:username:password&#10;例如 global.rotgb.711proxy.com:10000:username:password"></textarea>
-                  </div>
-                  <div class="data-row ip-proxy-column-row" id="row-ip-proxy-account-session-prefix" style="display:none;">
-                    <span class="data-label">会话(session)</span>
-                    <input type="text" id="input-ip-proxy-account-session-prefix" class="data-input mono"
-                      placeholder="会话前缀，例如 ZC28qZ0KQL" />
-                  </div>
-                  <div class="data-row ip-proxy-column-row" id="row-ip-proxy-account-life-minutes" style="display:none;">
-                    <span class="data-label">时长(life)</span>
-                    <div class="data-inline">
-                      <input type="number" id="input-ip-proxy-account-life-minutes" class="data-input" min="1" max="1440" step="1"
-                        placeholder="5-180（分钟）" title="711Proxy 会话时长范围：5-180 分钟" />
-                      <span class="data-unit">分钟</span>
-                    </div>
-                  </div>
-                  <div class="data-row ip-proxy-column-row" id="row-ip-proxy-host" style="display:none;">
-                    <span class="data-label">代理 Host</span>
-                    <input type="text" id="input-ip-proxy-host" class="data-input" placeholder="例如 global.rotgb.711proxy.com" />
-                  </div>
-                  <div class="data-row ip-proxy-column-row" id="row-ip-proxy-port" style="display:none;">
-                    <span class="data-label">代理 Port</span>
-                    <input type="number" id="input-ip-proxy-port" class="data-input" min="1" max="65535" step="1"
-                      placeholder="例如 10000" />
-                  </div>
-                  <div class="data-row ip-proxy-column-row" id="row-ip-proxy-protocol" style="display:none;">
-                    <span class="data-label">代理协议</span>
-                    <select id="select-ip-proxy-protocol" class="data-select">
-                      <option value="http">HTTP</option>
-                      <option value="https">HTTPS</option>
-                      <option value="socks5">SOCKS5</option>
-                      <option value="socks4">SOCKS4</option>
-                    </select>
-                  </div>
-                  <div class="data-row ip-proxy-column-row" id="row-ip-proxy-username" style="display:none;">
-                    <span class="data-label">代理账号</span>
-                    <div class="input-with-icon">
-                      <input type="password" id="input-ip-proxy-username" class="data-input data-input-with-icon"
-                        placeholder="例如 USER047152-zone-custom-region-US-asn-ASN81" />
-                      <button id="btn-toggle-ip-proxy-username" class="input-icon-btn" type="button" aria-label="显示代理账号"
-                        title="显示代理账号"></button>
-                    </div>
-                  </div>
-                  <div class="data-row ip-proxy-column-row" id="row-ip-proxy-password" style="display:none;">
-                    <span class="data-label">代理密码</span>
-                    <div class="input-with-icon">
-                      <input type="password" id="input-ip-proxy-password" class="data-input data-input-with-icon"
-                        placeholder="账号密码代理的密码" />
-                      <button id="btn-toggle-ip-proxy-password" class="input-icon-btn" type="button" aria-label="显示代理密码"
-                        title="显示代理密码"></button>
-                    </div>
-                  </div>
-                  <div class="data-row ip-proxy-column-row" id="row-ip-proxy-region" style="display:none;">
-                    <span class="data-label">地区参数</span>
-                    <input type="text" id="input-ip-proxy-region" class="data-input" placeholder="可选，例如 US / DE / HK" />
-                  </div>
-                  <div class="data-row ip-proxy-column-row" id="row-ip-proxy-pool-target-count" style="display:none;">
-                    <span class="data-label">任务切换阈值</span>
-                    <div class="data-inline">
-                      <input type="number" id="input-ip-proxy-pool-target-count" class="data-input" min="1" max="500" step="1"
-                        placeholder="20（成功轮次）" title="每成功多少轮任务后自动切换一次代理；仅 1 条节点时会跳过自动切换" />
-                      <span class="data-unit">轮</span>
-                    </div>
-                  </div>
-                </div>
-                <div class="ip-proxy-column ip-proxy-column-api" id="ip-proxy-api-panel">
-                  <div class="ip-proxy-column-header">API 模式</div>
-                  <div class="data-row ip-proxy-column-row" id="row-ip-proxy-api-url" style="display:none;">
-                    <span class="data-label">代理API</span>
-                    <div class="input-with-icon">
-                      <input type="password" id="input-ip-proxy-api-url" class="data-input data-input-with-icon"
-                        placeholder="粘贴完整 API 链接" />
-                      <button id="btn-toggle-ip-proxy-api-url" class="input-icon-btn" type="button" aria-label="显示代理 API"
-                        title="显示代理 API"></button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="data-row" id="row-ip-proxy-actions" style="display:none;">
-              <span class="data-label">切换代理</span>
-              <div class="data-inline ip-proxy-actions-inline">
-                <span id="ip-proxy-action-buttons" class="ip-proxy-action-grid">
-                  <button id="btn-ip-proxy-refresh" class="btn btn-outline btn-sm data-inline-btn" type="button">拉取</button>
-                  <button id="btn-ip-proxy-next" class="btn btn-outline btn-sm data-inline-btn" type="button">下一条</button>
-                  <button id="btn-ip-proxy-change" class="btn btn-outline btn-sm data-inline-btn" type="button" title="保持当前会话并刷新出口（仅 711 + session）">Change</button>
-                  <button id="btn-ip-proxy-probe" class="btn btn-outline btn-sm data-inline-btn" type="button">检测出口</button>
-                </span>
-                <span id="ip-proxy-action-hint" class="ip-proxy-action-hint">
-                  下一条：切到代理池下一条。Change：保持当前 session 重绑链路（仅 711 + session）。
-                </span>
-              </div>
-            </div>
-            <div class="data-row" id="row-ip-proxy-runtime-status" style="display:none;">
-              <span class="data-label">代理状态</span>
-              <div id="ip-proxy-runtime-status" class="ip-proxy-runtime-status" aria-live="polite">
-                <span id="ip-proxy-runtime-dot" class="ip-proxy-runtime-dot" aria-hidden="true"></span>
-                <div class="ip-proxy-runtime-content">
-                  <div class="ip-proxy-runtime-main">
-                    <span id="ip-proxy-runtime-text" class="data-value data-value-fill">未启用，沿用浏览器默认/全局代理。</span>
-                  </div>
-                  <div class="ip-proxy-runtime-meta">
-                    <span id="ip-proxy-current" class="ip-proxy-runtime-current mono truncate">未启用</span>
-                    <button id="btn-ip-proxy-check-ip" class="btn btn-outline btn-xs data-inline-btn ip-proxy-check-ip-btn" type="button">检查IP</button>
-                  </div>
-                  <details id="ip-proxy-runtime-details" class="ip-proxy-runtime-details" hidden>
-                    <summary>查看详细信息</summary>
-                    <div id="ip-proxy-runtime-details-text" class="ip-proxy-runtime-details-text"></div>
-                  </details>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
       <div class="data-row" id="row-codex2api-url" style="display:none;">
         <span class="data-label">Codex2API</span>
         <input type="text" id="input-codex2api-url" class="data-input"
@@ -604,6 +447,145 @@
         </div>
       </div>
     </div>
+    <div id="ip-proxy-section" class="data-card ip-proxy-card">
+      <div class="section-mini-header">
+        <div class="section-mini-copy">
+          <span class="section-label">IP 代理</span>
+          <span class="data-value">用于浏览器代理接管与出口切换</span>
+        </div>
+        <div id="row-ip-proxy-enabled" class="section-mini-actions ip-proxy-header-actions">
+          <label class="toggle-switch" for="input-ip-proxy-enabled" title="启用或禁用 IP 代理接管">
+            <input type="checkbox" id="input-ip-proxy-enabled" />
+            <span class="toggle-switch-track" aria-hidden="true">
+              <span class="toggle-switch-thumb"></span>
+            </span>
+          </label>
+        </div>
+      </div>
+      <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" id="row-ip-proxy-service" style="display:none;">
+              <span class="data-label">代理服务</span>
+              <div class="data-inline">
+                <select id="select-ip-proxy-service" class="data-select" disabled>
+                  <option value="711proxy">711Proxy（首版）</option>
+                </select>
+                <button id="btn-ip-proxy-service-login" class="btn btn-outline btn-sm data-inline-btn" type="button">
+                  注册
+                </button>
+              </div>
+            </div>
+            <div class="data-row" id="row-ip-proxy-mode" style="display:none;">
+              <span class="data-label">代理模式</span>
+              <div id="ip-proxy-mode-group" class="choice-group" role="group" aria-label="IP代理模式">
+                <button type="button" class="choice-btn" data-ip-proxy-mode="account">账号密码</button>
+                <button type="button" class="choice-btn" data-ip-proxy-mode="api" disabled title="首版暂未开放">API 拉取（暂未开放）</button>
+              </div>
+            </div>
+            <div class="data-row ip-proxy-layout-row" id="row-ip-proxy-layout" style="display:none;">
+              <div class="ip-proxy-layout" id="ip-proxy-layout">
+                <div class="ip-proxy-column ip-proxy-column-account" id="ip-proxy-account-panel">
+                  <div class="ip-proxy-column-header">账号密码模式</div>
+                  <div class="data-row ip-proxy-column-row" id="row-ip-proxy-account-list" style="display:none;">
+                    <span class="data-label">账号代理列表</span>
+                    <textarea id="input-ip-proxy-account-list" class="data-textarea mono"
+                      placeholder="每行一条：host:port 或 host:port:username:password&#10;例如 global.rotgb.711proxy.com:10000:username:password"></textarea>
+                  </div>
+                  <div class="data-row ip-proxy-column-row" id="row-ip-proxy-account-session-prefix" style="display:none;">
+                    <span class="data-label">会话(session)</span>
+                    <input type="text" id="input-ip-proxy-account-session-prefix" class="data-input mono"
+                      placeholder="会话前缀，例如 ZC28qZ0KQL" />
+                  </div>
+                  <div class="data-row ip-proxy-column-row" id="row-ip-proxy-account-life-minutes" style="display:none;">
+                    <span class="data-label">时长(life)</span>
+                    <div class="data-inline">
+                      <input type="number" id="input-ip-proxy-account-life-minutes" class="data-input" min="1" max="1440" step="1"
+                        placeholder="5-180（分钟）" title="711Proxy 会话时长范围：5-180 分钟" />
+                      <span class="data-unit">分钟</span>
+                    </div>
+                  </div>
+                  <div class="data-row ip-proxy-column-row" id="row-ip-proxy-host" style="display:none;">
+                    <span class="data-label">代理 Host</span>
+                    <input type="text" id="input-ip-proxy-host" class="data-input" placeholder="例如 global.rotgb.711proxy.com" />
+                  </div>
+                  <div class="data-row ip-proxy-column-row" id="row-ip-proxy-port" style="display:none;">
+                    <span class="data-label">代理 Port</span>
+                    <input type="number" id="input-ip-proxy-port" class="data-input" min="1" max="65535" step="1"
+                      placeholder="例如 10000" />
+                  </div>
+                  <div class="data-row ip-proxy-column-row" id="row-ip-proxy-protocol" style="display:none;">
+                    <span class="data-label">代理协议</span>
+                    <select id="select-ip-proxy-protocol" class="data-select">
+                      <option value="http">HTTP</option>
+                      <option value="https">HTTPS</option>
+                      <option value="socks5">SOCKS5</option>
+                      <option value="socks4">SOCKS4</option>
+                    </select>
+                  </div>
+                  <div class="data-row ip-proxy-column-row" id="row-ip-proxy-username" style="display:none;">
+                    <span class="data-label">代理账号</span>
+                    <div class="input-with-icon">
+                      <input type="password" id="input-ip-proxy-username" class="data-input data-input-with-icon"
+                        placeholder="例如 USER047152-zone-custom-region-US-asn-ASN81" />
+                      <button id="btn-toggle-ip-proxy-username" class="input-icon-btn" type="button" aria-label="显示代理账号"
+                        title="显示代理账号"></button>
+                    </div>
+                  </div>
+                  <div class="data-row ip-proxy-column-row" id="row-ip-proxy-password" style="display:none;">
+                    <span class="data-label">代理密码</span>
+                    <div class="input-with-icon">
+                      <input type="password" id="input-ip-proxy-password" class="data-input data-input-with-icon"
+                        placeholder="账号密码代理的密码" />
+                      <button id="btn-toggle-ip-proxy-password" class="input-icon-btn" type="button" aria-label="显示代理密码"
+                        title="显示代理密码"></button>
+                    </div>
+                  </div>
+                  <div class="data-row ip-proxy-column-row" id="row-ip-proxy-region" style="display:none;">
+                    <span class="data-label">地区参数</span>
+                    <input type="text" id="input-ip-proxy-region" class="data-input" placeholder="可选，例如 US / DE / HK" />
+                  </div>
+                  <div class="data-row ip-proxy-column-row" id="row-ip-proxy-pool-target-count" style="display:none;">
+                    <span class="data-label">任务切换阈值</span>
+                    <div class="data-inline">
+                      <input type="number" id="input-ip-proxy-pool-target-count" class="data-input" min="1" max="500" step="1"
+                        placeholder="20（成功轮次）" title="每成功多少轮任务后自动切换一次代理；仅 1 条节点时会跳过自动切换" />
+                      <span class="data-unit">轮</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="ip-proxy-column ip-proxy-column-api" id="ip-proxy-api-panel">
+                  <div class="ip-proxy-column-header">API 模式</div>
+                  <div class="data-row ip-proxy-column-row" id="row-ip-proxy-api-url" style="display:none;">
+                    <span class="data-label">代理API</span>
+                    <div class="input-with-icon">
+                      <input type="password" id="input-ip-proxy-api-url" class="data-input data-input-with-icon"
+                        placeholder="粘贴完整 API 链接" />
+                      <button id="btn-toggle-ip-proxy-api-url" class="input-icon-btn" type="button" aria-label="显示代理 API"
+                        title="显示代理 API"></button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="data-row" id="row-ip-proxy-actions" style="display:none;">
+              <span class="data-label">切换代理</span>
+              <div class="data-inline ip-proxy-actions-inline">
+                <span id="ip-proxy-action-buttons" class="ip-proxy-action-grid">
+                  <button id="btn-ip-proxy-refresh" class="btn btn-outline btn-sm data-inline-btn" type="button">拉取</button>
+                  <button id="btn-ip-proxy-next" class="btn btn-outline btn-sm data-inline-btn" type="button">下一条</button>
+                  <button id="btn-ip-proxy-change" class="btn btn-outline btn-sm data-inline-btn" type="button" title="保持当前会话并刷新出口（仅 711 + session）">Change</button>
+                  <button id="btn-ip-proxy-probe" class="btn btn-outline btn-sm data-inline-btn" type="button">检测出口</button>
+                </span>
+                <span id="ip-proxy-action-hint" class="ip-proxy-action-hint">
+                  下一条：切到代理池下一条。Change：保持当前 session 重绑链路（仅 711 + session）。
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
     <div id="cloudflare-temp-email-section" class="data-card hotmail-card" style="display:none;">
       <div class="section-mini-header">
         <div class="section-mini-copy">
diff --git a/tests/sidepanel-phone-verification-settings.test.js b/tests/sidepanel-phone-verification-settings.test.js
index bc75814..24c9a46 100644
--- a/tests/sidepanel-phone-verification-settings.test.js
+++ b/tests/sidepanel-phone-verification-settings.test.js
@@ -57,12 +57,31 @@ test('sidepanel html exposes phone verification toggle and dedicated HeroSMS row
 
   assert.match(html, /id="row-phone-verification-enabled"/);
   assert.match(html, /id="input-phone-verification-enabled"/);
+  assert.match(html, /id="ip-proxy-section"/);
+  assert.match(html, /id="row-ip-proxy-enabled"/);
+  assert.match(html, /id="input-ip-proxy-enabled"/);
   assert.match(html, /id="row-hero-sms-platform"/);
   assert.match(html, /id="row-hero-sms-country"/);
   assert.match(html, /id="row-hero-sms-api-key"/);
   assert.doesNotMatch(html, /id="input-account-run-history-text-enabled"/);
 });
 
+test('sidepanel renders IP proxy as a standalone card after sms verification without proxy status chrome', () => {
+  const html = fs.readFileSync('sidepanel/sidepanel.html', 'utf8');
+  const phoneToggleIndex = html.indexOf('id="row-phone-verification-enabled"');
+  const ipProxySectionIndex = html.indexOf('id="ip-proxy-section"');
+  const ipProxyToggleIndex = html.indexOf('id="row-ip-proxy-enabled"');
+  const cloudflareSectionIndex = html.indexOf('id="cloudflare-temp-email-section"');
+
+  assert.match(html, /id="ip-proxy-section" class="data-card ip-proxy-card"/);
+  assert.ok(phoneToggleIndex >= 0);
+  assert.ok(ipProxySectionIndex > phoneToggleIndex);
+  assert.ok(ipProxyToggleIndex > phoneToggleIndex);
+  assert.ok(cloudflareSectionIndex > ipProxySectionIndex);
+  assert.doesNotMatch(html, /id="ip-proxy-enabled-status"/);
+  assert.doesNotMatch(html, /id="row-ip-proxy-runtime-status"/);
+});
+
 test('updatePhoneVerificationSettingsUI toggles HeroSMS rows from the sms switch', () => {
   const api = new Function(`
 const inputPhoneVerificationEnabled = { checked: false };