78 lines
3.2 KiB
TypeScript
78 lines
3.2 KiB
TypeScript
import type { PostItem, Notification, OnlineStats } from '../api/types';
|
||
|
||
interface Props {
|
||
hot: PostItem[];
|
||
notifications: Notification[];
|
||
online: OnlineStats | null;
|
||
onPostClick: (id: number) => void;
|
||
}
|
||
|
||
export default function RightPanel({ hot, notifications, online, onPostClick }: Props) {
|
||
const hotList = hot?.slice(0, 8) ?? [];
|
||
const noticeList = notifications?.slice(0, 6) ?? [];
|
||
const members = online?.users ?? [];
|
||
|
||
return (
|
||
<>
|
||
<div className="widget-card">
|
||
<div className="widget-card-head">🔥 热门帖子</div>
|
||
<div className="widget-card-body">
|
||
{hotList.length === 0 ? (
|
||
<div style={{ fontSize: 13, color: 'var(--color-text-3)', padding: '8px 0' }}>暂无数据</div>
|
||
) : hotList.map((item, i) => (
|
||
<div key={item.id} className="widget-item" onClick={() => onPostClick(item.id)}>
|
||
<span style={{ color: i < 3 ? '#e74c3c' : 'var(--color-text-3)', fontWeight: 600, minWidth: 18 }}>{i + 1}</span>
|
||
<span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{item.title}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="widget-card">
|
||
<div className="widget-card-head">📢 最新动态</div>
|
||
<div className="widget-card-body">
|
||
{noticeList.length === 0 ? (
|
||
<div style={{ fontSize: 13, color: 'var(--color-text-3)', padding: '8px 0' }}>暂无动态</div>
|
||
) : noticeList.map(item => (
|
||
<div key={item.id} className="widget-item" onClick={() => onPostClick(item.id)}>
|
||
<span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{item.title}</span>
|
||
<span style={{ fontSize: 11, color: 'var(--color-text-4)', flexShrink: 0 }}>{item.created_at}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="widget-card">
|
||
<div className="widget-card-head">👀 当前浏览 {online?.count ?? '—'} 人</div>
|
||
<div className="widget-card-body">
|
||
<div style={{ fontSize: 12, color: 'var(--color-text-3)', marginBottom: 8 }}>
|
||
会员 {online?.members ?? 0} · 游客 {online?.guests ?? 0}
|
||
</div>
|
||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
|
||
{members.map(u => (
|
||
<span key={u.id} title={u.nickname} style={{
|
||
width: 28, height: 28, borderRadius: '50%', background: 'var(--j13-green)',
|
||
color: '#fff', fontSize: 12, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
|
||
}}>
|
||
{u.nickname?.[0] || '?'}
|
||
</span>
|
||
))}
|
||
{members.length === 0 && (
|
||
<span style={{ fontSize: 13, color: 'var(--color-text-3)' }}>暂无会员在线</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="widget-card widget-card--about">
|
||
<div className="widget-card-body">
|
||
<p className="widget-about-text">
|
||
<strong>姜十三论坛</strong>
|
||
拾三一隅，自在交流。轻量社区，专为小圈子打造。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|