落地页新增带系统识别的下载区(参考 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:
1 parent
fffc475758
commit
64bc8b1552
2 files changed
+158
No files matched your search
Vendored
+79
@@ -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>
|
||||
@@ -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>
|
||||
Reference in new issue
Block a user