support caching map data when map_data_fetch_proxy is set true

This commit is contained in:
MaysWind
2026-02-28 18:16:34 +08:00
parent d5dfdc8c05
commit 247181830c
35 changed files with 740 additions and 179 deletions
@@ -1,14 +1,14 @@
<template>
<f7-page>
<f7-page ptr @ptr:refresh="reloadCacheStatistics">
<f7-navbar>
<f7-nav-left :class="{ 'disabled': loading }" :back-link="tt('Back')"></f7-nav-left>
<f7-nav-title :title="tt('Browser Cache Management')"></f7-nav-title>
<f7-nav-right :class="{ 'disabled': loading }">
<f7-link icon-f7="ellipsis" :class="{ 'disabled': loading || !fileCacheStatistics }" @click="showMoreActionSheet = true"></f7-link>
<f7-link icon-f7="ellipsis" :class="{ 'disabled': loading || !isSupportedFileCache || !fileCacheStatistics }" @click="showMoreActionSheet = true"></f7-link>
</f7-nav-right>
</f7-navbar>
<f7-list strong inset dividers class="margin-vertical skeleton-text" v-if="loading">
<f7-list strong inset dividers class="margin-vertical skeleton-text" v-if="loading && isSupportedFileCache">
<f7-list-item group-title :sortable="false">
<small>{{ tt('File Cache') }}</small>
</f7-list-item>
@@ -26,7 +26,14 @@
<f7-list-item title="Used storage" after="Count"></f7-list-item>
</f7-list>
<f7-list strong inset dividers class="margin-vertical" v-if="!loading">
<f7-list strong inset dividers class="margin-vertical skeleton-text" v-if="loading">
<f7-list-item group-title :sortable="false">
<small>{{ tt('Cache Expiration Time') }}</small>
</f7-list-item>
<f7-list-item title="Map Data" after="Disable Map Cache" v-if="getMapProvider()"></f7-list-item>
</f7-list>
<f7-list strong inset dividers class="margin-vertical" v-if="!loading && isSupportedFileCache">
<f7-list-item group-title :sortable="false">
<small>{{ tt('File Cache') }}</small>
</f7-list-item>
@@ -44,10 +51,38 @@
<f7-list-item :title="tt('Used storage')" :after="formatVolumeToLocalizedNumerals(exchangeRatesCacheSize ?? 0, 2)"></f7-list-item>
</f7-list>
<f7-list strong inset dividers class="margin-vertical" v-if="!loading">
<f7-list-item group-title :sortable="false">
<small>{{ tt('Cache Expiration Time') }}</small>
</f7-list-item>
<f7-list-item
link="#"
:class="{ 'disabled': loading || !isSupportedFileCache || !fileCacheStatistics || isMapProviderUseExternalSDK() || !isMapDataFetchProxyEnabled() }"
:title="tt('Map Data')"
:after="findNameByValue(allMapCacheExpirationOptions, mapCacheExpiration)"
@click="showMapDataCacheExpirationPopup = true"
v-if="getMapProvider()"
>
<list-item-selection-popup value-type="item"
key-field="value" value-field="value"
title-field="name"
:title="tt('Cache Expiration for Map Data')"
:enable-filter="true"
:filter-placeholder="tt('Expiration Time')"
:filter-no-items-text="tt('No results')"
:items="allMapCacheExpirationOptions"
v-model:show="showMapDataCacheExpirationPopup"
v-model="mapCacheExpiration">
</list-item-selection-popup>
</f7-list-item>
</f7-list>
<f7-actions close-by-outside-click close-on-escape :opened="showMoreActionSheet" @actions:closed="showMoreActionSheet = false">
<f7-actions-group>
<f7-actions-button :class="{ 'disabled': loading || !fileCacheStatistics }"
@click="clearFileCache">{{ tt('Clear File Cache') }}</f7-actions-button>
<f7-actions-group v-if="isSupportedFileCache && fileCacheStatistics">
<f7-actions-button :class="{ 'disabled': loading || !isSupportedFileCache || !fileCacheStatistics }"
@click="clearMapCache">{{ tt('Clear Map Data Cache') }}</f7-actions-button>
<f7-actions-button :class="{ 'disabled': loading || !isSupportedFileCache || !fileCacheStatistics }"
@click="clearAllFileCache">{{ tt('Clear All File Cache') }}</f7-actions-button>
</f7-actions-group>
<f7-actions-group>
<f7-actions-button bold close>{{ tt('Cancel') }}</f7-actions-button>
@@ -62,42 +97,57 @@ import { ref } from 'vue';
import { useI18n } from '@/locales/helpers.ts';
import { useI18nUIComponents } from '@/lib/ui/mobile.ts';
import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
import { useAppBrowserCacheSettingPageBase } from '@/views/base/settings/AppBrowserCacheSettingPageBase.ts';
import { type BrowserCacheStatistics } from '@/core/cache.ts';
import { loadBrowserCacheStatistics, clearAllBrowserCaches } from '@/lib/cache.ts';
import { findNameByValue } from '@/lib/common.ts';
import { isMapProviderUseExternalSDK } from '@/lib/map/index.ts';
import { getMapProvider, isMapDataFetchProxyEnabled } from '@/lib/server_settings.ts';
const { tt, formatVolumeToLocalizedNumerals } = useI18n();
const { showConfirm, showToast } = useI18nUIComponents();
const { showConfirm } = useI18nUIComponents();
const exchangeRatesStore = useExchangeRatesStore();
const {
isSupportedFileCache,
loading,
fileCacheStatistics,
exchangeRatesCacheSize,
allMapCacheExpirationOptions,
mapCacheExpiration,
loadCacheStatistics,
clearMapDataCache,
clearAllBrowserCaches
} = useAppBrowserCacheSettingPageBase();
const loading = ref<boolean>(true);
const showMapDataCacheExpirationPopup = ref<boolean>(false);
const showMoreActionSheet = ref<boolean>(false);
const fileCacheStatistics = ref<BrowserCacheStatistics | undefined>(undefined);
const exchangeRatesCacheSize = ref<number | undefined>(undefined);
function reloadCacheStatistics(): void {
loading.value = true;
loadBrowserCacheStatistics().then(statistics => {
fileCacheStatistics.value = statistics;
exchangeRatesCacheSize.value = exchangeRatesStore.getExchangeRatesCacheSize();
loading.value = false;
function reloadCacheStatistics(done?: () => void): void {
loadCacheStatistics().then(() => {
if (done) {
done();
}
}).catch(() => {
loading.value = false;
showToast('Failed to load browser cache statistics');
if (done) {
done();
}
});
}
function clearFileCache(): void {
showConfirm('Are you sure you want to clear file cache?', () => {
function clearMapCache(): void {
showConfirm('Are you sure you want to clear map data cache?', () => {
clearMapDataCache().then(() => {
loadCacheStatistics();
});
});
}
function clearAllFileCache(): void {
showConfirm('Are you sure you want to clear all file cache?', () => {
clearAllBrowserCaches().then(() => {
location.reload();
});
});
}
reloadCacheStatistics();
loadCacheStatistics();
</script>