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 { useCache } from '@/hooks/web/useCache'
-import { colorIsDark, lighten, hexToRGB } from '@/utils/color'
+import { useDesign } from '@/hooks/web/useDesign'
-import { useCssVar } from '@vueuse/core'
+
-import { useAppStore } from '@/store/modules/app'
 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'
-
+import { useWatermark } from '@/hooks/web/useWatermark'
-const { getPrefixCls } = useDesign()
+import { useAppStore } from '@/store/modules/app'
-
-const prefixCls = getPrefixCls('interface-display')
-
-const appStore = useAppStore()
 
 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>

yudao-ui-admin-vue3/src/views/Home/Index.vue

@@ -123,7 +123,7 @@
             <el-col v-for="item in shortcut" :key="`team-${item.name}`" :span="8" class="mb-10px">
               <div class="flex items-center">
                 <Icon :icon="item.icon" class="mr-10px" />
-                <el-link type="default" :underline="false" :href="item.url">
+                <el-link type="default" :underline="false" @click="setWatermark(item.name)">
                   {{ item.name }}
                 </el-link>
               </div>
@@ -168,6 +168,7 @@ import { ElRow, ElCol, ElSkeleton, ElCard, ElDivider, ElLink } from 'element-plu
 import { formatTime } from '@/utils'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useCache } from '@/hooks/web/useCache'
+import { useWatermark } from '@/hooks/web/useWatermark'
 import { Echart } from '@/components/Echart'
 import { CountTo } from '@/components/CountTo'
 import { Highlight } from '@/components/Highlight'
@@ -176,6 +177,7 @@ import { pieOptions, barOptions } from './echarts-data'
 
 const { t } = useI18n()
 const { wsCache } = useCache()
+const { setWatermark } = useWatermark()
 const loading = ref(true)
 const avatar = wsCache.get('user').user.avatar
 const username = wsCache.get('user').user.nickname