feat: new notification

packages/client/user.ts

@@ -12,3 +12,5 @@ export enum UserGroup {
  User = 10,
  WikiContributor = 11,
 }
+
+export type { Notice as INotice } from './client';

packages/design/theme/variables.less

@@ -18,6 +18,9 @@
 @blue-doing: #8fcaec;
 @blue-collect: #3db3f5;
 
+/* State */
+@error: #f97f77;
+
 /* Response */
 @sm: 640px;
 @md: 768px;

packages/icons/index.tsx

@@ -15,6 +15,7 @@ export { ReactComponent as ArrowDown } from './assets/arrow-down.svg';
 export { ReactComponent as ArrowDownCircle } from './assets/arrow-down-circle.svg';
 export { ReactComponent as ArrowUpCircle } from './assets/arrow-up-circle.svg';
 export { ReactComponent as ArrowRightCircle } from './assets/arrow-right-circle.svg';
+export { ReactComponent as ArrowPath } from './assets/arrow-path.svg';
 export { ReactComponent as Plus } from './assets/plus.svg';
 export { ReactComponent as Minus } from './assets/minus.svg';
 export { ReactComponent as Cursor } from './assets/cursor.svg';
@@ -37,3 +38,4 @@ export { ReactComponent as TopicClosed } from './assets/topic-closed.svg';
 export { ReactComponent as TopicReopen } from './assets/topic-reopen.svg';
 export { ReactComponent as OpenQuote } from './assets/open-quote.svg';
 export { ReactComponent as CloseQuote } from './assets/close-quote.svg';
+export { ReactComponent as Enter } from './assets/enter.svg';

packages/website/package.json

@@ -27,6 +27,7 @@
  "react-router-dom": "^6.10.0",
  "reset-css": "^5.0.1",
  "rooks": "^7.10.0",
