From 629dbeeaa44a7699c1f69034636f77e4fc2ba443 Mon Sep 17 00:00:00 2001 From: MaysWind Date: Tue, 21 Apr 2026 00:20:19 +0800 Subject: [PATCH] add digit grouping symbol when formatting numbers --- src/components/desktop/PaginationButtons.vue | 13 +++-------- .../explorer/ExplorerDataTablePageBase.ts | 5 ++-- src/views/desktop/HomePage.vue | 6 ++--- .../dialogs/ReconciliationStatementDialog.vue | 9 ++++---- .../insights/tabs/ExplorerChartTab.vue | 5 ++-- src/views/desktop/transactions/ListPage.vue | 7 +++--- .../transactions/import/ImportDialog.vue | 12 ++-------- .../tabs/ImportTransactionCheckDataTab.vue | 23 ++++++++----------- .../tabs/ImportTransactionDefineColumnTab.vue | 15 ++++-------- ...mportTransactionExecuteCustomScriptTab.vue | 14 ++++------- 10 files changed, 38 insertions(+), 71 deletions(-) diff --git a/src/components/desktop/PaginationButtons.vue b/src/components/desktop/PaginationButtons.vue index cc67538d..a44d69df 100644 --- a/src/components/desktop/PaginationButtons.vue +++ b/src/components/desktop/PaginationButtons.vue @@ -13,7 +13,7 @@ @click="currentPage = parseInt(page)" v-if="page !== '...'" > - {{ getDisplayPage(page) }} + {{ formatNumberToLocalizedNumerals(parseInt(page)) }} (); -const { tt, getCurrentNumeralSystemType } = useI18n(); +const { tt, formatNumberToLocalizedNumerals } = useI18n(); const showMenus = ref>({}); -const numeralSystem = computed(() => getCurrentNumeralSystemType()); - -function getDisplayPage(page: number | string): string { - return numeralSystem.value.replaceWesternArabicDigitsToLocalizedDigits(page.toString()); -} - const allPages = computed(() => { const pages: NameNumeralValue[] = []; for (let i = 1; i <= props.totalPageCount; i++) { - pages.push({ value: i, name: getDisplayPage(i) }); + pages.push({ value: i, name: formatNumberToLocalizedNumerals(i) }); } return pages; diff --git a/src/views/base/explorer/ExplorerDataTablePageBase.ts b/src/views/base/explorer/ExplorerDataTablePageBase.ts index 443f2faa..27ce0887 100644 --- a/src/views/base/explorer/ExplorerDataTablePageBase.ts +++ b/src/views/base/explorer/ExplorerDataTablePageBase.ts @@ -25,7 +25,8 @@ export function useExplorerDataTablePageBase() { tt, getCurrentNumeralSystemType, formatDateTimeToLongDateTime, - formatAmountToLocalizedNumeralsWithCurrency + formatAmountToLocalizedNumeralsWithCurrency, + formatNumberToLocalizedNumerals } = useI18n(); const settingsStore = useSettingsStore(); @@ -71,7 +72,7 @@ export function useExplorerDataTablePageBase() { const availableCountPerPage: number[] = [ 5, 10, 15, 20, 25, 30, 50 ]; for (const count of availableCountPerPage) { - pageCounts.push({ value: count, name: numeralSystem.value.formatNumber(count) }); + pageCounts.push({ value: count, name: formatNumberToLocalizedNumerals(count) }); } pageCounts.push({ value: -1, name: tt('All') }); diff --git a/src/views/desktop/HomePage.vue b/src/views/desktop/HomePage.vue index 6cad51ff..a925858d 100644 --- a/src/views/desktop/HomePage.vue +++ b/src/views/desktop/HomePage.vue @@ -202,7 +202,6 @@ import { useAccountsStore } from '@/stores/account.ts'; import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts'; import { useOverviewStore } from '@/stores/overview.ts'; -import { type NumeralSystem } from '@/core/numeral.ts'; import { DateRange } from '@/core/datetime.ts'; import { ThemeType } from '@/core/theme.ts'; import { @@ -232,7 +231,7 @@ type SnackBarType = InstanceType; const router = useRouter(); const theme = useTheme(); -const { tt, getCurrentNumeralSystemType } = useI18n(); +const { tt, formatNumberToLocalizedNumerals } = useI18n(); const { showAmountInHomePage, allAccounts, @@ -254,9 +253,8 @@ const snackbar = useTemplateRef('snackbar'); const loadingOverview = ref(true); const isDarkMode = computed(() => theme.global.name.value === ThemeType.Dark); -const numeralSystem = computed(() => getCurrentNumeralSystemType()); -const displayAccountCount = computed(() => allAccounts.value ? numeralSystem.value.formatNumber(allAccounts.value.length) : numeralSystem.value.digitZero); +const displayAccountCount = computed(() => formatNumberToLocalizedNumerals(allAccounts.value?.length ?? 0)); function clickMonthlyIncomeOrExpense(e: MonthlyIncomeAndExpenseCardClickEvent): void { const minTime = e.monthStartTime; diff --git a/src/views/desktop/accounts/list/dialogs/ReconciliationStatementDialog.vue b/src/views/desktop/accounts/list/dialogs/ReconciliationStatementDialog.vue index 77f2e80a..16c3d4bc 100644 --- a/src/views/desktop/accounts/list/dialogs/ReconciliationStatementDialog.vue +++ b/src/views/desktop/accounts/list/dialogs/ReconciliationStatementDialog.vue @@ -297,7 +297,6 @@ import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts'; import { useTransactionsStore } from '@/stores/transaction.ts'; import type { NameNumeralValue } from '@/core/base.ts'; -import type { NumeralSystem } from '@/core/numeral.ts'; import { TimezoneTypeForStatistics } from '@/core/timezone.ts'; import { TransactionType } from '@/core/transaction.ts'; import { AccountBalanceTrendChartType, ChartDateAggregationType } from '@/core/statistics.ts'; @@ -341,7 +340,10 @@ const emit = defineEmits<{ (e: 'error', message: string): void; }>(); -const { tt, getCurrentNumeralSystemType, formatNumberToLocalizedNumerals } = useI18n(); +const { + tt, + formatNumberToLocalizedNumerals +} = useI18n(); const { accountId, @@ -416,7 +418,6 @@ const chartType = ref(AccountBalanceTrendChartType.Default.type); let rejectFunc: ((reason?: unknown) => void) | null = null; -const numeralSystem = computed(() => getCurrentNumeralSystemType()); const reconciliationStatementsTablePageOptions = computed(() => getTablePageOptions(reconciliationStatements.value?.transactions.length)); const totalPageCount = computed(() => { @@ -466,7 +467,7 @@ function getTablePageOptions(linesCount?: number): NameNumeralValue[] { break; } - pageOptions.push({ value: count, name: numeralSystem.value.formatNumber(count) }); + pageOptions.push({ value: count, name: formatNumberToLocalizedNumerals(count) }); } pageOptions.push({ value: -1, name: tt('All') }); diff --git a/src/views/desktop/insights/tabs/ExplorerChartTab.vue b/src/views/desktop/insights/tabs/ExplorerChartTab.vue index 7cc055bd..891ae8d6 100644 --- a/src/views/desktop/insights/tabs/ExplorerChartTab.vue +++ b/src/views/desktop/insights/tabs/ExplorerChartTab.vue @@ -314,7 +314,6 @@ const { getMonthdayShortName, getWeekdayLongName, getQuarterName, - getCurrentNumeralSystemType, getCurrencyName, formatDateTimeToShortDateTime, formatDateTimeToShortDate, @@ -325,6 +324,7 @@ const { formatGregorianYearToGregorianLikeFiscalYear, formatAmountToLocalizedNumerals, formatAmountToWesternArabicNumeralsWithoutDigitGrouping, + formatNumberToLocalizedNumerals, formatPercentToLocalizedNumerals } = useI18n(); @@ -334,7 +334,6 @@ const explorersStore = useExplorersStore(); const axisChart = useTemplateRef('axisChart'); const heatmapChart = useTemplateRef('heatmapChart'); -const numeralSystem = computed(() => getCurrentNumeralSystemType()); const defaultCurrency = computed(() => userStore.currentUserDefaultCurrency); const allTransactionExplorerDataDimensions = computed(() => getAllTransactionExplorerDataDimensions()); @@ -350,7 +349,7 @@ const allAmountRangeCounts = computed(() => { const pageCounts: NameNumeralValue[] = []; for (let i = 3; i <= 20; i++) { - pageCounts.push({ value: i, name: numeralSystem.value.replaceWesternArabicDigitsToLocalizedDigits(i.toString()) }); + pageCounts.push({ value: i, name: formatNumberToLocalizedNumerals(i) }); } return pageCounts; diff --git a/src/views/desktop/transactions/ListPage.vue b/src/views/desktop/transactions/ListPage.vue index 67079f73..8a10ba70 100644 --- a/src/views/desktop/transactions/ListPage.vue +++ b/src/views/desktop/transactions/ListPage.vue @@ -684,7 +684,7 @@ import { DateRangeScene, DateRange } from '@/core/datetime.ts'; -import { type NumeralSystem, AmountFilterType } from '@/core/numeral.ts'; +import { AmountFilterType } from '@/core/numeral.ts'; import { ThemeType } from '@/core/theme.ts'; import { TransactionType } from '@/core/transaction.ts'; import { TemplateType } from '@/core/template.ts'; @@ -775,7 +775,7 @@ const { tt, getAllRecentMonthDateRanges, getWeekdayLongName, - getCurrentNumeralSystemType + formatNumberToLocalizedNumerals } = useI18n(); const { @@ -873,14 +873,13 @@ const showFilterCategoryDialog = ref(false); const showFilterTagDialog = ref(false); const isDarkMode = computed(() => theme.global.name.value === ThemeType.Dark); -const numeralSystem = computed(() => getCurrentNumeralSystemType()); const allPageCounts = computed(() => { const pageCounts: NameNumeralValue[] = []; const availableCountPerPage: number[] = [ 5, 10, 15, 20, 25, 30, 50 ]; for (const count of availableCountPerPage) { - pageCounts.push({ value: count, name: numeralSystem.value.replaceWesternArabicDigitsToLocalizedDigits(count.toString()) }); + pageCounts.push({ value: count, name: formatNumberToLocalizedNumerals(count) }); } return pageCounts; diff --git a/src/views/desktop/transactions/import/ImportDialog.vue b/src/views/desktop/transactions/import/ImportDialog.vue index d0b10f10..ff9c2fdd 100644 --- a/src/views/desktop/transactions/import/ImportDialog.vue +++ b/src/views/desktop/transactions/import/ImportDialog.vue @@ -240,7 +240,7 @@

{{ tt('Data Import Completed') }}

-

{{ tt('format.misc.importTransactionResult', { count: getDisplayCount(importedCount || 0) }) }}

+

{{ tt('format.misc.importTransactionResult', { count: formatNumberToLocalizedNumerals(importedCount || 0) }) }}

@@ -298,7 +298,6 @@ import { useOverviewStore } from '@/stores/overview.ts'; import { useStatisticsStore } from '@/stores/statistics.ts'; import { type KeyAndName, itemAndIndex } from '@/core/base.ts'; -import { type NumeralSystem } from '@/core/numeral.ts'; import { TransactionType } from '@/core/transaction.ts'; import { type ImportFileTypeSupportedAdditionalOptions, @@ -346,7 +345,6 @@ defineProps<{ const { tt, joinMultiText, - getCurrentNumeralSystemType, getAllSupportedImportFileCagtegoryAndTypes, formatNumberToLocalizedNumerals, getLocalizedFileEncodingName @@ -414,8 +412,6 @@ const submitting = ref(false); let resolveFunc: (() => void) | null = null; let rejectFunc: ((reason?: unknown) => void) | null = null; -const numeralSystem = computed(() => getCurrentNumeralSystemType()); - const allSupportedImportFileCategoryAndTypes = computed(() => getAllSupportedImportFileCagtegoryAndTypes()); const allFileSubTypes = computed(() => allSupportedImportFileTypesMap.value[fileType.value]?.subTypes); const allSupportedEncodings = computed(() => { @@ -556,10 +552,6 @@ const exportFileGuideDocumentLanguageName = computed(() => a const fileName = computed(() => importFile.value?.name || ''); -function getDisplayCount(count: number): string { - return numeralSystem.value.formatNumber(count); -} - function loadInitFileTypeFromSettings(): void { if (!settingsStore.appSettings.lastSelectedFileTypeInImportTransactionDialog) { return; @@ -925,7 +917,7 @@ function submit(): void { } confirmDialog.value?.open('format.misc.confirmImportTransactions', { - count: getDisplayCount(transactions.length) + count: formatNumberToLocalizedNumerals(transactions.length) }).then(() => { submitting.value = true; diff --git a/src/views/desktop/transactions/import/tabs/ImportTransactionCheckDataTab.vue b/src/views/desktop/transactions/import/tabs/ImportTransactionCheckDataTab.vue index 5ae8d433..196a3934 100644 --- a/src/views/desktop/transactions/import/tabs/ImportTransactionCheckDataTab.vue +++ b/src/views/desktop/transactions/import/tabs/ImportTransactionCheckDataTab.vue @@ -310,7 +310,7 @@