This commit is contained in:
青菜白玉汤
2024-12-10 17:04:04 +08:00
committed by GitHub
8 changed files with 104 additions and 6 deletions

View File

@@ -40,7 +40,12 @@ const { isFullscreen, toggle } = useFullscreen();
<div class="h-full flex-y-center justify-end">
<GlobalSearch />
<FullScreen v-if="!appStore.isMobile" :full="isFullscreen" @click="toggle" />
<LangSwitch :lang="appStore.locale" :lang-options="appStore.localeOptions" @change-lang="appStore.changeLocale" />
<LangSwitch
v-if="themeStore.header.multilingual.visible"
:lang="appStore.locale"
:lang-options="appStore.localeOptions"
@change-lang="appStore.changeLocale"
/>
<ThemeSchemaSwitch
:theme-schema="themeStore.themeScheme"
:is-dark="themeStore.darkMode"

View File

@@ -127,6 +127,9 @@ const isWrapperScrollMode = computed(() => themeStore.layout.scrollMode === 'wra
placeholder="SoybeanAdmin"
/>
</SettingItem>
<SettingItem key="9" :label="$t('theme.header.multilingual.visible')">
<NSwitch v-model:value="themeStore.header.multilingual.visible" />
</SettingItem>
</TransitionGroup>
</template>

View File

@@ -109,6 +109,9 @@ const local: App.I18n.Schema = {
breadcrumb: {
visible: 'Breadcrumb Visible',
showIcon: 'Breadcrumb Icon Visible'
},
multilingual: {
visible: 'Display multilingual button'
}
},
tab: {

View File

@@ -109,6 +109,9 @@ const local: App.I18n.Schema = {
breadcrumb: {
visible: '显示面包屑',
showIcon: '显示面包屑图标'
},
multilingual: {
visible: '显示多语言按钮'
}
},
tab: {

View File

@@ -2,30 +2,34 @@ import type { GlobalThemeOverrides } from 'naive-ui';
import { addColorAlpha, getColorPalette, getPaletteColorByNumber, getRgb } from '@sa/color';
import { overrideThemeSettings, themeSettings } from '@/theme/settings';
import { themeVars } from '@/theme/vars';
import { toggleHtmlClass } from '@/utils/common';
import { toggleHtmlClass, updateBase } from '@/utils/common';
import { localStg } from '@/utils/storage';
const DARK_CLASS = 'dark';
/** Init theme settings */
export function initThemeSettings() {
const isProd = import.meta.env.PROD;
// const isProd = import.meta.env.PROD;
const isProd = true;
// if it is development mode, the theme settings will not be cached, by update `themeSettings` in `src/theme/settings.ts` to update theme settings
if (!isProd) return themeSettings;
const localSettings = localStg.get('themeSettings') || themeSettings;
// if it is production mode, the theme settings will be cached in localStorage
// if want to update theme settings when publish new version, please update `overrideThemeSettings` in `src/theme/settings.ts`
const settings = localStg.get('themeSettings') || themeSettings;
const settings = updateBase(themeSettings, localSettings);
const isOverride = localStg.get('overrideThemeFlag') === BUILD_TIME;
if (!isOverride) {
Object.assign(settings, overrideThemeSettings);
localStg.set('overrideThemeFlag', BUILD_TIME);
}
localStg.set('themeSettings', settings);
return settings;
}

View File

@@ -27,6 +27,9 @@ export const themeSettings: App.Theme.ThemeSetting = {
breadcrumb: {
visible: true,
showIcon: true
},
multilingual: {
visible: true
}
},
tab: {

10
src/typings/app.d.ts vendored
View File

@@ -53,6 +53,11 @@ declare namespace App {
/** Whether to show the breadcrumb icon */
showIcon: boolean;
};
/** Multilingual */
multilingual: {
/** Whether to show the multilingual */
visible: boolean;
};
};
/** Tab */
tab: {
@@ -98,7 +103,7 @@ declare namespace App {
right: boolean;
};
/** Watermark */
watermark?: {
watermark: {
/** Whether to show the watermark */
visible: boolean;
/** Watermark text */
@@ -363,6 +368,9 @@ declare namespace App {
visible: string;
showIcon: string;
};
multilingual: {
visible: string;
};
};
tab: {
visible: string;

View File

@@ -1,3 +1,4 @@
import { isObject } from 'lodash-es';
import { $t } from '@/locales';
/**
@@ -56,3 +57,71 @@ export function toggleHtmlClass(className: string) {
remove
};
}
type AnyObject = { [key: string]: any };
/** Auxiliary type: recursively make all attributes optional */
type PartialDeep<T> = {
[P in keyof T]?: T[P] extends AnyObject ? PartialDeep<T[P]> : T[P];
};
/**
* Deeply update base objects without adding keys that do not exist in the base.
*
* @example
* const base = {
* a: 1,
* b: {
* c: 2,
* d: 3,
* },
* e: [1, 2, 3],
* };
*
* const updates = {
* a: 10,
* b: {
* c: 20,
* e: 30, // Does not exist in base. b, will be ignored
* },
* f: 40, // Does not exist in base. b, will be ignored
* e: [4, 5], // Array will be replaced
* };
*
* const updatedBase = updateBase(base, updates);
*
* console.log(updatedBase);
* output:
* {
* a: 10,
* b: {
* c: 20,
* d: 3
* },
* e: [4, 5]
* }
*
* @param base - Base object
* @param updates - Update object
* @returns New object, a deep copy of the base object with updates applied
*/
export function updateBase<T extends AnyObject>(base: T, updates: PartialDeep<T>): T {
// Deep copy the base object to avoid modifying the original object
const result: AnyObject = Array.isArray(base) ? [...base] : { ...base };
for (const key in updates) {
if (Object.hasOwn(base, key)) {
const baseValue = base[key];
const updateValue = updates[key];
if (isObject(baseValue) && isObject(updateValue)) {
// Recursively update nested objects
result[key] = updateBase(baseValue, updateValue);
} else {
// Directly assign updates
result[key] = updateValue;
}
}
// If the key in updates does not exist in base, ignore it
}
return result as T;
}