+ "socket.io-client": "^4.5.4",
  "swr": "^2.1.1"
  },
  "devDependencies": {

packages/website/src/App.tsx

@@ -3,13 +3,17 @@ import React, { Suspense } from 'react';
 import { HelmetProvider } from 'react-helmet-async';
 import { useRoutes } from 'react-router-dom';
 
+import { NoticeProvider } from '@bangumi/website/hooks/use-notify';
+
 import { UserProvider } from './hooks/use-user';
 
 const App = () => {
  return (
  <HelmetProvider>
  <UserProvider>
- <Suspense fallback={null}>{useRoutes(pageRoutes)}</Suspense>
+ <NoticeProvider>
+ <Suspense fallback={null}>{useRoutes(pageRoutes)}</Suspense>
+ </NoticeProvider>
  </UserProvider>
  </HelmetProvider>
  );

packages/website/src/components/Header/index.tsx

@@ -1,10 +1,12 @@
+import cn from 'classnames';
 import type { FC } from 'react';
 import React, { useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 
 import { Avatar, Button, Divider, Input, Menu } from '@bangumi/design';
 import { Notification, Search as SearchIcon, Setting } from '@bangumi/icons';
 import { UnreadableCodeError } from '@bangumi/utils';
+import { useNotify } from '@bangumi/website/hooks/use-notify';
 
 import { ReactComponent as Logo } from '../../assets/logo.svg';
 import { ReactComponent as Musume1 } from '../../assets/musume_1.svg';
@@ -90,12 +92,15 @@ if (Musume === undefined) {
 
 const Header: FC = () => {
  const { user } = useUser();
+ const { noticeCount } = useNotify();
  const location = useLocation();
 
  const [showMobileMenu, setShowMobileMenu] = useState(false);
+
  return (
  <header className={style.container}>
  <div className={style.main}>
+ {/* left */}
  <div className='flex items-center'>
  {/* Logo */}
  <a className={style.logo} href='/'>
@@ -119,7 +124,9 @@ const Header: FC = () => {
  <Menu items={navRight} wrapperClass={style.navRight} />
  </div>
  </div>
- <div className='flex items-center'>
+
+ {/* right */}
+ <div className={style.headerRight}>
  <div className={style.infoBox}>
  {/* Search Todo */}
  <Input
@@ -143,8 +150,16 @@ const Header: FC = () => {
  {/* Avatar */}
  {user ? (
  <>
- <Notification className={style.iconNotification} />
- <Setting className={style.iconSetting} />
+ <Link
+ to='/notifications'
+ className={cn(style.icon, style.iconNotification, {
+ [style.iconNotificationNotice!]: noticeCount > 0,
+ })}
+ >
+ <Notification />
+ </Link>
+
+ <Setting className={style.icon} />
  <Avatar src={user.avatar.large} wrapperClass={style.avatar} />
  </>
  ) : (

packages/website/src/components/Header/style.module.less

@@ -82,11 +82,17 @@
  }
 }
 
+.header-right {
+ .flex();
+ .items-center();
+
+ gap: 12px;
+}
+
 .infoBox {
  display: flex;
  align-items: center;
  padding: 0 7px 0 9px;
- margin-right: 16px;
 
  .search {
  height: 32px;
@@ -109,16 +115,35 @@
  }
 }
 
-.iconNotification {
- margin-right: 25px;
- width: 16px;
- height: 18px;
+.red-dot {
+ content: '';
+ position: absolute;
+ background: #f00;
+ border-radius: 50%;
+ width: 8px;
+ height: 8px;
+ top: -3px;
+ right: 0;
 }
 
-.iconSetting {
- margin-right: 25px;
+.icon {
  width: 18px;
  height: 18px;
+
+ &-notification {
+ position: relative;
+
+ &-notice::before {
+ .red-dot();
+ }
+
+ // ping animation
+ &-notice::after {
+ .red-dot();
+
+ animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+ }
+ }
 }
 
 .link {

packages/website/src/components/Helmet.tsx

@@ -1,9 +1,19 @@
 import React from 'react';
 import { Helmet as BaseHelmet, type HelmetProps } from 'react-helmet-async';
 
+import { useNotify } from '@bangumi/website/hooks/use-notify.tsx';
+
 const Helmet = (props: React.PropsWithChildren<HelmetProps>) => {
+ const { noticeCount } = useNotify();
+
  return (
- <BaseHelmet defaultTitle='Bangumi 番组计划' titleTemplate='%s | Bangumi 番组计划' {...props} />
+ <BaseHelmet
+ defaultTitle='Bangumi 番组计划'
+ titleTemplate={
+ noticeCount ? `(${noticeCount}) %s | Bangumi 番组计划` : `%s | Bangumi 番组计划`
+ }
+ {...props}
+ />
  );
 };
 

packages/website/src/hooks/use-notify.tsx

@@ -0,0 +1,61 @@
+import type { PropsWithChildren } from 'react';
+import React, { useEffect, useState } from 'react';
+import type { Socket } from 'socket.io-client';
+import { io } from 'socket.io-client';
+
+import { useUser } from '@bangumi/website/hooks/use-user';
+
+let socket: Socket | null;
+
+interface NoticeContextType {
+ noticeCount: number;
+}
+
+const NoticeContext = React.createContext<NoticeContextType>(null!);
+
+export const NoticeProvider: React.FC<PropsWithChildren> = ({ children }) => {
+ const { user } = useUser();
+ const [noticeCount, setNoticeCount] = useState(0);
+
+ useEffect(() => {
+ if (!user) {
+ return;
+ }
+ if (!socket) {
+ socket = io(location.host, {
+ path: '/p1/socket-io/',
+ reconnection: true,
+ reconnectionDelay: 5000,
+ reconnectionDelayMax: 10000,
+ transports: ['websocket'],
+ });
+
+ socket.on('notify', (event: string) => {
+ const { count } = JSON.parse(event) as { count: number };
+ setNoticeCount(count);
+ });
+
+ socket.on('connect_error', () => {
+ // fallback to polling in netlify env
+ if (socket) {
+ socket.io.opts.transports = ['polling', 'websocket'];
+ }
+ });
+ }
+
+ return () => {
+ socket?.disconnect();
+ socket = null;
+ };
+ }, [user, setNoticeCount]);
+
+ const value: NoticeContextType = {
+ noticeCount,
+ };
+
+ return <NoticeContext.Provider value={value}> {children} </NoticeContext.Provider>;
+};
+
+export function useNotify(): NoticeContextType {
+ return React.useContext(NoticeContext) ?? { noticeCount: 0 };
+}

packages/website/src/pages/index/notifications/index.module.less

@@ -0,0 +1,92 @@
+@import '@bangumi/design/theme/base';
+
+.title {
+ font-weight: 600;
+ font-size: 24px;
+ line-height: 34px;
+ color: @gray-100;
+}
+
+.subtitle {
+ display: flex;
+ gap: 10px;
+ align-items: center;
+ height: 22px;
+ color: @gray-60;
+
+ > svg {
+ cursor: pointer;
+ }
+}
+
+.tab {
+ margin-top: 24px;
+ margin-bottom: 20px;
+}
+
+.read-all-btn {
+ height: 34px;
+}
+
+.filter {
+ .flex();
+
+ justify-content: space-between;
+ margin-bottom: 10px;
+
+ &-input {
+ height: 34px;
+ }
+}
+
+.notice-item {
+ // padding: 5px 0 5px 5px;
+ display: flex;
+ align-items: center;
+ height: 40px;
+ gap: 10px;
+ border-bottom: 1px dashed @gray-10;
+ color: @gray-80;
+
+ a,
+ span {
+ white-space: nowrap;
+ }
+
+ a {
+ font-weight: 600;
+ }
+
+ &-avatar {
+ height: 30px;
+ width: 30px;
+ border-radius: 6px;
+ }
+
+ // TODO: 移动端换行
+ &-body {
+ display: flex;
+ gap: 4px;
+ max-width: 60%;
+
+ &-content {
+ .truncate();
+ }
+ }
+
+ &-date {
+ color: @gray-10;
+ }
+
+ &-red-dot {
+ width: 12px;
+ height: 12px;
+ border-radius: 9999px;
+ margin-left: auto;
+ margin-right: 4px;
+
+ /* Alert/Error */
+
+ background: @error;
+ }
+}