feat: 系统配置面板新增全屏水印功能

locales/en.yaml

@@ -55,6 +55,9 @@ panel:
   pureTagsStyleCardTip: Card tags for efficient browsing
   pureTagsStyleChrome: Chrome
   pureTagsStyleChromeTip: Chrome style is classic and elegant
+  pureFullScreenWatermark: FullScreen Watermark
+  pureEnableWatermark: Watermark
+  pureWatermarkText: Text
   pureInterfaceDisplay: Interface Display
   pureGreyModel: Grey Model
   pureWeakModel: Weak Model

locales/zh-CN.yaml

@@ -55,6 +55,9 @@ panel:
   pureTagsStyleCardTip: 卡片标签，高效浏览
   pureTagsStyleChrome: 谷歌
   pureTagsStyleChromeTip: 谷歌风格，经典美观
+  pureFullScreenWatermark: 全屏水印
+  pureEnableWatermark: 水印
+  pureWatermarkText: 文本
   pureInterfaceDisplay: 界面显示
   pureGreyModel: 灰色模式
   pureWeakModel: 色弱模式

src/layout/components/lay-setting/index.vue

@@ -9,6 +9,14 @@ import {
   onUnmounted,
   onBeforeMount
 } from "vue";
+import {
+  useDark,
+  debounce,
+  isNumber,
+  useGlobal,
+  isAllEmpty,
+  useWatermark
+} from "@pureadmin/utils";
 import { useI18n } from "vue-i18n";
 import { emitter } from "@/utils/mitt";
 import LayPanel from "../lay-panel/index.vue";
@@ -17,7 +25,6 @@ import { useAppStoreHook } from "@/store/modules/app";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
 import Segmented, { type OptionsType } from "@/components/ReSegmented";
 import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
-import { useDark, useGlobal, debounce, isNumber } from "@pureadmin/utils";
 
 import Check from "~icons/ep/check";
 import LeftArrow from "~icons/ri/arrow-left-s-line?width=20&height=20";
@@ -27,8 +34,9 @@ import DarkIcon from "@/assets/svg/dark.svg?component";
 import SystemIcon from "@/assets/svg/system.svg?component";
 
 const { t } = useI18n();
-const { device } = useNav();
 const { isDark } = useDark();
+const { device, title } = useNav();
+const { setWatermark, clear } = useWatermark();
 const { $storage } = useGlobal<GlobalPropertiesApi>();
 
 const mixRef = ref();
@@ -58,6 +66,12 @@ const markValue = ref($storage.configure?.showModel ?? "smart");
 
 const logoVal = ref($storage.configure?.showLogo ?? true);
 
