@skyroc/scripts 2.5.0

package/templates/admin-shell/notification/NotificationPanel.tsx

@@ -0,0 +1,194 @@
+import { DarkModeContainer, SvgIcon } from '@shell/ui/compose';
+import { Button, Divider, Empty, Flex, Typography } from 'antd';
+import { clsx } from 'clsx';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { NotificationItem, NotificationType } from './types';
+
+dayjs.extend(relativeTime);
+
+const { Paragraph, Text } = Typography;
+
+export interface NotificationPanelProps {
+  /** Notifications rendered in the panel list. */
+  notifications: NotificationItem[];
+  /** Click handler for a single notification. */
+  onItemClick: (id: string) => void;
+  /** Mark-all-read command handler. */
+  onMarkAllRead: () => void;
+  /** Jump handler of the notification center entry. The footer is hidden when the host does not pass it. */
+  onViewAll?: () => void;
+  /** Current unread notification count. */
+  unreadCount: number;
+}
+
+interface NotificationTypeConfig {
+  /** 图标块的底色与图标色，取调色板的浅色档，明暗两套主题都跟着变。 */
+  chipClassName: string;
+  /** Iconify icon name for the category. */
+  icon: string;
+}
+
+interface NotificationItemProps {
+  /** Notification data rendered by the row. */
+  item: NotificationItem;
+  /** Click handler for the row. */
+  onClick: (id: string) => void;
+  /** Whether to show the divider below this notification. */
+  showDivider: boolean;
+}
+
+const NOTIFICATION_TYPE_CONFIG: Record<NotificationType, NotificationTypeConfig> = {
+  error: {
+    chipClassName: 'bg-error-50 !text-error',
+    icon: 'carbon:close-filled'
+  },
+  info: {
+    chipClassName: 'bg-primary-50 !text-primary',
+    icon: 'carbon:information-filled'
+  },
+  message: {
+    chipClassName: 'bg-purple-50 !text-purple',
+    icon: 'carbon:chat'
+  },
+  success: {
+    chipClassName: 'bg-success-50 !text-success',
+    icon: 'carbon:checkmark-filled'
+  },
+  warning: {
+    chipClassName: 'bg-warning-50 !text-warning',
+    icon: 'carbon:warning-filled'
+  }
+};
+
+const NotificationItemComponentBase = (props: NotificationItemProps) => {
+  const { item, onClick, showDivider } = props;
+
+  const typeConfig = NOTIFICATION_TYPE_CONFIG[item.type];
+
+  function handleClick() {
+    onClick(item.id);
+  }
+
+  return (
+    <>
+      <div
+        className="relative cursor-pointer bg-container px-16px py-12px transition-colors hover:bg-layout"
+        onClick={handleClick}
+      >
+        <Flex
+          align="flex-start"
+          className="w-full"
+          gap={10}
+        >
+          <div
+            className={clsx('mt-1px h-28px w-28px shrink-0 flex-center rounded-md text-base', typeConfig.chipClassName)}
+          >
+            <SvgIcon icon={typeConfig.icon} />
+          </div>
+
+          <div className="min-w-0 flex-1">
+            <Flex
+              align="center"
+              gap={6}
+            >
+              <Text
+                ellipsis
+                strong
+                className="min-w-0 text-sm"
+              >
+                {item.title}
+              </Text>
+
+              {!item.read && <span className="h-5px w-5px shrink-0 rounded-full bg-primary" />}
+            </Flex>
+
+            <Paragraph
+              className="mb-0! mt-3px! text-xs leading-18px"
+              ellipsis={{ rows: 1 }}
+              type="secondary"
+            >
+              {item.content} · {dayjs(item.timestamp).fromNow()}
+            </Paragraph>
+          </div>
+        </Flex>
+      </div>
+
+      {showDivider && <Divider className="my-0" />}
+    </>
+  );
+};
+
+const NotificationItemComponent = memo(NotificationItemComponentBase);
+
+const NotificationPanelBase = (props: NotificationPanelProps) => {
+  const { notifications, onItemClick, onMarkAllRead, onViewAll, unreadCount } = props;
+
+  const { t } = useTranslation();
+
+  return (
+    <DarkModeContainer className="w-360px overflow-hidden border border-border rounded-lg shadow-float">
+      <Flex
+        align="center"
+        className="px-16px py-12px"
+        justify="space-between"
+      >
+        <Text strong>{t('notification.reminder')}</Text>
+
+        <Button
+          color="primary"
+          disabled={unreadCount === 0}
+          size="small"
+          variant="text"
+          onClick={onMarkAllRead}
+        >
+          {t('notification.markAllRead')}
+        </Button>
+      </Flex>
+
+      <Divider className="my-0" />
+
+      <div className="admin-notification-panel-scroll max-h-380px overflow-y-auto">
+        {notifications.length === 0 ? (
+          <Empty
+            className="py-32px"
+            description={t('notification.empty')}
+            image={Empty.PRESENTED_IMAGE_SIMPLE}
+          />
+        ) : (
+          notifications.map((item, index) => (
+            <NotificationItemComponent
+              item={item}
+              key={item.id}
+              onClick={onItemClick}
+              showDivider={index < notifications.length - 1}
+            />
+          ))
+        )}
+      </div>
+
+      {onViewAll && (
+        <div className="border-t border-border px-16px py-8px">
+          <Button
+            block
+            color="primary"
+            icon={<SvgIcon icon="carbon:arrow-right" />}
+            iconPlacement="end"
+            size="small"
+            variant="link"
+            onClick={onViewAll}
+          >
+            {t('notification.viewAll')}
+          </Button>
+        </div>
+      )}
+    </DarkModeContainer>
+  );
+};
+
+const NotificationPanel = memo(NotificationPanelBase);
+
+export default NotificationPanel;

