落地页新增带系统识别的下载区(参考 opsxshell 并增强)

- 四平台卡片: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 即直连下载;零断链保持
This commit is contained in:
logan committed 2026-10-16 22:11:22 +08:00
1 parent fffc475758
commit 64bc8b1552
2 files changed
+158

No files matched your search

+79
View File
@@ -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>
+79
View File
@@ -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>