diff --git a/design/prototype/screens/ui-desktop.html b/design/prototype/screens/ui-desktop.html
index 31489b8..1b8ef93 100644
--- a/design/prototype/screens/ui-desktop.html
+++ b/design/prototype/screens/ui-desktop.html
@@ -316,6 +316,13 @@
.dl-overlay{ position:absolute; inset:0; z-index:60; background:var(--overlay);
display:none; align-items:center; justify-content:center; padding:var(--space-6); }
.dl-overlay.is-open{ display:flex; }
+ /* 分流规则:类型选择 chip 组(替代原生 select,设计一致) */
+ .rt-chips{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
+ .rt-chip{ padding:7px 13px; border-radius:var(--radius-full); border:1px solid var(--border);
+ background:var(--surface); color:var(--fg2); font-size:13px; font-family:inherit; cursor:pointer;
+ transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
+ .rt-chip:hover{ border-color:var(--accent-border); }
+ .rt-chip.is-active{ background:var(--accent-subtle); border-color:var(--accent-border); color:var(--accent); font-weight:600; }
.limit-win{ position:relative; width:460px; max-width:100%; max-height:100%; overflow:auto;
background:var(--bg); border:1px solid var(--border-strong);
border-radius:16px; box-shadow:var(--shadow-xl); padding:var(--space-8) var(--space-6) var(--space-6);
@@ -2062,18 +2069,19 @@ var _rtBack=document.getElementById('rtBack'); if(_rtBack) _rtBack.addEventListe
win.innerHTML=''
+'
'+_t('添加规则','Add rule')+'
'
+''
- +'
'
+ +'
'+_t('规则类型','Match type')+''
+ +'
'
+'
'
+'
'+_t('动作','Action')+''
+'
'
+'
'
+'';
- var act='direct';
+ var act='direct', type='domain_suffix';
+ win.querySelectorAll('#rtAddType .rt-chip').forEach(function(b){ b.addEventListener('click',function(){ type=b.dataset.type; win.querySelectorAll('#rtAddType .rt-chip').forEach(function(x){ x.classList.toggle('is-active',x===b); }); }); });
win.querySelectorAll('#rtActSeg button').forEach(function(b){ b.addEventListener('click',function(){ act=b.dataset.act; win.querySelectorAll('#rtActSeg button').forEach(function(x){ x.classList.toggle('is-active',x===b); }); }); });
win.querySelector('#rtAddClose').addEventListener('click',function(){ closeModal('rtAddModal'); });
win.querySelector('#rtAddCancel').addEventListener('click',function(){ closeModal('rtAddModal'); });
- win.querySelector('#rtAddOk').addEventListener('click',function(){ var v=(win.querySelector('#rtAddVal').value||'').trim(); if(!v){ win.querySelector('#rtAddVal').focus(); return; } addRuleRow(win.querySelector('#rtAddType').value,v,act,true); closeModal('rtAddModal'); });
+ win.querySelector('#rtAddOk').addEventListener('click',function(){ var v=(win.querySelector('#rtAddVal').value||'').trim(); if(!v){ win.querySelector('#rtAddVal').focus(); return; } addRuleRow(type,v,act,true); closeModal('rtAddModal'); });
openModal('rtAddModal');
}
diff --git a/design/prototype/screens/ui-mobile.html b/design/prototype/screens/ui-mobile.html
index 8593dd0..2d1ebe2 100644
--- a/design/prototype/screens/ui-mobile.html
+++ b/design/prototype/screens/ui-mobile.html
@@ -224,6 +224,10 @@
.rt-sheet.is-open{ display:flex; }
.rt-win{ background:var(--surface); border-radius:var(--radius-lg); padding:20px; width:100%;
max-width:340px; max-height:86%; overflow:auto; box-shadow:var(--shadow-lg); position:relative; }
+ .rt-chips{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
+ .rt-chip{ padding:7px 13px; border-radius:var(--radius-full); border:1px solid var(--border);
+ background:var(--bg-subtle); color:var(--fg2); font-size:13px; font-family:inherit; cursor:pointer; }
+ .rt-chip.is-active{ background:var(--accent-subtle); border-color:var(--accent-border); color:var(--accent); font-weight:600; }
/* 购买流程覆盖层(从账户页「兑换 & 购买」进入;移植 purchase.html 状态机,命名空间 .pur-*) */
#purchaseOverlay{ position:absolute; left:0; right:0; top:30px; bottom:0; z-index:45;
@@ -2486,16 +2490,17 @@ $('#rowRouting').addEventListener('click', ()=>{ subOpen('routing'); renderRouti
const win=document.getElementById('rtAddWin');
win.innerHTML=''+_t('添加规则','Add rule')+'
'
+''
- +'
'
+ +'
'+_t('规则类型','Match type')+' '
+'
'
+'
'+_t('动作','Action')+' '
+'
'
+'';
- let act='direct';
+ let act='direct', type='domain_suffix';
+ win.querySelectorAll('#rtAddType .rt-chip').forEach(b=>b.addEventListener('click',()=>{ type=b.dataset.type; win.querySelectorAll('#rtAddType .rt-chip').forEach(x=>x.classList.toggle('is-active',x===b)); }));
win.querySelectorAll('#rtActSeg button').forEach(b=>b.addEventListener('click',()=>{ act=b.dataset.act; win.querySelectorAll('#rtActSeg button').forEach(x=>x.classList.toggle('is-active',x===b)); }));
win.querySelector('#rtAddClose').addEventListener('click',()=>closeM('rtAddModal'));
win.querySelector('#rtAddCancel').addEventListener('click',()=>closeM('rtAddModal'));
- win.querySelector('#rtAddOk').addEventListener('click',()=>{ const v=(win.querySelector('#rtAddVal').value||'').trim(); if(!v){ win.querySelector('#rtAddVal').focus(); return; } addRuleRow(win.querySelector('#rtAddType').value,v,act,true); closeM('rtAddModal'); });
+ win.querySelector('#rtAddOk').addEventListener('click',()=>{ const v=(win.querySelector('#rtAddVal').value||'').trim(); if(!v){ win.querySelector('#rtAddVal').focus(); return; } addRuleRow(type,v,act,true); closeM('rtAddModal'); });
openM('rtAddModal');
}
function openImport(){