feat(TopBar): add top bar icon badges config

src/_locales/cmn-CN.yml

@@ -72,6 +72,11 @@ settings:
   disable_frosted_glass: 禁用毛玻璃效果
   reduce_frosted_glass_blur: 降低毛玻璃模糊强度
   auto_hide_topbar: 自动隐藏顶栏
+  topbar_icon_badges: 图标角标
+  topbar_icon_badges_opt:
+    number: 数字
+    dot: 圆点
+    none: 不显示
   dock_position: Dock 栏位置
   dock_position_desc: 在屏幕中摆放位置
   dock_position_opt:

src/_locales/cmn-TW.yml

@@ -72,6 +72,11 @@ settings:
   disable_frosted_glass: 停用毛玻璃效果
   reduce_frosted_glass_blur: 降低毛玻璃模糊強度
   auto_hide_topbar: 自動隱藏頂欄
+  topbar_icon_badges: 圖示標記樣式
+  topbar_icon_badges_opt:
+    number: 數字
+    dot: 圓點
+    none: 不顯示
   dock_position: Dock 位置
   dock_position_desc: 螢幕上的位置
   dock_position_opt:

src/_locales/en.yml

@@ -72,6 +72,11 @@ settings:
   disable_frosted_glass: Disable frosted glass effect
   reduce_frosted_glass_blur: Reduce the intensity of the frosted glass blur
   auto_hide_topbar: Automatically hide the top bar
+  topbar_icon_badges: Icon badges
+  topbar_icon_badges_opt:
+    number: Number
+    dot: Dot
+    none: Do not show
   dock_position: Dock position
   dock_position_desc: Position on screen
   dock_position_opt:

src/_locales/jyut.yml

@@ -72,6 +72,11 @@ settings:
   disable_frosted_glass: 閂咗毛玻璃效果
   reduce_frosted_glass_blur: 降低毛玻璃模糊強度
   auto_hide_topbar: 自動收埋頂欄
+  topbar_icon_badges: 圖示邊位標記
+  topbar_icon_badges_opt:
+    number: 數字
+    dot: 圓點
+    none: 唔顯示
   dock_position: Dock 放位
   dock_position_desc: 放喺螢幕邊度
   dock_position_opt:

src/components/Settings/components/General.vue

@@ -44,6 +44,22 @@ const dockPositions = computed(() => {
     },
   ]
 })
+const topBarIconBadgesOptions = computed(() => {
+  return [
+    {
+      label: t('settings.topbar_icon_badges_opt.number'),
+      value: 'number',
+    },
+    {
+      label: t('settings.topbar_icon_badges_opt.dot'),
+      value: 'dot',
+    },
+    {
+      label: t('settings.topbar_icon_badges_opt.none'),
+      value: 'none',
+    },
+  ]
+})
 
 const pageOptions = computed((): { label: string, icon: string, value: string }[] => {
   return mainStore.dockItems.map((e: any) => {
@@ -125,6 +141,9 @@ function handleToggleDockItem(dockItem: any) {
       <SettingsItem :title="$t('settings.auto_hide_topbar')">
         <Radio v-model="settings.autoHideTopBar" />
       </SettingsItem>
+      <SettingsItem :title="$t('settings.topbar_icon_badges')">
+        <Select v-model="settings.topBarIconBadges" :options="topBarIconBadgesOptions" w="full" />
+      </SettingsItem>
     </SettingsItemGroup>
 
     <SettingsItemGroup :title="$t('settings.group_dock')">

src/components/TopBar/TopBar.vue

@@ -452,9 +452,18 @@ defineExpose({
                 @mouseenter="showNotificationsPop = true"
                 @mouseleave="showNotificationsPop = false"
               >
-                <div v-if="unReadMessageCount !== 0" class="unread-message">
-                  {{ unReadMessageCount > 999 ? '999+' : unReadMessageCount }}
-                </div>
+                <template v-if="unReadMessageCount !== 0">
+                  <div
+                    v-if="settings.topBarIconBadges === 'number'"
+                    class="unread-message"
+                  >
+                    {{ unReadMessageCount > 999 ? '999+' : unReadMessageCount }}
+                  </div>
+                  <div
+                    v-else-if="settings.topBarIconBadges === 'dot'"
+                    w-8px h-8px bg="$bew-theme-color" rounded-8px pos="absolute right-0 top-0"
+                  />
+                </template>
                 <a
                   href="https://message.bilibili.com"
                   :target="isHomePage() ? '_blank' : '_self'"
@@ -478,9 +487,18 @@ defineExpose({
                 @mouseenter="showMomentsPop = true"
                 @mouseleave="showMomentsPop = false"
               >
-                <div v-if="newMomentsCount !== 0" class="unread-message">
-                  {{ newMomentsCount > 999 ? '999+' : newMomentsCount }}
-                </div>
+                <template v-if="unReadMessageCount !== 0">
+                  <div
+                    v-if="settings.topBarIconBadges === 'number'"
+                    class="unread-message"
+                  >
+                    {{ newMomentsCount > 999 ? '999+' : newMomentsCount }}
+                  </div>
+                  <div
+                    v-else-if="settings.topBarIconBadges === 'dot'"
+                    w-8px h-8px bg="$bew-theme-color" rounded-8px pos="absolute right-0 top-0"
+                  />
+                </template>
                 <a
                   href="https://t.bilibili.com"
                   :target="isHomePage() ? '_blank' : '_self'"

src/logic/storage.ts

@@ -14,6 +14,7 @@ export interface Settings {
   enableVideoCtrlBarOnVideoCard: boolean
   hoverVideoCardDelayed: boolean
   autoHideTopBar: boolean
+  topBarIconBadges: 'number' | 'dot' | 'none'
   blockAds: boolean
   disableFrostedGlass: boolean
   reduceFrostedGlassBlur: boolean
@@ -59,6 +60,7 @@ export const settings = useStorageLocal('settings', ref<Settings>({
   enableVideoCtrlBarOnVideoCard: false,
   hoverVideoCardDelayed: false,
   autoHideTopBar: false,
+  topBarIconBadges: 'number',
   dockPosition: 'right',
   autoHideDock: false,
   blockAds: false,