From b79ffafaee51e63fb93b8ee26e4bf13c7b026e39 Mon Sep 17 00:00:00 2001 From: MaysWind Date: Fri, 29 Aug 2025 00:43:34 +0800 Subject: [PATCH] code refactor --- src/components/base/CommonNumberInputBase.ts | 15 ++++++----- src/components/base/NumberInputBase.ts | 27 +++++++++----------- src/components/common/PinCodeInput.vue | 11 ++++---- src/components/desktop/AmountInput.vue | 25 ++++++++---------- src/components/mobile/NumberPadSheet.vue | 7 ++--- src/views/desktop/exchangerates/ListPage.vue | 12 ++++----- src/views/mobile/exchangerates/ListPage.vue | 6 ++--- 7 files changed, 49 insertions(+), 54 deletions(-) diff --git a/src/components/base/CommonNumberInputBase.ts b/src/components/base/CommonNumberInputBase.ts index 7e20868a..7e24c431 100644 --- a/src/components/base/CommonNumberInputBase.ts +++ b/src/components/base/CommonNumberInputBase.ts @@ -1,4 +1,4 @@ -import { ref } from 'vue'; +import { ref, computed } from 'vue'; import { useI18n } from '@/locales/helpers.ts'; @@ -28,6 +28,8 @@ export function useCommonNumberInputBase(props: CommonNumberInputProps, maxDecim const currentValue = ref(initValue); + const numeralSystem = computed(() => getCurrentNumeralSystemType()); + function onKeyUpDown(e: KeyboardEvent): void { if (e.altKey || e.ctrlKey || e.metaKey || (e.key.indexOf('F') === 0 && (e.key.length === 2 || e.key.length === 3)) || e.key === 'ArrowLeft' || e.key === 'ArrowRight' @@ -41,11 +43,10 @@ export function useCommonNumberInputBase(props: CommonNumberInputProps, maxDecim return; } - const numeralSystem = getCurrentNumeralSystemType(); const digitGroupingSymbol = getCurrentDigitGroupingSymbol(); const decimalSeparator = getCurrentDecimalSeparator(); - if (!NumeralSystem.WesternArabicNumerals.isDigit(e.key) && !numeralSystem.isDigit(e.key) && e.key !== '-' && e.key !== decimalSeparator) { + if (!NumeralSystem.WesternArabicNumerals.isDigit(e.key) && !numeralSystem.value.isDigit(e.key) && e.key !== '-' && e.key !== decimalSeparator) { e.preventDefault(); return; } @@ -90,7 +91,7 @@ export function useCommonNumberInputBase(props: CommonNumberInputProps, maxDecim str = str.substring(1); } - str = (negative ? `-${numeralSystem.digitZero}` : numeralSystem.digitZero) + str; + str = (negative ? `-${numeralSystem.value.digitZero}` : numeralSystem.value.digitZero) + str; target.value = str; currentValue.value = target.value; e.preventDefault(); @@ -102,14 +103,14 @@ export function useCommonNumberInputBase(props: CommonNumberInputProps, maxDecim if (decimalIndex >= 0) { decimalLength = str.length - str.indexOf(decimalSeparator) - 1; - } else if ((str.startsWith(numeralSystem.digitZero) && str.length >= 2) || (str.startsWith(`-${numeralSystem.digitZero}`) && str.length >= 3)) { + } else if ((str.startsWith(numeralSystem.value.digitZero) && str.length >= 2) || (str.startsWith(`-${numeralSystem.value.digitZero}`) && str.length >= 3)) { const negative = str.charAt(0) === '-'; if (negative) { str = str.substring(1); } - while (str.charAt(0) === numeralSystem.digitZero && (str.length >= 2 || e.key !== numeralSystem.digitZero)) { + while (str.charAt(0) === numeralSystem.value.digitZero && (str.length >= 2 || e.key !== numeralSystem.value.digitZero)) { str = str.substring(1); } @@ -142,7 +143,7 @@ export function useCommonNumberInputBase(props: CommonNumberInputProps, maxDecim } } catch (ex) { logger.warn('cannot parse input number, original value is ' + str, ex); - target.value = numeralSystem.digitZero; + target.value = numeralSystem.value.digitZero; } } diff --git a/src/components/base/NumberInputBase.ts b/src/components/base/NumberInputBase.ts index 6e67b194..b8a3180f 100644 --- a/src/components/base/NumberInputBase.ts +++ b/src/components/base/NumberInputBase.ts @@ -1,4 +1,4 @@ -import { watch } from 'vue'; +import { computed, watch } from 'vue'; import { useI18n } from '@/locales/helpers.ts'; import { type CommonNumberInputProps, useCommonNumberInputBase } from '@/components/base/CommonNumberInputBase.ts'; @@ -29,24 +29,25 @@ export function useNumberInputBase(props: NumberInputProps, emit: NumberInputEmi onPaste } = useCommonNumberInputBase(props, props.maxDecimalCount ?? -1, getFormattedValue(props.modelValue), parseNumber, getFormattedValue, getValidFormattedValue); + const numeralSystem = computed(() => getCurrentNumeralSystemType()); + function parseNumber(value: string): number { if (!value) { return 0; } - const numeralSystem = getCurrentNumeralSystemType(); const decimalSeparator = getCurrentDecimalSeparator(); let finalValue = ''; for (let i = 0; i < value.length; i++) { - if (!NumeralSystem.WesternArabicNumerals.isDigit(value[i]) && !numeralSystem.isDigit(value[i]) && value[i] !== '-' && value[i] !== decimalSeparator) { + if (!NumeralSystem.WesternArabicNumerals.isDigit(value[i]) && !numeralSystem.value.isDigit(value[i]) && value[i] !== '-' && value[i] !== decimalSeparator) { break; } finalValue += value[i]; } - finalValue = numeralSystem.replaceLocalizedDigitsToWesternArabicDigits(finalValue); + finalValue = numeralSystem.value.replaceLocalizedDigitsToWesternArabicDigits(finalValue); if (decimalSeparator !== '.') { finalValue = replaceAll(finalValue, decimalSeparator, '.'); @@ -70,36 +71,32 @@ export function useNumberInputBase(props: NumberInputProps, emit: NumberInputEmi } function getFormattedValue(value: number): string { - const numeralSystem = getCurrentNumeralSystemType(); - if (!Number.isNaN(value) && Number.isFinite(value)) { const decimalSeparator = getCurrentDecimalSeparator(); if (isNumber(props.maxDecimalCount) && props.maxDecimalCount >= 0) { - return replaceAll(numeralSystem.replaceWesternArabicDigitsToLocalizedDigits(value.toFixed(props.maxDecimalCount)), '.', decimalSeparator); + return replaceAll(numeralSystem.value.replaceWesternArabicDigitsToLocalizedDigits(value.toFixed(props.maxDecimalCount)), '.', decimalSeparator); } else { - return replaceAll(numeralSystem.replaceWesternArabicDigitsToLocalizedDigits(value.toString(10)), '.', decimalSeparator); + return replaceAll(numeralSystem.value.replaceWesternArabicDigitsToLocalizedDigits(value.toString(10)), '.', decimalSeparator); } } - return numeralSystem.digitZero; + return numeralSystem.value.digitZero; } watch(() => props.modelValue, (newValue) => { - const numeralSystem = getCurrentNumeralSystemType(); const numericCurrentValue = parseNumber(currentValue.value); if (newValue !== numericCurrentValue) { const newStringValue = getFormattedValue(newValue); - if (!(newStringValue === numeralSystem.digitZero && currentValue.value === '')) { + if (!(newStringValue === numeralSystem.value.digitZero && currentValue.value === '')) { currentValue.value = newStringValue; } } }); watch(currentValue, (newValue) => { - const numeralSystem = getCurrentNumeralSystemType(); let actualNumeralSystem: NumeralSystem | undefined = undefined; let finalValue = ''; @@ -112,16 +109,16 @@ export function useNumberInputBase(props: NumberInputProps, emit: NumberInputEmi actualNumeralSystem = NumeralSystem.detect(newValue[0]); } - if (actualNumeralSystem && (actualNumeralSystem.type === NumeralSystem.WesternArabicNumerals.type || actualNumeralSystem.type === numeralSystem.type)) { + if (actualNumeralSystem && (actualNumeralSystem.type === NumeralSystem.WesternArabicNumerals.type || actualNumeralSystem.type === numeralSystem.value.type)) { for (let i = 0; i < newValue.length; i++) { - if (!NumeralSystem.WesternArabicNumerals.isDigit(newValue[i]) && !numeralSystem.isDigit(newValue[i]) && newValue[i] !== '-' && newValue[i] !== decimalSeparator) { + if (!NumeralSystem.WesternArabicNumerals.isDigit(newValue[i]) && !numeralSystem.value.isDigit(newValue[i]) && newValue[i] !== '-' && newValue[i] !== decimalSeparator) { break; } finalValue += newValue[i]; } - finalValue = numeralSystem.replaceWesternArabicDigitsToLocalizedDigits(finalValue); + finalValue = numeralSystem.value.replaceWesternArabicDigitsToLocalizedDigits(finalValue); } else if (newValue === '-' || newValue === decimalSeparator || newValue === `-${decimalSeparator}`) { finalValue = newValue; } diff --git a/src/components/common/PinCodeInput.vue b/src/components/common/PinCodeInput.vue index 8b1c6ab5..ecceab3b 100644 --- a/src/components/common/PinCodeInput.vue +++ b/src/components/common/PinCodeInput.vue @@ -48,9 +48,12 @@ const emit = defineEmits<{ const { getCurrentNumeralSystemType } = useI18n(); -const codes = ref([]); const pinCodeInputs = useTemplateRef('pin-code-input'); +const codes = ref([]); + +const numeralSystem = computed(() => getCurrentNumeralSystemType()); + const finalPinCode = computed(() => { let ret = ''; @@ -154,8 +157,6 @@ function setNextFocus(index: number): void { } function onKeydown(index: number, event: KeyboardEvent): void { - const numeralSystem = getCurrentNumeralSystemType(); - if (event.altKey || (event.key.indexOf('F') === 0 && (event.key.length === 2 || event.key.length === 3))) { return; } @@ -221,8 +222,8 @@ function onKeydown(index: number, event: KeyboardEvent): void { if (NumeralSystem.WesternArabicNumerals.isDigit(event.key)) { digit = event.key; - } else if (numeralSystem.isDigit(event.key)) { - digit = numeralSystem.replaceLocalizedDigitsToWesternArabicDigits(event.key); + } else if (numeralSystem.value.isDigit(event.key)) { + digit = numeralSystem.value.replaceLocalizedDigitsToWesternArabicDigits(event.key); } if (digit) { diff --git a/src/components/desktop/AmountInput.vue b/src/components/desktop/AmountInput.vue index ebd22d89..d7ea3705 100644 --- a/src/components/desktop/AmountInput.vue +++ b/src/components/desktop/AmountInput.vue @@ -152,6 +152,8 @@ const rules = [ const currentFormula = ref(''); const formulaMode = ref(false); +const numeralSystem = computed(() => getCurrentNumeralSystemType()); + const prependText = computed(() => { if (!props.currency || !props.showCurrency) { return ''; @@ -205,7 +207,6 @@ function enterFormulaMode(): void { function calculateFormula(): void { const systemDecimalSeparator = DecimalSeparator.Dot.symbol; - const numeralSystem = getCurrentNumeralSystemType(); const decimalSeparator = getCurrentDecimalSeparator(); let finalFormula = currentFormula.value; @@ -216,7 +217,7 @@ function calculateFormula(): void { finalFormula = replaceAll(currentFormula.value, decimalSeparator, systemDecimalSeparator); } - finalFormula = numeralSystem.replaceLocalizedDigitsToWesternArabicDigits(finalFormula); + finalFormula = numeralSystem.value.replaceLocalizedDigitsToWesternArabicDigits(finalFormula); const calculatedValue = evaluateExpression(finalFormula); if (isNumber(calculatedValue)) { @@ -275,13 +276,11 @@ function getInitedFormattedValue(value: number, flipNegative?: boolean): string } function getFormattedValue(value: number): string { - const numeralSystem = getCurrentNumeralSystemType(); - if (!Number.isNaN(value) && Number.isFinite(value)) { return formatAmountToLocalizedNumeralsWithoutDigitGrouping(value, props.currency); } - return numeralSystem.digitZero; + return numeralSystem.value.digitZero; } function getDisplayCurrencyPrependAndAppendText(): CurrencyPrependAndAppendText | null { @@ -292,19 +291,17 @@ function getDisplayCurrencyPrependAndAppendText(): CurrencyPrependAndAppendText } watch(() => props.currency, () => { - const numeralSystem = getCurrentNumeralSystemType(); const newStringValue = getInitedFormattedValue(props.modelValue, props.flipNegative); - if (!(newStringValue === numeralSystem.digitZero && currentValue.value === '')) { + if (!(newStringValue === numeralSystem.value.digitZero && currentValue.value === '')) { currentValue.value = newStringValue; } }); watch(() => props.flipNegative, (newValue) => { - const numeralSystem = getCurrentNumeralSystemType(); const newStringValue = getInitedFormattedValue(props.modelValue, newValue); - if (!(newStringValue === numeralSystem.digitZero && currentValue.value === '')) { + if (!(newStringValue === numeralSystem.value.digitZero && currentValue.value === '')) { currentValue.value = newStringValue; } }); @@ -314,20 +311,18 @@ watch(() => props.modelValue, (newValue) => { newValue = -newValue; } - const numeralSystem = getCurrentNumeralSystemType(); const numericCurrentValue = parseAmountFromLocalizedNumerals(currentValue.value); if (newValue !== numericCurrentValue) { const newStringValue = getFormattedValue(newValue); - if (!(newStringValue === numeralSystem.digitZero && currentValue.value === '')) { + if (!(newStringValue === numeralSystem.value.digitZero && currentValue.value === '')) { currentValue.value = newStringValue; } } }); watch(currentValue, (newValue) => { - const numeralSystem = getCurrentNumeralSystemType(); let actualNumeralSystem: NumeralSystem | undefined = undefined; let finalValue = ''; @@ -340,16 +335,16 @@ watch(currentValue, (newValue) => { actualNumeralSystem = NumeralSystem.detect(newValue[0]); } - if (actualNumeralSystem && (actualNumeralSystem.type === NumeralSystem.WesternArabicNumerals.type || actualNumeralSystem.type === numeralSystem.type)) { + if (actualNumeralSystem && (actualNumeralSystem.type === NumeralSystem.WesternArabicNumerals.type || actualNumeralSystem.type === numeralSystem.value.type)) { for (let i = 0; i < newValue.length; i++) { - if (!NumeralSystem.WesternArabicNumerals.isDigit(newValue[i]) && !numeralSystem.isDigit(newValue[i]) && newValue[i] !== '-' && newValue[i] !== decimalSeparator) { + if (!NumeralSystem.WesternArabicNumerals.isDigit(newValue[i]) && !numeralSystem.value.isDigit(newValue[i]) && newValue[i] !== '-' && newValue[i] !== decimalSeparator) { break; } finalValue += newValue[i]; } - finalValue = numeralSystem.replaceWesternArabicDigitsToLocalizedDigits(finalValue); + finalValue = numeralSystem.value.replaceWesternArabicDigitsToLocalizedDigits(finalValue); } else if (newValue === '-' || newValue === decimalSeparator || newValue === `-${decimalSeparator}`) { finalValue = newValue; } diff --git a/src/components/mobile/NumberPadSheet.vue b/src/components/mobile/NumberPadSheet.vue index ee929ca6..daf97a5d 100644 --- a/src/components/mobile/NumberPadSheet.vue +++ b/src/components/mobile/NumberPadSheet.vue @@ -108,6 +108,8 @@ const previousValue = ref(''); const currentSymbol = ref(''); const currentValue = ref(getInitedStringValue(props.modelValue, props.flipNegative)); +const numeralSystem = computed(() => getCurrentNumeralSystemType()); + const digits = computed(() => getAllLocalizedDigits()); const decimalSeparator = computed(() => getCurrentDecimalSeparator()); @@ -120,8 +122,7 @@ const supportDecimalSeparator = computed(() => { }); const currentDisplay = computed(() => { - const numeralSystem = getCurrentNumeralSystemType(); - const finalPreviousValue = appendDigitGroupingSymbolAndDecimalSeparator(numeralSystem.replaceWesternArabicDigitsToLocalizedDigits(previousValue.value)); + const finalPreviousValue = appendDigitGroupingSymbolAndDecimalSeparator(numeralSystem.value.replaceWesternArabicDigitsToLocalizedDigits(previousValue.value)); let finalCurrentValue = currentValue.value; let currentValueSuffix = ''; @@ -130,7 +131,7 @@ const currentDisplay = computed(() => { currentValueSuffix = decimalSeparator.value; } - finalCurrentValue = appendDigitGroupingSymbolAndDecimalSeparator(numeralSystem.replaceWesternArabicDigitsToLocalizedDigits(finalCurrentValue)); + finalCurrentValue = appendDigitGroupingSymbolAndDecimalSeparator(numeralSystem.value.replaceWesternArabicDigitsToLocalizedDigits(finalCurrentValue)); if (currentValueSuffix) { finalCurrentValue += currentValueSuffix; diff --git a/src/views/desktop/exchangerates/ListPage.vue b/src/views/desktop/exchangerates/ListPage.vue index b45cd277..f14f2e4a 100644 --- a/src/views/desktop/exchangerates/ListPage.vue +++ b/src/views/desktop/exchangerates/ListPage.vue @@ -160,7 +160,7 @@ import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue'; import SnackBar from '@/components/desktop/SnackBar.vue'; import UpdateDialog from './list/dialogs/UpdateDialog.vue'; -import { ref, useTemplateRef, watch } from 'vue'; +import { ref, computed, useTemplateRef, watch } from 'vue'; import { useDisplay } from 'vuetify'; import { useI18n } from '@/locales/helpers.ts'; @@ -212,6 +212,8 @@ const customExchangeRateRemoving = ref>({}); const alwaysShowNav = ref(mdAndUp.value); const showNav = ref(mdAndUp.value); +const numeralSystem = computed(() => getCurrentNumeralSystemType()); + function reload(force: boolean): void { loading.value = true; @@ -286,11 +288,9 @@ function remove(currency: string): void { } function getFinalConvertedAmount(toExchangeRate: LocalizedLatestExchangeRate, displayLocalizedDigits: boolean): string { - const numeralSystem = getCurrentNumeralSystemType(); - if (!baseCurrency.value) { if (displayLocalizedDigits) { - return numeralSystem.digitZero; + return numeralSystem.value.digitZero; } else { return NumeralSystem.WesternArabicNumerals.digitZero; } @@ -308,7 +308,7 @@ function getFinalConvertedAmount(toExchangeRate: LocalizedLatestExchangeRate, di if (!exchangeRateAmount) { if (displayLocalizedDigits) { - return numeralSystem.digitZero; + return numeralSystem.value.digitZero; } else { return NumeralSystem.WesternArabicNumerals.digitZero; } @@ -317,7 +317,7 @@ function getFinalConvertedAmount(toExchangeRate: LocalizedLatestExchangeRate, di let ret = formatExchangeRateAmountToWesternArabicNumerals(exchangeRateAmount); if (displayLocalizedDigits) { - ret = numeralSystem.replaceWesternArabicDigitsToLocalizedDigits(ret); + ret = numeralSystem.value.replaceWesternArabicDigitsToLocalizedDigits(ret); } return ret; diff --git a/src/views/mobile/exchangerates/ListPage.vue b/src/views/mobile/exchangerates/ListPage.vue index 32e02b48..c870d8b9 100644 --- a/src/views/mobile/exchangerates/ListPage.vue +++ b/src/views/mobile/exchangerates/ListPage.vue @@ -185,6 +185,7 @@ const customExchangeRateToDelete = ref(null) const showDeleteActionSheet = ref(false); const textDirection = computed(() => getCurrentLanguageTextDirection()); +const numeralSystem = computed(() => getCurrentNumeralSystemType()); const displayBaseAmount = computed(() => formatAmountToLocalizedNumerals(baseAmount.value, baseCurrency.value)); const baseAmountFontSizeClass = computed(() => { if (baseAmount.value >= 100000000 || baseAmount.value <= -100000000) { @@ -275,13 +276,12 @@ function remove(customExchangeRate: LocalizedLatestExchangeRate | null, confirm: } function getFinalConvertedAmount(toExchangeRate: LocalizedLatestExchangeRate, displayLocalizedDigits: boolean): string { - const numeralSystem = getCurrentNumeralSystemType(); const fromExchangeRate = exchangeRatesStore.latestExchangeRateMap[baseCurrency.value]; const exchangeRateAmount = getConvertedAmount(baseAmount.value / 100, fromExchangeRate, toExchangeRate); if (!exchangeRateAmount) { if (displayLocalizedDigits) { - return numeralSystem.digitZero; + return numeralSystem.value.digitZero; } else { return NumeralSystem.WesternArabicNumerals.digitZero; } @@ -290,7 +290,7 @@ function getFinalConvertedAmount(toExchangeRate: LocalizedLatestExchangeRate, di let ret = formatExchangeRateAmountToWesternArabicNumerals(exchangeRateAmount); if (displayLocalizedDigits) { - ret = numeralSystem.replaceWesternArabicDigitsToLocalizedDigits(ret); + ret = numeralSystem.value.replaceWesternArabicDigitsToLocalizedDigits(ret); } return ret;