@blocklet/ui-react 2.10.89 → 2.11.0

package/src/UserCenter/libs/locales.ts

@@ -38,6 +38,8 @@ export const translations = {
       cancel: '取消',
       required: '必填的',
       invalid: '无效',
+      setting: '设置',
+      profile: '信息',
     },
     toPublic: '公开 “{name}” 页面',
     currentPassport: '当前使用的通行证',
@@ -131,6 +133,8 @@ export const translations = {
       cancel: 'Cancel',
       required: 'Required',
       invalid: 'Invalid',
+      setting: 'Settings',
+      profile: 'Profile',
     },
     toPublic: 'Public "{name}" page',
     currentPassport: 'Passport currently in use',

package/src/common/header-addons.jsx

@@ -11,6 +11,12 @@ import LocaleSelector from '@arcblock/ux/lib/Locale/selector';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { SessionManagerProps } from '../types';
 import { getLocalizedNavigation, filterNavByRole } from '../blocklets';
+import NotificationAddon from './notification-addon';
+
+const hasNotification = () => {
+  const navigations = window?.blocklet?.navigation ?? [];
+  return !!navigations.find((n) => n.id === '/userCenter/notification');
+};
 
 // eslint-disable-next-line no-shadow
 export default function HeaderAddons({ formattedBlocklet, addons, sessionManagerProps }) {
@@ -28,6 +34,10 @@ export default function HeaderAddons({ formattedBlocklet, addons, sessionManager
       return Array.isArray(addons) ? addons : [addons];
     }
     let addonsArray = [];
+
+    if (hasNotification()) {
+      addonsArray.push(<NotificationAddon key="notification-addon" session={sessionCtx.session} />);
+    }
     // 启用了多语言并且检测到了 locale context
     if (enableLocale && locale) {
       addonsArray.push(<LocaleSelector key="locale-selector" showText={false} />);

package/src/common/notification-addon.jsx

@@ -0,0 +1,49 @@
+import Badge from '@mui/material/Badge';
+import PropTypes from 'prop-types';
+import { temp as colors } from '@arcblock/ux/lib/Colors';
+import { IconButton } from '@mui/material';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import NotificationsOutlinedIcon from '@arcblock/icons/lib/Notification';
+import { useCreation } from 'ahooks';
+
+export default function NotificationAddon({ session = {} }) {
+  const { unReadCount } = session;
+
+  const viewAllUrl = useCreation(() => {
+    const { navigation } = window.blocklet ?? {};
+    const notification = navigation?.find((x) => x.id === '/userCenter/notification');
+    return notification?.link;
+  });
+
+  if (!session.user || !viewAllUrl) {
+    return null;
+  }
+
+  return (
+    <IconButton
+      size="medium"
+      variant="outlined"
+      href={viewAllUrl}
+      sx={{
+        borderRadius: 2,
+        color: 'rgba(0, 0, 0, 0.6)',
+        borderColor: colors.lineBorderStrong,
+        '&:hover': {
+          borderRadius: '50%',
+        },
+      }}>
+      <Badge variant="dot" color="error" invisible={unReadCount === 0}>
+        <NotificationsOutlinedIcon style={{ width: 'auto', height: 24 }} />
+      </Badge>
+    </IconButton>
+  );
+}
+
+NotificationAddon.propTypes = {
+  session: PropTypes.object,
+};
+
+NotificationAddon.defaultProps = {
+  session: {},
+};