<template> <div :class="prefixCls"> <a-button type="primary" block @click="handleCopy"> <CopyOutlined class="mr-2" /> {{ t('layout.setting.copyBtn') }} </a-button> <a-button color="warning" block @click="handleResetSetting" class="my-3"> <RedoOutlined class="mr-2" /> {{ t('common.resetText') }} </a-button> <a-button color="error" block @click="handleClearAndRedo"> <RedoOutlined class="mr-2" /> {{ t('layout.setting.clearBtn') }} </a-button> </div> </template> <script lang="ts"> import { defineComponent, unref } from 'vue'; import { CopyOutlined, RedoOutlined } from '@ant-design/icons-vue'; import { useAppStore } from '/@/store/modules/app'; import { usePermissionStore } from '/@/store/modules/permission'; import { useMultipleTabStore } from '/@/store/modules/multipleTab'; import { useUserStore } from '/@/store/modules/user'; import { useDesign } from '/@/hooks/web/useDesign'; import { useI18n } from '/@/hooks/web/useI18n'; import { useMessage } from '/@/hooks/web/useMessage'; import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard'; import { updateColorWeak } from '/@/logics/theme/updateColorWeak'; import { updateGrayMode } from '/@/logics/theme/updateGrayMode'; import defaultSetting from '/@/settings/projectSetting'; import { updateSidebarBgColor } from '/@/logics/theme/updateBackground'; export default defineComponent({ name: 'SettingFooter', components: { CopyOutlined, RedoOutlined }, setup() { const permissionStore = usePermissionStore(); const { prefixCls } = useDesign('setting-footer'); const { t } = useI18n(); const { createSuccessModal, createMessage } = useMessage(); const tabStore = useMultipleTabStore(); const userStore = useUserStore(); const appStore = useAppStore(); function handleCopy() { const { isSuccessRef } = useCopyToClipboard( JSON.stringify(unref(appStore.getProjectConfig), null, 2), ); unref(isSuccessRef) && createSuccessModal({ title: t('layout.setting.operatingTitle'), content: t('layout.setting.operatingContent'), }); } function handleResetSetting() { try { appStore.setProjectConfig(defaultSetting); const { colorWeak, grayMode } = defaultSetting; updateSidebarBgColor(); updateColorWeak(colorWeak); updateGrayMode(grayMode); createMessage.success(t('layout.setting.resetSuccess')); } catch (error: any) { createMessage.error(error); } } function handleClearAndRedo() { localStorage.clear(); appStore.resetAllState(); permissionStore.resetState(); tabStore.resetState(); userStore.resetState(); location.reload(); } return { prefixCls, t, handleCopy, handleResetSetting, handleClearAndRedo, }; }, }); </script> <style lang="less" scoped> @prefix-cls: ~'@{namespace}-setting-footer'; .@{prefix-cls} { display: flex; flex-direction: column; align-items: center; } </style>