feat: Retain historical settings when toggling watermark (#11429)

 Refs #11392

Author: ssongliu

frontend/src/global/use-logo.ts

@@ -14,6 +14,7 @@ export const useLogo = async () => {
         globalStore.themeConfig.loginBackground = res.data?.loginBackground;
         globalStore.themeConfig.loginBtnLinkColor = res.data?.loginBtnLinkColor;
         globalStore.themeConfig.favicon = res.data.favicon;
+        globalStore.watermarkShow = res.data.watermarkShow === 'Enable';
         try {
             globalStore.watermark = JSON.parse(res.data.watermark);
         } catch {

frontend/src/layout/index.vue

@@ -24,7 +24,7 @@
         </div>
 
         <el-watermark
-            v-if="globalStore.isMasterProductPro && globalStore.watermark"
+            v-if="globalStore.isMasterProductPro && globalStore.watermarkShow && globalStore.watermark"
             :content="loadContent()"
             :font="{
                 fontSize: globalStore.watermark.fontSize,

frontend/src/store/interface/index.ts

@@ -36,6 +36,7 @@ export interface GlobalState {
     isFullScreen: boolean;
     openMenuTabs: boolean;
     watermark: Watermark;
+    watermarkShow: boolean;
     isOnRestart: boolean;
     agreeLicense: boolean;
     hasNewVersion: boolean;

frontend/src/store/modules/global.ts

@@ -28,6 +28,7 @@ const GlobalStore = defineStore({
             loginBtnLinkColor: '',
         },
         watermark: null,
+        watermarkShow: false,
         openMenuTabs: false,
         isFullScreen: false,
         isOnRestart: false,

frontend/src/utils/xpack.ts

@@ -11,6 +11,7 @@ export function resetXSetting() {
     globalStore.themeConfig.logoWithText = '';
     globalStore.themeConfig.favicon = '';
     globalStore.watermark = null;
+    globalStore.watermarkShow = false;
     globalStore.masterAlias = '';
 }
 
@@ -116,6 +117,7 @@ export async function getXpackSettingForTheme() {
             if (res2.data?.theme) {
                 globalStore.themeConfig.theme = res2.data.theme;
             }
+            globalStore.watermarkShow = res2.data.watermarkShow === 'Enable';
             try {
                 globalStore.watermark = JSON.parse(res2.data.watermark);
             } catch {

frontend/src/views/setting/panel/index.vue

@@ -79,15 +79,15 @@
                             </el-form-item>
 
                             <el-form-item :label="$t('setting.watermark')" v-if="isMasterProductPro" prop="watermark">
-                                <el-radio-group class="w-full" @change="onChangeWatermark" v-model="form.watermarkItem">
+                                <el-radio-group class="w-full" @change="onChangeWatermark" v-model="form.watermarkShow">
                                     <el-radio-button value="Enable">
                                         <span>{{ $t('commons.button.enable') }}</span>
                                     </el-radio-button>
                                     <el-radio-button value="Disable">
                                         <span>{{ $t('commons.button.disable') }}</span>
                                     </el-radio-button>
                                 </el-radio-group>
-                                <div v-if="form.watermarkItem === 'Enable'">
+                                <div v-if="form.watermarkShow === 'Enable'">
                                     <div>
                                         <el-button link type="primary" @click="onChangeWatermark">
                                             {{ $t('commons.button.view') }}
@@ -274,7 +274,7 @@ const form = reactive({
     panelName: '',
     theme: '',
     watermark: '',
-    watermarkItem: '',
+    watermarkShow: '',
     themeColor: {} as ThemeColor,
     menuTabs: '',
     language: '',
@@ -372,12 +372,12 @@ const search = async () => {
             globalStore.themeConfig.theme = form.theme;
             form.proxyDocker = xpackRes.data.proxyDocker;
             form.watermark = xpackRes.data.watermark;
+            form.watermarkShow = xpackRes.data.watermarkShow;
             try {
                 globalStore.watermark = JSON.parse(xpackRes.data.watermark);
             } catch {
                 globalStore.watermark = null;
             }
-            form.watermarkItem = xpackRes.data.watermark ? 'Enable' : 'Disable';
         }
     } else {
         globalStore.themeConfig.theme = form.theme;
@@ -421,7 +421,7 @@ const onChangeThemeColor = () => {
 };
 
 const onChangeWatermark = async () => {
-    if (form.watermarkItem === 'Enable') {
+    if (form.watermarkShow === 'Enable') {
         watermarkRef.value.acceptParams(form.watermark);
         return;
     }
@@ -431,10 +431,11 @@ const onChangeWatermark = async () => {
     })
         .then(async () => {
             loading.value = true;
-            await updateXpackSettingByKey('Watermark', '')
+            await updateXpackSettingByKey('WatermarkShow', 'Disable')
                 .then(() => {
                     loading.value = false;
                     globalStore.watermark = null;
+                    globalStore.watermarkShow = false;
                     search();
                     MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
                 })
@@ -443,7 +444,7 @@ const onChangeWatermark = async () => {
                 });
         })
         .catch(() => {
-            form.watermarkItem = 'Enable';
+            form.watermarkShow = 'Enable';
         });
 };
 

frontend/src/views/setting/panel/watermark/index.vue

@@ -127,6 +127,7 @@ const onSave = async (formEl: FormInstance | undefined) => {
                         rotate: form.rotate,
                         gap: form.gap,
                     };
+                    globalStore.watermarkShow = true;
                     handleClose();
                     return;
                 })