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(){