polish(frontend): 加大聊天侧栏群名,并强化帖子页作者卡
作者卡补充签名、积分与连签;聊天会话标题字号调至 15px。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -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)}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user