lingling
/
tiny-rdm
mirror of https://github.com/tiny-craft/tiny-rdm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

perf: add loading state in preferences dialog

This commit is contained in:
tiny-craft 2023-07-19 18:41:04 +08:00
parent 2b3acc0e2b
commit c447f2cdf0
1 changed files with 81 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
frontend/src/components/dialogs/PreferencesDialog.vue
View File

@ -67,78 +67,94 @@ const onClose = () => {
preset="dialog" preset="dialog"
transform-origin="center" transform-origin="center"
> >
<n-tabs v-model:value="tab" type="line" animated> <n-spin :show="loading">
<n-tab-pane :tab="$t('general')" display-directive="show" name="general"> <n-tabs v-model:value="tab" type="line" animated>
<n-form <n-tab-pane :tab="$t('general')" display-directive="show" name="general">
:label-width="formLabelWidth" <n-form
:model="prefStore.general" :label-width="formLabelWidth"
:show-require-mark="false" :model="prefStore.general"
label-align="right" :show-require-mark="false"
label-placement="left" label-align="right"
> label-placement="left"
<n-form-item :label="$t('theme')" required> >
<n-radio-group v-model:value="prefStore.general.theme" name="theme" size="medium"> <n-form-item :label="$t('theme')" required>
<n-radio-button v-for="opt in prefStore.themeOption" :key="opt.value" :value="opt.value"> <n-radio-group v-model:value="prefStore.general.theme" name="theme" size="medium">
{{ opt.label }} <n-radio-button
</n-radio-button> v-for="opt in prefStore.themeOption"
</n-radio-group> :key="opt.value"
</n-form-item> :value="opt.value"
<n-form-item :label="$t('language')" required> >
<n-select {{ opt.label }}
v-model:value="prefStore.general.language" </n-radio-button>
:options="prefStore.langOption" </n-radio-group>
filterable </n-form-item>
/> <n-form-item :label="$t('language')" required>
</n-form-item> <n-select
<n-form-item :label="$t('font')" required> v-model:value="prefStore.general.language"
<n-select v-model:value="prefStore.general.font" :options="prefStore.fontOption" filterable /> :options="prefStore.langOption"
</n-form-item> filterable
<n-form-item :label="$t('font_size')"> />
<n-input-number v-model:value="prefStore.general.fontSize" :max="65535" :min="1" /> </n-form-item>
</n-form-item> <n-form-item :label="$t('font')" required>
<n-form-item :label="$t('proxy')"> <n-select
<n-space> v-model:value="prefStore.general.font"
<n-checkbox v-model:checked="prefStore.general.useSysProxy"> :options="prefStore.fontOption"
{{ $t('use_system_proxy') }} filterable
/>
</n-form-item>
<n-form-item :label="$t('font_size')">
<n-input-number v-model:value="prefStore.general.fontSize" :max="65535" :min="1" />
</n-form-item>
<n-form-item :label="$t('proxy')">
<n-space>
<n-checkbox v-model:checked="prefStore.general.useSysProxy">
{{ $t('use_system_proxy') }}
</n-checkbox>
<n-checkbox v-model:checked="prefStore.general.useSysProxyHttp">
{{ $t('use_system_proxy_http') }}
</n-checkbox>
</n-space>
</n-form-item>
<n-form-item :label="$t('update')">
<n-checkbox v-model:checked="prefStore.general.checkUpdate">
{{ $t('auto_check_update') }}
</n-checkbox> </n-checkbox>
<n-checkbox v-model:checked="prefStore.general.useSysProxyHttp"> </n-form-item>
{{ $t('use_system_proxy_http') }} </n-form>
</n-checkbox> </n-tab-pane>
</n-space>
</n-form-item>
<n-form-item :label="$t('update')">
<n-checkbox v-model:checked="prefStore.general.checkUpdate">
{{ $t('auto_check_update') }}
</n-checkbox>
</n-form-item>
</n-form>
</n-tab-pane>
<n-tab-pane :tab="$t('editor')" display-directive="show" name="editor"> <n-tab-pane :tab="$t('editor')" display-directive="show" name="editor">
<n-form <n-form
:label-width="formLabelWidth" :label-width="formLabelWidth"
:model="prefStore.editor" :model="prefStore.editor"
:show-require-mark="false" :show-require-mark="false"
label-align="right" label-align="right"
label-placement="left" label-placement="left"
> >
<n-form-item :label="$t('font')" required> <n-form-item :label="$t('font')" required>
<n-select v-model:value="prefStore.editor.font" :options="prefStore.fontOption" filterable /> <n-select
</n-form-item> v-model:value="prefStore.editor.font"
<n-form-item :label="$t('font_size')"> :options="prefStore.fontOption"
<n-input-number v-model:value="prefStore.editor.fontSize" :max="65535" :min="1" /> filterable
</n-form-item> />
</n-form> </n-form-item>
</n-tab-pane> <n-form-item :label="$t('font_size')">
</n-tabs> <n-input-number v-model:value="prefStore.editor.fontSize" :max="65535" :min="1" />
</n-form-item>
</n-form>
</n-tab-pane>
</n-tabs>
</n-spin>
<template #action> <template #action>
<div class="flex-item-expand"> <div class="flex-item-expand">
<n-button @click="prefStore.restorePreferences">{{ $t('restore_defaults') }}</n-button> <n-button :disabled="loading" @click="prefStore.restorePreferences">{{
$t('restore_defaults')
}}</n-button>
</div> </div>
<div class="flex-item n-dialog__action"> <div class="flex-item n-dialog__action">
<n-button @click="onClose">{{ $t('cancel') }}</n-button> <n-button :disabled="loading" @click="onClose">{{ $t('cancel') }}</n-button>
<n-button type="primary" @click="onSavePreferences">{{ $t('save') }}</n-button> <n-button type="primary" :disabled="loading" @click="onSavePreferences">{{ $t('save') }}</n-button>
</div> </div>
</template> </template>
</n-modal> </n-modal>