<template>
|
<div v-if="!appStore.navbar" class="fixed-settings" @click="setVisible">
|
<a-button type="primary">
|
<template #icon>
|
<icon-settings />
|
</template>
|
</a-button>
|
</div>
|
<a-drawer
|
:width="300"
|
unmount-on-close
|
:visible="visible"
|
:cancel-text="$t('settings.close')"
|
:ok-text="$t('settings.copySettings')"
|
@ok="copySettings"
|
@cancel="cancel"
|
>
|
<template #title> {{ $t('settings.title') }} </template>
|
<Block :options="contentOpts" :title="$t('settings.content')" />
|
<Block :options="othersOpts" :title="$t('settings.otherSettings')" />
|
<a-alert>{{ $t('settings.alertContent') }}</a-alert>
|
</a-drawer>
|
</template>
|
|
<script lang="ts" setup>
|
import { computed } from 'vue';
|
import { Message } from '@arco-design/web-vue';
|
import { useI18n } from 'vue-i18n';
|
import { useClipboard } from '@vueuse/core';
|
import { useAppStore } from '@/store';
|
import Block from './block.vue';
|
|
const emit = defineEmits(['cancel']);
|
|
const appStore = useAppStore();
|
const { t } = useI18n();
|
const { copy } = useClipboard();
|
const visible = computed(() => appStore.globalSettings);
|
const contentOpts = computed(() => [
|
{ name: 'settings.navbar', key: 'navbar', defaultVal: appStore.navbar },
|
{
|
name: 'settings.menu',
|
key: 'menu',
|
defaultVal: appStore.menu,
|
},
|
{
|
name: 'settings.topMenu',
|
key: 'topMenu',
|
defaultVal: appStore.topMenu,
|
},
|
{ name: 'settings.footer', key: 'footer', defaultVal: appStore.footer },
|
{ name: 'settings.tabBar', key: 'tabBar', defaultVal: appStore.tabBar },
|
{
|
name: 'settings.menuFromServer',
|
key: 'menuFromServer',
|
defaultVal: appStore.menuFromServer,
|
},
|
{
|
name: 'settings.menuWidth',
|
key: 'menuWidth',
|
defaultVal: appStore.menuWidth,
|
type: 'number',
|
},
|
]);
|
const othersOpts = computed(() => [
|
{
|
name: 'settings.colorWeak',
|
key: 'colorWeak',
|
defaultVal: appStore.colorWeak,
|
},
|
]);
|
|
const cancel = () => {
|
appStore.updateSettings({ globalSettings: false });
|
emit('cancel');
|
};
|
const copySettings = async () => {
|
const text = JSON.stringify(appStore.$state, null, 2);
|
await copy(text);
|
Message.success(t('settings.copySettings.message'));
|
};
|
const setVisible = () => {
|
appStore.updateSettings({ globalSettings: true });
|
};
|
</script>
|
|
<style scoped lang="less">
|
.fixed-settings {
|
position: fixed;
|
top: 280px;
|
right: 0;
|
|
svg {
|
font-size: 18px;
|
vertical-align: -4px;
|
}
|
}
|
</style>
|
