migrate about page to composition API and typescript

src/core/datetime.ts

@@ -499,7 +499,3 @@ export class DateRange implements TypeAndName {
         return dateRange?.isBillingCycle || false;
     }
 }
-
-export type AllDateTimeFormatMap = Record<string, LongDateFormat> | Record<string, ShortDateFormat> | Record<string, LongTimeFormat> | Record<string, ShortTimeFormat>;
-export type AllDateTimeFormatArray = LongDateFormat[] | ShortDateFormat[] | LongTimeFormat[] | ShortTimeFormat[];
-export type AllDateTimeFormatType = LongDateFormat | ShortDateFormat | LongTimeFormat | ShortTimeFormat;

src/global.d.ts

@@ -3,7 +3,14 @@ declare const __EZBOOKKEEPING_VERSION__: string;
 declare const __EZBOOKKEEPING_BUILD_UNIX_TIME__: string;
 declare const __EZBOOKKEEPING_BUILD_COMMIT_HASH__: string;
 declare const __EZBOOKKEEPING_LICENSE__: string;
-declare const __EZBOOKKEEPING_THIRD_PARTY_LICENSES__: string[];
+declare const __EZBOOKKEEPING_THIRD_PARTY_LICENSES__: LicenseInfo[];
+
+declare interface LicenseInfo {
+    name: string;
+    copyright?: string;
+    url?: string;
+    licenseUrl?: string;
+}
 
 interface Window {
     EZBOOKKEEPING_SERVER_SETTINGS?: {

src/lib/datetime.ts

@@ -11,9 +11,8 @@ import {
     type TimeDifference,
     type RecentMonthDateRange,
     type LocalizedRecentMonthDateRange,
-    type AllDateTimeFormatMap,
-    type AllDateTimeFormatArray,
-    type AllDateTimeFormatType,
+    type DateFormat,
+    type TimeFormat,
     YearQuarterUnixTime,
     YearMonthUnixTime,
     Month,
@@ -477,11 +476,11 @@ export function getAllMonthsStartAndEndUnixTimes(startYearMonth: YearMonth | str
     return allYearMonthTimes;
 }
 
-export function getDateTimeFormatType(allFormatMap: AllDateTimeFormatMap, allFormatArray: AllDateTimeFormatArray, localeDefaultFormatTypeName: string, systemDefaultFormatType: AllDateTimeFormatType, formatTypeValue: number): AllDateTimeFormatType {
+export function getDateTimeFormatType<T extends DateFormat | TimeFormat>(allFormatMap: Record<string, T>, allFormatArray: T[], formatTypeValue: number, languageDefaultTypeName: string, systemDefaultFormatType: T): T {
     if (formatTypeValue > LANGUAGE_DEFAULT_DATE_TIME_FORMAT_VALUE && allFormatArray[formatTypeValue - 1] && allFormatArray[formatTypeValue - 1].key) {
         return allFormatArray[formatTypeValue - 1];
-    } else if (formatTypeValue === LANGUAGE_DEFAULT_DATE_TIME_FORMAT_VALUE && allFormatMap[localeDefaultFormatTypeName] && allFormatMap[localeDefaultFormatTypeName].key) {
-        return allFormatMap[localeDefaultFormatTypeName];
+    } else if (formatTypeValue === LANGUAGE_DEFAULT_DATE_TIME_FORMAT_VALUE && allFormatMap[languageDefaultTypeName] && allFormatMap[languageDefaultTypeName].key) {
+        return allFormatMap[languageDefaultTypeName];
     } else {
         return systemDefaultFormatType;
     }

src/lib/licenses.ts

@@ -2,6 +2,6 @@ export function getLicense(): string {
     return __EZBOOKKEEPING_LICENSE__;
 }
 
-export function getThirdPartyLicenses(): string[] {
+export function getThirdPartyLicenses(): LicenseInfo[] {
     return __EZBOOKKEEPING_THIRD_PARTY_LICENSES__ || [];
 }

src/locales/helper.js

@@ -456,13 +456,13 @@ function getI18nShortMonthDayFormat(translateFn, formatTypeValue) {
 
 function isLongDateMonthAfterYear(translateFn, formatTypeValue) {
     const defaultLongDateFormatTypeName = translateFn('default.longDateFormat');
-    const type = getDateTimeFormatType(LongDateFormat.all(), LongDateFormat.values(), defaultLongDateFormatTypeName, LongDateFormat.Default, formatTypeValue);
+    const type = getDateTimeFormatType(LongDateFormat.all(), LongDateFormat.values(), formatTypeValue, defaultLongDateFormatTypeName, LongDateFormat.Default);
     return type.isMonthAfterYear;
 }
 
 function isShortDateMonthAfterYear(translateFn, formatTypeValue) {
     const defaultShortDateFormatTypeName = translateFn('default.shortDateFormat');
-    const type = getDateTimeFormatType(ShortDateFormat.all(), ShortDateFormat.values(), defaultShortDateFormatTypeName, ShortDateFormat.Default, formatTypeValue);
+    const type = getDateTimeFormatType(ShortDateFormat.all(), ShortDateFormat.values(), formatTypeValue, defaultShortDateFormatTypeName, ShortDateFormat.Default);
     return type.isMonthAfterYear;
 }
 
@@ -489,25 +489,25 @@ function formatYearQuarter(translateFn, year, quarter) {
 
 function isLongTime24HourFormat(translateFn, formatTypeValue) {
     const defaultLongTimeFormatTypeName = translateFn('default.longTimeFormat');
-    const type = getDateTimeFormatType(LongTimeFormat.all(), LongTimeFormat.values(), defaultLongTimeFormatTypeName, LongTimeFormat.Default, formatTypeValue);
+    const type = getDateTimeFormatType(LongTimeFormat.all(), LongTimeFormat.values(), formatTypeValue, defaultLongTimeFormatTypeName, LongTimeFormat.Default);
     return type.is24HourFormat;
 }
 
 function isLongTimeMeridiemIndicatorFirst(translateFn, formatTypeValue) {
     const defaultLongTimeFormatTypeName = translateFn('default.longTimeFormat');
-    const type = getDateTimeFormatType(LongTimeFormat.all(), LongTimeFormat.values(), defaultLongTimeFormatTypeName, LongTimeFormat.Default, formatTypeValue);
+    const type = getDateTimeFormatType(LongTimeFormat.all(), LongTimeFormat.values(), formatTypeValue, defaultLongTimeFormatTypeName, LongTimeFormat.Default);
     return type.isMeridiemIndicatorFirst;
 }
 
 function isShortTime24HourFormat(translateFn, formatTypeValue) {
     const defaultShortTimeFormatTypeName = translateFn('default.shortTimeFormat');
-    const type = getDateTimeFormatType(ShortTimeFormat.all(), ShortTimeFormat.values(), defaultShortTimeFormatTypeName, ShortTimeFormat.Default, formatTypeValue);
+    const type = getDateTimeFormatType(ShortTimeFormat.all(), ShortTimeFormat.values(), formatTypeValue, defaultShortTimeFormatTypeName, ShortTimeFormat.Default);
     return type.is24HourFormat;
 }
 
 function isShortTimeMeridiemIndicatorFirst(translateFn, formatTypeValue) {
     const defaultShortTimeFormatTypeName = translateFn('default.shortTimeFormat');
-    const type = getDateTimeFormatType(ShortTimeFormat.all(), ShortTimeFormat.values(), defaultShortTimeFormatTypeName, ShortTimeFormat.Default, formatTypeValue);
+    const type = getDateTimeFormatType(ShortTimeFormat.all(), ShortTimeFormat.values(), formatTypeValue, defaultShortTimeFormatTypeName, ShortTimeFormat.Default);
     return type.isMeridiemIndicatorFirst;
 }
 
@@ -537,8 +537,7 @@ function getDateTimeFormats(translateFn, allFormatMap, allFormatArray, localeFor
 }
 
 function getDateTimeFormat(translateFn, allFormatMap, allFormatArray, localeFormatPathPrefix, localeDefaultFormatTypeName, systemDefaultFormatType, formatTypeValue) {
-    const type = getDateTimeFormatType(allFormatMap, allFormatArray,
-        localeDefaultFormatTypeName, systemDefaultFormatType, formatTypeValue);
+    const type = getDateTimeFormatType(allFormatMap, allFormatArray, formatTypeValue, localeDefaultFormatTypeName, systemDefaultFormatType);
     return translateFn(`${localeFormatPathPrefix}.${type.key}`);
 }
 

src/locales/helpers.ts

@@ -5,9 +5,15 @@ import { type LanguageInfo, allLanguages, DEFAULT_LANGUAGE } from '@/locales/ind
 
 import {
     type LocalizedMeridiemIndicator,
+    type DateFormat,
+    type TimeFormat,
     Month,
     WeekDay,
-    MeridiemIndicator
+    MeridiemIndicator,
+    LongDateFormat,
+    ShortDateFormat,
+    LongTimeFormat,
+    ShortTimeFormat
 } from '@/core/datetime.ts';
 
 import type { LocaleDefaultSettings } from '@/core/setting.ts';
@@ -22,12 +28,16 @@ import {
 
 import {
     isPM,
-    getTimezoneOffset
+    formatUnixTime,
+    getTimezoneOffset,
+    getDateTimeFormatType
 } from '@/lib/datetime.ts';
 
 import logger from '@/lib/logger.ts';
 import services from '@/lib/services.ts';
 
+import { useUserStore } from '@/stores/user.ts';
+
 export interface LocalizedErrorParameter {
     key: string;
     localized: boolean;
@@ -65,6 +75,8 @@ export function getI18nOptions(): object {
 export function useI18n() {
     const { t, locale } = useVueI18n();
 
+    const userStore = useUserStore();
+
     // private functions
     function getLanguageInfo(languageKey: string): LanguageInfo | undefined {
         return allLanguages[languageKey];
@@ -223,6 +235,51 @@ export function useI18n() {
         return ret;
     }
 
+    function getLocalizedDateTimeFormat<T extends DateFormat | TimeFormat>(type: string, allFormatMap: Record<string, T>, allFormatArray: T[], formatTypeValue: number, languageDefaultTypeNameKey: string, systemDefaultFormatType: T): string {
+        const formatType = getDateTimeFormatType(allFormatMap, allFormatArray, formatTypeValue, t(`default.${languageDefaultTypeNameKey}`), systemDefaultFormatType);
+        return t(`format.${type}.${formatType.key}`);
+    }
+
+    function getLocalizedLongDateFormat(): string {
+        return getLocalizedDateTimeFormat<LongDateFormat>('longDate', LongDateFormat.all(), LongDateFormat.values(), userStore.currentUserLongDateFormat, 'longDateFormat', LongDateFormat.Default);
+    }
+
+    function getLocalizedShortDateFormat(): string {
+        return getLocalizedDateTimeFormat<ShortDateFormat>('shortDate', ShortDateFormat.all(), ShortDateFormat.values(), userStore.currentUserShortDateFormat, 'shortDateFormat', ShortDateFormat.Default);
+    }
+
+    function getLocalizedLongYearFormat(): string {
+        return getLocalizedDateTimeFormat<LongDateFormat>('longYear', LongDateFormat.all(), LongDateFormat.values(), userStore.currentUserLongDateFormat, 'longDateFormat', LongDateFormat.Default);
+    }
+
+    function getLocalizedShortYearFormat(): string {
+        return getLocalizedDateTimeFormat<ShortDateFormat>('shortYear', ShortDateFormat.all(), ShortDateFormat.values(), userStore.currentUserShortDateFormat, 'shortDateFormat', ShortDateFormat.Default);
+    }
+
+    function getLocalizedLongYearMonthFormat(): string {
+        return getLocalizedDateTimeFormat<LongDateFormat>('longYearMonth', LongDateFormat.all(), LongDateFormat.values(), userStore.currentUserLongDateFormat, 'longDateFormat', LongDateFormat.Default);
+    }
+
+    function getLocalizedShortYearMonthFormat(): string {
+        return getLocalizedDateTimeFormat<ShortDateFormat>('shortYearMonth', ShortDateFormat.all(), ShortDateFormat.values(), userStore.currentUserShortDateFormat, 'shortDateFormat', ShortDateFormat.Default);
+    }
+
+    function getLocalizedLongMonthDayFormat(): string {
+        return getLocalizedDateTimeFormat<LongDateFormat>('longMonthDay', LongDateFormat.all(), LongDateFormat.values(), userStore.currentUserLongDateFormat, 'longDateFormat', LongDateFormat.Default);
+    }
+
+    function getLocalizedShortMonthDayFormat(): string {
+        return getLocalizedDateTimeFormat<ShortDateFormat>('shortMonthDay', ShortDateFormat.all(), ShortDateFormat.values(), userStore.currentUserShortDateFormat, 'shortDateFormat', ShortDateFormat.Default);
+    }
+
+    function getLocalizedLongTimeFormat(): string {
+        return getLocalizedDateTimeFormat<LongTimeFormat>('longTime', LongTimeFormat.all(), LongTimeFormat.values(), userStore.currentUserLongTimeFormat, 'longTimeFormat', LongTimeFormat.Default);
+    }
+
+    function getLocalizedShortTimeFormat(): string {
+        return getLocalizedDateTimeFormat<ShortTimeFormat>('shortTime', ShortTimeFormat.all(), ShortTimeFormat.values(), userStore.currentUserShortTimeFormat, 'shortTimeFormat', ShortTimeFormat.Default);
+    }
+
     // public functions
     function translateIf(text: string, isTranslate: boolean): string {
         if (isTranslate) {
@@ -318,6 +375,17 @@ export function useI18n() {
         return getAllWeekdayNames('min');
     }
 
+    function formatYearQuarter(year: number, quarter: number): string {
+        if (1 <= quarter && quarter <= 4) {
+            return t('format.yearQuarter.q' + quarter, {
+                year: year,
+                quarter: quarter
+            });
+        } else {
+            return '';
+        }
+    }
+
     function setLanguage(languageKey: string | null, force?: boolean): LocaleDefaultSettings | null {
         if (!languageKey) {
             languageKey = getDefaultLanguage();
@@ -413,6 +481,19 @@ export function useI18n() {
         getAllLongWeekdayNames,
         getAllShortWeekdayNames,
         getAllMinWeekdayNames,
+        formatUnixTimeToLongDateTime: (unixTime: number, utcOffset?: number, currentUtcOffset?: number) => formatUnixTime(unixTime, getLocalizedLongDateFormat() + ' ' + getLocalizedLongTimeFormat(), utcOffset, currentUtcOffset),
+        formatUnixTimeToShortDateTime: (unixTime: number, utcOffset?: number, currentUtcOffset?: number) => formatUnixTime(unixTime, getLocalizedShortDateFormat() + ' ' + getLocalizedShortTimeFormat(), utcOffset, currentUtcOffset),
+        formatUnixTimeToLongDate: (unixTime: number, utcOffset?: number, currentUtcOffset?: number) => formatUnixTime(unixTime, getLocalizedLongDateFormat(), utcOffset, currentUtcOffset),
+        formatUnixTimeToShortDate: (unixTime: number, utcOffset?: number, currentUtcOffset?: number) => formatUnixTime(unixTime, getLocalizedShortDateFormat(), utcOffset, currentUtcOffset),
+        formatUnixTimeToLongYear: (unixTime: number, utcOffset?: number, currentUtcOffset?: number) => formatUnixTime(unixTime, getLocalizedLongYearFormat(), utcOffset, currentUtcOffset),
+        formatUnixTimeToShortYear: (unixTime: number, utcOffset?: number, currentUtcOffset?: number) => formatUnixTime(unixTime, getLocalizedShortYearFormat(), utcOffset, currentUtcOffset),
+        formatUnixTimeToLongYearMonth: (unixTime: number, utcOffset?: number, currentUtcOffset?: number) => formatUnixTime(unixTime, getLocalizedLongYearMonthFormat(), utcOffset, currentUtcOffset),
+        formatUnixTimeToShortYearMonth: (unixTime: number, utcOffset?: number, currentUtcOffset?: number) => formatUnixTime(unixTime, getLocalizedShortYearMonthFormat(), utcOffset, currentUtcOffset),
+        formatUnixTimeToLongMonthDay: (unixTime: number, utcOffset?: number, currentUtcOffset?: number) => formatUnixTime(unixTime, getLocalizedLongMonthDayFormat(), utcOffset, currentUtcOffset),
+        formatUnixTimeToShortMonthDay: (unixTime: number, utcOffset?: number, currentUtcOffset?: number) => formatUnixTime(unixTime, getLocalizedShortMonthDayFormat(), utcOffset, currentUtcOffset),
+        formatUnixTimeToLongTime: (unixTime: number, utcOffset?: number, currentUtcOffset?: number) => formatUnixTime(unixTime, getLocalizedLongTimeFormat(), utcOffset, currentUtcOffset),
+        formatUnixTimeToShortTime: (unixTime: number, utcOffset?: number, currentUtcOffset?: number) => formatUnixTime(unixTime, getLocalizedShortTimeFormat(), utcOffset, currentUtcOffset),
+        formatYearQuarter,
         setLanguage,
         setTimeZone,
         initLocale

src/views/base/AboutPage.ts

@@ -0,0 +1,50 @@
+import { computed } from 'vue';
+
+import { useI18n } from '@/locales/helpers.ts';
+
+import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
+
+import type { LatestExchangeRateResponse } from '@/models/exchange_rate.ts';
+
+import { getMapProvider } from '@/lib/server_settings.ts';
+import { getMapWebsite } from '@/lib/map/index.ts';
+import { getLicense, getThirdPartyLicenses } from '@/lib/licenses.ts';
+import { getVersion, getBuildTime } from '@/lib/version.ts';
+
+export function useAboutPage() {
+    const { tt, formatUnixTimeToLongDateTime } = useI18n();
+
+    const exchangeRatesStore = useExchangeRatesStore();
+
+    const version = `v${getVersion()}`;
+
+    const buildTime = computed<string>(() => {
+        const time = getBuildTime();
+
+        if (!time) {
+            return time;
+        }
+
+        return formatUnixTimeToLongDateTime(parseInt(time));
+    });
+    const exchangeRatesData = computed<LatestExchangeRateResponse | undefined>(() => exchangeRatesStore.latestExchangeRates.data);
+    const mapProviderName = computed<string>(() => {
+        const provider = getMapProvider();
+        return provider ? tt(`mapprovider.${provider}`) : '';
+    });
+    const mapProviderWebsite = computed<string>(() => getMapWebsite());
+    const licenseLines = computed<string[]>(() => getLicense().replaceAll(/\r/g, '').split('\n'));
+    const thirdPartyLicenses = computed<LicenseInfo[]>(() => getThirdPartyLicenses());
+
+    return {
+        // constants
+        version,
+        // computed states
+        buildTime,
+        exchangeRatesData,
+        mapProviderName,
+        mapProviderWebsite,
+        licenseLines,
+        thirdPartyLicenses
+    };
+}

src/views/desktop/AboutPage.vue

@@ -1,11 +1,11 @@
 <template>
     <v-row class="match-height">
         <v-col cols="12">
-            <v-card :title="$t('global.app.title')">
+            <v-card :title="tt('global.app.title')">
                 <v-card-text>
                     <v-row no-gutters>
                         <v-col cols="12" md="2">
-                            <span class="text-body-1">{{ $t('Version') }}</span>
+                            <span class="text-body-1">{{ tt('Version') }}</span>
                         </v-col>
                         <v-col cols="12" md="10" class="mb-6">
                             <span class="text-body-1">{{ version }}</span>
@@ -13,7 +13,7 @@
                     </v-row>
                     <v-row no-gutters v-if="buildTime">
                         <v-col cols="12" md="2">
-                            <span class="text-body-1">{{ $t('Build Time') }}</span>
+                            <span class="text-body-1">{{ tt('Build Time') }}</span>
                         </v-col>
                         <v-col cols="12" md="10" class="mb-6">
                             <span class="text-body-1">{{ buildTime }}</span>
@@ -21,7 +21,7 @@
                     </v-row>
                     <v-row no-gutters>
                         <v-col cols="12" md="2">
-                            <span class="text-body-1">{{ $t('Official Website') }}</span>
+                            <span class="text-body-1">{{ tt('Official Website') }}</span>
                         </v-col>
                         <v-col cols="12" md="10" class="mb-6">
                             <a class="text-body-1" href="https://github.com/mayswind/ezbookkeeping" target="_blank">
@@ -31,7 +31,7 @@
                     </v-row>
                     <v-row no-gutters>
                         <v-col cols="12" md="2">
-                            <span class="text-body-1">{{ $t('Report Issue') }}</span>
+                            <span class="text-body-1">{{ tt('Report Issue') }}</span>
                         </v-col>
                         <v-col cols="12" md="10" class="mb-6">
                             <a class="text-body-1" href="https://github.com/mayswind/ezbookkeeping/issues" target="_blank">
@@ -41,7 +41,7 @@
                     </v-row>
                     <v-row no-gutters>
                         <v-col cols="12" md="2">
-                            <span class="text-body-1">{{ $t('Documents') }}</span>
+                            <span class="text-body-1">{{ tt('Documents') }}</span>
                         </v-col>
                         <v-col cols="12" md="10">
                             <a class="text-body-1" href="https://ezbookkeeping.mayswind.net" target="_blank">
@@ -54,11 +54,11 @@
         </v-col>
 
         <v-col cols="12" v-if="exchangeRatesData">
-            <v-card :title="$t('Exchange Rates Data')">
+            <v-card :title="tt('Exchange Rates Data')">
                 <v-card-text>
                     <v-row no-gutters>
                         <v-col cols="12" md="2">
-                            <span class="text-body-1">{{ $t('Provider') }}</span>
+                            <span class="text-body-1">{{ tt('Provider') }}</span>
                         </v-col>
                         <v-col cols="12" md="10">
                             <a class="text-body-1" :href="exchangeRatesData.referenceUrl" target="_blank"
@@ -71,11 +71,11 @@
         </v-col>
 
         <v-col cols="12" v-if="mapProviderName">
-            <v-card :title="$t('Map')">
+            <v-card :title="tt('Map')">
                 <v-card-text>
                     <v-row no-gutters>
                         <v-col cols="12" md="2">
-                            <span class="text-body-1">{{ $t('Provider') }}</span>
+                            <span class="text-body-1">{{ tt('Provider') }}</span>
                         </v-col>
                         <v-col cols="12" md="10">
                             <a class="text-body-1" :href="mapProviderWebsite" target="_blank"
@@ -88,7 +88,7 @@
         </v-col>
 
         <v-col cols="12">
-            <v-card :title="$t('License')">
+            <v-card :title="tt('License')">
                 <v-card-text>
                     <v-row no-gutters>
                         <v-col cols="12">
@@ -119,44 +119,10 @@
     </v-row>
 </template>
 
-<script>
-import { mapStores } from 'pinia';
-import { useUserStore } from '@/stores/user.ts';
-import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
+<script setup lang="ts">
+import { useI18n } from '@/locales/helpers.ts';
+import { useAboutPage } from '@/views/base/AboutPage.ts';
 
-import { getMapProvider } from '@/lib/server_settings.ts';
-import { getMapWebsite } from '@/lib/map/index.ts';
-import { getLicense, getThirdPartyLicenses } from '@/lib/licenses.ts';
-
-export default {
-    computed: {
-        ...mapStores(useUserStore, useExchangeRatesStore),
-        version() {
-            return 'v' + this.$version;
-        },
-        buildTime() {
-            if (!this.$buildTime) {
-                return this.$buildTime;
-            }
-
-            return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.$buildTime);
-        },
-        exchangeRatesData() {
-            return this.exchangeRatesStore.latestExchangeRates.data;
-        },
-        mapProviderName() {
-            const provider = getMapProvider();
-            return provider ? this.$t(`mapprovider.${provider}`) : '';
-        },
-        mapProviderWebsite() {
-            return getMapWebsite();
-        },
-        licenseLines() {
-            return getLicense().replaceAll(/\r/g, '').split('\n');
-        },
-        thirdPartyLicenses() {
-            return getThirdPartyLicenses();
-        }
-    }
-}
+const { tt } = useI18n();
+const { version, buildTime, exchangeRatesData, mapProviderName, mapProviderWebsite, licenseLines, thirdPartyLicenses } = useAboutPage();
 </script>

src/views/mobile/AboutPage.vue

@@ -1,36 +1,36 @@
 <template>
     <f7-page>
-        <f7-navbar :title="$t('About')" :back-link="$t('Back')"></f7-navbar>
+        <f7-navbar :title="tt('About')" :back-link="tt('Back')"></f7-navbar>
 
-        <f7-block-title class="margin-top">{{ $t('global.app.title') }}</f7-block-title>
+        <f7-block-title class="margin-top">{{ tt('global.app.title') }}</f7-block-title>
         <f7-list strong inset dividers>
-            <f7-list-item :title="$t('Version')" :after="version"></f7-list-item>
-            <f7-list-item :title="$t('Build Time')" :after="buildTime" v-if="buildTime"></f7-list-item>
-            <f7-list-item external :title="$t('Official Website')" link="https://github.com/mayswind/ezbookkeeping" target="_blank"></f7-list-item>
-            <f7-list-item external :title="$t('Report Issue')" link="https://github.com/mayswind/ezbookkeeping/issues" target="_blank"></f7-list-item>
-            <f7-list-item external :title="$t('Documents')" link="https://ezbookkeeping.mayswind.net" target="_blank"></f7-list-item>
-            <f7-list-item :title="$t('License')" link="#" popup-open=".license-popup"></f7-list-item>
+            <f7-list-item :title="tt('Version')" :after="version"></f7-list-item>
+            <f7-list-item :title="tt('Build Time')" :after="buildTime" v-if="buildTime"></f7-list-item>
+            <f7-list-item external :title="tt('Official Website')" link="https://github.com/mayswind/ezbookkeeping" target="_blank"></f7-list-item>
+            <f7-list-item external :title="tt('Report Issue')" link="https://github.com/mayswind/ezbookkeeping/issues" target="_blank"></f7-list-item>
+            <f7-list-item external :title="tt('Documents')" link="https://ezbookkeeping.mayswind.net" target="_blank"></f7-list-item>
+            <f7-list-item :title="tt('License')" link="#" popup-open=".license-popup"></f7-list-item>
         </f7-list>
 
-        <f7-block-title class="margin-top" v-if="exchangeRatesData">{{ $t('Exchange Rates Data') }}</f7-block-title>
+        <f7-block-title class="margin-top" v-if="exchangeRatesData">{{ tt('Exchange Rates Data') }}</f7-block-title>
         <f7-list strong inset dividers v-if="exchangeRatesData">
-            <f7-list-item external :title="$t('Provider')" :after="exchangeRatesData.dataSource"
+            <f7-list-item external :title="tt('Provider')" :after="exchangeRatesData.dataSource"
                           :link="exchangeRatesData.referenceUrl" target="_blank" v-if="exchangeRatesData.referenceUrl"></f7-list-item>
-            <f7-list-item :title="$t('Provider')" :after="exchangeRatesData.dataSource" v-if="!exchangeRatesData.referenceUrl"></f7-list-item>
+            <f7-list-item :title="tt('Provider')" :after="exchangeRatesData.dataSource" v-if="!exchangeRatesData.referenceUrl"></f7-list-item>
         </f7-list>
 
-        <f7-block-title class="margin-top" v-if="mapProviderName">{{ $t('Map') }}</f7-block-title>
+        <f7-block-title class="margin-top" v-if="mapProviderName">{{ tt('Map') }}</f7-block-title>
         <f7-list strong inset dividers v-if="mapProviderName">
-            <f7-list-item external :title="$t('Provider')" :after="mapProviderName"
+            <f7-list-item external :title="tt('Provider')" :after="mapProviderName"
                           :link="mapProviderWebsite" target="_blank" v-if="mapProviderWebsite"></f7-list-item>
-            <f7-list-item :title="$t('Provider')" :after="mapProviderName" v-if="!mapProviderWebsite"></f7-list-item>
+            <f7-list-item :title="tt('Provider')" :after="mapProviderName" v-if="!mapProviderWebsite"></f7-list-item>
         </f7-list>
 
         <f7-popup push with-subnavbar swipe-to-close swipe-handler=".swipe-handler" class="license-popup">
             <f7-page>
                 <f7-navbar>
                     <div class="swipe-handler" style="z-index: 10"></div>
-                    <f7-subnavbar :title="$t('License') "></f7-subnavbar>
+                    <f7-subnavbar :title="tt('License') "></f7-subnavbar>
                 </f7-navbar>
                 <f7-block strong outline class="license-content">
                     <p>
@@ -57,46 +57,12 @@
     </f7-page>
 </template>
 
-<script>
-import { mapStores } from 'pinia';
-import { useUserStore } from '@/stores/user.ts';
-import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
+<script setup lang="ts">
+import { useI18n } from '@/locales/helpers.ts';
+import { useAboutPage } from '@/views/base/AboutPage.ts';
 
-import { getMapProvider } from '@/lib/server_settings.ts';
-import { getMapWebsite } from '@/lib/map/index.ts';
-import { getLicense, getThirdPartyLicenses } from '@/lib/licenses.ts';
-
-export default {
-    computed: {
-        ...mapStores(useUserStore, useExchangeRatesStore),
-        version() {
-            return 'v' + this.$version;
-        },
-        buildTime() {
-            if (!this.$buildTime) {
-                return this.$buildTime;
-            }
-
-            return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.$buildTime);
-        },
-        exchangeRatesData() {
-            return this.exchangeRatesStore.latestExchangeRates.data;
-        },
-        mapProviderName() {
-            const provider = getMapProvider();
-            return provider ? this.$t(`mapprovider.${provider}`) : '';
-        },
-        mapProviderWebsite() {
-            return getMapWebsite();
-        },
-        licenseLines() {
-            return getLicense().replaceAll(/\r/g, '').split('\n');
-        },
-        thirdPartyLicenses() {
-            return getThirdPartyLicenses();
-        }
-    }
-}
+const { tt } = useI18n();
+const { version, buildTime, exchangeRatesData, mapProviderName, mapProviderWebsite, licenseLines, thirdPartyLicenses } = useAboutPage();
 </script>
 
 <style>