feat(projects): support restore default theme config

This commit is contained in:
zclzone 2024-05-14 21:36:26 +08:00
parent 35de124efb
commit b0868f6ea8
5 changed files with 26 additions and 5 deletions

View File

@ -38,6 +38,14 @@ function handleReset() {
}, 50);
}
function handleRestore() {
themeStore.restoreThemeSettings();
setTimeout(() => {
window.$message?.success($t('theme.configOperation.restoreSuccessMsg'));
}, 50);
}
const dataClipboardText = computed(() => getClipboardText());
onMounted(() => {
@ -49,6 +57,7 @@ onMounted(() => {
<div class="w-full flex justify-between">
<textarea id="themeConfigCopyTarget" v-model="dataClipboardText" class="absolute opacity-0 -z-1" />
<NButton type="error" ghost @click="handleReset">{{ $t('theme.configOperation.resetConfig') }}</NButton>
<NButton type="success" ghost @click="handleRestore">{{ $t('theme.configOperation.restoreConfig') }}</NButton>
<div ref="domRef" data-clipboard-target="#themeConfigCopyTarget">
<NButton type="primary">{{ $t('theme.configOperation.copyConfig') }}</NButton>
</div>

View File

@ -132,8 +132,10 @@ const local: App.I18n.Schema = {
configOperation: {
copyConfig: 'Copy Config',
copySuccessMsg: 'Copy Success, Please replace the variable "themeSettings" in "src/theme/settings.ts"',
resetConfig: 'Reset Config',
resetSuccessMsg: 'Reset Success'
resetConfig: 'Reset',
resetSuccessMsg: 'Reset Success',
restoreConfig: 'Restore',
restoreSuccessMsg: 'Restore Success'
}
},
route: {

View File

@ -133,7 +133,9 @@ const local: App.I18n.Schema = {
copyConfig: '复制配置',
copySuccessMsg: '复制成功,请替换 src/theme/settings.ts 中的变量 themeSettings',
resetConfig: '重置配置',
resetSuccessMsg: '重置成功'
resetSuccessMsg: '重置成功',
restoreConfig: '恢复默认配置',
restoreSuccessMsg: '恢复成功'
}
},
route: {

View File

@ -56,10 +56,15 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
const settingsJson = computed(() => JSON.stringify(settings.value));
/** Reset store */
function resetStore() {
function resetStore(state?: Partial<typeof themeSettings>) {
const themeStore = useThemeStore();
const reset = themeStore.$reset as (arg?: Partial<typeof themeSettings>) => void;
reset(themeSettings);
reset(state);
}
/** Restore theme settings */
function restoreThemeSettings() {
resetStore(themeSettings);
}
/**
@ -187,6 +192,7 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
settingsJson,
setGrayscale,
resetStore,
restoreThemeSettings,
setThemeScheme,
toggleThemeScheme,
updateThemeColors,

View File

@ -351,6 +351,8 @@ declare namespace App {
copySuccessMsg: string;
resetConfig: string;
resetSuccessMsg: string;
restoreConfig: string;
restoreSuccessMsg: string;
};
};
route: Record<I18nRouteKey, string>;