freefire
24c6dea38c
- 新增附件模型与上传服务，拆分头像上传/管理逻辑 - 重构用户资料接口，移除直接修改头像字段，改用专用上传接口 - 添加站点公开设置API与管理员外观配置页 - 全局替换hover背景为accent-soft，优化交互一致性 - 完善头像组件，支持图片加载失败回退与src更新重置 - 新增用户状态事件总线，解决同页头像更新不及时问题 - 调整依赖包顺序与CI依赖版本 - 重构板块列表接口，新增帖子计数 - 迁移账号设置到用户主页tab，合并重复代码
83 lines
2.7 KiB
TypeScript
83 lines
2.7 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useState } from "react";
|
||
import { ArrowUp, MessageSquare } from "lucide-react";
|
||
import LikeButton from "./LikeButton";
|
||
|
||
/**
|
||
* 帖子详情移动端浮动操作条（lg 以下显示）：
|
||
* 长文读到中途也能点赞 / 跳评论框 / 回顶部，不必滚到文末。
|
||
*/
|
||
export default function MobilePostBar({
|
||
postId,
|
||
liked,
|
||
likeCount,
|
||
}: {
|
||
postId: string;
|
||
liked: boolean;
|
||
likeCount: number;
|
||
}) {
|
||
const [showTop, setShowTop] = useState(false);
|
||
|
||
useEffect(() => {
|
||
const onScroll = () => setShowTop(window.scrollY > 400);
|
||
onScroll();
|
||
window.addEventListener("scroll", onScroll, { passive: true });
|
||
return () => window.removeEventListener("scroll", onScroll);
|
||
}, []);
|
||
|
||
const scrollToComments = () => {
|
||
document.getElementById("comment-input")?.scrollIntoView({
|
||
behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth",
|
||
block: "center",
|
||
});
|
||
};
|
||
|
||
const scrollToTop = () => {
|
||
window.scrollTo({
|
||
top: 0,
|
||
behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth",
|
||
});
|
||
};
|
||
|
||
return (
|
||
<div className="lg:hidden fixed bottom-4 left-1/2 -translate-x-1/2 z-40" role="navigation" aria-label="阅读操作">
|
||
<div
|
||
className="flex items-center gap-0.5 rounded-full border px-1.5 py-1.5"
|
||
style={{
|
||
background: "color-mix(in srgb, var(--panel) 90%, transparent)",
|
||
borderColor: "var(--line-2)",
|
||
boxShadow: "var(--shadow-lg)",
|
||
backdropFilter: "blur(14px)",
|
||
WebkitBackdropFilter: "blur(14px)",
|
||
}}
|
||
>
|
||
<button
|
||
type="button"
|
||
onClick={scrollToComments}
|
||
className="w-11 h-11 flex items-center justify-center rounded-full transition-colors hover:bg-[var(--accent-soft)] focus-visible:bg-[var(--accent-soft)]"
|
||
style={{ color: "var(--ink-2)" }}
|
||
aria-label="跳到评论框"
|
||
>
|
||
<MessageSquare size={18} />
|
||
</button>
|
||
{/* 放大点赞按钮的触控区域（样式见 globals.css .j13-bar-like） */}
|
||
<div className="j13-bar-like">
|
||
<LikeButton postId={postId} liked={liked} likeCount={likeCount} variant="compact" />
|
||
</div>
|
||
{showTop && (
|
||
<button
|
||
type="button"
|
||
onClick={scrollToTop}
|
||
className="w-11 h-11 flex items-center justify-center rounded-full transition-colors hover:bg-[var(--accent-soft)] focus-visible:bg-[var(--accent-soft)] j13-toast-in"
|
||
style={{ color: "var(--ink-2)" }}
|
||
aria-label="回到顶部"
|
||
>
|
||
<ArrowUp size={18} />
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|