polish(frontend): 加大聊天侧栏群名,并强化帖子页作者卡

作者卡补充签名、积分与连签;聊天会话标题字号调至 15px。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-09-16 05:58:20 +08:00
parent dd7bd010b8
commit 9d3ea4d95c
2 changed files with 85 additions and 30 deletions

View File

@@ -468,7 +468,7 @@ export default function ChatShell({
<div className="flex-1 min-w-0">
<div className="flex items-center gap-1.5">
<span
className="text-[13.5px] truncate"
className="text-[15px] truncate"
style={{ color: "var(--ink)" }}
>
{roomTitle(room)}

View File

@@ -88,11 +88,6 @@ function extractToc(content: string): TocItem[] {
return items;
}
function formatYearMonth(dateStr: string) {
const d = new Date(dateStr);
return `${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, "0")}`;
}
function formatYMD(dateStr: string) {
const d = new Date(dateStr);
return `${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, "0")}.${String(
@@ -151,6 +146,13 @@ function BoardCard({ board }: { board: Board }) {
function AuthorRailCard({ profile }: { profile: UserProfile }) {
const u = profile.user;
const signature = (u.signature || "").trim();
const { post_count, comment_count, points, streak } = profile.stats;
const stats = [
{ label: "发帖", value: post_count },
{ label: "评论", value: comment_count },
{ label: "积分", value: points },
];
return (
<section className="j13-module shrink-0" aria-labelledby="author-card-title">
<p className="j13-module-title mb-3" id="author-card-title">
@@ -168,21 +170,55 @@ function AuthorRailCard({ profile }: { profile: UserProfile }) {
>
{u.nickname}
</Link>
{u.role !== "user" && <RoleBadge role={u.role} boardIds={u.board_ids} />}
<p className="meta mt-0.5 truncate">@{u.username}</p>
{u.role !== "user" && (
<div className="mt-1">
<RoleBadge role={u.role} boardIds={u.board_ids} />
</div>
)}
</div>
</div>
<p className="meta mt-3">{formatYearMonth(u.created_at)} 加入</p>
<div className="grid grid-cols-2 gap-2 mt-2.5">
<div className="j13-stat">
<span className="j13-stat-num">{profile.stats.post_count}</span>
<span className="j13-stat-lab">发帖</span>
</div>
<div className="j13-stat">
<span className="j13-stat-num">{profile.stats.comment_count}</span>
<span className="j13-stat-lab">评论</span>
</div>
{/* 有签名则展示;无则留空,不放占位文案 */}
{signature ? (
<p
className="mt-3 text-[12.5px] leading-relaxed line-clamp-3"
style={{ color: "var(--ink-2)" }}
title={signature}
>
{signature}
</p>
) : null}
<div
className="mt-3 grid grid-cols-3 border-t"
style={{ borderColor: "var(--line)" }}
>
{stats.map((s, i) => (
<div
key={s.label}
className="px-1.5 py-2.5 text-center"
style={i > 0 ? { borderLeft: "1px solid var(--line)" } : undefined}
>
<p
className="text-[17px] font-semibold leading-none tabular-nums"
style={{ color: "var(--ink)" }}
>
{s.value}
</p>
<p className="mt-1.5 text-[11px]" style={{ color: "var(--ink-3)" }}>
{s.label}
</p>
</div>
))}
</div>
<Link href={`/u/${u.id}`} className="btn btn-line btn-sm w-full justify-center mt-3.5">
{streak > 0 && (
<p
className="mt-2 flex items-center justify-center gap-1 text-[11.5px] font-medium"
style={{ color: "var(--gold)" }}
>
<Flame size={11.5} /> 连签 {streak} 天
</p>
)}
<Link href={`/u/${u.id}`} className="btn btn-line btn-sm w-full justify-center mt-3">
访问主页
</Link>
</section>
@@ -278,6 +314,9 @@ function RelatedPosts({
/* 移动端 / 窄屏作者卡(xl 以下内联在正文与评论之间,替代左栏作者模块) */
function AuthorCardStacked({ profile }: { profile: UserProfile }) {
const u = profile.user;
const signature = (u.signature || "").trim();
const { post_count, comment_count, points, streak } = profile.stats;
return (
<div className="panel p-5 sm:p-6">
<p
@@ -286,29 +325,45 @@ function AuthorCardStacked({ profile }: { profile: UserProfile }) {
>
关于作者
</p>
<div className="flex items-center gap-4 flex-wrap">
<Link href={`/u/${profile.user.id}`} className="shrink-0" aria-label={profile.user.nickname}>
<Avatar name={profile.user.nickname || profile.user.username} src={profile.user.avatar || undefined} size={52} />
<div className="flex items-start gap-4 flex-wrap">
<Link href={`/u/${u.id}`} className="shrink-0" aria-label={u.nickname}>
<Avatar name={u.nickname || u.username} src={u.avatar || undefined} size={52} />
</Link>
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2 flex-wrap">
<Link
href={`/u/${profile.user.id}`}
href={`/u/${u.id}`}
className="font-semibold text-[15px] hover:text-[var(--accent)] transition-colors"
style={{ color: "var(--ink)" }}
>
{profile.user.nickname}
{u.nickname}
</Link>
{profile.user.role !== "user" && (
<RoleBadge role={profile.user.role} boardIds={profile.user.board_ids} />
)}
{u.role !== "user" && <RoleBadge role={u.role} boardIds={u.board_ids} />}
</div>
<p className="meta mt-1">
{formatYearMonth(profile.user.created_at)} 加入 · 发帖 {profile.stats.post_count} · 评论{" "}
{profile.stats.comment_count}
<p className="meta mt-1 flex items-center gap-1.5 flex-wrap">
<span>@{u.username}</span>
<span aria-hidden>·</span>
<span>发帖 {post_count}</span>
<span aria-hidden>·</span>
<span>评论 {comment_count}</span>
<span aria-hidden>·</span>
<span>积分 {points}</span>
{streak > 0 && (
<>
<span aria-hidden>·</span>
<span className="inline-flex items-center gap-0.5 font-medium" style={{ color: "var(--gold)" }}>
<Flame size={11} /> 连签 {streak} 天
</span>
</>
)}
</p>
{signature ? (
<p className="mt-2 text-[13px] leading-relaxed line-clamp-2" style={{ color: "var(--ink-2)" }}>
{signature}
</p>
) : null}
</div>
<Link href={`/u/${profile.user.id}`} className="btn btn-line btn-sm shrink-0">
<Link href={`/u/${u.id}`} className="btn btn-line btn-sm shrink-0 self-center">
访问主页
</Link>
</div>