feat: And surface switching loading optimization

This commit is contained in:
vben
2024-06-23 19:39:44 +08:00
parent 6afed34437
commit 24aab5b4bb
24 changed files with 596 additions and 1696 deletions

View File

@@ -6,13 +6,14 @@ import SwitchItem from '../switch-item.vue';
defineOptions({
name: 'PreferenceAnimation',
});
const transitionProgress = defineModel<boolean>('transitionProgress', {
// 默认值
default: false,
});
const transitionName = defineModel<string>('transitionName');
const transitionEnable = defineModel<boolean>('transitionEnable');
const transitionLoading = defineModel<boolean>('transitionLoading');
const transitionPreset = ['fade', 'fade-slide', 'fade-up', 'fade-down'];
@@ -23,10 +24,13 @@ function handleClick(value: string) {
<template>
<SwitchItem v-model="transitionProgress">
{{ $t('preferences.page-progress') }}
{{ $t('preferences.animation.progress') }}
</SwitchItem>
<SwitchItem v-model="transitionLoading">
{{ $t('preferences.animation.loading') }}
</SwitchItem>
<SwitchItem v-model="transitionEnable">
{{ $t('preferences.page-transition') }}
{{ $t('preferences.animation.transition') }}
</SwitchItem>
<div
v-if="transitionEnable"

View File

@@ -42,6 +42,7 @@ import Preferences from './preferences.vue';
:theme-mode="preferences.theme.mode"
:theme-radius="preferences.theme.radius"
:transition-enable="preferences.transition.enable"
:transition-loading="preferences.transition.loading"
:transition-name="preferences.transition.name"
:transition-progress="preferences.transition.progress"
@update:app-ai-assistant="
@@ -143,6 +144,9 @@ import Preferences from './preferences.vue';
@update:transition-enable="
(val) => updatePreferences({ transition: { enable: val } })
"
@update:transition-loading="
(val) => updatePreferences({ transition: { loading: val } })
"
@update:transition-name="
(val) => updatePreferences({ transition: { name: val } })
"

View File

@@ -64,6 +64,7 @@ const appContentCompact = defineModel<ContentCompactType>('appContentCompact');
const transitionProgress = defineModel<boolean>('transitionProgress');
const transitionName = defineModel<string>('transitionName');
const transitionLoading = defineModel<boolean>('transitionLoading');
const transitionEnable = defineModel<boolean>('transitionEnable');
const themeColorPrimary = defineModel<string>('themeColorPrimary');
@@ -209,9 +210,10 @@ function handleReset() {
/>
</Block>
<Block :title="$t('preferences.animation')">
<Block :title="$t('preferences.animation.name')">
<Animation
v-model:transition-enable="transitionEnable"
v-model:transition-loading="transitionLoading"
v-model:transition-name="transitionName"
v-model:transition-progress="transitionProgress"
/>