60 lines
2.0 KiB
TypeScript
60 lines
2.0 KiB
TypeScript
import { ArrowRight, BarChart3, MessageSquare, Users } from 'lucide-react'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import './ChatAnalyticsHubPage.scss'
|
|
|
|
function ChatAnalyticsHubPage() {
|
|
const navigate = useNavigate()
|
|
|
|
return (
|
|
<div className="chat-analytics-hub-page">
|
|
<div className="chat-analytics-hub-content">
|
|
<div className="chat-analytics-hub-badge">
|
|
<BarChart3 size={16} />
|
|
<span>聊天分析</span>
|
|
</div>
|
|
|
|
<h1>选择你要进入的分析视角</h1>
|
|
<p className="chat-analytics-hub-desc">
|
|
私聊分析更适合看好友聊天统计和趋势，群聊分析则用于查看群成员、发言排行和活跃时段。
|
|
</p>
|
|
|
|
<div className="chat-analytics-hub-grid">
|
|
<button
|
|
type="button"
|
|
className="chat-analytics-entry-card"
|
|
onClick={() => navigate('/analytics/private')}
|
|
>
|
|
<div className="entry-card-icon">
|
|
<MessageSquare size={24} />
|
|
</div>
|
|
<div className="entry-card-header">
|
|
<h2>私聊分析</h2>
|
|
<ArrowRight size={18} />
|
|
</div>
|
|
<p>查看好友聊天统计、消息趋势、活跃时段与联系人排名。</p>
|
|
<span className="entry-card-cta">进入私聊分析</span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
className="chat-analytics-entry-card"
|
|
onClick={() => navigate('/analytics/group')}
|
|
>
|
|
<div className="entry-card-icon group">
|
|
<Users size={24} />
|
|
</div>
|
|
<div className="entry-card-header">
|
|
<h2>群聊分析</h2>
|
|
<ArrowRight size={18} />
|
|
</div>
|
|
<p>查看群成员信息、发言排行、活跃时段和媒体内容统计。</p>
|
|
<span className="entry-card-cta">进入群聊分析</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ChatAnalyticsHubPage
|