From 4f59013b61fd22fe7c614ef7c0a737c69ed34cda Mon Sep 17 00:00:00 2001
From: xiaoming <1923740402@qq.com>
Date: Tue, 6 Jan 2026 12:38:52 +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=20(#1254)?=
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    | 50 ++++++++++++++-----
 src/layout/components/lay-search/index.vue    |  2 +-
 .../components/lay-sidebar/NavHorizontal.vue  | 10 ++--
 src/layout/components/lay-sidebar/NavMix.vue  | 10 ++--
 .../components/SidebarFullScreen.vue          |  5 +-
 src/style/index.scss                          | 15 ++++++
 src/style/sidebar.scss                        | 17 ++-----
 src/style/tailwind.css                        |  4 ++
 9 files changed, 85 insertions(+), 38 deletions(-)

diff --git a/src/layout/components/lay-navbar/index.vue b/src/layout/components/lay-navbar/index.vue
index 29a5d10ac..40541775d 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:[&>svg]: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:[&>svg]: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..b1f4d5ffc 100644
--- a/src/layout/components/lay-notice/index.vue
+++ b/src/layout/components/lay-notice/index.vue
@@ -3,15 +3,12 @@ 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);
 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})` : "")
@@ -21,14 +18,9 @@ const getLabel = computed(
 <template>
   <el-dropdown trigger="click" placement="bottom-end">
     <span
-      :class="[
-        'dropdown-badge',
-        'navbar-bg-hover',
-        'select-none',
-        Number(noticesNum) !== 0 && 'mr-[10px]'
-      ]"
+      :class="['dropdown-badge', 'navbar-bg-hover', 'select-none', '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 +57,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 +94,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..a921f1692 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:[&>svg]:animate-scale-bounce"
       @click="handleSearch"
     >
       <IconifyIconOffline icon="ri/search-line" />
diff --git a/src/layout/components/lay-sidebar/NavHorizontal.vue b/src/layout/components/lay-sidebar/NavHorizontal.vue
index 9ccebccec..3bd0939e3 100644
--- a/src/layout/components/lay-sidebar/NavHorizontal.vue
+++ b/src/layout/components/lay-sidebar/NavHorizontal.vue
@@ -83,9 +83,11 @@ onMounted(() => {
       <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:[&>svg]:animate-scale-bounce"
+        >
+          <IconifyIconOffline :icon="GlobalizationIcon" />
+        </div>
         <template #dropdown>
           <el-dropdown-menu class="translation">
             <el-dropdown-item
@@ -141,7 +143,7 @@ onMounted(() => {
         </template>
       </el-dropdown>
       <span
-        class="set-icon navbar-bg-hover"
+        class="set-icon navbar-bg-hover hover:[&>svg]:animate-scale-bounce"
         :title="t('buttons.pureOpenSystemSet')"
         @click="onPanel"
       >
diff --git a/src/layout/components/lay-sidebar/NavMix.vue b/src/layout/components/lay-sidebar/NavMix.vue
index d5f9e9838..22c8cc15c 100644
--- a/src/layout/components/lay-sidebar/NavMix.vue
+++ b/src/layout/components/lay-sidebar/NavMix.vue
@@ -104,9 +104,11 @@ watch(
       <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:[&>svg]:animate-scale-bounce"
+        >
+          <IconifyIconOffline :icon="GlobalizationIcon" />
+        </div>
         <template #dropdown>
           <el-dropdown-menu class="translation">
             <el-dropdown-item
@@ -162,7 +164,7 @@ watch(
         </template>
       </el-dropdown>
       <span
-        class="set-icon navbar-bg-hover"
+        class="set-icon navbar-bg-hover hover:[&>svg]:animate-scale-bounce"
         :title="t('buttons.pureOpenSystemSet')"
         @click="onPanel"
       >
diff --git a/src/layout/components/lay-sidebar/components/SidebarFullScreen.vue b/src/layout/components/lay-sidebar/components/SidebarFullScreen.vue
index 4d38bd0c7..9ea524599 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:[&>svg]: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;
+}