update,

2025-04-26 09:56:29 +08:00
parent a00d1ee7ce
commit 7d70b5826b
17 changed files with 1256 additions and 92 deletions
--- a/002_source/cms/src/components/dashboard/teacher/mail/label-item.tsx
+++ b/002_source/cms/src/components/dashboard/teacher/mail/label-item.tsx
@@ -0,0 +1,100 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import type { Icon } from '@phosphor-icons/react/dist/lib/types';
+import { Bookmark as BookmarkIcon } from '@phosphor-icons/react/dist/ssr/Bookmark';
+import { EnvelopeSimple as EnvelopeSimpleIcon } from '@phosphor-icons/react/dist/ssr/EnvelopeSimple';
+import { File as FileIcon } from '@phosphor-icons/react/dist/ssr/File';
+import { PaperPlaneTilt as PaperPlaneTiltIcon } from '@phosphor-icons/react/dist/ssr/PaperPlaneTilt';
+import { Star as StarIcon } from '@phosphor-icons/react/dist/ssr/Star';
+import { Tag as TagIcon } from '@phosphor-icons/react/dist/ssr/Tag';
+import { Trash as TrashIcon } from '@phosphor-icons/react/dist/ssr/Trash';
+import { WarningCircle as WarningCircleIcon } from '@phosphor-icons/react/dist/ssr/WarningCircle';
+
+import type { Label } from './types';
+
+const systemLabelIcons: Record<string, Icon> = {
+  inbox: EnvelopeSimpleIcon,
+  sent: PaperPlaneTiltIcon,
+  trash: TrashIcon,
+  drafts: FileIcon,
+  spam: WarningCircleIcon,
+  starred: StarIcon,
+  important: BookmarkIcon,
+};
+
+function getIcon(label: Label): Icon {
+  if (label.type === 'system') {
+    return systemLabelIcons[label.id] ?? systemLabelIcons.inbox;
+  }
+
+  return TagIcon;
+}
+
+function getIconColor(label: Label, active?: boolean): string {
+  if (label.type === 'custom') {
+    return label.color ?? 'var(--mui-palette-text-secondary)';
+  }
+
+  return active ? 'var(--mui-palette-text-primary)' : 'var(--mui-palette-text-secondary)';
+}
+
+export interface LabelItemProps {
+  active?: boolean;
+  label: Label;
+  onSelect?: () => void;
+}
+
+export function LabelItem({ active, label, onSelect }: LabelItemProps): React.JSX.Element {
+  const Icon = getIcon(label);
+  const iconColor = getIconColor(label, active);
+  const showUnreadCount = (label.unreadCount ?? 0) > 0;
+
+  return (
+    <Box component="li" sx={{ userSelect: 'none' }}>
+      <Box
+        onClick={onSelect}
+        onKeyUp={(event) => {
+          if (event.key === 'Enter' || event.key === ' ') {
+            onSelect?.();
+          }
+        }}
+        role="button"
+        sx={{
+          alignItems: 'center',
+          borderRadius: 1,
+          color: 'var(--mui-palette-text-secondary)',
+          cursor: 'pointer',
+          display: 'flex',
+          flex: '0 0 auto',
+          gap: 1,
+          p: '6px 16px',
+          textDecoration: 'none',
+          whiteSpace: 'nowrap',
+          ...(active && { bgcolor: 'var(--mui-palette-action-selected)', color: 'var(--mui-palette-text-primary)' }),
+          '&:hover': {
+            ...(!active && { bgcolor: 'var(--mui-palette-action-hover)', color: 'var(---mui-palette-text-primary)' }),
+          },
+        }}
+        tabIndex={0}
+      >
+        <Box sx={{ display: 'flex', flex: '0 0 auto' }}>
+          <Icon color={iconColor} fontSize="var(--icon-fontSize-md)" weight={active ? 'fill' : undefined} />
+        </Box>
+        <Box sx={{ flex: '1 1 auto' }}>
+          <Typography
+            component="span"
+            sx={{ color: 'inherit', fontSize: '0.875rem', fontWeight: 500, lineHeight: '28px' }}
+          >
+            {label.name}
+          </Typography>
+        </Box>
+        {showUnreadCount ? (
+          <Typography color="inherit" variant="subtitle2">
+            {label.unreadCount}
+          </Typography>
+        ) : null}
+      </Box>
+    </Box>
+  );
+}