feat(web): 下载区补 iPad + iOS 分测试版/正式版 + 需美区ID提示

按需求调整官网下载卡片:
- 补 iPad 卡片(tablet 图标,universal app→同 TestFlight 公测链接)。
- iOS/iPad 明确分「测试版」(TestFlight,可点)与「正式版」(App Store,
  敬请期待占位)——加 badge 标注(dl.beta/dl.stable i18n,6 语言)。
- 测试版卡加「?」悬浮提示「需美区 Apple ID」(dl.us_id i18n)。
- badge/「?」样式全走设计 token(--accent-subtle/--accent/--bg-subtle/
  --fg3),不硬编码颜色。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
wangjia
2026-09-11 09:02:43 +08:00
parent 18fb5177be
commit a913fe56fb
2 changed files with 31 additions and 5 deletions
+28 -5
View File
@@ -6,10 +6,12 @@ import { SITE } from '../config/site';
interface Props { t: T }
const { t } = Astro.props;
// href 缺省 = 本轮未接入下载iOS 走 TestFlight / Linux),按钮渲染为禁用态占位。
// Android + Windows + macOS 已由客户端 CI 产出真实产物并部署到 /downloads
const plats: { icon: string; name: string; ver: string; href?: string }[] = [
{ icon: 'smartphone', name: 'iOS', ver: 'iOS 15+', href: SITE.downloads.ios },
// href 缺省 = 未接入下载 → 禁用「敬请期待」占位。
// iOS/iPad 目前仅「测试版」(TestFlight 公开链接,需美区 Apple ID);「正式版」(App Store)敬请期待
const plats: { icon: string; name: string; ver: string; href?: string; badge?: string; note?: string }[] = [
{ icon: 'smartphone', name: 'iOS', ver: 'iOS 15+', href: SITE.downloads.ios, badge: t('dl.beta'), note: t('dl.us_id') },
{ icon: 'tablet', name: 'iPad', ver: 'iPadOS 15+', href: SITE.downloads.ios, badge: t('dl.beta'), note: t('dl.us_id') },
{ icon: 'smartphone', name: 'iOS / iPad', ver: 'App Store', badge: t('dl.stable') },
{ icon: 'smartphone', name: 'Android', ver: 'Android 9+', href: SITE.downloads.android },
{ icon: 'laptop', name: 'macOS', ver: 'macOS 12+', href: SITE.downloads.macos },
{ icon: 'monitor', name: 'Windows', ver: 'Win 10/11', href: SITE.downloads.windows },
@@ -27,7 +29,11 @@ const plats: { icon: string; name: string; ver: string; href?: string }[] = [
{plats.map((p) => (
<div class="dl">
<div class="ico"><Icon name={p.icon} /></div>
<div class="pn">{p.name}</div>
<div class="pn">
<span>{p.name}</span>
{p.badge && <span class="badge">{p.badge}</span>}
{p.note && <span class="q" title={p.note} tabindex="0" aria-label={p.note}>?</span>}
</div>
<div class="pv">{p.ver}</div>
{p.href ? (
<a class="gb" href={p.href}><Icon name="download" /><span>{t('dl.get')}</span></a>
@@ -39,3 +45,20 @@ const plats: { icon: string; name: string; ver: string; href?: string }[] = [
</div>
</div>
</section>
<style>
/* iOS/iPad 测试版徽标 + 「?需美区 Apple ID」提示;颜色全走设计 token,不硬编码。 */
.dl .pn { display: inline-flex; align-items: center; justify-content: center; gap: .38rem; flex-wrap: wrap; }
.dl .badge {
font-size: 11px; font-weight: 700; line-height: 1;
padding: .22em .5em; border-radius: 999px;
background: var(--accent-subtle); color: var(--accent);
font-family: var(--font-mono); letter-spacing: .02em;
}
.dl .q {
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px; border-radius: 50%;
font-size: 11px; font-weight: 700; cursor: help;
background: var(--bg-subtle); color: var(--fg3);
}
</style>
+3
View File
@@ -137,6 +137,9 @@ export const STRINGS: Record<string, Record<Lang, string>> = {
'dl.sub': { zh: '一个账户,所有设备同步。下载即用,无需配置。', en: 'One account syncs every device. Download and go.', ja: '一つのアカウントで全デバイスを同期。ダウンロードしてすぐ使えます。', ko: '하나의 계정으로 모든 기기를 동기화. 내려받아 바로 사용.', ru: 'Один аккаунт синхронизирует все устройства. Скачал — и в путь.', es: 'Una cuenta sincroniza todos tus dispositivos. Descarga y listo.' },
'dl.get': { zh: '下载', en: 'Download', ja: 'ダウンロード', ko: '다운로드', ru: 'Скачать', es: 'Descargar' },
'dl.soon': { zh: '敬请期待', en: 'Coming soon', ja: '近日公開', ko: '출시 예정', ru: 'Скоро', es: 'Próximamente' },
'dl.beta': { zh: '测试版', en: 'Beta', ja: 'ベータ版', ko: '베타', ru: 'Бета', es: 'Beta' },
'dl.stable': { zh: '正式版', en: 'Stable', ja: '正式版', ko: '정식판', ru: 'Релиз', es: 'Estable' },
'dl.us_id': { zh: '需美区 Apple ID', en: 'Requires a US Apple ID', ja: '米国 Apple ID が必要', ko: '미국 Apple ID 필요', ru: 'Нужен Apple ID (США)', es: 'Requiere un Apple ID de EE. UU.' },
'docs.eyebrow': { zh: '文档', en: 'Docs', ja: 'ドキュメント', ko: '문서', ru: 'Документация', es: 'Documentación' },
'docs.h': { zh: '需要帮助?都在这里', en: 'Need help? Its all here', ja: 'お困りですか?すべてここに', ko: '도움이 필요하세요? 모두 여기에', ru: 'Нужна помощь? Всё здесь', es: '¿Necesitas ayuda? Todo está aquí' },