docs(configurable-proxy): 加桌面端(macOS/Windows)设置窗口原型

移动三屏之外补桌面端:左侧栏 + 规则表格(内联编辑/拖动排序)+ 右侧实时预览生成的 sing-box route.rules。两端共用同一套服务端 per-user 路由档案。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01A79VtQA1BwTuQN1ThpvYpo
2026-07-27 00:41:12 +08:00
parent 45158c8b99
commit 9772db7d12
2 changed files with 96 additions and 2 deletions
@@ -81,12 +81,46 @@
  th,td{border:1px solid var(--border);padding:7px 10px;text-align:left;vertical-align:top}
  th{background:var(--panel2);color:var(--accent2);font-weight:600}
  td code{white-space:nowrap}
+
+  /* desktop window */
+  .win{border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:0 14px 44px rgba(0,0,0,.45);background:var(--bg);max-width:1000px}
+  .titlebar{height:38px;background:var(--panel2);display:flex;align-items:center;padding:0 14px;border-bottom:1px solid var(--border)}
+  .dots{display:flex;gap:8px} .dots i{width:12px;height:12px;border-radius:50%;background:#3a3f4b;display:block}
+  .dots i:nth-child(1){background:#e0655a}.dots i:nth-child(2){background:#e0b84f}.dots i:nth-child(3){background:#5ec27a}
+  .wt{flex:1;text-align:center;font-size:13px;color:var(--fg2);font-weight:600;margin-left:-40px}
+  .winbody{display:flex;height:560px}
+  .sidebar{width:172px;background:var(--panel);border-right:1px solid var(--border);padding:12px 8px;flex:0 0 auto}
+  .si{padding:9px 12px;border-radius:8px;font-size:13.5px;color:var(--fg2);margin-bottom:2px}
+  .si.on{background:var(--accent);color:#1a1206;font-weight:600}
+  .content{flex:1;min-width:0;padding:18px 20px;overflow-y:auto;display:flex;flex-direction:column}
+  .chead{display:flex;align-items:center;gap:16px;margin-bottom:14px}
+  .ctitle{font-size:18px;font-weight:700}
+  .modeseg{display:flex;background:var(--panel2);border-radius:9px;padding:3px;margin-left:auto}
+  .modeseg span{font-size:12.5px;padding:6px 14px;border-radius:7px;color:var(--fg2);font-weight:600}
+  .modeseg span.on{background:var(--accent);color:#1a1206}
+  .binline{display:flex;gap:18px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:11px 14px;margin-bottom:14px;font-size:13px;color:var(--fg2)}
+  .binline label{display:flex;align-items:center;gap:7px}
+  .tg{width:34px;height:20px;border-radius:14px;background:var(--accent);position:relative;display:inline-block}
+  .tg.off{background:var(--panel2)} .tg::after{content:"";position:absolute;top:2px;left:16px;width:16px;height:16px;border-radius:50%;background:#fff}.tg.off::after{left:2px}
+  .ruletable{border-collapse:collapse;width:100%;font-size:13px;display:table;margin:0}
+  .ruletable th{background:var(--panel2);color:var(--accent2);font-weight:600;padding:8px 10px;text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;border:1px solid var(--border)}
+  .ruletable td{padding:9px 10px;border:1px solid var(--border);vertical-align:middle}
+  .ruletable tr:hover td{background:rgba(95,176,201,.05)}
+  .ruletable .g{color:var(--fg2);cursor:grab;opacity:.55}
+  .ruletable .v{font-family:var(--mono);font-size:12.5px}
+  .ty{font-size:11px;padding:2px 8px;border-radius:6px;background:var(--panel2);color:var(--fg2);font-family:var(--mono)}
+  .tablefoot{display:flex;align-items:center;gap:16px;margin-top:12px;font-size:13px;color:var(--accent);flex-wrap:wrap}
+  .tablefoot .fin{margin-left:auto;color:var(--fg2)}
+  .preview{width:250px;flex:0 0 auto;border-left:1px solid var(--border);background:var(--panel);padding:14px}
+  .pvh{font-size:11.5px;color:var(--fg2);text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px}
+  .preview pre{font-size:11px;line-height:1.5;padding:11px;margin:0}
+  @media (max-width:820px){.preview{display:none}}
 </style>
 </head>
 <body>
 <div class="wrap">
  <h1>Pangolin 可配置分流 · 交互原型</h1>
-  <p class="lead">Task 3 设计稿 · 让用户像 Shadowrocket 那样自定义"哪些流量直连 / 走隧道 / 拒绝"。以下是移动端三块核心界面的视觉原型(mockup,非真实数据)。配套规则模型与实现见 <a href="configurable-proxy-spec.html" style="color:var(--accent2)">配置说明文档 →</a></p>
+  <p class="lead">Task 3 设计稿 · 让用户像 Shadowrocket 那样自定义"哪些流量直连 / 走隧道 / 拒绝"。下含<b>移动端</b>三屏 + <b>桌面端(macOS/Windows)</b>设置窗口的视觉原型(mockup,非真实数据),两端共用同一套服务端路由档案。配套规则模型与实现见 <a href="configurable-proxy-spec.html" style="color:var(--accent2)">配置说明文档 →</a></p>

  <div class="phones">
    <!-- Screen 1: 分流规则主屏 -->
@@ -182,6 +216,66 @@ FINAL,PROXY</pre></div>
    </div></div>
  </div>

+  <h2>桌面端(macOS / Windows)· 设置窗口</h2>
+  <p class="lead" style="margin-bottom:16px">桌面有更大空间:左侧栏 + 规则<b>表格</b>(可内联编辑/拖动排序)+ 右侧<b>实时预览</b>生成的 sing-box 规则。同一套档案模型,与移动端共用服务端。</p>
+  <div class="win">
+    <div class="titlebar"><span class="dots"><i></i><i></i><i></i></span><span class="wt">Pangolin — 设置</span></div>
+    <div class="winbody">
+      <div class="sidebar">
+        <div class="si">通用</div>
+        <div class="si">节点</div>
+        <div class="si on">分流规则</div>
+        <div class="si">账户</div>
+        <div class="si">统计</div>
+        <div class="si">关于</div>
+      </div>
+      <div class="content">
+        <div class="chead">
+          <div class="ctitle">分流规则</div>
+          <div class="modeseg"><span>全局代理</span><span class="on">智能分流</span><span>全部直连</span></div>
+        </div>
+        <div class="binline">
+          <label>国内直连(GeoIP/GeoSite CN)<span class="tg"></span></label>
+          <label>LAN / 私网直连 <span class="lock">🔒 强制</span></label>
+          <label>私有服务走隧道 <span class="lock">🔒 服务端</span></label>
+        </div>
+        <table class="ruletable">
+          <tr><th style="width:26px"></th><th style="width:130px">类型</th><th>值</th><th style="width:96px">动作</th><th style="width:150px">说明</th><th style="width:52px">启用</th></tr>
+          <tr><td class="g">≡</td><td><span class="ty">域名后缀</span></td><td class="v">git.51yanmei.com</td><td><span class="tag t-direct">直连</span></td><td style="color:var(--fg2);font-size:12px">CI 编译源</td><td><span class="tg" style="transform:scale(.85)"></span></td></tr>
+          <tr><td class="g">≡</td><td><span class="ty">域名后缀</span></td><td class="v">aliyun.com</td><td><span class="tag t-direct">直连</span></td><td style="color:var(--fg2);font-size:12px">maven 镜像</td><td><span class="tg" style="transform:scale(.85)"></span></td></tr>
+          <tr><td class="g">≡</td><td><span class="ty">域名后缀</span></td><td class="v">github.com</td><td><span class="tag t-proxy">走隧道</span></td><td style="color:var(--fg2);font-size:12px">—</td><td><span class="tg" style="transform:scale(.85)"></span></td></tr>
+          <tr><td class="g">≡</td><td><span class="ty">GeoSite</span></td><td class="v">category-ads</td><td><span class="tag t-reject">拒绝</span></td><td style="color:var(--fg2);font-size:12px">广告/追踪</td><td><span class="tg" style="transform:scale(.85)"></span></td></tr>
+          <tr><td class="g">≡</td><td><span class="ty">IP-CIDR</span></td><td class="v">35.190.0.0/16</td><td><span class="tag t-proxy">走隧道</span></td><td style="color:var(--fg2);font-size:12px">—</td><td><span class="tg off" style="transform:scale(.85)"></span></td></tr>
+        </table>
+        <div class="tablefoot"><span>＋ 添加规则</span><span>⇪ 从文本导入</span><span>↺ 重置默认</span><span class="fin">FINAL 兜底:<span class="tag t-proxy">走隧道</span></span></div>
+      </div>
+      <div class="preview">
+        <div class="pvh">实时预览 · route.rules</div>
+        <pre>[
+ {"action":"hijack-dns",
+  "port":[53]},
+ {"ip_cidr":["10.0.0.0/8",
+   "192.168.0.0/16",...],
+  "outbound":"direct"},
+ {"domain_suffix":
+   ["git.51yanmei.com",
+    "aliyun.com"],
+  "outbound":"direct"},
+ {"domain_suffix":
+   ["github.com"],
+  "outbound":"auto"},
+ {"rule_set":["geosite-ads"],
+  "outbound":"block"},
+ {"rule_set":
+   ["geoip-cn","geosite-cn"],
+  "outbound":"direct"}
+]
+final: "auto"</pre>
+      </div>
+    </div>
+  </div>
+  <p class="lead" style="margin-top:14px">桌面端与移动端<b>共用同一份服务端路由档案</b>——在任一端改,另一端下次连接生效(per-user 同步)。桌面多了内联表格编辑与实时预览,适合高级用户。</p>
+
  <h2>三块界面在讲什么</h2>
  <div class="cols">
    <div class="note">
@@ -86,7 +86,7 @@
 </a>
 <a class="doc" href="configurable-proxy-spec.html">
  <div class="t">客户端可配置分流(类 Shadowrocket)设计 <span class="tag html">HTML</span></div>
-  <div class="d">让用户自定义路由规则(域名/IP/GeoIP/GeoSite × 直连/走隧道/拒绝),有序首命中。架构铁律下走「服务端 per-user 路由档案」:App 编规则→存档案→connect 时 server 翻译进 sing-box route.rules。含规则模型、优先级层级、直连真生效(route_exclude/reverse_mapping)、API、校验兜底、分期。配套<a href="configurable-proxy-prototype.html">交互原型</a>。Task 3,待确认。</div>
+  <div class="d">让用户自定义路由规则(域名/IP/GeoIP/GeoSite × 直连/走隧道/拒绝),有序首命中。架构铁律下走「服务端 per-user 路由档案」:App 编规则→存档案→connect 时 server 翻译进 sing-box route.rules。含规则模型、优先级层级、直连真生效(route_exclude/reverse_mapping)、API、校验兜底、分期。配套<a href="configurable-proxy-prototype.html">交互原型(移动端三屏 + 桌面端设置窗口)</a>。Task 3,待确认。</div>
  <div class="path">docs/configurable-proxy-spec.html</div>
 </a>
 <a class="doc" href="superpowers/specs/2026-06-21-windows-client-design.md">