zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

code refactor

Browse Source
This commit is contained in:
MaysWind
2025-03-09 00:39:54 +08:00
parent 34247be52c
commit 09574f1c75
9 changed files with 95 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/base/LanguageSelectButtonBase.ts → src/components/base/LanguageSelectBase.ts
+5 -4
View File
@@ -5,22 +5,23 @@ import { useI18n } from '@/locales/helpers.ts';
import { useSettingsStore } from '@/stores/setting.ts';
export interface LanguageSelectButtonBaseProps {
export interface LanguageSelectBaseProps {
disabled?: boolean;
includeSystemDefault?: boolean;
useModelValue?: boolean;
modelValue?: string;
}
export interface LanguageSelectButtonBaseEmits {
export interface LanguageSelectBaseEmits {
(e: 'update:modelValue', value: string): void;
}
export function useLanguageSelectButtonBase(props: LanguageSelectButtonBaseProps, emit: LanguageSelectButtonBaseEmits) {
export function useLanguageSelectButtonBase(props: LanguageSelectBaseProps, emit: LanguageSelectBaseEmits) {
const { getCurrentLanguageTag, getCurrentLanguageDisplayName, getAllLanguageOptions, getLanguageInfo, setLanguage } = useI18n();
const settingsStore = useSettingsStore();
const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(!!props.includeSystemDefault));
const currentLocale = computed<string>({
get: () => getCurrentLanguageTag(),
src/components/desktop/LanguageSelect.vue
+67
View File
@@ -0,0 +1,67 @@
<template>
<v-select
item-title="nativeDisplayName"
item-value="languageTag"
persistent-placeholder
:disabled="disabled"
:label="label"
:placeholder="placeholder"
:items="allLanguages"
v-model="currentLocaleValue"
>
<template #item="{ props, item }">
<v-list-item :value="item.value" v-bind="props">
<template #title>
<v-list-item-title>
<div class="d-flex align-center">
<span>{{ item.title }}</span>
<v-spacer style="min-width: 40px" />
<v-icon :icon="mdiCheck" v-if="isLanguageSelected(item.raw.languageTag)" />
<span class="text-field-append-text" v-if="!isLanguageSelected(item.raw.languageTag)">{{ item.raw.displayName }}</span>
</div>
</v-list-item-title>
</template>
</v-list-item>
</template>
</v-select>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { type LanguageSelectBaseProps, type LanguageSelectBaseEmits, useLanguageSelectButtonBase } from '@/components/base/LanguageSelectBase.ts';
import { useI18n } from '@/locales/helpers.ts';
import {
mdiCheck
} from '@mdi/js';
interface DesktopLanguageSelectProps extends LanguageSelectBaseProps {
label?: string;
placeholder?: string;
}
const props = defineProps<DesktopLanguageSelectProps>();
const emit = defineEmits<LanguageSelectBaseEmits>();
const { getCurrentLanguageTag } = useI18n();
const {
allLanguages,
updateLanguage,
isLanguageSelected
} = useLanguageSelectButtonBase(props, emit);
const currentLocaleValue = computed<string>({
get: () => {
if (props.useModelValue) {
return props.modelValue ?? '';
} else {
return getCurrentLanguageTag()
}
},
set: (value: string) => {
updateLanguage(value);
}
});
</script>
src/components/desktop/LanguageSelectButton.vue
+3 -3
View File
@@ -19,14 +19,14 @@
</template>
<script setup lang="ts">
import { type LanguageSelectButtonBaseProps, type LanguageSelectButtonBaseEmits, useLanguageSelectButtonBase } from '@/components/base/LanguageSelectButtonBase.ts';
import { type LanguageSelectBaseProps, type LanguageSelectBaseEmits, useLanguageSelectButtonBase } from '@/components/base/LanguageSelectBase.ts';
import {
mdiCheck
} from '@mdi/js';
const props = defineProps<LanguageSelectButtonBaseProps>();
const emit = defineEmits<LanguageSelectButtonBaseEmits>();
const props = defineProps<LanguageSelectBaseProps>();
const emit = defineEmits<LanguageSelectBaseEmits>();
const {
allLanguages,
src/components/mobile/LanguageSelectButton.vue
+3 -3
View File
@@ -18,10 +18,10 @@
</template>
<script setup lang="ts">
import { type LanguageSelectButtonBaseProps, type LanguageSelectButtonBaseEmits, useLanguageSelectButtonBase } from '@/components/base/LanguageSelectButtonBase.ts';
import { type LanguageSelectBaseProps, type LanguageSelectBaseEmits, useLanguageSelectButtonBase } from '@/components/base/LanguageSelectBase.ts';
const props = defineProps<LanguageSelectButtonBaseProps>();
const emit = defineEmits<LanguageSelectButtonBaseEmits>();
const props = defineProps<LanguageSelectBaseProps>();
const emit = defineEmits<LanguageSelectBaseEmits>();
const {
allLanguages,
src/desktop-main.ts
+2
View File
@@ -78,6 +78,7 @@ import MapView from '@/components/common/MapView.vue';
import ItemIcon from '@/components/desktop/ItemIcon.vue';
import BtnVerticalGroup from '@/components/desktop/BtnVerticalGroup.vue';
import AmountInput from '@/components/desktop/AmountInput.vue';
import LanguageSelect from '@/components/desktop/LanguageSelect.vue';
import LanguageSelectButton from '@/components/desktop/LanguageSelectButton.vue';
import DateTimeSelect from '@/components/desktop/DateTimeSelect.vue';
import DateSelect from '@/components/desktop/DateSelect.vue';
@@ -451,6 +452,7 @@ app.component('MapView', MapView);
app.component('ItemIcon', ItemIcon);
app.component('BtnVerticalGroup', BtnVerticalGroup);
app.component('AmountInput', AmountInput);
app.component('LanguageSelect', LanguageSelect);
app.component('LanguageSelectButton', LanguageSelectButton);
app.component('DateTimeSelect', DateTimeSelect);
app.component('DateSelect', DateSelect);
src/views/base/users/UserProfilePageBase.ts
-4
View File
@@ -1,6 +1,5 @@
import { ref, computed } from 'vue';
import { type LanguageOption } from '@/locales/index.ts';
import { useI18n } from '@/locales/helpers.ts';
import { useSettingsStore } from '@/stores/setting.ts';
@@ -23,7 +22,6 @@ export function useUserProfilePageBase() {
tt,
getDefaultCurrency,
getDefaultFirstDayOfWeek,
getAllLanguageOptions,
getAllCurrencies,
getAllWeekDays,
getAllLongDateFormats,
@@ -55,7 +53,6 @@ export function useUserProfilePageBase() {
const resending = ref<boolean>(false);
const saving = ref<boolean>(false);
const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(true));
const allCurrencies = computed<LocalizedCurrencyInfo[]>(() => getAllCurrencies());
const allAccounts = computed<Account[]>(() => accountsStore.allPlainAccounts);
const allVisibleAccounts = computed<Account[]>(() => accountsStore.allVisiblePlainAccounts);
@@ -189,7 +186,6 @@ export function useUserProfilePageBase() {
resending,
saving,
// computed states
allLanguages,
allCurrencies,
allAccounts,
allVisibleAccounts,
src/views/desktop/SignupPage.vue
+5 -27
View File
@@ -90,30 +90,10 @@
<v-row>
<v-col cols="12" md="12">
<v-select
item-title="nativeDisplayName"
item-value="languageTag"
:disabled="submitting || navigateToHomePage"
:label="languageTitle"
:placeholder="languageTitle"
:items="allLanguages"
v-model="currentLocale"
>
<template #item="{ props, item }">
<v-list-item :value="item.value" v-bind="props">
<template #title>
<v-list-item-title>
<div class="d-flex align-center">
<span>{{ item.title }}</span>
<v-spacer />
<v-icon :icon="mdiCheck" v-if="currentLocale == item.raw.languageTag" />
<span class="text-field-append-text" v-if="currentLocale !== item.raw.languageTag">{{ item.raw.displayName }}</span>
</div>
</v-list-item-title>
</template>
</v-list-item>
</template>
</v-select>
<language-select :disabled="submitting || navigateToHomePage"
:label="languageTitle"
:placeholder="languageTitle"
:use-model-value="true" v-model="currentLocale" />
</v-col>
</v-row>
@@ -243,7 +223,6 @@ import { ref, computed, useTemplateRef } from 'vue';
import { useRouter } from 'vue-router';
import { useTheme } from 'vuetify';
import type { LanguageOption } from '@/locales/index.ts';
import { useI18n } from '@/locales/helpers.ts';
import { useSignupPageBase } from '@/views/base/SignupPageBase.ts';
@@ -269,7 +248,7 @@ type SnackBarType = InstanceType<typeof SnackBar>;
const router = useRouter();
const theme = useTheme();
const { tt, getAllLanguageOptions, getAllCurrencies, getAllWeekDays, getAllTransactionDefaultCategories } = useI18n();
const { tt, getAllCurrencies, getAllWeekDays, getAllTransactionDefaultCategories } = useI18n();
const {
user,
@@ -291,7 +270,6 @@ const usePresetCategories = ref<boolean>(false);
const finalResultMessage = ref<string | null>(null);
const navigateToHomePage = ref<boolean>(false);
const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
const allCurrencies = computed<LocalizedCurrencyInfo[]>(() => getAllCurrencies());
const allWeekDays = computed<TypeAndDisplayName[]>(() => getAllWeekDays());
const allPresetCategories = computed<PartialRecord<CategoryType, LocalizedPresetCategory[]>>(() => getAllTransactionDefaultCategories(0, currentLocale.value));
src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue
+6 -28
View File
@@ -116,31 +116,11 @@
<v-card-text>
<v-row>
<v-col cols="12" md="6">
<v-select
item-title="nativeDisplayName"
item-value="languageTag"
persistent-placeholder
:disabled="loading || saving"
:label="languageTitle"
:placeholder="languageTitle"
:items="allLanguages"
v-model="newProfile.language"
>
<template #item="{ props, item }">
<v-list-item :value="item.value" v-bind="props">
<template #title>
<v-list-item-title>
<div class="d-flex align-center">
<span>{{ item.title }}</span>
<v-spacer />
<v-icon :icon="mdiCheck" v-if="newProfile.language == item.raw.languageTag" />
<span class="text-field-append-text" v-if="newProfile.language !== item.raw.languageTag">{{ item.raw.displayName }}</span>
</div>
</v-list-item-title>
</template>
</v-list-item>
</template>
</v-select>
<language-select :disabled="loading || saving"
:label="languageTitle"
:placeholder="languageTitle"
:include-system-default="true"
:use-model-value="true" v-model="newProfile.language" />
</v-col>
<v-col cols="12" md="6">
@@ -366,8 +346,7 @@ import { isUserVerifyEmailEnabled } from '@/lib/server_settings.ts';
import {
mdiAccount,
mdiAccountEditOutline,
mdiCheck
mdiAccountEditOutline
} from '@mdi/js';
type ConfirmDialogType = InstanceType<typeof ConfirmDialog>;
@@ -382,7 +361,6 @@ const {
loading,
resending,
saving,
allLanguages,
allCurrencies,
allVisibleAccounts,
allVisibleCategorizedAccounts,
src/views/mobile/users/UserProfilePage.vue
+4 -2
View File
@@ -344,6 +344,7 @@
import { ref, computed } from 'vue';
import type { Router } from 'framework7/types';
import type { LanguageOption } from '@/locales/index.ts';
import { useI18n } from '@/locales/helpers.ts';
import { useI18nUIComponents, showLoading, hideLoading } from '@/lib/ui/mobile.ts';
import { useUserProfilePageBase } from '@/views/base/users/UserProfilePageBase.ts';
@@ -362,7 +363,7 @@ const props = defineProps<{
f7router: Router.Router;
}>();
const { tt, getCurrencyName } = useI18n();
const { tt, getAllLanguageOptions, getCurrencyName } = useI18n();
const { showAlert, showToast, routeBackOnError } = useI18nUIComponents();
const {
@@ -371,7 +372,6 @@ const {
loading,
resending,
saving,
allLanguages,
allCurrencies,
allAccounts,
allVisibleAccounts,
@@ -413,6 +413,8 @@ const showAccountSheet = ref<boolean>(false);
const showDefaultCurrencyPopup = ref<boolean>(false);
const showMoreActionSheet = ref<boolean>(false);
const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(true));
const currentLanguageName = computed<string>(() => {
for (let i = 0; i < allLanguages.value.length; i++) {
if (allLanguages.value[i].languageTag === newProfile.value.language) {