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-navbar/index.vue

@@ -53,11 +53,9 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
       <LaySearch id="header-search" />
       <!-- 国际化 -->
       <el-dropdown id="header-translation" trigger="click">
-        <div
+        <GlobalizationIcon
-          class="globalization-icon navbar-bg-hover hover:[&>svg]:animate-scale-bounce"
+          class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-hidden"
-        >
+        />
-          <IconifyIconOffline :icon="GlobalizationIcon" />
-        </div>
         <template #dropdown>
           <el-dropdown-menu class="translation">
             <el-dropdown-item
@@ -115,7 +113,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
         </template>
       </el-dropdown>
       <span
-        class="set-icon navbar-bg-hover hover:[&>svg]:animate-scale-bounce"
+        class="set-icon navbar-bg-hover"
         :title="t('buttons.pureOpenSystemSet')"
         @click="onPanel"
       >

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

@@ -3,12 +3,15 @@ import { useI18n } from "vue-i18n";
 import { ref, computed } from "vue";
 import { noticesData } from "./data";
 import NoticeList from "./components/NoticeList.vue";
-import BellIcon from "~icons/lucide/bell";
+import BellIcon from "~icons/ep/bell";
 
 const { t } = useI18n();
+const noticesNum = ref(0);
 const notices = ref(noticesData);
 const activeKey = ref(noticesData[0]?.key);
 
