From 8bc3f5686c9a7d6d082cec1324720f90a8c4da62 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Mon, 15 Dec 2025 17:42:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20`layout`=E5=8F=B3=E4=B8=8A=E8=A7=92?=
 =?UTF-8?q?=E7=9A=84=E6=93=8D=E4=BD=9C=E6=8C=89=E9=92=AE=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=8A=A8=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/lay-navbar/index.vue    | 10 +++--
 src/layout/components/lay-notice/index.vue    | 42 +++++++++++++++++--
 src/layout/components/lay-search/index.vue    |  2 +-
 .../components/SidebarFullScreen.vue          |  5 ++-
 src/style/index.scss                          | 15 +++++++
 src/style/sidebar.scss                        | 17 +++-----
 src/style/tailwind.css                        |  4 ++
 7 files changed, 73 insertions(+), 22 deletions(-)

diff --git a/src/layout/components/lay-navbar/index.vue b/src/layout/components/lay-navbar/index.vue
index 29a5d10ac..87dbd28de 100644
--- a/src/layout/components/lay-navbar/index.vue
+++ b/src/layout/components/lay-navbar/index.vue
@@ -53,9 +53,11 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
       <LaySearch id="header-search" />
       <!-- 国际化 -->
       <el-dropdown id="header-translation" trigger="click">
-        <GlobalizationIcon
-          class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-hidden"
-        />
+        <div
+          class="globalization-icon navbar-bg-hover hover:animate-scale-bounce"
+        >
+          <IconifyIconOffline :icon="GlobalizationIcon" />
+        </div>
         <template #dropdown>
           <el-dropdown-menu class="translation">
             <el-dropdown-item
@@ -113,7 +115,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
         </template>
       </el-dropdown>
       <span
-        class="set-icon navbar-bg-hover"
+        class="set-icon navbar-bg-hover hover:animate-scale-bounce"
         :title="t('buttons.pureOpenSystemSet')"
         @click="onPanel"
       >
diff --git a/src/layout/components/lay-notice/index.vue b/src/layout/components/lay-notice/index.vue
index 6ea5fb7db..477f4cd1f 100644
--- a/src/layout/components/lay-notice/index.vue
+++ b/src/layout/components/lay-notice/index.vue
@@ -3,7 +3,7 @@ import { useI18n } from "vue-i18n";
 import { ref, computed } from "vue";
 import { noticesData } from "./data";
 import NoticeList from "./components/NoticeList.vue";
-import BellIcon from "~icons/ep/bell";
+import BellIcon from "~icons/lucide/bell";
 
 const { t } = useI18n();
 const noticesNum = ref(0);
@@ -25,10 +25,10 @@ const getLabel = computed(
         'dropdown-badge',
         'navbar-bg-hover',
         'select-none',
-        Number(noticesNum) !== 0 && 'mr-[10px]'
+        Number(noticesNum) !== 0 && 'mr-[7px]'
       ]"
     >
-      <el-badge :value="Number(noticesNum) === 0 ? '' : noticesNum" :max="99">
+      <el-badge is-dot>
         <span class="header-notice-icon">
           <IconifyIconOffline :icon="BellIcon" />
         </span>
@@ -65,6 +65,34 @@ 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;
@@ -74,7 +102,13 @@ const getLabel = computed(
   cursor: pointer;
 
   .header-notice-icon {
-    font-size: 18px;
+    font-size: 16px;
+  }
+
+  &:hover {
+    .header-notice-icon svg {
+      animation: pure-bell-ring 1s both;
+    }
   }
 }
 
diff --git a/src/layout/components/lay-search/index.vue b/src/layout/components/lay-search/index.vue
index b9bf15cc4..3de4857ac 100644
--- a/src/layout/components/lay-search/index.vue
+++ b/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"
+      class="search-container w-[40px] h-[48px] flex-c cursor-pointer navbar-bg-hover hover:animate-scale-bounce"
       @click="handleSearch"
     >
       <IconifyIconOffline icon="ri/search-line" />
diff --git a/src/layout/components/lay-sidebar/components/SidebarFullScreen.vue b/src/layout/components/lay-sidebar/components/SidebarFullScreen.vue
index 4d38bd0c7..50685d901 100644
--- a/src/layout/components/lay-sidebar/components/SidebarFullScreen.vue
+++ b/src/layout/components/lay-sidebar/components/SidebarFullScreen.vue
@@ -24,7 +24,10 @@ watch(
 </script>
 
 <template>
-  <span class="fullscreen-icon navbar-bg-hover" @click="toggle">
+  <span
+    class="fullscreen-icon navbar-bg-hover hover:animate-scale-bounce"
+    @click="toggle"
+  >
     <IconifyIconOffline :icon="screenIcon" />
   </span>
 </template>
diff --git a/src/style/index.scss b/src/style/index.scss
index aac8c32a7..e0f6ddc19 100644
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -35,3 +35,18 @@
 .html-weakness {
   filter: invert(80%);
 }
+
+/* 轻微缩小，再恢复原状的平滑缩放动画 */
+@keyframes pure-scale-bounce {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(0.9);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
diff --git a/src/style/sidebar.scss b/src/style/sidebar.scss
index 52c6a9306..83142b76a 100644
--- a/src/style/sidebar.scss
+++ b/src/style/sidebar.scss
@@ -34,12 +34,14 @@
   }
 
   .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;
   }
 
@@ -449,7 +451,7 @@
       /* 搜索 */
       .search-container,
       /* 国际化 */
-      .globalization,
+      .globalization-icon,
       /* 全屏 */
       .fullscreen-icon,
       /* 消息通知 */
@@ -468,15 +470,6 @@
         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;
@@ -630,7 +623,7 @@ body[layout="vertical"] {
   /* 搜索 */
   .search-container,
   /* 国际化 */
-  .globalization,
+  .globalization-icon,
   /* 全屏 */
   .fullscreen-icon,
   /* 消息通知 */
diff --git a/src/style/tailwind.css b/src/style/tailwind.css
index e495ae295..937e0695a 100644
--- a/src/style/tailwind.css
+++ b/src/style/tailwind.css
@@ -44,3 +44,7 @@
 @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;
+}