design(prototype): 分流规则屏用 v2 真 ui-kit 重建 + 搬入配置说明文档(Task 3)
用 v2 设计系统真原子(.segswitch/.setting-row/.toggle/.card/.pill/.btn)建 screens/routing-rules.html(移动子屏 + 桌面设置窗口),替代独立 docs mockup。 配置说明文档搬入本分支 docs/。设计-first,待确认 4 取舍后出实现计划。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
wangjia
@@ -0,0 +1,163 @@
|
||||
<!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>
|
||||
|
||||
<div class="note">
|
||||
<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>
|
||||
Reference in New Issue
Block a user