+/** WIP... */
+const watermarkConfigs = reactive({
+  enable: false,
+  text: null
+});
+
 const settings = reactive({
   greyVal: $storage.configure.grey,
   weakVal: $storage.configure.weak,
@@ -129,6 +143,21 @@ function onChange({ option }) {
   emitter.emit("tagViewsShowModel", value);
 }
 
+function onWatermarkSwitchChange(value) {
+  const text = isAllEmpty(watermarkConfigs.text)
+    ? title.value
+    : watermarkConfigs.text;
+  if (value) {
+    setWatermark(text);
+  } else {
+    clear();
+  }
+}
+
+function onWatermarkInputChange(value) {
+  setWatermark(value);
+}
+
 /** 侧边栏Logo */
 function logoChange() {
   unref(logoVal)
@@ -345,8 +374,8 @@ onUnmounted(() => removeMatchMedia);
           @click="setLayoutThemeColor(item.themeColor)"
         >
           <el-icon
-            class="mt-px"
+            style="margin: 0.1em 0.1em 0 0"
-            :size="20"
+            :size="17"
             :color="getThemeColor(item.themeColor)"
           >
             <IconifyIconOffline :icon="Check" />
@@ -448,29 +477,38 @@ onUnmounted(() => removeMatchMedia);
       />
 
       <p class="mt-5! font-medium text-sm dark:text-white">
-        {{ t("panel.pureInterfaceDisplay") }}
+        {{ t("panel.pureFullScreenWatermark") }}
       </p>
       <ul class="setting">
         <li>
-          <span class="dark:text-white">{{ t("panel.pureGreyModel") }}</span>
+          <span class="dark:text-white">
+            {{ t("panel.pureEnableWatermark") }}
+          </span>
           <el-switch
-            v-model="settings.greyVal"
+            v-model="watermarkConfigs.enable"
             inline-prompt
             :active-text="t('buttons.pureOpenText')"
             :inactive-text="t('buttons.pureCloseText')"
-            @change="greyChange"
+            @change="onWatermarkSwitchChange"
           />
         </li>
         <li>
-          <span class="dark:text-white">{{ t("panel.pureWeakModel") }}</span>
+          <span class="dark:text-white">
-          <el-switch
+            {{ t("panel.pureWatermarkText") }}
-            v-model="settings.weakVal"
+          </span>
-            inline-prompt
+          <el-input
-            :active-text="t('buttons.pureOpenText')"
+            v-model="watermarkConfigs.text"
-            :inactive-text="t('buttons.pureCloseText')"
+            class="w-[100px]!"
-            @change="weekChange"
+            :placeholder="title"
+            @input="onWatermarkInputChange"
           />
         </li>
+      </ul>
+
+      <p class="mt-5! font-medium text-sm dark:text-white">
+        {{ t("panel.pureInterfaceDisplay") }}
+      </p>
+      <ul class="setting">
         <li>
           <span class="dark:text-white">{{ t("panel.pureHiddenTags") }}</span>
           <el-switch
@@ -491,6 +529,18 @@ onUnmounted(() => removeMatchMedia);
             @change="hideFooterChange"
           />
         </li>
+        <li>
+          <span class="dark:text-white">
+            {{ t("panel.pureMultiTagsCache") }}
+          </span>
+          <el-switch
+            v-model="settings.multiTagsCache"
+            inline-prompt
+            :active-text="t('buttons.pureOpenText')"
+            :inactive-text="t('buttons.pureCloseText')"
+            @change="multiTagsCacheChange"
+          />
+        </li>
         <li>
           <span class="dark:text-white">Logo</span>
           <el-switch
@@ -504,15 +554,23 @@ onUnmounted(() => removeMatchMedia);
           />
         </li>
         <li>
-          <span class="dark:text-white">
+          <span class="dark:text-white">{{ t("panel.pureGreyModel") }}</span>
-            {{ t("panel.pureMultiTagsCache") }}
-          </span>
           <el-switch
-            v-model="settings.multiTagsCache"
+            v-model="settings.greyVal"
             inline-prompt
             :active-text="t('buttons.pureOpenText')"
             :inactive-text="t('buttons.pureCloseText')"
-            @change="multiTagsCacheChange"
+            @change="greyChange"
+          />
+        </li>
+        <li>
+          <span class="dark:text-white">{{ t("panel.pureWeakModel") }}</span>
+          <el-switch
+            v-model="settings.weakVal"
+            inline-prompt
+            :active-text="t('buttons.pureOpenText')"
+            :inactive-text="t('buttons.pureCloseText')"
+            @change="weekChange"
           />
         </li>
       </ul>
@@ -538,24 +596,17 @@ onUnmounted(() => removeMatchMedia);
 }
 
 .theme-color {
-  display: flex;
+  height: 20px;
-  gap: 8px;
-  margin-top: 8px;
 
   li {
-    position: relative;
+    float: left;
-    width: 21px;
+    height: 20px;
-    height: 21px;
+    margin-right: 8px;
     cursor: pointer;
     border-radius: 4px;
-    box-shadow: rgb(0 0 0 / 15%) 0 0 0 1px inset;
-    transition: all 0.2s ease;
 
-    &:hover {
+    &:nth-child(1) {
-      box-shadow:
+      border: 1px solid #ddd;
-        rgb(0 0 0 / 25%) 0 0 0 1px inset,
-        0 2px 4px rgb(0 0 0 / 15%);
-      transform: scale(1.1);
     }
   }
 }