| 提交 | 用户 | age | ||
| ed41e5 | 1 | <template> |
| V | 2 | <div :class="prefixCls"> |
| 3 | <a-button type="primary" block @click="handleCopy"> | |
| 4 | <CopyOutlined class="mr-2" /> | |
| 5 | {{ t('layout.setting.copyBtn') }} | |
| 6 | </a-button> | |
| 7 | ||
| 8 | <a-button color="warning" block @click="handleResetSetting" class="my-3"> | |
| 9 | <RedoOutlined class="mr-2" /> | |
| efbde0 | 10 | {{ t('common.resetText') }} |
| ed41e5 | 11 | </a-button> |
| V | 12 | |
| 13 | <a-button color="error" block @click="handleClearAndRedo"> | |
| 14 | <RedoOutlined class="mr-2" /> | |
| 15 | {{ t('layout.setting.clearBtn') }} | |
| 16 | </a-button> | |
| 17 | </div> | |
| 18 | </template> | |
| 19 | <script lang="ts"> | |
| 20 | import { defineComponent, unref } from 'vue'; | |
| 21 | ||
| b7ce74 | 22 | import { CopyOutlined, RedoOutlined } from '@ant-design/icons-vue'; |
| V | 23 | |
| 215d8b | 24 | import { useAppStore } from '/@/store/modules/app'; |
| V | 25 | import { usePermissionStore } from '/@/store/modules/permission'; |
| 26 | import { useMultipleTabStore } from '/@/store/modules/multipleTab'; | |
| 27 | import { useUserStore } from '/@/store/modules/user'; | |
| b7ce74 | 28 | |
| ed41e5 | 29 | import { useDesign } from '/@/hooks/web/useDesign'; |
| V | 30 | import { useI18n } from '/@/hooks/web/useI18n'; |
| 31 | import { useMessage } from '/@/hooks/web/useMessage'; | |
| 32 | import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard'; | |
| b7ce74 | 33 | |
| 3d1681 | 34 | import { updateColorWeak } from '/@/logics/theme/updateColorWeak'; |
| V | 35 | import { updateGrayMode } from '/@/logics/theme/updateGrayMode'; |
| b7ce74 | 36 | import defaultSetting from '/@/settings/projectSetting'; |
| 215d8b | 37 | |
| ed41e5 | 38 | export default defineComponent({ |
| V | 39 | name: 'SettingFooter', |
| 40 | components: { CopyOutlined, RedoOutlined }, | |
| 41 | setup() { | |
| 215d8b | 42 | const permissionStore = usePermissionStore(); |
| ed41e5 | 43 | const { prefixCls } = useDesign('setting-footer'); |
| V | 44 | const { t } = useI18n(); |
| 45 | const { createSuccessModal, createMessage } = useMessage(); | |
| 215d8b | 46 | const tabStore = useMultipleTabStore(); |
| V | 47 | const userStore = useUserStore(); |
| 48 | const appStore = useAppStore(); | |
| ed41e5 | 49 | |
| V | 50 | function handleCopy() { |
| 215d8b | 51 | const { isSuccessRef } = useCopyToClipboard( |
| V | 52 | JSON.stringify(unref(appStore.getProjectConfig), null, 2) |
| 53 | ); | |
| ed41e5 | 54 | unref(isSuccessRef) && |
| V | 55 | createSuccessModal({ |
| 56 | title: t('layout.setting.operatingTitle'), | |
| 57 | content: t('layout.setting.operatingContent'), | |
| 58 | }); | |
| 59 | } | |
| 60 | function handleResetSetting() { | |
| 61 | try { | |
| 215d8b | 62 | appStore.setProjectConfig(defaultSetting); |
| ed41e5 | 63 | const { colorWeak, grayMode } = defaultSetting; |
| V | 64 | // updateTheme(themeColor); |
| 65 | updateColorWeak(colorWeak); | |
| 66 | updateGrayMode(grayMode); | |
| 67 | createMessage.success(t('layout.setting.resetSuccess')); | |
| 68 | } catch (error) { | |
| 69 | createMessage.error(error); | |
| 70 | } | |
| 71 | } | |
| 72 | ||
| 73 | function handleClearAndRedo() { | |
| 74 | localStorage.clear(); | |
| 215d8b | 75 | appStore.resetAllState(); |
| V | 76 | permissionStore.resetState(); |
| 77 | tabStore.resetState(); | |
| 78 | userStore.resetState(); | |
| ed41e5 | 79 | location.reload(); |
| V | 80 | } |
| 81 | return { | |
| 82 | prefixCls, | |
| 83 | t, | |
| 84 | handleCopy, | |
| 85 | handleResetSetting, | |
| 86 | handleClearAndRedo, | |
| 87 | }; | |
| 88 | }, | |
| 89 | }); | |
| 90 | </script> | |
| 91 | <style lang="less" scoped> | |
| 92 | @prefix-cls: ~'@{namespace}-setting-footer'; | |
| 93 | ||
| 94 | .@{prefix-cls} { | |
| 95 | display: flex; | |
| 96 | flex-direction: column; | |
| 97 | align-items: center; | |
| 98 | } | |
| 99 | </style> | |
