feat(水印): 添加水印透明度配置选项

在偏好设置中新增水印透明度配置，支持在0.05到0.5范围内调整

packages/@core/preferences/src/config.ts

@@ -32,6 +32,7 @@ const defaultPreferences: Preferences = {
     preferencesButtonPosition: 'auto',
     watermark: false,
     watermarkContent: '',
+    watermarkOpacity: 0.25,
     zIndex: 200,
   },
   breadcrumb: {

packages/@core/preferences/src/types.ts

@@ -163,6 +163,10 @@ interface AppPreferences {
    * @zh_CN 水印文案
    */
   watermarkContent: string;
+  /**
+   * @zh_CN 水印透明度
+   */
+  watermarkOpacity: number;
   /** z-index */
   zIndex: number;
 }

packages/effects/layouts/src/basic/layout.vue

@@ -7,14 +7,19 @@ import type { MenuRecordRaw } from '@vben/types';
 import { computed, onMounted, useSlots, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
-import { useRefresh } from '@vben/hooks';
+import { useRefresh, useWatermark } from '@vben/hooks';
 import { $t, i18n } from '@vben/locales';
 import {
   preferences,
   updatePreferences,
   usePreferences,
 } from '@vben/preferences';
-import { useAccessStore, useTabbarStore, useTimezoneStore } from '@vben/stores';
+import {
+  useAccessStore,
+  useTabbarStore,
+  useTimezoneStore,
+  useUserStore,
+} from '@vben/stores';
 import { cloneDeep, mapTree } from '@vben/utils';
 
 import { VbenAdminLayout } from '@vben-core/layout-ui';
@@ -53,7 +58,18 @@ const {
 } = usePreferences();
 const accessStore = useAccessStore();
 const timezoneStore = useTimezoneStore();
+const userStore = useUserStore();
 const { refresh } = useRefresh();
+const { destroyWatermark, updateWatermark } = useWatermark();
+
+const watermarkContent = computed(() => {
+  const customContent = preferences.app.watermarkContent;
+  if (customContent && customContent.trim()) {
+    return customContent;
+  }
+  const username = userStore.userInfo?.username;
+  return username || 'Unauthorized';
+});
 
 const sidebarTheme = computed(() => {
   const dark = isDark.value || preferences.theme.semiDarkSidebar;
@@ -193,6 +209,25 @@ watch(
   },
 );
 
+watch(
+  [
+    () => preferences.app.watermark,
+    () => preferences.app.watermarkOpacity,
+    watermarkContent,
+  ],
+  ([isEnabled, opacity, content]) => {
+    if (isEnabled) {
+      updateWatermark({
+        content,
+        globalAlpha: opacity as number,
+      });
+    } else {
+      destroyWatermark();
+    }
+  },
+  { immediate: true },
+);
+
 const tabbarStore = useTabbarStore();
 
 function refreshAll() {

packages/effects/layouts/src/widgets/preferences/blocks/general/general.vue

@@ -1,7 +1,17 @@
 <script setup lang="ts">
+import { watch } from 'vue';
+
 import { SUPPORT_LANGUAGES } from '@vben/constants';
 import { $t } from '@vben/locales';
 
+import {
+  NumberField,
+  NumberFieldContent,
+  NumberFieldDecrement,
+  NumberFieldIncrement,
+  NumberFieldInput,
+} from '@vben-core/shadcn-ui';
+
 import InputItem from '../input-item.vue';
 import SelectItem from '../select-item.vue';
 import SwitchItem from '../switch-item.vue';
@@ -14,10 +24,27 @@ const appLocale = defineModel<string>('appLocale');
 const appDynamicTitle = defineModel<boolean>('appDynamicTitle');
 const appWatermark = defineModel<boolean>('appWatermark');
 const appWatermarkContent = defineModel<string>('appWatermarkContent');
+const appWatermarkOpacity = defineModel<number>('appWatermarkOpacity');
 const appEnableCheckUpdates = defineModel<boolean>('appEnableCheckUpdates');
 const appEnableCopyPreferences = defineModel<boolean>(
   'appEnableCopyPreferences',
 );
+
+const min = 0.05;
+const max = 0.5;
+const step = 0.05;
+
+watch(
+  appWatermarkOpacity,
+  (newValue) => {
+    if (newValue < min) {
+      appWatermarkOpacity.value = min;
+    } else if (newValue > max) {
+      appWatermarkOpacity.value = max;
+    }
+  },
+  { immediate: true },
+);
 </script>
 
 <template>
@@ -44,6 +71,29 @@ const appEnableCopyPreferences = defineModel<boolean>(
   >
     {{ $t('preferences.watermarkContent') }}
   </InputItem>
+  <div
+    v-if="appWatermark"
+    class="my-1 flex w-full items-center justify-between rounded-md px-2 py-1"
+  >
+    <span class="flex items-center text-sm">
+      {{ $t('preferences.watermarkOpacity') }}
+    </span>
+    <div class="flex items-center gap-2">
+      <NumberField
+        v-model="appWatermarkOpacity"
+        :max="max"
+        :min="min"
+        :step="step"
+        class="w-41.25"
+      >
+        <NumberFieldContent>
+          <NumberFieldDecrement />
+          <NumberFieldInput />
+          <NumberFieldIncrement />
+        </NumberFieldContent>
+      </NumberField>
+    </div>
+  </div>
   <SwitchItem v-model="appEnableCheckUpdates">
     {{ $t('preferences.checkUpdates') }}
   </SwitchItem>

packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue

@@ -72,6 +72,7 @@ const appColorWeakMode = defineModel<boolean>('appColorWeakMode');
 const appContentCompact = defineModel<ContentCompactType>('appContentCompact');
 const appWatermark = defineModel<boolean>('appWatermark');
 const appWatermarkContent = defineModel<string>('appWatermarkContent');
+const appWatermarkOpacity = defineModel<number>('appWatermarkOpacity');
 const appEnableCheckUpdates = defineModel<boolean>('appEnableCheckUpdates');
 const appEnableCopyPreferences = defineModel<boolean>(
   'appEnableCopyPreferences',
@@ -360,6 +361,7 @@ function handleCustomPreferencesUpdate(updates: CustomPreferencesRecord) {
                 v-model:app-locale="appLocale"
                 v-model:app-watermark="appWatermark"
                 v-model:app-watermark-content="appWatermarkContent"
+                v-model:app-watermark-opacity="appWatermarkOpacity"
               />
             </Block>