feat: 完成社区首页功能迭代,新增首页聚合与工作台组件
本次提交实现了完整的社区首页功能: 1. 新增首页聚合接口与服务,包含社区统计、热门帖、活跃用户与板块数据 2. 实现帖子推荐排序、SSR缓存与点赞态同步逻辑 3. 重构导航与布局系统,新增工作台侧边栏与移动端适配 4. 优化主题色与UI样式,统一设计系统风格 5. 修复登录注册页自动跳转与组件状态同步问题
This commit is contained in:
57
frontend/components/home/FeedTabs.tsx
Normal file
57
frontend/components/home/FeedTabs.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useRef } from "react";
|
||||
|
||||
export type FeedSort = "latest" | "hot" | "recommended";
|
||||
|
||||
const TAB_KEYS: FeedSort[] = ["latest", "hot", "recommended"];
|
||||
const TAB_LABELS: Record<FeedSort, string> = {
|
||||
latest: "最新",
|
||||
hot: "热门",
|
||||
recommended: "精华",
|
||||
};
|
||||
|
||||
// 在指定板块内切换排序时保留 ?board=
|
||||
function tabHref(key: FeedSort, boardId: number) {
|
||||
const params = new URLSearchParams();
|
||||
if (boardId > 0) params.set("board", String(boardId));
|
||||
if (key !== "latest") params.set("sort", key);
|
||||
const qs = params.toString();
|
||||
return qs ? `/?${qs}` : "/";
|
||||
}
|
||||
|
||||
// 中栏排序分段控件:URL query 驱动、SSR 直出,键盘 ←/→ 可切换
|
||||
export default function FeedTabs({ current, boardId = 0 }: { current: FeedSort; boardId?: number }) {
|
||||
const router = useRouter();
|
||||
const tabRefs = useRef<(HTMLAnchorElement | null)[]>([]);
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent, i: number) => {
|
||||
if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
|
||||
e.preventDefault();
|
||||
const next = (i + (e.key === "ArrowRight" ? 1 : TAB_KEYS.length - 1)) % TAB_KEYS.length;
|
||||
tabRefs.current[next]?.focus();
|
||||
router.push(tabHref(TAB_KEYS[next], boardId));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="j13-seg" role="tablist" aria-label="帖子排序">
|
||||
{TAB_KEYS.map((key, i) => (
|
||||
<Link
|
||||
key={key}
|
||||
ref={(el) => {
|
||||
tabRefs.current[i] = el;
|
||||
}}
|
||||
href={tabHref(key, boardId)}
|
||||
role="tab"
|
||||
aria-selected={current === key}
|
||||
tabIndex={current === key ? 0 : -1}
|
||||
onKeyDown={(e) => handleKeyDown(e, i)}
|
||||
>
|
||||
{TAB_LABELS[key]}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user