e16c1a85d7
Performance improvements: - Vite build: manual chunks, terser minification, optimizeDeps - API response caching with 5s TTL via axios interceptors - React.memo for SidebarMenuItem, useCallback for handlers - CSS classes replacing inline styles to reduce reflows UI/UX enhancements (inspired by SAP Fiori, Linear, Feishu): - Dashboard: trend indicators, sparkline charts, CountUp animation on stat cards - Dashboard: pending tasks section with priority labels - Dashboard: recent activity timeline - Design system tokens: trend colors, line-height, dark mode refinements - Enhanced quick actions with hover animations Accessibility (Lighthouse 100/100): - Skip-to-content link, ARIA landmarks, heading hierarchy - prefers-reduced-motion support, focus-visible states - Color contrast fixes: all text meets 4.5:1 ratio - Keyboard navigation for stat cards and task items SEO: meta theme-color, format-detection, robots.txt
73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
import { useState } from 'react';
|
|
import { Tabs } from 'antd';
|
|
import { BellOutlined, MailOutlined, FileTextOutlined, SettingOutlined } from '@ant-design/icons';
|
|
import NotificationList from './messages/NotificationList';
|
|
import MessageTemplates from './messages/MessageTemplates';
|
|
import NotificationPreferences from './messages/NotificationPreferences';
|
|
import type { MessageQuery } from '../api/messages';
|
|
|
|
const UNREAD_FILTER: MessageQuery = { is_read: false };
|
|
|
|
export default function Messages() {
|
|
const [activeKey, setActiveKey] = useState('all');
|
|
|
|
return (
|
|
<div>
|
|
<div className="erp-page-header" style={{ borderBottom: 'none', marginBottom: 0, paddingBottom: 8 }}>
|
|
<div>
|
|
<h4>消息中心</h4>
|
|
<div className="erp-page-subtitle">管理站内消息、模板和通知偏好</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Tabs
|
|
activeKey={activeKey}
|
|
onChange={setActiveKey}
|
|
style={{ marginTop: 8 }}
|
|
items={[
|
|
{
|
|
key: 'all',
|
|
label: (
|
|
<span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
|
<MailOutlined style={{ fontSize: 14 }} />
|
|
全部消息
|
|
</span>
|
|
),
|
|
children: <NotificationList />,
|
|
},
|
|
{
|
|
key: 'unread',
|
|
label: (
|
|
<span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
|
<BellOutlined style={{ fontSize: 14 }} />
|
|
未读消息
|
|
</span>
|
|
),
|
|
children: <NotificationList queryFilter={UNREAD_FILTER} />,
|
|
},
|
|
{
|
|
key: 'templates',
|
|
label: (
|
|
<span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
|
<FileTextOutlined style={{ fontSize: 14 }} />
|
|
消息模板
|
|
</span>
|
|
),
|
|
children: <MessageTemplates />,
|
|
},
|
|
{
|
|
key: 'preferences',
|
|
label: (
|
|
<span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
|
<SettingOutlined style={{ fontSize: 14 }} />
|
|
通知设置
|
|
</span>
|
|
),
|
|
children: <NotificationPreferences />,
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|