官网下载区按系统分卡片（macOS / Windows / Linux）

2026-10-19 21:27:50 +08:00
1 parent 9e7135782b
commit 5ed36c2cf3
@@ -286,51 +286,39 @@
  </div>
 </section>

-<!-- ===================== 下载 / 形态 ===================== -->
-<section class="section" id="download">
+<!-- ===================== 下载 ===================== -->
+<section class="section alt" id="download">
  <div class="wrap">
-    <h2 class="sec-title">三种形态，同一套体验</h2>
-    <p class="sec-sub">客户端唯一形态是桌面 GUI；官网与文档随程序一并提供，无需部署。</p>
-    <div class="pricing three">
-      <div class="price-card featured">
-        <div class="plan-tag">推荐 · 主交付</div>
-        <div class="plan">桌面版</div>
-        <div class="price"><b>原生桌面</b></div>
-        <div class="plan-sub">macOS（Apple Silicon / Intel）· Windows 规划中</div>
-        <ul>
-          <li>✓ 双击启动，本地后端随应用自动拉起</li>
-          <li>✓ 安装包开箱即用，无需手动起服务</li>
-          <li>✓ 连接 / 查询 / 结果全功能</li>
-          <li>✓ 数据 100% 留在本机</li>
-        </ul>
-        <a class="btn btn-primary" href="https://opsxdb.rlwj.cn" target="_blank" rel="noopener">前往官网下载 ↗</a>
+    <h2 class="sec-title">下载 OpsxDB</h2>
+    <p class="sec-sub">v0.1 公测 · 安装即含 30 天全功能试用 · 个人非商业长期可用</p>
+    <div class="grid g4" id="dl-grid">
+      <div class="card dl-item" data-os="mac-arm">
+        <div class="card-icon">🍎</div>
+        <h3>macOS · Apple Silicon</h3>
+        <p>M1 / M2 / M3 / M4 · .dmg</p>
+        <a class="btn btn-primary dl-btn" href="mailto:hello@opsxapi.dev?subject=OpsxDB%20%E5%AE%89%E8%A3%85%E5%8C%85%E8%8E%B7%E5%8F%96%EF%BC%88Apple%20Silicon%EF%BC%89" data-href="/download/OpsxDB_aarch64.dmg">获取公测包</a>
      </div>
-      <div class="price-card">
-        <div class="plan">官网 + 文档</div>
-        <div class="price"><b>内置</b></div>
-        <div class="plan-sub">随程序提供，无需部署</div>
-        <ul>
-          <li>✓ 官网 <code>/</code> 与文档 <code>/docs</code> 随程序提供</li>
-          <li>✓ 文档支持全文搜索</li>
-          <li>✓ 浏览器只看站点与文档，不承载客户端</li>
-          <li>✓ 随版本发布自动更新</li>
-        </ul>
-        <a class="btn btn-primary" href="/docs" target="_blank" rel="noopener">浏览文档</a>
+      <div class="card dl-item" data-os="mac-x64">
+        <div class="card-icon">💻</div>
+        <h3>macOS · Intel</h3>
+        <p>x86_64 · .dmg</p>
+        <a class="btn btn-primary dl-btn" href="mailto:hello@opsxapi.dev?subject=OpsxDB%20%E5%AE%89%E8%A3%85%E5%8C%85%E8%8E%B7%E5%8F%96%EF%BC%88Intel%EF%BC%89" data-href="/download/OpsxDB_x64.dmg">获取公测包</a>
      </div>
