You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
3.1 KiB
100 lines
3.1 KiB
<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 |
|
class="my-3" |
|
@click="handleResetSetting" |
|
> |
|
<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'; |
|
|
|
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; |
|
// updateTheme(themeColor); |
|
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>
|
|
|