feat: (notify) 增加badge

src/layouts/default/header/components/notify/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div :class="prefixCls">
     <Popover title="" trigger="click" :overlayClassName="`${prefixCls}__overlay`">
-      <Badge :count="count" dot :numberStyle="numberStyle">
+      <Badge size="small" :count="count" :numberStyle="numberStyle">
         <BellOutlined />
       </Badge>
-      <template #content>
+      <!-- <template #content>
         <Tabs>
           <template v-for="item in listData" :key="item.key">
             <TabPane>
@@ -12,27 +12,27 @@
                 {{ item.name }}
                 <span v-if="item.list.length !== 0">({{ item.list.length }})</span>
               </template>
-              <!-- 绑定title-click事件的通知列表中标题是“可点击”的-->
               <NoticeList :list="item.list" v-if="item.key === '1'" @title-click="onNoticeClick" />
               <NoticeList :list="item.list" v-else />
             </TabPane>
           </template>
         </Tabs>
-      </template>
+      </template> -->
     </Popover>
   </div>
 </template>
 <script lang="ts">
   import { computed, defineComponent, ref } from 'vue';
-  import { Popover, Tabs, Badge } from 'ant-design-vue';
+  // Tabs, Badge
+  import { Popover } from 'ant-design-vue';
   import { BellOutlined } from '@ant-design/icons-vue';
   import { tabListData, ListItem } from './data';
-  import NoticeList from './NoticeList.vue';
+  // import NoticeList from './NoticeList.vue';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useMessage } from '/@/hooks/web/useMessage';
-
+  // Tabs, TabPane: Tabs.TabPane, Badge, NoticeList
   export default defineComponent({
-    components: { Popover, BellOutlined, Tabs, TabPane: Tabs.TabPane, Badge, NoticeList },
+    components: { Popover, BellOutlined },
     setup() {
       const { prefixCls } = useDesign('header-notify');
       const { createMessage } = useMessage();
@@ -81,6 +81,7 @@
 
       .ant-badge-multiple-words {
         padding: 0 4px;
+        transform: translate(50%, 50%);
       }
 
       svg {

src/layouts/default/header/index.vue

@@ -39,7 +39,7 @@
 
       <!-- <ErrorAction v-if="getUseErrorHandle" :class="`${prefixCls}-action__item error-action`" /> -->
 
-      <!-- <Notify v-if="getShowNotice" :class="`${prefixCls}-action__item notify-item`" /> -->
+      <Notify v-if="getShowNotice" :class="`${prefixCls}-action__item notify-item`" />
 
       <FullScreen v-if="getShowFullScreen" :class="`${prefixCls}-action__item fullscreen-item`" />
 
@@ -78,7 +78,7 @@
   import { SettingButtonPositionEnum } from '/@/enums/appEnum';
   import { AppLocalePicker } from '/@/components/Application';
   // Notify ErrorAction
-  import { UserDropDown, LayoutBreadcrumb, FullScreen } from './components';
+  import { UserDropDown, LayoutBreadcrumb, FullScreen, Notify } from './components';
   import { useAppInject } from '/@/hooks/web/useAppInject';
   import { useDesign } from '/@/hooks/web/useDesign';
 
@@ -98,7 +98,7 @@
       AppLocalePicker,
       FullScreen,
       Tag,
-      // Notify,
+      Notify,
       // AppSearch,
       // ErrorAction,
       SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue'), {