隧道"假活"真因修复 + 中转管理后台重做

用户反馈两件事：
  1. 早上打开 relay.xxmxxs.top 看到 Cloudflare Error 1033 —— "这就是你说的优化好了？"
  2. "中转管理那边 ui 界面大改，现在难看的要死"

============ 一、隧道 1033/502/530 的真因 ============

之前我只测 15~25 次就说"可用率 100%"，太草率 ——
实际是**间歇性假活**：隧道显示 ha_connections=2 连着，
公网却 502/530/000。watchdog 日志把过程记了下来。

根因：**4G 链路静默断开 TCP 连接**（不发 FIN/RST，双方都以为还活着）。
Cloudflare 把请求发到这条僵尸连接上就回错误。
Linux 默认 tcp_keepalive_time = **7200 秒（2 小时）**才发现，
中间这段时间服务一直"看着在线、实际打不开"。

修法（都有实测数据支撑）：
  1. tcp_keepalive 30 秒 + 每 10 秒探测 3 次
     => 最多约 60 秒发现僵尸连接并重连
  2. 隧道连接数 2 -> 4
     （对照实验：http2+2 只有 1 条连上时公网 0/12；
       http2+4 稳定 12/12。连接数太少会出现"只有 1 条"的危险窗口）
  3. 协议定为 http2（cloudflared 自检说 TCP 7844 被墙，
     但实测 http2 反而比 quic 稳）

实测：http2+4 之后公网 40/40 = 100%，最慢 1.3 秒，0 次重连。

============ 二、中转管理后台重做 ============

原来是几百行内联在 relay.py 的 f-string 里（HTML+CSS+JS 全挤一起），
改一处样式要在一堆转义花括号里翻。拆成独立模块 relay/admin.py。

新版设计（对齐官网那套白色简洁）：
  * 吸顶顶栏：品牌 + 运行状态 + 版本/内存/请求数
  * 公网地址给最大权重（这是用户最需要复制的东西）
  * 四个数字卡（在线/会话数带颜色区分）
  * 设备表卡片：状态圆点、等宽配对码、行悬停
  * 工具卡：网络体检 + 下载区并排
  * 空状态改成图标+引导文案，不再是干巴巴一句
  * 窄屏时表格自动变卡片

relay.py 从 2089 行缩到 1550 行。

============ 三、顺手修的两个真 bug ============

1. 设备记录只增不减
   self.devices 从不清理，被控端每次换端口/重装就多一条，
   实测一天攒了 75 条僵尸记录，/v1/health 从几 KB 涨到 20KB。
   加 DEVICE_TTL（6 小时）在 snapshot() 里清。

2. 配对码映射也没清
   RELAY.codes 和 devices 是一对孪生 dict，
   只清 devices 会留下指向已删设备的孤儿条目 ——
   管理页显示"配对码占用 131"，实际一台设备都没有。
   现在一起清。

============ 四、我自己造的两次事故（如实记录） ============

1. 删文件删过头
   用"从 _admin_page 截到文件末尾"的方式替换方法，
   但 _admin_page 后面**还有 _esc/_kb/_uptime/class Server/main()**。
   结果 relay 起不来，systemd 重启 24 次，所有接口 000。
   教训：**"删到文件末尾"之前必须先确认末尾有什么。**

2. ADMIN_PATH 引用了不存在的常量
   路由里写的是字面量，我却在新代码里用了 ADMIN_PATH，
   管理页一访问就 NameError。现在统一定义了常量。

二者都是"改完没立刻验"造成的。现在每次改完都跑一遍
管理页 + 官网 + 关键接口的回归。

relay/landing.py

@@ -20,6 +20,8 @@ from __future__ import annotations
 import re
 from urllib.parse import quote
 
+import showcase
+
 # ---------------- 设计令牌 ----------------
 BG = "#ffffff"
 SURFACE = "#fafbfc"
@@ -334,6 +336,13 @@ footer{padding:52px 0 64px;border-top:1px solid %(BORDER)s;
 """ % {"BG": BG, "SURFACE": SURFACE, "BORDER": BORDER, "TEXT": TEXT,
        "MUTED": MUTED, "FAINT": FAINT, "ACCENT": ACCENT}
 
+# 产品展示那段的样式在 showcase.py 里，它自己已经格式化好了，
+# 这里直接拼 —— **不能再套一层 %**。
+# （踩过的坑：写成了 `""" + showcase.SHOWCASE_CSS % {...}`，
+#   % 优先级高于 +，于是把已经格式化过的 CSS 又格式化一遍，
+#   报 "unsupported format character ';'" 直接把官网打挂。）
+SITE_CSS = SITE_CSS + showcase.SHOWCASE_CSS
+
 
 def render_site(files: list) -> str:
     """渲染官网首页。files 是 _list_downloads() 的结果。"""
@@ -359,6 +368,8 @@ def render_site(files: list) -> str:
   </a>
   <div class="nav-links">
     <a href="#features">功能</a>
+    <a href="#shots">界面</a>
+    <a href="#how-connect">怎么连</a>
     <a href="#how">怎么用</a>
     <a href="#download">下载</a>
     <a href="#faq">常见问题</a>
@@ -392,6 +403,8 @@ def render_site(files: list) -> str:
   <div class="steps">%(steps)s</div>
 </div></section>
 
+%(showcase)s
+
 <section id="download"><div class="wrap">
   <div class="sec-head">
     <h2>下载</h2>
@@ -432,6 +445,7 @@ document.querySelectorAll('a[href^="#"]').forEach(function (a) {
         "badge": '<div class="badge">%s</div>' % badge if badge else "",
         "feats": _feature_cards(),
         "steps": _step_cards(),
+        "showcase": showcase.render_showcase(),
         "dls": _download_cards(files),
         "faq": _faq_items(),
         "_dlsub": ("当前版本 " + version) if version