feat: 添加加载中提示,更新下载页面的显示逻辑

This commit is contained in:
2026-01-15 06:38:10 +07:00
parent e9fc86b956
commit 704706c643
5 changed files with 24 additions and 3 deletions

View File

@@ -1015,6 +1015,7 @@
"nativeAppDesc": "بالفعل أحدث إصدار", "nativeAppDesc": "بالفعل أحدث إصدار",
"notSupportedTitle": "المتصفح غير مدعوم", "notSupportedTitle": "المتصفح غير مدعوم",
"notSupportedDesc": "يرجى استخدام Chrome أو Safari أو Edge", "notSupportedDesc": "يرجى استخدام Chrome أو Safari أو Edge",
"loading": "جاري التحميل...",
"iosInstallHeader": "دليل التثبيت على iOS", "iosInstallHeader": "دليل التثبيت على iOS",
"iosInstallMessage": "اضغط على زر المشاركة في الأسفل واختر 'إضافة إلى الشاشة الرئيسية'", "iosInstallMessage": "اضغط على زر المشاركة في الأسفل واختر 'إضافة إلى الشاشة الرئيسية'",
"iosInstallButton": "حسناً", "iosInstallButton": "حسناً",

View File

@@ -1015,6 +1015,7 @@
"nativeAppDesc": "Already latest version", "nativeAppDesc": "Already latest version",
"notSupportedTitle": "Browser not supported", "notSupportedTitle": "Browser not supported",
"notSupportedDesc": "Please use Chrome, Safari, or Edge", "notSupportedDesc": "Please use Chrome, Safari, or Edge",
"loading": "Loading...",
"iosInstallHeader": "iOS Installation Guide", "iosInstallHeader": "iOS Installation Guide",
"iosInstallMessage": "Tap the share button at the bottom and select 'Add to Home Screen'", "iosInstallMessage": "Tap the share button at the bottom and select 'Add to Home Screen'",
"iosInstallButton": "Got it", "iosInstallButton": "Got it",

View File

@@ -1015,6 +1015,7 @@
"nativeAppDesc": "已经是最新版本,无需下载", "nativeAppDesc": "已经是最新版本,无需下载",
"notSupportedTitle": "当前浏览器暂不支持应用安装", "notSupportedTitle": "当前浏览器暂不支持应用安装",
"notSupportedDesc": "建议使用 Chrome、Safari 或 Edge 浏览器", "notSupportedDesc": "建议使用 Chrome、Safari 或 Edge 浏览器",
"loading": "加载中...",
"iosInstallHeader": "iOS 安装指引", "iosInstallHeader": "iOS 安装指引",
"iosInstallMessage": "请点击浏览器底部的分享按钮,然后选择\"添加到主屏幕\"", "iosInstallMessage": "请点击浏览器底部的分享按钮,然后选择\"添加到主屏幕\"",
"iosInstallButton": "知道了", "iosInstallButton": "知道了",

View File

@@ -1015,6 +1015,7 @@
"nativeAppDesc": "已經是最新版本,無需下載", "nativeAppDesc": "已經是最新版本,無需下載",
"notSupportedTitle": "當前瀏覽器暫不支持應用安裝", "notSupportedTitle": "當前瀏覽器暫不支持應用安裝",
"notSupportedDesc": "建議使用 Chrome、Safari 或 Edge 瀏覽器", "notSupportedDesc": "建議使用 Chrome、Safari 或 Edge 瀏覽器",
"loading": "加載中...",
"iosInstallHeader": "iOS 安裝指引", "iosInstallHeader": "iOS 安裝指引",
"iosInstallMessage": "請點擊瀏覽器底部的分享按鈕,然後選擇\"添加到主屏幕\"", "iosInstallMessage": "請點擊瀏覽器底部的分享按鈕,然後選擇\"添加到主屏幕\"",
"iosInstallButton": "知道了", "iosInstallButton": "知道了",

View File

@@ -29,13 +29,20 @@ const wasUninstalled = computed(() => {
return wasInstalled === "true" && !isInstalled.value; return wasInstalled === "true" && !isInstalled.value;
}); });
// 显示下载按钮的条件 // 显示下载按钮的条件:浏览器环境 + 未安装 + (能安装 或 非iOS)
const shouldShowDownloadButton = computed(() => { const shouldShowDownloadButton = computed(() => {
const result = platform === "browser" && !isInstalled.value; const result = platform === "browser" && !isInstalled.value && (canInstall.value || !isIOS);
console.log("[Download Page] shouldShowDownloadButton:", result); console.log("[Download Page] shouldShowDownloadButton:", result);
return result; return result;
}); });
// 是否显示不支持提示:浏览器环境 + 不能安装 + 非iOS
const shouldShowNotSupported = computed(() => {
const result = platform === "browser" && !canInstall.value && !isIOS && !isInstalled.value;
console.log("[Download Page] shouldShowNotSupported:", result);
return result;
});
// 处理安装 // 处理安装
async function handleInstall() { async function handleInstall() {
if (isIOSSafari) { if (isIOSSafari) {
@@ -243,7 +250,7 @@ watch(isInstalled, (installed) => {
</div> </div>
<!-- 浏览器不支持提示 --> <!-- 浏览器不支持提示 -->
<div v-else class="w-full max-w-md"> <div v-else-if="shouldShowNotSupported" class="w-full max-w-md">
<div class="bg-warning/10 border border-warning/20 rounded-2xl p-6 text-center"> <div class="bg-warning/10 border border-warning/20 rounded-2xl p-6 text-center">
<p class="text-sm text-text-600"> <p class="text-sm text-text-600">
{{ t("pwa.download.notSupportedTitle") }} {{ t("pwa.download.notSupportedTitle") }}
@@ -253,6 +260,16 @@ watch(isInstalled, (installed) => {
</p> </p>
</div> </div>
</div> </div>
<!-- 其他情况加载中或未知状态 -->
<div v-else class="w-full max-w-md">
<div class="bg-background-secondary rounded-2xl p-6 text-center">
<ion-spinner name="crescent" class="mx-auto mb-4" />
<p class="text-sm text-text-500">
{{ t("pwa.download.loading") }}
</p>
</div>
</div>
</div> </div>
</ion-content> </ion-content>
</ion-page> </ion-page>