optimize(projects): use defu to fill added theme config

Author: honghuangdc

package.json

@@ -57,6 +57,7 @@
     "@vueuse/core": "12.0.0",
     "clipboard": "2.0.11",
     "dayjs": "1.11.13",
+    "defu": "6.1.4",
     "echarts": "5.5.1",
     "json5": "2.2.3",
     "naive-ui": "2.40.3",

pnpm-lock.yaml

@@ -25,7 +25,7 @@ const naiveDateLocale = computed(() => {
 
 const watermarkProps = computed<WatermarkProps>(() => {
   return {
-    content: themeStore.watermark?.text || 'SoybeanAdmin',
+    content: themeStore.watermark.text,
     cross: true,
     fullscreen: true,
     fontSize: 16,
@@ -50,7 +50,7 @@ const watermarkProps = computed<WatermarkProps>(() => {
   >
     <AppProvider>
       <RouterView class="bg-layout" />
-      <NWatermark v-if="themeStore.watermark?.visible" v-bind="watermarkProps" />
+      <NWatermark v-if="themeStore.watermark.visible" v-bind="watermarkProps" />
     </AppProvider>
   </NConfigProvider>
 </template>

src/App.vue

@@ -114,10 +114,10 @@ const isWrapperScrollMode = computed(() => themeStore.layout.scrollMode === 'wra
     >
       <NSwitch v-model:value="themeStore.footer.right" />
     </SettingItem>
-    <SettingItem v-if="themeStore.watermark" key="8" :label="$t('theme.watermark.visible')">
+    <SettingItem key="8" :label="$t('theme.watermark.visible')">
       <NSwitch v-model:value="themeStore.watermark.visible" />
     </SettingItem>
-    <SettingItem v-if="themeStore.watermark?.visible" key="8-1" :label="$t('theme.watermark.text')">
+    <SettingItem v-if="themeStore.watermark.visible" key="8-1" :label="$t('theme.watermark.text')">
       <NInput
         v-model:value="themeStore.watermark.text"
         autosize

src/layouts/modules/theme-drawer/modules/page-fun.vue

@@ -1,4 +1,5 @@
 import type { GlobalThemeOverrides } from 'naive-ui';
+import { defu } from 'defu';
 import { addColorAlpha, getColorPalette, getPaletteColorByNumber, getRgb } from '@sa/color';
 import { overrideThemeSettings, themeSettings } from '@/theme/settings';
 import { themeVars } from '@/theme/vars';
@@ -17,12 +18,15 @@ export function initThemeSettings() {
   // 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 localSettings = localStg.get('themeSettings');
+
+  let settings = defu(localSettings, themeSettings);
 
   const isOverride = localStg.get('overrideThemeFlag') === BUILD_TIME;
 
   if (!isOverride) {
-    Object.assign(settings, overrideThemeSettings);
+    settings = defu(overrideThemeSettings, settings);
+
     localStg.set('overrideThemeFlag', BUILD_TIME);
   }
 

src/store/modules/theme/shared.ts

@@ -83,10 +83,4 @@ export const themeSettings: App.Theme.ThemeSetting = {
  *
  * If publish new version, use `overrideThemeSettings` to override certain theme settings
  */
-export const overrideThemeSettings: Partial<App.Theme.ThemeSetting> = {
-  resetCacheStrategy: 'close',
-  watermark: {
-    visible: false,
-    text: 'SoybeanAdmin'
-  }
-};
+export const overrideThemeSettings: Partial<App.Theme.ThemeSetting> = {};

src/theme/settings.ts

@@ -21,7 +21,7 @@ declare namespace App {
       /** Whether info color is followed by the primary color */
       isInfoFollowPrimary: boolean;
       /** Reset cache strategy */
-      resetCacheStrategy?: UnionKey.ResetCacheStrategy;
+      resetCacheStrategy: UnionKey.ResetCacheStrategy;
       /** Layout */
       layout: {
         /** Layout mode */
@@ -33,7 +33,7 @@ declare namespace App {
          *
          * if true, the vertical child level menus in left and horizontal first level menus in top
          */
-        reverseHorizontalMix?: boolean;
+        reverseHorizontalMix: boolean;
       };
       /** Page */
       page: {
@@ -98,7 +98,7 @@ declare namespace App {
         right: boolean;
       };
       /** Watermark */
-      watermark?: {
+      watermark: {
         /** Whether to show the watermark */
         visible: boolean;
         /** Watermark text */