perf: 优化主题色选项风格

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

@@ -345,8 +345,8 @@ onUnmounted(() => removeMatchMedia);
           @click="setLayoutThemeColor(item.themeColor)"
         >
           <el-icon
-            style="margin: 0.1em 0.1em 0 0"
+            class="mt-px"
-            :size="17"
+            :size="20"
             :color="getThemeColor(item.themeColor)"
           >
             <IconifyIconOffline :icon="Check" />
@@ -538,17 +538,24 @@ onUnmounted(() => removeMatchMedia);
 }
 
 .theme-color {
-  height: 20px;
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
 
   li {
-    float: left;
+    position: relative;
-    height: 20px;
+    width: 21px;
-    margin-right: 8px;
+    height: 21px;
     cursor: pointer;
     border-radius: 4px;
+    box-shadow: rgb(0 0 0 / 15%) 0 0 0 1px inset;
+    transition: all 0.2s ease;
 
-    &:nth-child(1) {
+    &:hover {
-      border: 1px solid #ddd;
+      box-shadow:
+        rgb(0 0 0 / 25%) 0 0 0 1px inset,
+        0 2px 4px rgb(0 0 0 / 15%);
+      transform: scale(1.1);
     }
   }
 }

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;
-}