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

package.json

@@ -59,6 +59,7 @@
     "ant-design-vue": "4.2.6",
     "clipboard": "2.0.11",
     "dayjs": "1.11.13",
+    "defu": "6.1.4",
     "echarts": "5.5.1",
     "json5": "2.2.3",
     "nprogress": "0.2.0",

src/App.vue

@@ -19,7 +19,7 @@ const antdLocale = computed(() => {
 
 const watermarkProps = computed(() => {
   const props: WatermarkProps = {
-    content: themeStore.watermark?.text || 'SoybeanAdmin',
+    content: themeStore.watermark.text,
     width: 120,
     height: 120,
     font: {
@@ -39,7 +39,7 @@ const watermarkProps = computed(() => {
     <AppProvider>
       <RouterView class="bg-layout" />
       <AWatermark
-        v-if="themeStore.watermark?.visible"
+        v-if="themeStore.watermark.visible"
         v-bind="watermarkProps"
         class="pointer-events-none absolute-lt! size-full"
       />

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

@@ -111,10 +111,10 @@ const isWrapperScrollMode = computed(() => themeStore.layout.scrollMode === 'wra
     >
       <ASwitch v-model:checked="themeStore.footer.right" />
     </SettingItem>
-    <SettingItem v-if="themeStore.watermark" key="8" :label="$t('theme.watermark.visible')">
+    <SettingItem key="8" :label="$t('theme.watermark.visible')">
       <ASwitch v-model:checked="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')">
       <AInput v-model:value="themeStore.watermark.text" placeholder="SoybeanAdmin" class="w-120px" />
     </SettingItem>
   </TransitionGroup>

src/store/modules/theme/shared.ts

@@ -2,6 +2,7 @@ import { theme as antdTheme } from 'ant-design-vue';
 import type { ConfigProviderProps } from 'ant-design-vue';
 import { getColorPalette } from '@sa/color';
 import { getRgbOfColor } from '@sa/utils';
+import { defu } from 'defu';
 import { overrideThemeSettings, themeSettings } from '@/theme/settings';
 import { themeVars } from '@/theme/vars';
 import { toggleHtmlClass } from '@/utils/common';
@@ -19,12 +20,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/theme/settings.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/typings/app.d.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 */