freefire
bee06fa962
本次提交实现了完整的社区首页功能： 1. 新增首页聚合接口与服务，包含社区统计、热门帖、活跃用户与板块数据 2. 实现帖子推荐排序、SSR缓存与点赞态同步逻辑 3. 重构导航与布局系统，新增工作台侧边栏与移动端适配 4. 优化主题色与UI样式，统一设计系统风格 5. 修复登录注册页自动跳转与组件状态同步问题
58 lines
1.8 KiB
TypeScript
58 lines
1.8 KiB
TypeScript
"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>
|
||
);
|
||
}
|