+notices.value.map(v => (noticesNum.value += v.list.length));
+
 const getLabel = computed(
   () => item =>
     t(item.name) + (item.list.length > 0 ? `(${item.list.length})` : "")
@@ -18,9 +21,14 @@ const getLabel = computed(
 <template>
   <el-dropdown trigger="click" placement="bottom-end">
     <span
-      :class="['dropdown-badge', 'navbar-bg-hover', 'select-none', 'mr-[7px]']"
+      :class="[
+        'dropdown-badge',
+        'navbar-bg-hover',
+        'select-none',
+        Number(noticesNum) !== 0 && 'mr-[10px]'
+      ]"
     >
-      <el-badge is-dot>
+      <el-badge :value="Number(noticesNum) === 0 ? '' : noticesNum" :max="99">
         <span class="header-notice-icon">
           <IconifyIconOffline :icon="BellIcon" />
         </span>
@@ -57,34 +65,6 @@ const getLabel = computed(
 </template>
 
 <style lang="scss" scoped>
-/* ”铃铛“摇晃衰减动画 */
-@keyframes pure-bell-ring {
-  0%,
-  100% {
-    transform-origin: top;
-  }
-
-  15% {
-    transform: rotateZ(10deg);
-  }
-
-  30% {
-    transform: rotateZ(-10deg);
-  }
-
-  45% {
-    transform: rotateZ(5deg);
-  }
-
-  60% {
-    transform: rotateZ(-5deg);
-  }
-
-  75% {
-    transform: rotateZ(2deg);
-  }
-}
-
 .dropdown-badge {
   display: flex;
   align-items: center;
@@ -94,13 +74,7 @@ const getLabel = computed(
   cursor: pointer;
 
   .header-notice-icon {
-    font-size: 16px;
+    font-size: 18px;
-  }
-
-  &:hover {
-    .header-notice-icon svg {
-      animation: pure-bell-ring 1s both;
-    }
   }
 }
 

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

@@ -11,7 +11,7 @@ function handleSearch() {
 <template>
   <div>
     <div
-      class="search-container w-[40px] h-[48px] flex-c cursor-pointer navbar-bg-hover hover:[&>svg]:animate-scale-bounce"
+      class="search-container w-[40px] h-[48px] flex-c cursor-pointer navbar-bg-hover"
       @click="handleSearch"
     >
       <IconifyIconOffline icon="ri/search-line" />

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)
@@ -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>

src/layout/components/lay-sidebar/NavHorizontal.vue

@@ -83,11 +83,9 @@ onMounted(() => {
       <LaySearch id="header-search" />
       <!-- 国际化 -->
       <el-dropdown id="header-translation" trigger="click">
-        <div
+        <GlobalizationIcon
-          class="globalization-icon navbar-bg-hover hover:[&>svg]:animate-scale-bounce"
+          class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-hidden"
-        >
+        />
-          <IconifyIconOffline :icon="GlobalizationIcon" />
-        </div>
         <template #dropdown>
           <el-dropdown-menu class="translation">
             <el-dropdown-item
@@ -143,7 +141,7 @@ onMounted(() => {
         </template>
       </el-dropdown>
       <span
-        class="set-icon navbar-bg-hover hover:[&>svg]:animate-scale-bounce"
+        class="set-icon navbar-bg-hover"
         :title="t('buttons.pureOpenSystemSet')"
         @click="onPanel"
       >

src/layout/components/lay-sidebar/NavMix.vue

@@ -104,11 +104,9 @@ watch(
       <LaySearch id="header-search" />
       <!-- 国际化 -->
       <el-dropdown id="header-translation" trigger="click">
-        <div
+        <GlobalizationIcon
-          class="globalization-icon navbar-bg-hover hover:[&>svg]:animate-scale-bounce"
+          class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-hidden"
-        >
+        />
-          <IconifyIconOffline :icon="GlobalizationIcon" />
-        </div>
         <template #dropdown>
           <el-dropdown-menu class="translation">
             <el-dropdown-item
@@ -164,7 +162,7 @@ watch(
         </template>
       </el-dropdown>
       <span
-        class="set-icon navbar-bg-hover hover:[&>svg]:animate-scale-bounce"
+        class="set-icon navbar-bg-hover"
         :title="t('buttons.pureOpenSystemSet')"
         @click="onPanel"
       >

src/layout/components/lay-sidebar/components/SidebarFullScreen.vue

@@ -24,10 +24,7 @@ watch(
 </script>
 
 <template>
-  <span
+  <span class="fullscreen-icon navbar-bg-hover" @click="toggle">
-    class="fullscreen-icon navbar-bg-hover hover:[&>svg]:animate-scale-bounce"
-    @click="toggle"
-  >
     <IconifyIconOffline :icon="screenIcon" />
   </span>
 </template>

src/style/index.scss

@@ -35,18 +35,3 @@
 .html-weakness {
   filter: invert(80%);
 }
-
-/* 轻微缩小，再恢复原状的平滑缩放动画 */
-@keyframes pure-scale-bounce {
-  0% {
-    transform: scale(1);
-  }
-
-  50% {
-    transform: scale(0.9);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}

src/style/sidebar.scss

@@ -34,14 +34,12 @@
   }
 
   .set-icon,
-  .fullscreen-icon,
+  .fullscreen-icon {
-  .globalization-icon {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 48px;
-    font-size: 16px;
     cursor: pointer;
   }
 
@@ -451,7 +449,7 @@
       /* 搜索 */
       .search-container,
       /* 国际化 */
-      .globalization-icon,
+      .globalization,
       /* 全屏 */
       .fullscreen-icon,
       /* 消息通知 */
@@ -470,6 +468,15 @@
         color: var(--pure-theme-sub-menu-active-text);
       }
 
+      .globalization {
+        width: 40px;
+        height: 48px;
+        padding: 11px;
+        color: var(--pure-theme-sub-menu-active-text);
+        cursor: pointer;
+        outline: none;
+      }
+
       .el-dropdown-link {
         display: flex;
         align-items: center;
@@ -623,7 +630,7 @@ body[layout="vertical"] {
   /* 搜索 */
   .search-container,
   /* 国际化 */
-  .globalization-icon,
+  .globalization,
   /* 全屏 */
   .fullscreen-icon,
   /* 消息通知 */

src/style/tailwind.css

@@ -44,7 +44,3 @@
 @utility navbar-bg-hover {
   @apply dark:text-white dark:hover:bg-[#242424]!;
 }
-
-@utility animate-scale-bounce {
-  animation: pure-scale-bounce 0.3s ease-in-out;
-}