feat(proxy): 设置行模式 pill 反映当前分流模式(两端,随模式+语言联动)

设置页「Routing rules」行的模式 pill 之前静态显「智能分流/Smart routing」,不随实际
所选模式变。改为动态:
- pill 加 id=routeModePill,renderRouting 按 state.routeMode 设其 data-i18n(rr.modeGlobal/
  Smart/Direct)+ textContent(经 _ri 从 I18N 单源取)。切模式(seg 点击→renderRouting)即时更新。
- data-i18n 保留:切语言时 applyLang/applyI18n 用 pill 当前模式 key 重译 → 模式+语言双联动。
- pill 文案与 seg 一致(全局代理·Global / 智能分流·Smart / 全部直连·Direct)。

验收:两端语法通过、check-proto 全 resolve(rr.mode* 三态)、原型 --check 无漂移。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01A79VtQA1BwTuQN1ThpvYpo
This commit is contained in:
wangjia
2026-07-27 11:37:12 +08:00
parent 64b1ec10c2
commit fae73ff656
2 changed files with 6 additions and 2 deletions
+3 -1
View File
@@ -687,7 +687,7 @@
</div>
<div class="setting-row is-tap" id="routingRow">
<div class="st-body"><div class="st-title" data-i18n="set.routing">分流规则</div><div class="st-sub" data-i18n="set.routingSub">自定义直连 / 走隧道 / 拒绝</div></div>
<span class="st-trail" style="display:flex;align-items:center;gap:var(--space-2)"><span class="pill is-neutral" data-i18n="set.routeModeSmart">智能分流</span><svg style="width:16px;height:16px;color:var(--fg3)"><use href="#i-chevron-right"/></svg></span>
<span class="st-trail" style="display:flex;align-items:center;gap:var(--space-2)"><span class="pill is-neutral" id="routeModePill" data-i18n="rr.modeSmart">智能分流</span><svg style="width:16px;height:16px;color:var(--fg3)"><use href="#i-chevron-right"/></svg></span>
</div>
<div class="setting-row">
<div class="st-body"><div class="st-title" data-i18n="set.kill">断连保护 Kill Switch</div><div class="st-sub" data-i18n="set.killSub">断线时阻断网络,防止数据泄露</div></div>
@@ -2058,6 +2058,8 @@ var _rtBack=document.getElementById('rtBack'); if(_rtBack) _rtBack.addEventListe
window.renderRouting=function(){
var mode=S.routeMode||'smart', smart=mode==='smart';
document.querySelectorAll('#rtModeSeg button').forEach(function(b){ b.classList.toggle('is-active', b.dataset.mode===mode); });
var mp=document.getElementById('routeModePill');
if(mp){ var mk=mode==='global'?'rr.modeGlobal':mode==='direct'?'rr.modeDirect':'rr.modeSmart'; mp.setAttribute('data-i18n',mk); mp.textContent=_ri(mk); }
['rtCnRow','rtMyRules'].forEach(function(id){ var el=document.getElementById(id); if(!el) return; el.style.opacity=smart?'':'.4'; el.style.pointerEvents=smart?'':'none'; });
var fp=document.getElementById('rtFinalPill');
if(fp){ if(mode==='direct'){ fp.textContent=_ri('rr.actDirect'); fp.className='pill is-success'; } else { fp.textContent=_ri('rr.actProxy'); fp.className='pill is-warning'; } }
+3 -1
View File
@@ -869,7 +869,7 @@
<div class="setting-row is-tap" id="rowRouting">
<span class="icon-box"><svg><use href="#i-compass"/></svg></span>
<div class="st-body"><div class="st-title" data-i18n="navRouting">分流规则</div></div>
<div class="st-trail" style="display:flex;align-items:center;gap:var(--space-2)"><span class="pill is-neutral" data-i18n="setSmartRoute">智能分流</span><svg style="width:18px;height:18px;color:var(--fg3)"><use href="#i-chevron-right"/></svg></div>
<div class="st-trail" style="display:flex;align-items:center;gap:var(--space-2)"><span class="pill is-neutral" id="routeModePill" data-i18n="rr.modeSmart">智能分流</span><svg style="width:18px;height:18px;color:var(--fg3)"><use href="#i-chevron-right"/></svg></div>
</div>
<div class="setting-row">
<span class="icon-box"><svg><use href="#i-shield"/></svg></span>
@@ -2497,6 +2497,8 @@ $('#rowRouting').addEventListener('click', ()=>{ subOpen('routing'); renderRouti
window.renderRouting=function(){
const mode=state.routeMode||'smart', smart=mode==='smart';
document.querySelectorAll('#rtModeSeg button').forEach(b=>b.classList.toggle('is-active', b.dataset.mode===mode));
const mp=document.getElementById('routeModePill');
if(mp){ const mk=mode==='global'?'rr.modeGlobal':mode==='direct'?'rr.modeDirect':'rr.modeSmart'; mp.setAttribute('data-i18n',mk); mp.textContent=_ri(mk); }
['rtCnRow','rtMyRules'].forEach(id=>{ const el=document.getElementById(id); if(!el) return; el.style.opacity=smart?'':'.4'; el.style.pointerEvents=smart?'':'none'; });
const fp=document.getElementById('rtFinalPill');
if(fp){ if(mode==='direct'){ fp.textContent=_ri('rr.actDirect'); fp.className='pill is-success'; } else { fp.textContent=_ri('rr.actProxy'); fp.className='pill is-warning'; } }