diff --git a/docs/configurable-proxy-prototype.html b/docs/configurable-proxy-prototype.html index a8b24e7..6ddbf48 100644 --- a/docs/configurable-proxy-prototype.html +++ b/docs/configurable-proxy-prototype.html @@ -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}}

Pangolin 可配置分流 · 交互原型

-

Task 3 设计稿 · 让用户像 Shadowrocket 那样自定义"哪些流量直连 / 走隧道 / 拒绝"。以下是移动端三块核心界面的视觉原型(mockup,非真实数据)。配套规则模型与实现见 配置说明文档 →

+

Task 3 设计稿 · 让用户像 Shadowrocket 那样自定义"哪些流量直连 / 走隧道 / 拒绝"。下含移动端三屏 + 桌面端(macOS/Windows)设置窗口的视觉原型(mockup,非真实数据),两端共用同一套服务端路由档案。配套规则模型与实现见 配置说明文档 →

@@ -182,6 +216,66 @@ FINAL,PROXY
+

桌面端(macOS / Windows)· 设置窗口

+

桌面有更大空间:左侧栏 + 规则表格(可内联编辑/拖动排序)+ 右侧实时预览生成的 sing-box 规则。同一套档案模型,与移动端共用服务端。

+
+
Pangolin — 设置
+
+
+
通用
+
节点
+
分流规则
+
账户
+
统计
+
关于
+
+
+
+
分流规则
+
全局代理智能分流全部直连
+
+
+ + + +
+ + + + + + + +
类型值动作说明启用
≡域名后缀git.51yanmei.com直连CI 编译源
≡域名后缀aliyun.com直连maven 镜像
≡域名后缀github.com走隧道—
≡GeoSitecategory-ads拒绝广告/追踪
≡IP-CIDR35.190.0.0/16走隧道—
+
＋ 添加规则⇪ 从文本导入↺ 重置默认FINAL 兜底:走隧道
+
+
+
实时预览 · route.rules
+ 
[
+ {"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"
+
+
+
+

桌面端与移动端共用同一份服务端路由档案——在任一端改,另一端下次连接生效(per-user 同步)。桌面多了内联表格编辑与实时预览,适合高级用户。

+

三块界面在讲什么

diff --git a/docs/index.html b/docs/index.html index 9e11b63..c272cee 100644 --- a/docs/index.html +++ b/docs/index.html @@ -86,7 +86,7 @@
客户端可配置分流(类 Shadowrocket)设计 HTML
-
让用户自定义路由规则(域名/IP/GeoIP/GeoSite × 直连/走隧道/拒绝),有序首命中。架构铁律下走「服务端 per-user 路由档案」:App 编规则→存档案→connect 时 server 翻译进 sing-box route.rules。含规则模型、优先级层级、直连真生效(route_exclude/reverse_mapping)、API、校验兜底、分期。配套交互原型。Task 3,待确认。
+
让用户自定义路由规则(域名/IP/GeoIP/GeoSite × 直连/走隧道/拒绝),有序首命中。架构铁律下走「服务端 per-user 路由档案」:App 编规则→存档案→connect 时 server 翻译进 sing-box route.rules。含规则模型、优先级层级、直连真生效(route_exclude/reverse_mapping)、API、校验兜底、分期。配套交互原型(移动端三屏 + 桌面端设置窗口)。Task 3,待确认。
docs/configurable-proxy-spec.html