refactor(projects): 登录页面重新设计

src/layouts/modules/global-header/components/notification-bell.vue

@@ -341,18 +341,53 @@ onBeforeUnmount(() => {
 
 .notification-bell__badge {
   position: absolute;
-  top: 4px;
-  right: 4px;
-  min-width: 16px;
-  height: 16px;
-  padding: 0 4px;
+  top: 2px;
+  right: 2px;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border: 1px solid #fff;
   border-radius: 999px;
   background-color: var(--el-color-danger);
   color: #fff;
-  font-size: 10px;
-  font-weight: 600;
+  font-size: 11px;
+  font-weight: 700;
   line-height: 16px;
   text-align: center;
+  animation: notification-badge-pulse 1.6s ease-in-out infinite;
+}
+
+/* 扩散波纹：跟随心跳节奏向外晕开，增强未读提醒的醒目度 */
+.notification-bell__badge::before {
+  content: '';
+  position: absolute;
+  inset: -1px;
+  border-radius: 999px;
+  background-color: var(--el-color-danger);
+  animation: notification-badge-ping 1.6s ease-out infinite;
+  z-index: -1;
+}
+
+@keyframes notification-badge-pulse {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.18);
+  }
+}
+
+@keyframes notification-badge-ping {
+  0% {
+    transform: scale(1);
+    opacity: 0.6;
+  }
+  70%,
+  100% {
+    transform: scale(1.9);
+    opacity: 0;
+  }
 }
 
 .notification-bell__panel {

src/layouts/modules/global-header/index.vue

@@ -41,11 +41,6 @@ const { isFullscreen, toggle } = useFullscreen();
       <div>
         <FullScreen v-if="!appStore.isMobile" :full="isFullscreen" @click="toggle" />
       </div>
-      <ThemeSchemaSwitch
-        :theme-schema="themeStore.themeScheme"
-        :is-dark="themeStore.darkMode"
-        @switch="themeStore.toggleThemeScheme"
-      />
       <div>
         <ThemeButton />
       </div>

src/layouts/modules/theme-drawer/modules/dark-mode.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { themeSchemaRecord } from '@/constants/app';
 import { useThemeStore } from '@/store/modules/theme';
 import { $t } from '@/locales';
 import SettingItem from '../components/setting-item.vue';
@@ -9,16 +8,6 @@ defineOptions({ name: 'DarkMode' });
 
 const themeStore = useThemeStore();
 
-const icons: Record<UnionKey.ThemeScheme, string> = {
-  light: 'material-symbols:sunny',
-  dark: 'material-symbols:nightlight-rounded',
-  auto: 'material-symbols:hdr-auto'
-};
-
-function handleSegmentChange(value: string | number) {
-  themeStore.setThemeScheme(value as UnionKey.ThemeScheme);
-}
-
 function handleGrayscaleChange(value: boolean) {
   themeStore.setGrayscale(value);
 }
@@ -33,15 +22,6 @@ const showSiderInverted = computed(() => !themeStore.darkMode && themeStore.layo
 <template>
   <ElDivider>{{ $t('theme.themeSchema.title') }}</ElDivider>
   <div class="flex-col-stretch gap-16px">
-    <div class="i-flex-center">
-      <ElTabs v-model="themeStore.themeScheme" type="border-card" class="segment" @tab-change="handleSegmentChange">
-        <ElTabPane v-for="(_, key) in themeSchemaRecord" :key="key" :name="key">
-          <template #label>
-            <SvgIcon :icon="icons[key]" class="h-23px text-icon-small" />
-          </template>
-        </ElTabPane>
-      </ElTabs>
-    </div>
     <Transition name="sider-inverted">
       <SettingItem v-if="showSiderInverted" :label="$t('theme.sider.inverted')">
         <ElSwitch v-model="themeStore.sider.inverted" />