package/templates/admin-shell/notification/NotificationProvider.tsx

@@ -0,0 +1,59 @@
+import type { ReactNode } from 'react';
+
+import type { NotificationStore } from './notification-store';
+import { NotificationContext } from './NotificationContext';
+import type { NotificationConfig, NotificationItem } from './types';
+import { useNotification } from './use-notification';
+
+export interface NotificationProviderProps {
+  /** Application content that can consume the notification context. */
+  children: ReactNode;
+  /**
+   * Initial configuration merged with the package defaults. Ignored when `store` is provided — pass it to the store
+   * instead.
+   */
+  defaultConfig?: Partial<NotificationConfig>;
+  /** Callback fired when a browser notification cannot be displayed. */
+  onBrowserNotificationError?: (error: unknown) => void;
+  /** Callback fired when the current browser has no Notification API. */
+  onBrowserNotificationUnsupported?: () => void;
+  /** Callback fired when a browser notification link should be opened. */
+  onNavigate?: (link: string, notification: NotificationItem) => void;
+  /** Callback fired when the notification sound cannot be played. */
+  onPlaySoundError?: (error: unknown) => void;
+  /** Callback fired when requesting notification permission fails. */
+  onRequestPermissionError?: (error: unknown) => void;
+  /** Optional notification sound URL owned by the host app. */
+  soundUrl?: string;
+  /** Existing store to reuse, so non-React callers can push into the same queue. */
+  store?: NotificationStore;
+}
+
+const NotificationProvider = (props: NotificationProviderProps) => {
+  const {
+    children,
+    defaultConfig,
+    onBrowserNotificationError,
+    onBrowserNotificationUnsupported,
+    onNavigate,
+    onPlaySoundError,
+    onRequestPermissionError,
+    soundUrl,
+    store
+  } = props;
+
+  const notification = useNotification({
+    defaultConfig,
+    onBrowserNotificationError,
+    onBrowserNotificationUnsupported,
+    onNavigate,
+    onPlaySoundError,
+    onRequestPermissionError,
+    soundUrl,
+    store
+  });
+
+  return <NotificationContext.Provider value={notification}>{children}</NotificationContext.Provider>;
+};
+
+export default NotificationProvider;

package/templates/admin-shell/notification/index.ts

@@ -0,0 +1,12 @@
+export { DEFAULT_NOTIFICATION_CONFIG, NotificationStore } from './notification-store';
+export { default as NotificationButton } from './NotificationButton';
+export type { NotificationButtonProps } from './NotificationButton';
+export { NotificationContext } from './NotificationContext';
+export type { NotificationContextValue } from './NotificationContext';
+export { default as NotificationPanel } from './NotificationPanel';
+export type { NotificationPanelProps } from './NotificationPanel';
+export { default as NotificationProvider } from './NotificationProvider';
+export type { NotificationProviderProps } from './NotificationProvider';
+export type * from './types';
+export { useNotification } from './use-notification';
+export { useNotificationContext } from './useNotificationContext';

package/templates/admin-shell/notification/mock.ts

@@ -0,0 +1,59 @@
+import type { AddNotificationInput } from './types';
+
+const mockNotifications: AddNotificationInput[] = [
+  {
+    content: '系统将于今晚 22:00 进行维护，预计耗时 2 小时',
+    priority: 'urgent',
+    title: '系统维护通知',
+    type: 'warning'
+  },
+  {
+    content: '您的个人资料已成功更新',
+    priority: 'normal',
+    title: '资料更新成功',
+    type: 'success'
+  },
+  {
+    content: 'John Doe 给您发送了一条新消息',
+    priority: 'high',
+    title: '新消息',
+    type: 'message'
+  },
+  {
+    content: '您有 3 个待处理的审批任务',
+    priority: 'high',
+    title: '待办提醒',
+    type: 'info'
+  },
+  {
+    content: '文件上传失败，请检查网络连接',
+    priority: 'normal',
+    title: '上传失败',
+    type: 'error'
+  },
+  {
+    content: '您的账户登录地点异常，请及时修改密码',
+    priority: 'urgent',
+    title: '安全警告',
+    type: 'warning'
+  },
+  {
+    content: '数据备份已完成',
+    priority: 'low',
+    title: '备份完成',
+    type: 'success'
+  },
+  {
+    content: 'Sarah 评论了您的文章',
+    priority: 'normal',
+    title: '新评论',
+    type: 'message'
+  }
+];
+
+/** Demo notification data for local admin examples. */
+export function useMockNotifications() {
+  return {
+    mockNotifications
+  };
+}