feat: 添加水印

yudao-ui-admin-vue3/src/components/Setting/src/Setting.vue

@@ -1,29 +1,25 @@
 <script setup lang="ts">
 import { ElDrawer, ElDivider, ElMessage } from 'element-plus'
 import { ref, unref, computed, watch } from 'vue'
+import { useCssVar, useClipboard } from '@vueuse/core'
 import { useI18n } from '@/hooks/web/useI18n'
-import { ThemeSwitch } from '@/components/ThemeSwitch'
-import { colorIsDark, lighten, hexToRGB } from '@/utils/color'
-import { useCssVar } from '@vueuse/core'
-import { useAppStore } from '@/store/modules/app'
+import { useCache } from '@/hooks/web/useCache'
+import { useDesign } from '@/hooks/web/useDesign'
+
 import { trim, setCssVar } from '@/utils'
+import { colorIsDark, lighten, hexToRGB } from '@/utils/color'
+import { useAppStore } from '@/store/modules/app'
+import { ThemeSwitch } from '@/components/ThemeSwitch'
 import ColorRadioPicker from './components/ColorRadioPicker.vue'
 import InterfaceDisplay from './components/InterfaceDisplay.vue'
 import LayoutRadioPicker from './components/LayoutRadioPicker.vue'
-import { useCache } from '@/hooks/web/useCache'
-import { useClipboard } from '@vueuse/core'
-import { useDesign } from '@/hooks/web/useDesign'
-
-const { getPrefixCls } = useDesign()
-
-const prefixCls = getPrefixCls('setting')
-
-const appStore = useAppStore()
 
 const { t } = useI18n()
+const appStore = useAppStore()
 
+const { getPrefixCls } = useDesign()
+const prefixCls = getPrefixCls('setting')
 const layout = computed(() => appStore.getLayout)
-
 const drawer = ref(false)
 
 // 主题色相关

yudao-ui-admin-vue3/src/components/Setting/src/components/InterfaceDisplay.vue

@@ -1,18 +1,19 @@
 <script setup lang="ts">
-import { ElSwitch, ElMessage } from 'element-plus'
-import { useI18n } from '@/hooks/web/useI18n'
-import { useAppStore } from '@/store/modules/app'
 import { computed, ref, watch } from 'vue'
+import { ElSwitch, ElInput, ElMessage } from 'element-plus'
 import { setCssVar } from '@/utils'
+import { useI18n } from '@/hooks/web/useI18n'
 import { useDesign } from '@/hooks/web/useDesign'
-
-const { getPrefixCls } = useDesign()
-
-const prefixCls = getPrefixCls('interface-display')
-
-const appStore = useAppStore()
+import { useWatermark } from '@/hooks/web/useWatermark'
+import { useAppStore } from '@/store/modules/app'
 
 const { t } = useI18n()
+const { getPrefixCls } = useDesign()
+const { setWatermark } = useWatermark()
+const prefixCls = getPrefixCls('interface-display')
+const appStore = useAppStore()
+
+const water = ref()
 
 // 面包屑
 const breadcrumb = ref(appStore.getBreadcrumb)
@@ -122,6 +123,11 @@ const fixedMenuChange = (show: boolean) => {
   appStore.setFixedMenu(show)
 }
 
+// 设置水印
+const setWater = () => {
+  setWatermark(water.value)
+}
+
 const layout = computed(() => appStore.getLayout)
 
 watch(
@@ -210,5 +216,10 @@ watch(
       <span class="text-14px">{{ t('setting.fixedMenu') }}</span>
       <ElSwitch v-model="fixedMenu" @change="fixedMenuChange" />
     </div>
+
+    <div class="flex justify-between items-center">
+      <span class="text-14px">{{ t('watermark.watermark') }}</span>
+      <ElInput v-model="water" class="w-20 right-1" @change="setWater()" />
+    </div>
   </div>
 </template>