perf: add loading state in preferences dialog
This commit is contained in:
tiny-craft
parent
2b3acc0e2b
commit
c447f2cdf0
|
|
@ -67,78 +67,94 @@ const onClose = () => {
|
|||
preset="dialog"
|
||||
transform-origin="center"
|
||||
>
|
||||
<n-tabs v-model:value="tab" type="line" animated>
|
||||
<n-tab-pane :tab="$t('general')" display-directive="show" name="general">
|
||||
<n-form
|
||||
:label-width="formLabelWidth"
|
||||
:model="prefStore.general"
|
||||
:show-require-mark="false"
|
||||
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-radio-button v-for="opt in prefStore.themeOption" :key="opt.value" :value="opt.value">
|
||||
{{ opt.label }}
|
||||
</n-radio-button>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
<n-form-item :label="$t('language')" required>
|
||||
<n-select
|
||||
v-model:value="prefStore.general.language"
|
||||
:options="prefStore.langOption"
|
||||
filterable
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item :label="$t('font')" required>
|
||||
<n-select v-model:value="prefStore.general.font" :options="prefStore.fontOption" 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-spin :show="loading">
|
||||
<n-tabs v-model:value="tab" type="line" animated>
|
||||
<n-tab-pane :tab="$t('general')" display-directive="show" name="general">
|
||||
<n-form
|
||||
:label-width="formLabelWidth"
|
||||
:model="prefStore.general"
|
||||
:show-require-mark="false"
|
||||
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-radio-button
|
||||
v-for="opt in prefStore.themeOption"
|
||||
:key="opt.value"
|
||||
:value="opt.value"
|
||||
>
|
||||
{{ opt.label }}
|
||||
</n-radio-button>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
<n-form-item :label="$t('language')" required>
|
||||
<n-select
|
||||
v-model:value="prefStore.general.language"
|
||||
:options="prefStore.langOption"
|
||||
filterable
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item :label="$t('font')" required>
|
||||
<n-select
|
||||
v-model:value="prefStore.general.font"
|
||||
:options="prefStore.fontOption"
|
||||
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 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-form-item>
|
||||
</n-form>
|
||||
</n-tab-pane>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
</n-tab-pane>
|
||||
|
||||
<n-tab-pane :tab="$t('editor')" display-directive="show" name="editor">
|
||||
<n-form
|
||||
:label-width="formLabelWidth"
|
||||
:model="prefStore.editor"
|
||||
:show-require-mark="false"
|
||||
label-align="right"
|
||||
label-placement="left"
|
||||
>
|
||||
<n-form-item :label="$t('font')" required>
|
||||
<n-select v-model:value="prefStore.editor.font" :options="prefStore.fontOption" filterable />
|
||||
</n-form-item>
|
||||
<n-form-item :label="$t('font_size')">
|
||||
<n-input-number v-model:value="prefStore.editor.fontSize" :max="65535" :min="1" />
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
</n-tab-pane>
|
||||
</n-tabs>
|
||||
<n-tab-pane :tab="$t('editor')" display-directive="show" name="editor">
|
||||
<n-form
|
||||
:label-width="formLabelWidth"
|
||||
:model="prefStore.editor"
|
||||
:show-require-mark="false"
|
||||
label-align="right"
|
||||
label-placement="left"
|
||||
>
|
||||
<n-form-item :label="$t('font')" required>
|
||||
<n-select
|
||||
v-model:value="prefStore.editor.font"
|
||||
:options="prefStore.fontOption"
|
||||
filterable
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item :label="$t('font_size')">
|
||||
<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>
|
||||
<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 class="flex-item n-dialog__action">
|
||||
<n-button @click="onClose">{{ $t('cancel') }}</n-button>
|
||||
<n-button type="primary" @click="onSavePreferences">{{ $t('save') }}</n-button>
|
||||
<n-button :disabled="loading" @click="onClose">{{ $t('cancel') }}</n-button>
|
||||
<n-button type="primary" :disabled="loading" @click="onSavePreferences">{{ $t('save') }}</n-button>
|
||||
</div>
|
||||
</template>
|
||||
</n-modal>
|
||||
|
|
|
|||
Loading…
Reference in New Issue