-      <div class="price-card enterprise">
-        <div class="plan-tag dark">内网部署</div>
-        <div class="plan">企业内网版</div>
-        <div class="price"><b>无外联</b></div>
-        <div class="plan-sub">数据不出企业网</div>
-        <ul>
-          <li>✓ 单二进制 + 静态页，内网任意主机部署</li>
-          <li>✓ 默认仅回环监听，对外需显式配置</li>
-          <li>✓ SSH 隧道 / TLS 直达内网数据库</li>
-          <li>✓ 无遥测、无账号、无云依赖</li>
-        </ul>
-        <a class="btn btn-dark" href="/docs/security" target="_blank" rel="noopener">安全设计</a>
+      <div class="card dl-item" data-os="win">
+        <div class="card-icon">🪟</div>
+        <h3>Windows · x64</h3>
+        <p>Win 10+ · .msi / .exe</p>
+        <a class="btn btn-primary dl-btn" href="mailto:hello@opsxapi.dev?subject=OpsxDB%20%E5%AE%89%E8%A3%85%E5%8C%85%E8%8E%B7%E5%8F%96%EF%BC%88Windows%EF%BC%89" data-href="/download/OpsxDB_x64-setup.msi">获取公测包</a>
+      </div>
+      <div class="card dl-item" data-os="linux">
+        <div class="card-icon">🐧</div>
+        <h3>Linux</h3>
+        <p>Ubuntu / Debian · .deb / AppImage</p>
+        <a class="btn btn-primary dl-btn" href="mailto:hello@opsxapi.dev?subject=OpsxDB%20%E5%AE%89%E8%A3%85%E5%8C%85%E8%8E%B7%E5%8F%96%EF%BC%88Linux%EF%BC%89" data-href="/download/OpsxDB_amd64.AppImage">获取公测包</a>
      </div>
    </div>
+    <p class="footnote" style="text-align:center;margin-top:14px">已自动识别你的系统（高亮卡片）。公测期安装包经邮件发放；正式版发布后此处直接提供各平台安装包下载。</p>
+    <p class="footnote" style="text-align:center">安装包内嵌本地后端，双击即用、无需配置；企业内网部署见 <a href="/pricing">定价 · 企业私有化版</a>。</p>
  </div>
 </section>

@@ -394,5 +382,49 @@
  <div class="footer-bar">© 2026 OpsxDB · <a href="/pricing">定价</a> · <a href="/license">授权与激活</a> · <a href="/docs" target="_blank" rel="noopener">文档</a></div>
 </footer>

+<script>
+(function () {
+  function apply(os) {
+    var item = document.querySelector('.dl-item[data-os="' + os + '"]');
+    if (!item) return;
+    item.style.borderColor = 'var(--green,#059669)';
+    item.style.boxShadow = '0 0 0 3px color-mix(in srgb, var(--green,#059669) 15%, transparent)';
+    var badge = document.createElement('div');
+    badge.textContent = '✓ 检测到你的系统';
+    badge.style.cssText = 'color:var(--green,#059669);font-size:12px;font-weight:700;margin:8px 0 0';
+    item.querySelector('.dl-btn').after(badge);
+  }
+  var ua = navigator.userAgent, plat = navigator.platform || '';
+  if (/Win/i.test(plat) || /Windows/i.test(ua)) return apply('win');
+  if (/Linux|X11|Ubuntu/i.test(plat + ' ' + ua) && !/Android/i.test(ua)) return apply('linux');
+  if (/Mac|Darwin/i.test(plat) || /Macintosh/i.test(ua)) {
+    // 通道1：UA-Client Hints（Chromium）
+    if (navigator.userAgentData && navigator.userAgentData.getHighEntropyValues) {
+      navigator.userAgentData.getHighEntropyValues(['architecture']).then(function (info) {
+        apply(info.architecture === 'arm' ? 'mac-arm' : 'mac-x64');
+      }).catch(function () { apply(guessMac(ua)); });
+      return;
+    }
+    return apply(guessMac(ua));
+  }
+  apply('linux');
+  function guessMac(ua) {
+    // 通道2：WebGL 渲染器 —— Apple Silicon 的 ANGLE/Metal 渲染器名含 "Apple"
+    try {
+      var c = document.createElement('canvas');
+      var gl = c.getContext('webgl') || c.getContext('experimental-webgl');
+      var dbg = gl && gl.getExtension('WEBGL_debug_renderer_info');
+      var renderer = dbg ? String(gl.getParameter(dbg.UNMASKED_RENDERER_WEBGL)) : '';
+      if (/Apple/.test(renderer) && !/Intel/.test(renderer)) return 'mac-arm';
+      if (/Intel|AMD|Radeon|GeForce/i.test(renderer)) return 'mac-x64';
+    } catch (e) { /* ignore */ }
+    // 通道3：UA 字面量（Firefox 会真实标注 arm64；Chrome 恒为 Intel 字样不可信）
+    if (/arm64|aarch64/i.test(ua)) return 'mac-arm';
+    if (/x86_64/i.test(ua)) return 'mac-x64';
+    return 'mac-arm'; // 新机型兜底：近年 Mac 均为 Apple Silicon
+  }
+})();
+</script>
+
 </body>
 </html>