design(configurable-proxy): Settings页衔接(Smart routing→分流规则入口)+ 默认/自定义规则冲突处理
- Settings 的 Smart routing 二元开关演进为「分流规则」入口行(显示模式+chevron) - 冲突处理:系统层永远赢>用户规则(有序首命中)>智能分流>FINAL; UI 主动标记①被遮蔽永不命中②撞锁定系统目标 两类冲突 原型加 before/after 对照 + 冲突可视化例;说明文档加对应章节。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -154,7 +154,28 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="note">
|
||||
<h2 class="sec">与现有 Settings 页的衔接</h2>
|
||||
<p class="lead" style="margin-bottom:var(--space-4)">现在 Settings 里的「Smart routing」是个二元开关。改为<b>渐进式披露入口</b>:变成「分流规则」设置行(显示当前模式 + chevron),点进去就是上面的分流规则屏。休闲用户不用点,行为等价开关开着。</p>
|
||||
<div style="display:flex;gap:var(--space-8);flex-wrap:wrap;align-items:flex-start">
|
||||
<div style="flex:1;min-width:300px">
|
||||
<div class="rtype" style="margin-bottom:var(--space-2)">现在(二元开关)</div>
|
||||
<div class="card card-flush"><div class="setting-row"><span class="icon-box"><svg><use href="#i-zap"/></svg></span><div class="st-body"><div class="st-title">Smart routing</div><div class="st-sub">Accelerate abroad, direct at home</div></div><button class="toggle is-on"><i></i></button></div></div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:300px">
|
||||
<div class="rtype" style="margin-bottom:var(--space-2)">改后(入口 → 分流规则屏)</div>
|
||||
<div class="card card-flush"><div class="setting-row is-tap"><span class="icon-box"><svg><use href="#i-zap"/></svg></span><div class="st-body"><div class="st-title">分流规则</div><div class="st-sub">自定义直连 / 走隧道 / 拒绝</div></div><div class="st-trail" style="display:flex;align-items:center;gap:var(--space-2)"><span class="pill pill-outline">智能分流</span><svg style="width:16px;height:16px;color:var(--fg3)"><use href="#i-chevron-right"/></svg></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="sec">默认规则 vs 自定义规则 · 冲突处理</h2>
|
||||
<p class="lead" style="margin-bottom:var(--space-4)">确定性分层 + 顺序,不靠猜:系统强制层永远在最上(用户改不了)→ 用户规则(有序,首命中)→ 智能分流默认 → FINAL。UI 主动标记两类冲突:</p>
|
||||
<div class="card card-flush" style="max-width:560px">
|
||||
<div class="setting-row"><span class="grip">≡</span><div class="st-body"><div class="st-title rval">github.com</div><div class="st-sub rtype">域名后缀</div></div><span class="pill act-proxy">走隧道</span></div>
|
||||
<div class="setting-row" style="opacity:.5"><span class="grip">≡</span><div class="st-body"><div class="st-title rval">github.com/foo</div><div class="st-sub" style="color:var(--warning)">⚠ 已被上面「github.com 走隧道」覆盖,永不命中</div></div><span class="pill act-direct">直连</span></div>
|
||||
<div class="setting-row"><span class="grip">≡</span><div class="st-body"><div class="st-title rval">git.yanmeiai.com</div><div class="st-sub" style="color:var(--warning)">⚠ 该域名由系统强制走隧道(私有服务),此规则不生效</div></div><span class="pill act-direct">直连</span></div>
|
||||
</div>
|
||||
|
||||
<div class="note" style="margin-top:var(--space-8)">
|
||||
<div><h3>为什么用 v2 真 ui-kit</h3><p>本屏所有组件(段选 <code>.segswitch</code>、设置行 <code>.setting-row</code>、开关 <code>.toggle</code>、卡片 <code>.card</code>、胶囊 <code>.pill</code>、按钮 <code>.btn</code>)都来自 v2 设计系统真原子,颜色全走 token,与线上 App 一致——不是独立 mockup。动作语义色(直连绿/走隧道橙/拒绝红)是原型内联,实现时收进 atoms。</p></div>
|
||||
<div><h3>待你确认(设计层)</h3><p>①规则粒度够不够 ②要不要分应用代理(per-app,建议后置)③「从文本导入」Phase 1 还是 2 ④档案 per-user 还是 per-device。确认后出 Phase 1 实现计划。</p></div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user