初始提交：姜十三论坛 Jiang13 Forum

轻量自用论坛，Go 单二进制 + React SPA 内嵌 + SQLite。

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/components/RightPanel.tsx

@@ -0,0 +1,77 @@
+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>
+    </>
+  );
+}