design(prototype): 分流规则深度嵌入真实 ui-kit(桌面+移动屏)+ 登记设计系统
不再用单独页,直接嵌进真实交互原型: - ui-desktop: Smart routing 开关行→分流规则入口→ data-view=routing 子视图(setView 接线+i18n) - ui-mobile: 智能分流行→分流规则入口→ data-sub=routing 子屏(subOpen 接线+i18n+返回回设置) - 复用现有 .pill 语义(直连 is-success/走隧道 is-warning/拒绝 is-danger),不造新原子 - index.html 登记「分流动作」胶囊场景 - 删单独 routing-rules.html;搬入配置说明文档 全走 v2 真原子,设计系统闸绿。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
wangjia
@@ -621,6 +621,12 @@
|
||||
<span class="pill is-neutral"><span class="dot"></span>未登录</span>
|
||||
</div></div>
|
||||
|
||||
<div class="pcard"><div class="pcard-h"><h3>分流动作</h3><span class="tk">直连 is-success · 走隧道 is-warning · 拒绝 is-danger</span></div><div class="pcard-b">
|
||||
<span class="pill is-success">直连</span>
|
||||
<span class="pill is-warning">走隧道</span>
|
||||
<span class="pill is-danger">拒绝</span>
|
||||
</div></div>
|
||||
|
||||
<div class="pcard"><div class="pcard-h"><h3>套餐</h3><span class="tk">.pill-accent · .pill.is-neutral</span></div><div class="pcard-b">
|
||||
<span class="pill pill-accent">PRO 会员</span>
|
||||
<span class="pill is-neutral">免费版</span>
|
||||
|
||||
@@ -1,184 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>分流规则 · 可配置代理原型(真 ui-kit)</title>
|
||||
<link rel="stylesheet" href="../tokens.css">
|
||||
<link rel="stylesheet" href="../atoms.css">
|
||||
<script src="../icons.js"></script>
|
||||
<style>
|
||||
body{ margin:0; background:var(--bg); color:var(--fg1); font-family:var(--font-sans); -webkit-font-smoothing:antialiased; }
|
||||
.wrap{ max-width:1120px; margin:0 auto; padding:var(--space-8) var(--space-6) var(--space-16); }
|
||||
h1{ font-family:var(--font-display); font-size:var(--text-h2); margin:0 0 var(--space-2); }
|
||||
.lead{ font-size:var(--text-sm); color:var(--fg2); line-height:var(--leading-relaxed); max-width:720px; margin:0 0 var(--space-8); }
|
||||
.lead code{ font-family:var(--font-mono); font-size:.85em; color:var(--accent); background:var(--accent-subtle); padding:1px 6px; border-radius:var(--radius-sm); }
|
||||
h2.sec{ font-size:var(--text-body); color:var(--accent); border-bottom:1px solid var(--border); padding-bottom:var(--space-2); margin:var(--space-10) 0 var(--space-5); }
|
||||
.stage{ display:flex; flex-wrap:wrap; gap:var(--space-10); align-items:flex-start; }
|
||||
/* 手机框(精简 chrome,内容全走真 atoms) */
|
||||
.phone{ width:360px; border-radius:var(--radius-2xl); overflow:hidden; background:var(--bg); border:1px solid var(--border); box-shadow:var(--shadow-lg); flex:0 0 auto; }
|
||||
.sbar{ height:30px; display:flex; align-items:center; justify-content:space-between; padding:0 var(--space-5); font-size:var(--text-caption); color:var(--fg3); font-weight:600; }
|
||||
.navb{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-5) var(--space-4); border-bottom:1px solid var(--border); }
|
||||
.navb .bk{ color:var(--accent); font-size:20px; }
|
||||
.navb .ti{ font-family:var(--font-display); font-weight:700; font-size:var(--text-body); }
|
||||
.navb .pl{ margin-left:auto; color:var(--accent); }
|
||||
.pbody{ padding:var(--space-4) var(--space-4) var(--space-6); display:flex; flex-direction:column; gap:var(--space-2); max-height:660px; overflow-y:auto; }
|
||||
.sec-label{ margin-top:var(--space-4); }
|
||||
/* 规则行动作 pill 语义色(原型内联,实现时收进 atoms) */
|
||||
.pill.act-direct{ color:var(--success); border-color:var(--success); background:color-mix(in srgb,var(--success) 14%,transparent); }
|
||||
.pill.act-proxy{ color:var(--accent); border-color:var(--accent); background:var(--accent-subtle); }
|
||||
.pill.act-reject{ color:var(--danger); border-color:var(--danger); background:color-mix(in srgb,var(--danger) 14%,transparent); }
|
||||
.rtype{ font-family:var(--font-mono); font-size:var(--text-caption); color:var(--fg3); }
|
||||
.rval{ font-family:var(--font-mono); font-size:var(--text-sm); }
|
||||
.grip{ color:var(--fg3); opacity:.55; cursor:grab; }
|
||||
/* 桌面窗口 */
|
||||
.win{ flex:1; min-width:520px; border:1px solid var(--border); border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-lg); }
|
||||
.wt{ height:38px; background:var(--surface); border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 var(--space-4); gap:var(--space-4); }
|
||||
.wt .dt{ display:flex; gap:6px; } .wt .dt i{ width:11px; height:11px; border-radius:50%; background:var(--border-strong); } .wt .dt i:nth-child(1){ background:var(--danger); } .wt .dt i:nth-child(3){ background:var(--success); }
|
||||
.wt .wn{ font-size:var(--text-sm); color:var(--fg3); font-weight:600; }
|
||||
.wbody{ display:flex; min-height:480px; }
|
||||
.wside{ width:150px; background:var(--surface); border-right:1px solid var(--border); padding:var(--space-3) var(--space-2); }
|
||||
.wside .si{ padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); font-size:var(--text-sm); color:var(--fg2); margin-bottom:2px; }
|
||||
.wside .si.on{ background:var(--accent); color:var(--fg-on-accent); font-weight:600; }
|
||||
.wmain{ flex:1; padding:var(--space-5) var(--space-6); overflow-y:auto; }
|
||||
.wtable{ width:100%; border-collapse:collapse; font-size:var(--text-sm); }
|
||||
.wtable th{ text-align:left; font-size:var(--text-caption); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--accent-2,var(--fg3)); padding:var(--space-2) var(--space-3); border-bottom:1px solid var(--border); }
|
||||
.wtable td{ padding:var(--space-3); border-bottom:1px solid var(--border); vertical-align:middle; }
|
||||
.note{ display:flex; gap:var(--space-8); flex-wrap:wrap; margin-top:var(--space-6); }
|
||||
.note>div{ flex:1; min-width:260px; }
|
||||
.note h3{ font-size:var(--text-sm); color:var(--accent); margin:0 0 var(--space-2); }
|
||||
.note p{ font-size:var(--text-sm); color:var(--fg2); margin:var(--space-2) 0; line-height:var(--leading-relaxed); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<h1>分流规则 · 可配置代理</h1>
|
||||
<p class="lead">Task 3 原型(<b>用 v2 真实设计系统重建</b>:全走 <code>atoms.css</code> / <code>tokens.css</code> / <code>icons.js</code>,非独立 mockup)。让用户像 Shadowrocket 那样自定义"直连 / 走隧道 / 拒绝"。规则模型与实现见 <a href="../../../docs/configurable-proxy-spec.html" style="color:var(--accent)">配置说明文档</a>。</p>
|
||||
|
||||
<h2 class="sec">移动端 · 分流规则子屏</h2>
|
||||
<div class="stage">
|
||||
<div class="phone">
|
||||
<div class="sbar"><span>9:41</span><span>5G ▮▮▮</span></div>
|
||||
<div class="navb"><span class="bk">‹</span><span class="ti">分流规则</span><span class="pl"><svg style="width:20px;height:20px"><use href="#i-plus"/></svg></span></div>
|
||||
<div class="pbody">
|
||||
|
||||
<div class="sec-label">代理模式</div>
|
||||
<div class="segswitch">
|
||||
<button class="segswitch-opt"><span>全局代理</span></button>
|
||||
<button class="segswitch-opt is-active"><span>智能分流</span></button>
|
||||
<button class="segswitch-opt"><span>全部直连</span></button>
|
||||
</div>
|
||||
|
||||
<div class="sec-label">内置规则</div>
|
||||
<div class="card card-flush">
|
||||
<div class="setting-row"><span class="icon-box"><svg><use href="#i-globe"/></svg></span><div class="st-body"><div class="st-title">国内直连</div><div class="st-sub">GeoIP / GeoSite CN</div></div><button class="toggle is-on"><i></i></button></div>
|
||||
<div class="setting-row"><span class="icon-box"><svg><use href="#i-home"/></svg></span><div class="st-body"><div class="st-title">局域网 / 私网直连</div><div class="st-sub">强制,不可关</div></div><span class="pill pill-outline">🔒</span></div>
|
||||
<div class="setting-row"><span class="icon-box"><svg><use href="#i-server"/></svg></span><div class="st-body"><div class="st-title">私有服务走隧道</div><div class="st-sub">服务端下发</div></div><span class="pill pill-outline">🔒</span></div>
|
||||
</div>
|
||||
|
||||
<div class="sec-label">我的规则 · 首命中生效</div>
|
||||
<div class="card card-flush">
|
||||
<div class="setting-row"><span class="grip">≡</span><div class="st-body"><div class="st-title rval">git.51yanmei.com</div><div class="st-sub rtype">域名后缀</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">aliyun.com</div><div class="st-sub rtype">域名后缀</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">github.com</div><div class="st-sub rtype">域名后缀</div></div><span class="pill act-proxy">走隧道</span></div>
|
||||
<div class="setting-row"><span class="grip">≡</span><div class="st-body"><div class="st-title rval">category-ads</div><div class="st-sub rtype">GeoSite 规则集</div></div><span class="pill act-reject">拒绝</span></div>
|
||||
<div class="setting-row"><span class="grip">≡</span><div class="st-body"><div class="st-title rval">35.190.0.0/16</div><div class="st-sub rtype">IP-CIDR</div></div><span class="pill act-proxy">走隧道</span></div>
|
||||
</div>
|
||||
<button class="btn btn-subtle btn-block" style="margin-top:var(--space-2)"><svg><use href="#i-plus"/></svg>添加规则</button>
|
||||
|
||||
<div class="sec-label">最终(未命中)</div>
|
||||
<div class="card card-flush">
|
||||
<div class="setting-row"><div class="st-body"><div class="st-title">FINAL 兜底</div></div><span class="pill act-proxy">走隧道</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 添加规则子屏(精简) -->
|
||||
<div class="phone">
|
||||
<div class="sbar"><span>9:41</span><span>5G ▮▮▮</span></div>
|
||||
<div class="navb"><span class="bk">取消</span><span class="ti">添加规则</span><span class="pl" style="font-weight:700;font-size:var(--text-sm)">保存</span></div>
|
||||
<div class="pbody">
|
||||
<div class="sec-label">类型</div>
|
||||
<div class="card"><div style="display:flex;flex-wrap:wrap;gap:var(--space-2)">
|
||||
<span class="pill pill-outline">域名</span><span class="pill pill-accent">域名后缀</span><span class="pill pill-outline">关键字</span>
|
||||
<span class="pill pill-outline">IP-CIDR</span><span class="pill pill-outline">GeoIP</span><span class="pill pill-outline">GeoSite</span>
|
||||
</div></div>
|
||||
<div class="sec-label">值</div>
|
||||
<div class="field"><input class="input" value="git.51yanmei.com" readonly></div>
|
||||
<div class="sec-label">动作</div>
|
||||
<div class="card"><div style="display:flex;gap:var(--space-2)">
|
||||
<span class="pill act-direct">直连 DIRECT</span><span class="pill pill-outline">走隧道 PROXY</span><span class="pill pill-outline">拒绝 REJECT</span>
|
||||
</div></div>
|
||||
<div class="sec-label">预览 · 翻译为 sing-box 规则</div>
|
||||
<div class="card"><pre style="margin:0;font-family:var(--font-mono);font-size:var(--text-caption);color:var(--fg2);white-space:pre-wrap">{ "domain_suffix":
|
||||
["git.51yanmei.com"],
|
||||
"outbound": "direct" }</pre></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="sec">桌面端 · 设置窗口(表格 + 实时预览)</h2>
|
||||
<div class="win">
|
||||
<div class="wt"><span class="dt"><i></i><i></i><i></i></span><span class="wn">Pangolin — 设置 · 分流规则</span></div>
|
||||
<div class="wbody">
|
||||
<div class="wside">
|
||||
<div class="si">通用</div><div class="si">节点</div><div class="si on">分流规则</div><div class="si">账户</div><div class="si">统计</div>
|
||||
</div>
|
||||
<div class="wmain">
|
||||
<div style="display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-4)">
|
||||
<div style="font-family:var(--font-display);font-weight:700;font-size:var(--text-h3,var(--text-body))">分流规则</div>
|
||||
<div class="segswitch" style="margin-left:auto">
|
||||
<button class="segswitch-opt"><span>全局</span></button><button class="segswitch-opt is-active"><span>智能分流</span></button><button class="segswitch-opt"><span>直连</span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" style="display:flex;gap:var(--space-6);flex-wrap:wrap;align-items:center;margin-bottom:var(--space-4);padding:var(--space-3) var(--space-4)">
|
||||
<label style="display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm)">国内直连 <button class="toggle is-on"><i></i></button></label>
|
||||
<span style="font-size:var(--text-sm);color:var(--fg3)">LAN 直连 🔒</span>
|
||||
<span style="font-size:var(--text-sm);color:var(--fg3)">私有服务走隧道 🔒</span>
|
||||
</div>
|
||||
<table class="wtable">
|
||||
<tr><th style="width:24px"></th><th style="width:120px">类型</th><th>值</th><th style="width:92px">动作</th><th style="width:130px">说明</th><th style="width:44px">启用</th></tr>
|
||||
<tr><td class="grip">≡</td><td class="rtype">域名后缀</td><td class="rval">git.51yanmei.com</td><td><span class="pill act-direct">直连</span></td><td style="color:var(--fg3)">CI 源</td><td><button class="toggle is-on"><i></i></button></td></tr>
|
||||
<tr><td class="grip">≡</td><td class="rtype">域名后缀</td><td class="rval">aliyun.com</td><td><span class="pill act-direct">直连</span></td><td style="color:var(--fg3)">镜像</td><td><button class="toggle is-on"><i></i></button></td></tr>
|
||||
<tr><td class="grip">≡</td><td class="rtype">域名后缀</td><td class="rval">github.com</td><td><span class="pill act-proxy">走隧道</span></td><td style="color:var(--fg3)">—</td><td><button class="toggle is-on"><i></i></button></td></tr>
|
||||
<tr><td class="grip">≡</td><td class="rtype">GeoSite</td><td class="rval">category-ads</td><td><span class="pill act-reject">拒绝</span></td><td style="color:var(--fg3)">广告</td><td><button class="toggle is-on"><i></i></button></td></tr>
|
||||
<tr><td class="grip">≡</td><td class="rtype">IP-CIDR</td><td class="rval">35.190.0.0/16</td><td><span class="pill act-proxy">走隧道</span></td><td style="color:var(--fg3)">—</td><td><button class="toggle"><i></i></button></td></tr>
|
||||
</table>
|
||||
<div style="display:flex;gap:var(--space-3);margin-top:var(--space-4);align-items:center">
|
||||
<button class="btn btn-subtle"><svg><use href="#i-plus"/></svg>添加规则</button>
|
||||
<button class="btn btn-ghost">从文本导入</button>
|
||||
<button class="btn btn-ghost">重置默认</button>
|
||||
<span style="margin-left:auto;font-size:var(--text-sm);color:var(--fg3)">FINAL:<span class="pill act-proxy">走隧道</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -678,9 +678,9 @@
|
||||
<div class="st-body"><div class="st-title" data-i18n="set.autoconnect">自动连接</div><div class="st-sub" data-i18n="set.autoconnectSub">启动时自动连接节点</div></div>
|
||||
<span class="st-trail"><button class="toggle" data-toggle="autoconnect"><i></i></button></span>
|
||||
</div>
|
||||
<div class="setting-row">
|
||||
<div class="st-body"><div class="st-title" data-i18n="set.smart">智能分流</div><div class="st-sub" data-i18n="set.smartSub">海外应用走加速，国内直连</div></div>
|
||||
<span class="st-trail"><button class="toggle is-on" data-toggle="smart"><i></i></button></span>
|
||||
<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>
|
||||
</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>
|
||||
@@ -735,6 +735,40 @@
|
||||
</section>
|
||||
|
||||
<!-- 联系视图 -->
|
||||
<!-- 分流规则子视图(从 设置 → 分流规则 入口进) -->
|
||||
<section class="view" data-view="routing">
|
||||
<div class="view-body settings-view">
|
||||
<button class="pv-back" id="rtBack"><svg><use href="#i-arrow-left"/></svg><span>返回设置</span></button>
|
||||
<div class="sec-label">代理模式</div>
|
||||
<div class="segswitch" style="margin-bottom:var(--space-5)">
|
||||
<button class="segswitch-opt"><span>全局代理</span></button>
|
||||
<button class="segswitch-opt is-active"><span>智能分流</span></button>
|
||||
<button class="segswitch-opt"><span>全部直连</span></button>
|
||||
</div>
|
||||
<div class="sec-label">内置规则</div>
|
||||
<div class="card card-flush" style="margin-bottom:var(--space-5)">
|
||||
<div class="setting-row"><div class="st-body"><div class="st-title">国内直连</div><div class="st-sub">GeoIP / GeoSite CN</div></div><span class="st-trail"><button class="toggle is-on"><i></i></button></span></div>
|
||||
<div class="setting-row"><div class="st-body"><div class="st-title">局域网 / 私网直连</div><div class="st-sub">强制,不可关</div></div><span class="st-trail"><span class="pill is-neutral">🔒 强制</span></span></div>
|
||||
<div class="setting-row"><div class="st-body"><div class="st-title">私有服务走隧道</div><div class="st-sub">服务端下发</div></div><span class="st-trail"><span class="pill is-neutral">🔒 服务端</span></span></div>
|
||||
</div>
|
||||
<div class="sec-label">我的规则 · 有序,首命中生效</div>
|
||||
<div class="card card-flush" style="margin-bottom:var(--space-4)">
|
||||
<div class="setting-row"><span style="color:var(--fg3);opacity:.55;margin-right:var(--space-2)">≡</span><div class="st-body"><div class="st-title" style="font-family:var(--font-mono);font-size:var(--text-sm)">git.51yanmei.com</div><div class="st-sub">域名后缀 · CI 源</div></div><span class="st-trail"><span class="pill is-success">直连</span></span></div>
|
||||
<div class="setting-row"><span style="color:var(--fg3);opacity:.55;margin-right:var(--space-2)">≡</span><div class="st-body"><div class="st-title" style="font-family:var(--font-mono);font-size:var(--text-sm)">aliyun.com</div><div class="st-sub">域名后缀 · 镜像</div></div><span class="st-trail"><span class="pill is-success">直连</span></span></div>
|
||||
<div class="setting-row"><span style="color:var(--fg3);opacity:.55;margin-right:var(--space-2)">≡</span><div class="st-body"><div class="st-title" style="font-family:var(--font-mono);font-size:var(--text-sm)">github.com</div><div class="st-sub">域名后缀</div></div><span class="st-trail"><span class="pill is-warning">走隧道</span></span></div>
|
||||
<div class="setting-row"><span style="color:var(--fg3);opacity:.55;margin-right:var(--space-2)">≡</span><div class="st-body"><div class="st-title" style="font-family:var(--font-mono);font-size:var(--text-sm)">category-ads</div><div class="st-sub">GeoSite 规则集</div></div><span class="st-trail"><span class="pill is-danger">拒绝</span></span></div>
|
||||
<div class="setting-row" style="opacity:.5"><span style="color:var(--fg3);opacity:.55;margin-right:var(--space-2)">≡</span><div class="st-body"><div class="st-title" style="font-family:var(--font-mono);font-size:var(--text-sm)">git.yanmeiai.com</div><div class="st-sub" style="color:var(--warning)">⚠ 该域名由系统强制走隧道,此规则不生效</div></div><span class="st-trail"><span class="pill is-success">直连</span></span></div>
|
||||
</div>
|
||||
<div style="display:flex;gap:var(--space-3);align-items:center;margin-bottom:var(--space-5)">
|
||||
<button class="btn btn-subtle"><svg><use href="#i-plus"/></svg>添加规则</button>
|
||||
<button class="btn btn-ghost">从文本导入</button>
|
||||
<button class="btn btn-ghost">重置默认</button>
|
||||
</div>
|
||||
<div class="sec-label">最终(未命中任何规则)</div>
|
||||
<div class="card card-flush"><div class="setting-row"><div class="st-body"><div class="st-title">FINAL 兜底</div></div><span class="st-trail"><span class="pill is-warning">走隧道</span></span></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="view" data-view="contact">
|
||||
<div class="view-body">
|
||||
<p class="contact-intro" data-i18n="contact.intro">遇到问题？通过以下任一渠道联系我们，通常数分钟内回复。</p>
|
||||
@@ -1228,6 +1262,8 @@ var I18N = {
|
||||
'set.autostart':{zh:'开机自启',en:'Launch at startup'}, 'set.autostartSub':{zh:'系统启动时自动运行',en:'Run automatically on system start'},
|
||||
'set.autoconnect':{zh:'自动连接',en:'Auto-connect'}, 'set.autoconnectSub':{zh:'启动时自动连接节点',en:'Connect automatically on launch'},
|
||||
'set.smart':{zh:'智能分流',en:'Smart routing'}, 'set.smartSub':{zh:'海外应用走加速，国内直连',en:'Accelerate abroad, direct at home'},
|
||||
'nav.routing':{zh:'分流规则',en:'Routing rules'},
|
||||
'set.routing':{zh:'分流规则',en:'Routing rules'}, 'set.routingSub':{zh:'自定义直连 / 走隧道 / 拒绝',en:'Custom direct / proxy / reject'}, 'set.routeModeSmart':{zh:'智能分流',en:'Smart routing'},
|
||||
'set.kill':{zh:'断连保护 Kill Switch',en:'Kill Switch'}, 'set.killSub':{zh:'断线时阻断网络，防止数据泄露',en:'Block traffic if the link drops'},
|
||||
'set.lang':{zh:'语言',en:'Language'}, 'set.dark':{zh:'深色外观',en:'Dark appearance'},
|
||||
'set.protocol':{zh:'协议',en:'Protocol'}, 'set.web':{zh:'网页版用户中心',en:'Web User Center'},
|
||||
@@ -1859,6 +1895,8 @@ var _accRedeem=document.getElementById('accRedeemRow'); if(_accRedeem) _accRedee
|
||||
var _accInvite=document.getElementById('accInviteRow'); if(_accInvite) _accInvite.addEventListener('click', function(){ setView('invite'); });
|
||||
var _accDevices=document.getElementById('accDevicesRow'); if(_accDevices) _accDevices.addEventListener('click', function(){ setView('devices'); });
|
||||
var _dvBack=document.getElementById('dvBack'); if(_dvBack) _dvBack.addEventListener('click', function(){ setView('account'); });
|
||||
var _routingRow=document.getElementById('routingRow'); if(_routingRow) _routingRow.addEventListener('click', function(){ setView('routing'); });
|
||||
var _rtBack=document.getElementById('rtBack'); if(_rtBack) _rtBack.addEventListener('click', function(){ setView('settings'); });
|
||||
var _tbBell=document.getElementById('tbBell'); if(_tbBell) _tbBell.addEventListener('click', function(){ if(S.view!=='notifications'){ S.notifFrom=S.view; } setView('notifications'); });
|
||||
var _ntBack=document.getElementById('ntBack'); if(_ntBack) _ntBack.addEventListener('click', function(){ setView(S.notifFrom||'connect'); });
|
||||
document.querySelectorAll('.notif-row.is-expandable').forEach(function(row){
|
||||
|
||||
@@ -856,10 +856,10 @@
|
||||
<div class="st-body"><div class="st-title" data-i18n="setAutoConn">自动连接</div></div>
|
||||
<div class="st-trail"><button class="toggle js-toggle is-on"><i></i></button></div>
|
||||
</div>
|
||||
<div class="setting-row">
|
||||
<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="setSmartRoute">智能分流</div></div>
|
||||
<div class="st-trail"><button class="toggle js-toggle is-on"><i></i></button></div>
|
||||
<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">智能分流</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>
|
||||
@@ -916,6 +916,32 @@
|
||||
</section>
|
||||
|
||||
<!-- 联系我们：唯一渠道来源（无「去哪买」引流） -->
|
||||
<section class="sub-screen" data-sub="routing">
|
||||
<div class="sub-scr sub-stack">
|
||||
<div class="sec-label">代理模式</div>
|
||||
<div class="segswitch">
|
||||
<button class="segswitch-opt"><span>全局代理</span></button>
|
||||
<button class="segswitch-opt is-active"><span>智能分流</span></button>
|
||||
<button class="segswitch-opt"><span>全部直连</span></button>
|
||||
</div>
|
||||
<div class="sec-label">内置规则</div>
|
||||
<div class="card card-flush">
|
||||
<div class="setting-row"><span class="icon-box"><svg><use href="#i-globe"/></svg></span><div class="st-body"><div class="st-title">国内直连</div><div class="st-sub">GeoIP / GeoSite CN</div></div><div class="st-trail"><button class="toggle is-on"><i></i></button></div></div>
|
||||
<div class="setting-row"><span class="icon-box"><svg><use href="#i-home"/></svg></span><div class="st-body"><div class="st-title">局域网 / 私网直连</div><div class="st-sub">强制,不可关</div></div><div class="st-trail"><span class="pill is-neutral">🔒</span></div></div>
|
||||
<div class="setting-row"><span class="icon-box"><svg><use href="#i-server"/></svg></span><div class="st-body"><div class="st-title">私有服务走隧道</div><div class="st-sub">服务端下发</div></div><div class="st-trail"><span class="pill is-neutral">🔒</span></div></div>
|
||||
</div>
|
||||
<div class="sec-label">我的规则 · 首命中生效</div>
|
||||
<div class="card card-flush">
|
||||
<div class="setting-row"><span style="color:var(--fg3);opacity:.55">≡</span><div class="st-body"><div class="st-title" style="font-family:var(--font-mono);font-size:var(--text-sm)">git.51yanmei.com</div><div class="st-sub">域名后缀</div></div><div class="st-trail"><span class="pill is-success">直连</span></div></div>
|
||||
<div class="setting-row"><span style="color:var(--fg3);opacity:.55">≡</span><div class="st-body"><div class="st-title" style="font-family:var(--font-mono);font-size:var(--text-sm)">github.com</div><div class="st-sub">域名后缀</div></div><div class="st-trail"><span class="pill is-warning">走隧道</span></div></div>
|
||||
<div class="setting-row"><span style="color:var(--fg3);opacity:.55">≡</span><div class="st-body"><div class="st-title" style="font-family:var(--font-mono);font-size:var(--text-sm)">category-ads</div><div class="st-sub">GeoSite 规则集</div></div><div class="st-trail"><span class="pill is-danger">拒绝</span></div></div>
|
||||
</div>
|
||||
<button class="btn btn-subtle btn-block"><svg><use href="#i-plus"/></svg>添加规则</button>
|
||||
<div class="sec-label">最终(未命中)</div>
|
||||
<div class="card card-flush"><div class="setting-row"><div class="st-body"><div class="st-title">FINAL 兜底</div></div><div class="st-trail"><span class="pill is-warning">走隧道</span></div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="sub-screen" data-sub="contact">
|
||||
<div class="sub-scr sub-stack">
|
||||
<div class="card card-flush">
|
||||
@@ -1277,7 +1303,7 @@ const I18N = {
|
||||
devRename:'重命名', devForceLogout:'强制退出', devClearLogin:'清除登录信息',
|
||||
devRenamedToast:'已重命名（演示）', devLoggedOutToast:'已强制退出（演示）', devClearedToast:'已清除登录信息（演示）',
|
||||
secPref:'偏好', prefLang:'语言', prefTheme:'深色外观', prefProtocol:'协议', followLight:'跟随浅色', stateOn:'已开启',
|
||||
secMore:'更多', navDevices:'设备管理', navSettings:'设置', navRedeem:'兑换 & 购买',
|
||||
secMore:'更多', navDevices:'设备管理', navSettings:'设置', navRouting:'分流规则', navRedeem:'兑换 & 购买',
|
||||
navContact:'联系我们', navWebUC:'网页用户中心', logout:'退出登录',
|
||||
navOrders:'我的订单', ordDetailTitle:'订单详情', ordSecDetail:'明细',
|
||||
kOrderNo:'订单号', kPlan:'套餐', kAmount:'金额', kMethod:'支付方式', kStatus:'状态',
|
||||
@@ -1358,7 +1384,7 @@ const I18N = {
|
||||
devRename:'Rename', devForceLogout:'Force logout', devClearLogin:'Clear login info',
|
||||
devRenamedToast:'Renamed (demo)', devLoggedOutToast:'Force logged out (demo)', devClearedToast:'Login info cleared (demo)',
|
||||
secPref:'Preferences', prefLang:'Language', prefTheme:'Dark appearance', prefProtocol:'Protocol', followLight:'Follow light', stateOn:'On',
|
||||
secMore:'More', navDevices:'Devices', navSettings:'Settings', navRedeem:'Redeem & Buy',
|
||||
secMore:'More', navDevices:'Devices', navSettings:'Settings', navRouting:'Routing rules', navRedeem:'Redeem & Buy',
|
||||
navContact:'Contact us', navWebUC:'Web user center', logout:'Sign out',
|
||||
navOrders:'Orders', ordDetailTitle:'Order Detail', ordSecDetail:'Details',
|
||||
kOrderNo:'Order No.', kPlan:'Plan', kAmount:'Amount', kMethod:'Payment', kStatus:'Status',
|
||||
@@ -2019,7 +2045,7 @@ $('#ordBack').addEventListener('click', ()=>{ if(ordOverlay.dataset.screen==='de
|
||||
/* ---------- 通用子屏（顶栏铃铛→通知；账户→设置 / 联系 / 邀请 / 兑换；命名空间 sub） ---------- */
|
||||
const subOverlay = $('#subOverlay');
|
||||
let subToastTimer=null;
|
||||
const SUB_TITLE = { settings:'navSettings', contact:'navContact', notifications:'navNotifications', invite:'inviteTitle', redeem:'navRedeemCode', devices:'devMgmt' };
|
||||
const SUB_TITLE = { settings:'navSettings', routing:'navRouting', contact:'navContact', notifications:'navNotifications', invite:'inviteTitle', redeem:'navRedeemCode', devices:'devMgmt' };
|
||||
function subShow(name){
|
||||
document.querySelectorAll('#subOverlay .sub-screen').forEach(sc=>sc.classList.toggle('is-active', sc.dataset.sub===name));
|
||||
subOverlay.dataset.sub=name;
|
||||
@@ -2065,12 +2091,13 @@ document.querySelectorAll('.notif-row.is-expandable').forEach(function(row){
|
||||
});
|
||||
// 账户入口
|
||||
$('#rowSettings').addEventListener('click', ()=>subOpen('settings'));
|
||||
$('#rowRouting').addEventListener('click', ()=>subOpen('routing'));
|
||||
$('#rowContact').addEventListener('click', ()=>subOpen('contact'));
|
||||
$('#rowInvite').addEventListener('click', ()=>subOpen('invite'));
|
||||
$('#rowRedeem').addEventListener('click', ()=>subOpen('redeem'));
|
||||
$('#rowDevices').addEventListener('click', ()=>subOpen('devices'));
|
||||
// 返回 → 关闭回上一屏
|
||||
$('#subBack').addEventListener('click', subClose);
|
||||
$('#subBack').addEventListener('click', ()=>{ if(subOverlay.dataset.sub==='routing'){ subShow('settings'); } else { subClose(); } });
|
||||
// 复制反馈
|
||||
document.querySelectorAll('#subOverlay .sub-copy').forEach(b=>b.addEventListener('click', ()=>subToast(D().toastCopied.replace('{v}', b.dataset.copy))));
|
||||
// 演示开关（设置·连接组）
|
||||
|
||||
Reference in New Issue
Block a user