mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-16 07:57:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

add cache management page

Browse Source
This commit is contained in:
MaysWind
2026-02-27 00:50:52 +08:00
parent 40a366e68d
commit d95fcd8b00
31 changed files with 685 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/mobile/SettingsPage.vue
+1
View File
@@ -108,6 +108,7 @@
</template>
</f7-list-item>
<f7-list-item :title="tt('Browser Cache Management')" link="/settings/browser_caches"></f7-list-item>
<f7-list-item link="#" no-chevron :title="tt('Switch to Desktop Version')" @click="switchToDesktopVersion"></f7-list-item>
<f7-list-item :title="tt('About')" link="/about" :after="version"></f7-list-item>
src/views/mobile/settings/BrowserCacheSettingPage.vue
+103
View File
@@ -0,0 +1,103 @@
<template>
<f7-page>
<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-nav-right>
</f7-navbar>
<f7-list strong inset dividers class="margin-vertical skeleton-text" v-if="loading">
<f7-list-item group-title :sortable="false">
<small>{{ tt('File Cache') }}</small>
</f7-list-item>
<f7-list-item title="Used storage" after="Count"></f7-list-item>
<f7-list-item title="Application Code" after="Count"></f7-list-item>
<f7-list-item title="Resource Files" after="Count"></f7-list-item>
<f7-list-item title="Map Data" after="Count"></f7-list-item>
<f7-list-item title="Others" after="Count"></f7-list-item>
</f7-list>
<f7-list strong inset dividers class="margin-vertical skeleton-text" v-if="loading">
<f7-list-item group-title :sortable="false">
<small>{{ tt('Exchange Rates Data') }}</small>
</f7-list-item>
<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-item group-title :sortable="false">
<small>{{ tt('File Cache') }}</small>
</f7-list-item>
<f7-list-item :title="tt('Used storage')" :after="fileCacheStatistics ? formatVolumeToLocalizedNumerals(fileCacheStatistics.totalCacheSize, 2) : '-'"></f7-list-item>
<f7-list-item :title="tt('Application Code')" :after="fileCacheStatistics ? formatVolumeToLocalizedNumerals(fileCacheStatistics.codeCacheSize, 2) : '-'"></f7-list-item>
<f7-list-item :title="tt('Resource Files')" :after="fileCacheStatistics ? formatVolumeToLocalizedNumerals(fileCacheStatistics.assetsCacheSize, 2) : '-'"></f7-list-item>
<f7-list-item :title="tt('Map Data')" :after="fileCacheStatistics ? formatVolumeToLocalizedNumerals(fileCacheStatistics.mapCacheSize, 2) : '-'"></f7-list-item>
<f7-list-item :title="tt('Others')" :after="fileCacheStatistics ? formatVolumeToLocalizedNumerals(fileCacheStatistics.othersCacheSize, 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('Exchange Rates Data') }}</small>
</f7-list-item>
<f7-list-item :title="tt('Used storage')" :after="formatVolumeToLocalizedNumerals(exchangeRatesCacheSize ?? 0, 2)"></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>
<f7-actions-group>
<f7-actions-button bold close>{{ tt('Cancel') }}</f7-actions-button>
</f7-actions-group>
</f7-actions>
</f7-page>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useI18n } from '@/locales/helpers.ts';
import { useI18nUIComponents } from '@/lib/ui/mobile.ts';
import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
import { type BrowserCacheStatistics } from '@/core/cache.ts';
import { loadBrowserCacheStatistics, clearAllBrowserCaches } from '@/lib/cache.ts';
const { tt, formatVolumeToLocalizedNumerals } = useI18n();
const { showConfirm, showToast } = useI18nUIComponents();
const exchangeRatesStore = useExchangeRatesStore();
const loading = ref<boolean>(true);
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;
}).catch(() => {
loading.value = false;
showToast('Failed to load browser cache statistics');
});
}
function clearFileCache(): void {
showConfirm('Are you sure you want to clear file cache?', () => {
clearAllBrowserCaches().then(() => {
location.reload();
});
});
}
reloadCacheStatistics();
</script>