perf: add loading state in preferences dialog
This commit is contained in:
parent
2b3acc0e2b
commit
c447f2cdf0
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue