From 64bc8b1552aa3e2f934aa69ee52acb63d7446663 Mon Sep 17 00:00:00 2001
From: logan <logan@users.noreply.gitee.com>
Date: Fri, 16 Oct 2026 22:11:22 +0800
Subject: [PATCH] =?UTF-8?q?=E8=90=BD=E5=9C=B0=E9=A1=B5=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E5=B8=A6=E7=B3=BB=E7=BB=9F=E8=AF=86=E5=88=AB=E7=9A=84=E4=B8=8B?=
 =?UTF-8?q?=E8=BD=BD=E5=8C=BA=EF=BC=88=E5=8F=82=E8=80=83=20opsxshell=20?=
 =?UTF-8?q?=E5=B9=B6=E5=A2=9E=E5=BC=BA=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 四平台卡片：macOS Apple Silicon / macOS Intel / Windows x64 / Linux(deb/AppImage)，
  导航新增「下载」入口
- 平台识别三通道：UA-Client Hints 架构位 → WebGL 渲染器（Apple/Intel 判别，
  解决 Chrome UA 恒为 Intel 字样导致 Apple Silicon 误判）→ UA 字面量兜底；
  命中卡描边高亮 + 「✓ 检测到你的系统」徽章，本机实测正确识别 mac-arm
- 公测期按钮统一指 #contact 获取安装包，data-href 已埋各平台产物路径，
  正式发包后改 href 即直连下载；零断链保持
---
 homepage/dist/index.html | 79 ++++++++++++++++++++++++++++++++++++++++
 homepage/index.html      | 79 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 158 insertions(+)

diff --git a/homepage/dist/index.html b/homepage/dist/index.html
index f3cce15..b57d22e 100644
--- a/homepage/dist/index.html
+++ b/homepage/dist/index.html
@@ -49,6 +49,7 @@
       <a href="#protocols">协议</a>
       <a href="#exchange">导入导出</a>
       <a href="/pricing">定价</a>
+      <a href="#download">下载</a>
       <a href="/license">授权</a>
       <a href="/docs" target="_blank" rel="noopener">文档</a>
     </nav>
@@ -320,6 +321,41 @@
 </section>
 
 <!-- ===================== FAQ ===================== -->
+<!-- ===================== 下载 ===================== -->
+<section class="section alt" id="download">
+  <div class="wrap">
+    <h2 class="sec-title">下载 OpsxAPI</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="#contact" data-href="/download/OpsxAPI_aarch64.dmg">获取公测包</a>
+      </div>
+      <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="#contact" data-href="/download/OpsxAPI_x64.dmg">获取公测包</a>
+      </div>
+      <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="#contact" data-href="/download/OpsxAPI_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="#contact" data-href="/download/OpsxAPI_amd64.AppImage">获取公测包</a>
+      </div>
+    </div>
+    <p class="footnote" style="text-align:center;margin-top:14px">已自动识别你的系统（高亮卡片）。公测期安装包经邮件 / 微信群发放；正式版发布后此处直接提供各平台安装包下载。</p>
+  </div>
+</section>
+
 <section class="section" id="faq">
   <div class="wrap narrow">
     <h2 class="sec-title">购买常见问题</h2>
@@ -376,5 +412,48 @@
   <div class="footer-bar">© 2026 OpsxAPI · <a href="/terms" target="_blank" rel="noopener">服务条款</a> · <a href="/license">授权与激活</a></div>
 </footer>
 
+<script>
+(function () {
+  function apply(os) {
+    var item = document.querySelector('.dl-item[data-os="' + os + '"]');
+    if (!item) return;
+    item.style.borderColor = 'var(--accent,#2563eb)';
+    item.style.boxShadow = '0 0 0 3px color-mix(in srgb, var(--accent,#2563eb) 15%, transparent)';
+    var badge = document.createElement('div');
+    badge.textContent = '✓ 检测到你的系统';
+    badge.style.cssText = 'color:var(--accent,#2563eb);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>
diff --git a/homepage/index.html b/homepage/index.html
index f3cce15..b57d22e 100644
--- a/homepage/index.html
+++ b/homepage/index.html
@@ -49,6 +49,7 @@
       <a href="#protocols">协议</a>
       <a href="#exchange">导入导出</a>
       <a href="/pricing">定价</a>
+      <a href="#download">下载</a>
       <a href="/license">授权</a>
       <a href="/docs" target="_blank" rel="noopener">文档</a>
     </nav>
@@ -320,6 +321,41 @@
 </section>
 
 <!-- ===================== FAQ ===================== -->
+<!-- ===================== 下载 ===================== -->
+<section class="section alt" id="download">
+  <div class="wrap">
+    <h2 class="sec-title">下载 OpsxAPI</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="#contact" data-href="/download/OpsxAPI_aarch64.dmg">获取公测包</a>
+      </div>
+      <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="#contact" data-href="/download/OpsxAPI_x64.dmg">获取公测包</a>
+      </div>
+      <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="#contact" data-href="/download/OpsxAPI_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="#contact" data-href="/download/OpsxAPI_amd64.AppImage">获取公测包</a>
+      </div>
+    </div>
+    <p class="footnote" style="text-align:center;margin-top:14px">已自动识别你的系统（高亮卡片）。公测期安装包经邮件 / 微信群发放；正式版发布后此处直接提供各平台安装包下载。</p>
+  </div>
+</section>
+
 <section class="section" id="faq">
   <div class="wrap narrow">
     <h2 class="sec-title">购买常见问题</h2>
@@ -376,5 +412,48 @@
   <div class="footer-bar">© 2026 OpsxAPI · <a href="/terms" target="_blank" rel="noopener">服务条款</a> · <a href="/license">授权与激活</a></div>
 </footer>
 
+<script>
+(function () {
+  function apply(os) {
+    var item = document.querySelector('.dl-item[data-os="' + os + '"]');
+    if (!item) return;
+    item.style.borderColor = 'var(--accent,#2563eb)';
+    item.style.boxShadow = '0 0 0 3px color-mix(in srgb, var(--accent,#2563eb) 15%, transparent)';
+    var badge = document.createElement('div');
+    badge.textContent = '✓ 检测到你的系统';
+    badge.style.cssText = 'color:var(--accent,#2563eb);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>