<script setup lang="ts">
|
import { computed, reactive, toRefs } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
|
import { Animation, BgTheme, Block, BuiltinTheme, ColorMode, Layout, SwitchItem, Tabbar, Theme } from '@vben/layouts';
|
import { usePreferences } from '@vben/preferences';
|
import { cloneDeep, merge } from '@vben/utils';
|
|
import { $t } from '#/locales';
|
import { defaultPreferencesConfig } from '#/utils/constants';
|
import { getRealJnpfAppEnCode } from '#/utils/jnpf';
|
|
const props = defineProps(['saveApi', 'query']);
|
|
const emit = defineEmits(['updatePreference']);
|
|
interface State {
|
dataForm: any;
|
}
|
|
defineExpose({ initConfig, handleSubmit });
|
|
const { createConfirm, createMessage } = useMessage();
|
const { isDark } = usePreferences();
|
const state = reactive<State>({
|
dataForm: cloneDeep(defaultPreferencesConfig),
|
});
|
const { dataForm } = toRefs(state);
|
|
const getShowLayoutSetting = computed(() => {
|
const appEnCode = getRealJnpfAppEnCode();
|
return appEnCode && !['teamwork', 'workFlow'].includes(appEnCode);
|
});
|
|
function handleSubmit() {
|
createConfirm({
|
iconType: 'warning',
|
title: $t('common.tipTitle'),
|
content: '您确定要保存，是否继续?',
|
onOk: () => {
|
const preferenceJson = JSON.stringify(state.dataForm);
|
props.saveApi({ preferenceJson, ...props.query }).then((res) => {
|
emit('updatePreference', preferenceJson);
|
createMessage.success(res.msg);
|
});
|
},
|
});
|
}
|
function initConfig(config) {
|
state.dataForm = merge(config || {}, defaultPreferencesConfig);
|
}
|
</script>
|
|
<template>
|
<div class="preference-v">
|
<Block :title="$t('preferences.layout')" v-if="getShowLayoutSetting">
|
<Layout v-model="dataForm.app.layout" />
|
</Block>
|
<Block :title="$t('preferences.theme.title')">
|
<Theme
|
v-model="dataForm.theme.mode"
|
v-model:theme-semi-dark-header="dataForm.theme.semiDarkHeader"
|
v-model:theme-semi-dark-sidebar="dataForm.theme.semiDarkSidebar" />
|
</Block>
|
<Block :title="$t('preferences.theme.builtin.title')">
|
<BuiltinTheme v-model="dataForm.theme.builtinType" v-model:theme-color-primary="dataForm.theme.colorPrimary" :is-dark="isDark" picker-placement="top" />
|
</Block>
|
<Block :title="$t('preferences.theme.bgType.title')">
|
<BgTheme v-model="dataForm.theme.bgType" />
|
</Block>
|
<Block :title="$t('preferences.animation.title')">
|
<Animation
|
v-model:transition-enable="dataForm.transition.enable"
|
v-model:transition-loading="dataForm.transition.loading"
|
v-model:transition-name="dataForm.transition.name"
|
v-model:transition-progress="dataForm.transition.progress" />
|
</Block>
|
<Block :title="$t('preferences.tabbar.title')">
|
<Tabbar
|
v-model:tabbar-draggable="dataForm.tabbar.draggable"
|
v-model:tabbar-enable="dataForm.tabbar.enable"
|
v-model:tabbar-show-icon="dataForm.tabbar.showIcon"
|
v-model:tabbar-show-maximize="dataForm.tabbar.showMaximize"
|
v-model:tabbar-show-more="dataForm.tabbar.showMore"
|
v-model:tabbar-style-type="dataForm.tabbar.styleType"
|
v-model:tabbar-wheelable="dataForm.tabbar.wheelable"
|
v-model:tabbar-max-count="dataForm.tabbar.maxCount"
|
v-model:tabbar-middle-click-to-close="dataForm.tabbar.middleClickToClose" />
|
</Block>
|
<Block :title="$t('preferences.widget.title')">
|
<SwitchItem v-model="dataForm.widget.globalSearch">
|
{{ $t('preferences.widget.globalSearch') }}
|
</SwitchItem>
|
<SwitchItem v-model="dataForm.widget.languageToggle">
|
{{ $t('preferences.widget.languageToggle') }}
|
</SwitchItem>
|
<SwitchItem v-model="dataForm.widget.fullscreen">
|
{{ $t('preferences.widget.fullscreen') }}
|
</SwitchItem>
|
<SwitchItem v-model="dataForm.widget.lockScreen">
|
{{ $t('preferences.widget.lockScreen') }}
|
</SwitchItem>
|
<SwitchItem v-model="dataForm.widget.sidebarToggle">
|
{{ $t('preferences.widget.sidebarToggle') }}
|
</SwitchItem>
|
<SwitchItem v-model="dataForm.widget.refresh">
|
{{ $t('preferences.widget.refresh') }}
|
</SwitchItem>
|
</Block>
|
<Block :title="$t('preferences.other')">
|
<ColorMode v-model:app-color-gray-mode="dataForm.app.colorGrayMode" v-model:app-color-weak-mode="dataForm.app.colorWeakMode" />
|
<SwitchItem v-model="dataForm.tabbar.keepAlive">
|
{{ $t('preferences.tabbar.keepAlive') }}
|
</SwitchItem>
|
</Block>
|
</div>
|
</template>
|
<style lang="scss" scoped>
|
.preference-v {
|
width: 350px;
|
|
:deep(h3) {
|
font-size: 18px;
|
line-height: 30px;
|
}
|
}
|
</style>
|
