<!-- 设置操作按钮 -->
|
<template>
|
<div
|
class="mt-10 flex gap-8 border-t border-[var(--default-border)] bg-[var(--art-bg-color)] pt-5"
|
>
|
<ElButton type="primary" class="flex-1 !h-8" @click="handleCopyConfig">
|
{{ $t('setting.actions.copyConfig') }}
|
</ElButton>
|
<ElButton type="danger" plain class="flex-1 !h-8" @click="handleResetConfig">
|
{{ $t('setting.actions.resetConfig') }}
|
</ElButton>
|
</div>
|
</template>
|
|
<script setup>
|
import { nextTick } from 'vue'
|
import { useSettingStore } from '@/store/modules/setting'
|
import { SETTING_DEFAULT_CONFIG } from '@/config/setting'
|
import { useClipboard } from '@vueuse/core'
|
import { useI18n } from 'vue-i18n'
|
import { MenuThemeEnum } from '@/enums/appEnum'
|
import { useTheme } from '@/hooks/core/useTheme'
|
defineOptions({ name: 'SettingActions' })
|
const { t } = useI18n()
|
const settingStore = useSettingStore()
|
const { copy, copied } = useClipboard()
|
const { switchThemeStyles } = useTheme()
|
const ENUM_MAPS = {
|
menuType: {
|
left: 'MenuTypeEnum.LEFT',
|
top: 'MenuTypeEnum.TOP',
|
'top-left': 'MenuTypeEnum.TOP_LEFT',
|
'dual-menu': 'MenuTypeEnum.DUAL_MENU'
|
},
|
systemTheme: {
|
auto: 'SystemThemeEnum.AUTO',
|
light: 'SystemThemeEnum.LIGHT',
|
dark: 'SystemThemeEnum.DARK'
|
},
|
menuTheme: {
|
design: 'MenuThemeEnum.DESIGN',
|
light: 'MenuThemeEnum.LIGHT',
|
dark: 'MenuThemeEnum.DARK'
|
},
|
containerWidth: {
|
'100%': 'ContainerWidthEnum.FULL',
|
'1200px': 'ContainerWidthEnum.BOXED'
|
}
|
}
|
const CONFIG_ITEMS = [
|
{ comment: '菜单类型', key: 'menuType', enumMap: ENUM_MAPS.menuType },
|
{ comment: '菜单展开宽度', key: 'menuOpenWidth' },
|
{ comment: '菜单是否展开', key: 'menuOpen' },
|
{ comment: '双菜单是否显示文本', key: 'dualMenuShowText' },
|
{ comment: '系统主题类型', key: 'systemThemeType', enumMap: ENUM_MAPS.systemTheme },
|
{ comment: '系统主题模式', key: 'systemThemeMode', enumMap: ENUM_MAPS.systemTheme },
|
{ comment: '菜单风格', key: 'menuThemeType', enumMap: ENUM_MAPS.menuTheme },
|
{ comment: '系统主题颜色', key: 'systemThemeColor' },
|
{ comment: '是否显示菜单按钮', key: 'showMenuButton' },
|
{ comment: '是否显示快速入口', key: 'showFastEnter' },
|
{ comment: '是否显示刷新按钮', key: 'showRefreshButton' },
|
{ comment: '是否显示面包屑', key: 'showCrumbs' },
|
{ comment: '是否显示工作台标签', key: 'showWorkTab' },
|
{ comment: '是否显示语言切换', key: 'showLanguage' },
|
{ comment: '是否显示进度条', key: 'showNprogress' },
|
{ comment: '是否显示设置引导', key: 'showSettingGuide' },
|
{ comment: '是否显示节日文本', key: 'showFestivalText' },
|
{ comment: '是否显示水印', key: 'watermarkVisible' },
|
{ comment: '是否自动关闭', key: 'autoClose' },
|
{ comment: '是否唯一展开', key: 'uniqueOpened' },
|
{ comment: '是否色弱模式', key: 'colorWeak' },
|
{ comment: '是否刷新', key: 'refresh' },
|
{ comment: '是否加载节日烟花', key: 'holidayFireworksLoaded' },
|
{ comment: '边框模式', key: 'boxBorderMode' },
|
{ comment: '页面过渡效果', key: 'pageTransition' },
|
{ comment: '标签页样式', key: 'tabStyle' },
|
{ comment: '自定义圆角', key: 'customRadius' },
|
{ comment: '容器宽度', key: 'containerWidth', enumMap: ENUM_MAPS.containerWidth },
|
{ comment: '节日日期', key: 'festivalDate', forceValue: '' }
|
]
|
const valueToCode = (value, enumMap) => {
|
if (value === null) return 'null'
|
if (value === void 0) return 'undefined'
|
if (enumMap && typeof value === 'string' && enumMap[value]) {
|
return enumMap[value]
|
}
|
if (typeof value === 'string') return `'${value}'`
|
if (typeof value === 'boolean' || typeof value === 'number') return String(value)
|
return JSON.stringify(value)
|
}
|
const generateConfigCode = () => {
|
const lines = ['export const SETTING_DEFAULT_CONFIG = {']
|
CONFIG_ITEMS.forEach((item) => {
|
lines.push(` /** ${item.comment} */`)
|
const value = item.forceValue !== void 0 ? item.forceValue : settingStore[item.key]
|
lines.push(` ${String(item.key)}: ${valueToCode(value, item.enumMap)},`)
|
})
|
lines.push('}')
|
return lines.join('\n')
|
}
|
const handleCopyConfig = async () => {
|
try {
|
const configText = generateConfigCode()
|
await copy(configText)
|
if (copied.value) {
|
ElMessage.success({
|
message: t('setting.actions.copySuccess'),
|
duration: 3e3
|
})
|
}
|
} catch (error) {
|
console.error('复制配置失败:', error)
|
ElMessage.error(t('setting.actions.copyFailed'))
|
}
|
}
|
const toggleIfDifferent = (currentValue, defaultValue, toggleFn) => {
|
if (currentValue !== defaultValue) {
|
toggleFn()
|
}
|
}
|
const handleResetConfig = async () => {
|
try {
|
const config = SETTING_DEFAULT_CONFIG
|
settingStore.switchMenuLayouts(config.menuType)
|
settingStore.setMenuOpenWidth(config.menuOpenWidth)
|
settingStore.setMenuOpen(config.menuOpen)
|
settingStore.setDualMenuShowText(config.dualMenuShowText)
|
switchThemeStyles(config.systemThemeMode)
|
await nextTick()
|
const menuTheme = settingStore.isDark ? MenuThemeEnum.DARK : config.menuThemeType
|
settingStore.switchMenuStyles(menuTheme)
|
settingStore.setElementTheme(config.systemThemeColor)
|
toggleIfDifferent(settingStore.showMenuButton, config.showMenuButton, () =>
|
settingStore.setButton()
|
)
|
toggleIfDifferent(settingStore.showFastEnter, config.showFastEnter, () =>
|
settingStore.setFastEnter()
|
)
|
toggleIfDifferent(settingStore.showRefreshButton, config.showRefreshButton, () =>
|
settingStore.setShowRefreshButton()
|
)
|
toggleIfDifferent(settingStore.showCrumbs, config.showCrumbs, () => settingStore.setCrumbs())
|
toggleIfDifferent(settingStore.showLanguage, config.showLanguage, () =>
|
settingStore.setLanguage()
|
)
|
toggleIfDifferent(settingStore.showNprogress, config.showNprogress, () =>
|
settingStore.setNprogress()
|
)
|
settingStore.setWorkTab(config.showWorkTab)
|
settingStore.setShowFestivalText(config.showFestivalText)
|
settingStore.setWatermarkVisible(config.watermarkVisible)
|
toggleIfDifferent(settingStore.autoClose, config.autoClose, () => settingStore.setAutoClose())
|
toggleIfDifferent(settingStore.uniqueOpened, config.uniqueOpened, () =>
|
settingStore.setUniqueOpened()
|
)
|
toggleIfDifferent(settingStore.colorWeak, config.colorWeak, () => settingStore.setColorWeak())
|
toggleIfDifferent(settingStore.boxBorderMode, config.boxBorderMode, () =>
|
settingStore.setBorderMode()
|
)
|
settingStore.setPageTransition(config.pageTransition)
|
settingStore.setTabStyle(config.tabStyle)
|
settingStore.setCustomRadius(config.customRadius)
|
settingStore.setContainerWidth(config.containerWidth)
|
settingStore.setFestivalDate(config.festivalDate)
|
settingStore.setholidayFireworksLoaded(config.holidayFireworksLoaded)
|
location.reload()
|
} catch (error) {
|
console.error('重置配置失败:', error)
|
ElMessage.error(t('setting.actions.resetFailed'))
|
}
|
}
|
</script>
|
