<script setup lang="ts">
|
import { watermarkTimeFormatOptions } from '@/constants/app';
|
import { useThemeStore } from '@/store/modules/theme';
|
import { $t } from '@/locales';
|
import SettingItem from '../../../components/setting-item.vue';
|
|
defineOptions({
|
name: 'WatermarkSettings'
|
});
|
|
const themeStore = useThemeStore();
|
</script>
|
|
<template>
|
<NDivider>{{ $t('theme.general.watermark.title') }}</NDivider>
|
<TransitionGroup tag="div" name="setting-list" class="flex-col-stretch gap-12px">
|
<SettingItem key="1" :label="$t('theme.general.watermark.visible')">
|
<NSwitch v-model:value="themeStore.watermark.visible" />
|
</SettingItem>
|
<SettingItem v-if="themeStore.watermark.visible" key="2" :label="$t('theme.general.watermark.enableUserName')">
|
<NSwitch :value="themeStore.watermark.enableUserName" @update:value="themeStore.setWatermarkEnableUserName" />
|
</SettingItem>
|
<SettingItem v-if="themeStore.watermark.visible" key="3" :label="$t('theme.general.watermark.enableTime')">
|
<NSwitch :value="themeStore.watermark.enableTime" @update:value="themeStore.setWatermarkEnableTime" />
|
</SettingItem>
|
<SettingItem
|
v-if="themeStore.watermark.visible && themeStore.watermark.enableTime"
|
key="4"
|
:label="$t('theme.general.watermark.timeFormat')"
|
>
|
<NSelect
|
v-model:value="themeStore.watermark.timeFormat"
|
:options="watermarkTimeFormatOptions"
|
size="small"
|
class="w-210px"
|
/>
|
</SettingItem>
|
<SettingItem key="5" :label="$t('theme.general.watermark.text')">
|
<NInput
|
v-model:value="themeStore.watermark.text"
|
autosize
|
type="text"
|
size="small"
|
class="w-120px"
|
placeholder="SoybeanAdmin"
|
/>
|
</SettingItem>
|
</TransitionGroup>
|
</template>
|
|
<style scoped>
|
.setting-list-move,
|
.setting-list-enter-active,
|
.setting-list-leave-active {
|
--uno: transition-all-300;
|
}
|
|
.setting-list-enter-from,
|
.setting-list-leave-to {
|
--uno: opacity-0 -translate-x-30px;
|
}
|
|
.setting-list-leave-active {
|
--uno: absolute;
|
}
|
</style>
|
