feat: 新增全局水印配置

支持开启全局水印，支持设置水印信息（不设置则默认显示昵称+用户名）
continew-org · Sep 26, 2024 · 8d8d79e · 8d8d79e
1 parent e2fe1ab
commit 8d8d79e
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 10 deletions.
diff --git a/src/App.vue b/src/App.vue
diff --git a/src/layout/components/HeaderRightBar/SettingDrawer.vue b/src/layout/components/HeaderRightBar/SettingDrawer.vue
@@ -7,15 +7,15 @@
           <a-badge>
             <template #content>
               <icon-check-circle-fill v-if="appStore.layout === 'left'" style="color: rgb(var(--success-6))"
-                :size="16"></icon-check-circle-fill>
+                                      :size="16"></icon-check-circle-fill>
             </template>
             <LayoutItem mode="left" @click="appStore.layout = 'left'"></LayoutItem>
             <p class="layout-text">默认布局</p>
           </a-badge>
           <a-badge>
             <template #content>
               <icon-check-circle-fill v-if="appStore.layout === 'mix'" :size="16"
-                style="color: rgb(var(--success-6))"></icon-check-circle-fill>
+                                      style="color: rgb(var(--success-6))"></icon-check-circle-fill>
             </template>
             <LayoutItem mode="mix" @click="appStore.layout = 'mix'"></LayoutItem>
             <p class="layout-text">混合布局</p>
@@ -26,7 +26,7 @@
       <a-divider orientation="center">系统主题</a-divider>
       <a-row justify="center">
         <ColorPicker theme="dark" :color="appStore.themeColor" :sucker-hide="true" :colors-default="defaultColorList"
-          @change-color="changeColor"></ColorPicker>
+                     @change-color="changeColor"></ColorPicker>
       </a-row>
 
       <a-divider orientation="center">界面显示</a-divider>
@@ -37,15 +37,15 @@
         </a-descriptions-item>
         <a-descriptions-item label="页签风格">
           <a-select v-model="appStore.tabMode" placeholder="请选择" :options="tabModeList" :disabled="!appStore.tab"
-            :trigger-props="{ autoFitPopupMinWidth: true }" :style="{ width: '120px' }">
+                    :trigger-props="{ autoFitPopupMinWidth: true }" :style="{ width: '120px' }">
           </a-select>
         </a-descriptions-item>
         <a-descriptions-item label="动画显示">
           <a-switch v-model="appStore.animate" />
         </a-descriptions-item>
         <a-descriptions-item label="动画显示">
           <a-select v-model="appStore.animateMode" placeholder="请选择" :options="animateModeList"
-            :disabled="!appStore.animate" :style="{ width: '120px' }">
+                    :disabled="!appStore.animate" :style="{ width: '120px' }">
           </a-select>
         </a-descriptions-item>
         <a-descriptions-item label="深色菜单">
@@ -57,6 +57,12 @@
         <a-descriptions-item label="版权显示">
           <a-switch v-model="appStore.copyrightDisplay" />
         </a-descriptions-item>
+        <a-descriptions-item label="水印">
+          <a-switch v-model="appStore.isOpenWatermark" />
+        </a-descriptions-item>
+        <a-descriptions-item v-if="appStore.isOpenWatermark" label="水印信息">
+          <a-input v-model="appStore.watermark" placeholder="留空则显示用户名" />
+        </a-descriptions-item>
       </a-descriptions>
     </a-space>
   </a-drawer>
@@ -66,10 +72,11 @@
 import { ColorPicker } from 'vue-color-kit'
 import 'vue-color-kit/dist/vue-color-kit.css'
 import LayoutItem from './components/LayoutItem.vue'
-import { useAppStore } from '@/stores'
+import { useAppStore, useUserStore } from '@/stores'
 
 defineOptions({ name: 'SettingDrawer' })
 const appStore = useAppStore()
+const userStore = useUserStore()
 const visible = ref(false)
 
 const tabModeList: App.TabItem[] = [
@@ -90,6 +97,7 @@ const open = () => {
   visible.value = true
 }
 
+const waterMarkPlaceholder = ref<string>()
 defineExpose({ open })
 
 // 默认显示的主题色列表

diff --git a/src/types/app.d.ts b/src/types/app.d.ts
@@ -12,6 +12,8 @@ declare namespace App {
     copyrightDisplay: boolean // 是否显示底部版权信息
     menuDark: boolean // 菜单深色模式
     layout: 'left' | 'mix'
+    isOpenWatermark: boolean // 是否开启水印
+    watermark: string // 水印
   }
   /** 导航页签的样式类型 */
   type TabType = 'card' | 'card-gutter' | 'rounded'