feat: AquaMai 版本红点

Author: clansty

MaiChartManager/Front/src/components/Sidebar/index.tsx

@@ -3,12 +3,13 @@ import { useVModel } from '@vueuse/core';
 import { useI18n } from 'vue-i18n';
 import RefreshAllButton from './RefreshAllButton';
 import VersionInfo from '@/components/VersionInfo';
+import { shouldShowUpdate as aquaMaiHasUpdate } from '@/views/ModManager/shouldShowUpdateController';
 
 export type SidebarItem = 'charts' | 'mods' | 'batch' | 'genres' | 'tools' | 'settings';
 
-const items: { key: SidebarItem; icon: string; labelKey: string }[] = [
+const items: { key: SidebarItem; icon: string; labelKey: string; badge?: () => boolean }[] = [
   { key: 'charts', icon: 'i-mdi-music-note', labelKey: 'sidebar.charts' },
-  { key: 'mods', icon: 'i-mdi:puzzle', labelKey: 'sidebar.mods' },
+  { key: 'mods', icon: 'i-mdi:puzzle', labelKey: 'sidebar.mods', badge: () => aquaMaiHasUpdate.value },
   { key: 'batch', icon: 'i-mdi-playlist-edit', labelKey: 'sidebar.batch' },
   { key: 'genres', icon: 'i-mdi-tag-multiple', labelKey: 'sidebar.genres' },
   { key: 'tools', icon: 'i-ri:tools-fill', labelKey: 'sidebar.tools' },
@@ -27,7 +28,7 @@ export default defineComponent({
     const active = useVModel(props, 'active', emit);
 
 
-    const renderItem = (key: SidebarItem, icon: string, labelKey: string, desktop: boolean) => (
+    const renderItem = (key: SidebarItem, icon: string, labelKey: string, desktop: boolean, badge?: boolean) => (
       <div
         key={key}
         class={[
@@ -47,6 +48,7 @@ export default defineComponent({
           <div class="absolute bottom-0 left-1.5 right-1.5 h-0.75 rounded-t-full bg-[var(--link-color)]" />
         )}
         <span class={[icon, 'text-6']} />
+        {badge && <div class="absolute top-1 right-1 w-2 h-2 rounded-full bg-red-500 pointer-events-none" />}
         <span class={[
           'absolute px-3 py-1.5 rounded-lg bg-[oklch(0.7_0.13_var(--hue))] text-white text-sm whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-200 z-100',
           desktop ? 'left-full ml-2' : 'max-[439px]:hidden bottom-full mb-2 left-1/2 -translate-x-1/2',
@@ -58,7 +60,7 @@ export default defineComponent({
       <>
         {/* Desktop sidebar */}
         <div class="hidden md:flex w-16 flex-col items-center py-2 gap-1 h-100dvh shrink-0 border-r border-r-[oklch(0.9_0.02_var(--hue))] border-r-solid bg-[oklch(0.98_0.01_var(--hue))] z-20 relative cst">
-          {items.map((item) => renderItem(item.key, item.icon, item.labelKey, true))}
+          {items.map((item) => renderItem(item.key, item.icon, item.labelKey, true, item.badge?.()))}
           <div class="mt-auto" />
           {renderItem('settings', 'i-mdi-cog', 'sidebar.settings', true)}
           <RefreshAllButton />
@@ -73,7 +75,7 @@ export default defineComponent({
           'min-[440px]:justify-center',
           'bg-[oklch(0.98_0.01_var(--hue))] border-t border-t-[oklch(0.9_0.02_var(--hue))] border-t-solid',
         ]}>
-          {items.map((item) => renderItem(item.key, item.icon, item.labelKey, false))}
+          {items.map((item) => renderItem(item.key, item.icon, item.labelKey, false, item.badge?.()))}
           {renderItem('settings', 'i-mdi-cog', 'sidebar.settings', false)}
           <RefreshAllButton />
           <VersionInfo />