polish(frontend): 侧栏与徽章可读性,智能悬停提示
降权全站字重;优化右栏公告/数据块;类型状态徽章用固定浅色区分;TipHost 仅在文案不一致、非文字或省略时显示。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -43,7 +43,7 @@ export function PulseCheckin({ initial }: { initial?: CheckinStatus | null }) {
|
||||
{checked ? <CalendarCheck size={16} /> : <CalendarDays size={16} />}
|
||||
</span>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-[12.5px] font-bold leading-tight" style={{ color: "var(--ink)" }}>
|
||||
<p className="text-[12.5px] leading-tight" style={{ color: "var(--ink)" }}>
|
||||
每日签到
|
||||
</p>
|
||||
<p className="meta mt-0.5 truncate text-[11px]">
|
||||
|
||||
@@ -73,10 +73,10 @@ function PulseCard({ stats, checkin }: { stats: OverviewStats; checkin?: Checkin
|
||||
实时
|
||||
</span>
|
||||
</div>
|
||||
<div className="j13-pulse mt-3">
|
||||
<div className="j13-pulse">
|
||||
{cells.map((c) => (
|
||||
<div key={c.label} className="j13-pulse-cell">
|
||||
<p className="j13-pulse-lab" style={{ color: "var(--ink-3)" }}>
|
||||
<p className="j13-pulse-lab">
|
||||
<span style={{ color: "var(--accent)" }} aria-hidden="true">
|
||||
{c.icon}
|
||||
</span>
|
||||
@@ -102,32 +102,31 @@ function PulseCard({ stats, checkin }: { stats: OverviewStats; checkin?: Checkin
|
||||
function Announcements({ items }: { items: AnnouncementSummary[] }) {
|
||||
return (
|
||||
<section className="j13-module" aria-label="站点公告">
|
||||
<p className="j13-module-title mb-2">
|
||||
<p className="j13-module-title">
|
||||
<Megaphone size={15} style={{ color: "var(--accent)" }} /> 站点公告
|
||||
</p>
|
||||
{items.length === 0 ? (
|
||||
<p className="meta px-1 py-1.5">暂无公告</p>
|
||||
<p className="meta mt-2 px-0.5">暂无公告</p>
|
||||
) : (
|
||||
<ul>
|
||||
<ul className="j13-anno-list">
|
||||
{items.map((a) => (
|
||||
<li key={a.id}>
|
||||
<Link
|
||||
href={`/announcement/${a.id}`}
|
||||
className="group block -mx-1.5 rounded-lg px-1.5 py-1.5 transition-colors hover:bg-[var(--accent-soft)] focus-visible:bg-[var(--accent-soft)]"
|
||||
className="j13-anno-item"
|
||||
data-tip={a.title}
|
||||
>
|
||||
<span className="flex items-center justify-between gap-2">
|
||||
<span className={`j13-anno-tag is-${a.tag_color}`}>{a.tag}</span>
|
||||
<span className="meta shrink-0 text-[11px] tabular-nums">
|
||||
{formatShortDate(a.created_at)}
|
||||
<span className="j13-anno-item-body">
|
||||
<span className="j13-anno-item-title truncate">{a.title}</span>
|
||||
<span className="j13-anno-item-meta">
|
||||
{a.tag ? (
|
||||
<span className={`j13-anno-tag is-${a.tag_color}`}>{a.tag}</span>
|
||||
) : null}
|
||||
<span className="meta text-[11px] tabular-nums">
|
||||
{formatShortDate(a.created_at)}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
className="mt-1.5 block truncate text-[13px] leading-snug transition-colors group-hover:text-[var(--accent)]"
|
||||
style={{ color: "var(--ink)" }}
|
||||
data-tip={a.title}
|
||||
>
|
||||
{a.title}
|
||||
</span>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
@@ -236,7 +235,7 @@ function ActiveUsers({ users }: { users: ActiveUser[] }) {
|
||||
<Avatar name={name} src={u.avatar} size={30} />
|
||||
<span className="flex-1 min-w-0">
|
||||
<span
|
||||
className="block truncate text-[13px] font-semibold leading-tight"
|
||||
className="block truncate text-[13px] leading-tight"
|
||||
style={{ color: "var(--ink)" }}
|
||||
>
|
||||
{name}
|
||||
@@ -251,7 +250,7 @@ function ActiveUsers({ users }: { users: ActiveUser[] }) {
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
className="shrink-0 text-[13px] font-extrabold tabular-nums"
|
||||
className="shrink-0 text-[13px] tabular-nums"
|
||||
style={{ color: "var(--accent)" }}
|
||||
aria-label={`本周共 ${u.post_count + u.comment_count} 次互动`}
|
||||
>
|
||||
|
||||
@@ -60,7 +60,7 @@ export default function FeedNewTip({
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleClick}
|
||||
className="j13-feed-new-tip w-full inline-flex items-center justify-center gap-1.5 py-2 px-3 text-[13px] font-semibold rounded-[var(--r-sm)] transition-colors"
|
||||
className="j13-feed-new-tip w-full inline-flex items-center justify-center gap-1.5 py-2 px-3 text-[13px] rounded-[var(--r-sm)] transition-colors"
|
||||
style={{
|
||||
color: "var(--accent)",
|
||||
background: "var(--accent-soft)",
|
||||
|
||||
@@ -10,23 +10,14 @@ function boardHref(id: number) {
|
||||
return `/?board=${id}`;
|
||||
}
|
||||
|
||||
// 桌面左栏:发帖 CTA + 板块导航 + 登录态快捷入口
|
||||
export function WorkspaceNav({ boards, user }: { boards: BoardWithCount[]; user: User | null }) {
|
||||
// 桌面左栏:板块导航
|
||||
export function WorkspaceNav({ boards }: { boards: BoardWithCount[]; user?: User | null }) {
|
||||
const params = useSearchParams();
|
||||
const activeBoard = Number(params.get("board")) || 0;
|
||||
const composePath =
|
||||
activeBoard > 0 ? `/compose?board=${activeBoard}` : "/compose";
|
||||
const composeHref = user
|
||||
? composePath
|
||||
: `/login?redirect=${encodeURIComponent(composePath)}`;
|
||||
|
||||
return (
|
||||
<nav className="hidden lg:block w-56 xl:w-60 shrink-0" aria-label="工作台导航">
|
||||
<div className="sticky top-24 space-y-5">
|
||||
<Link href={composeHref} className="btn btn-primary w-full justify-center">
|
||||
<PenSquare size={16} /> 发起讨论
|
||||
</Link>
|
||||
|
||||
{/* 「全部讨论」是重置筛选的动作入口,与板块目录分区展示;卡片样式与下方板块一致 */}
|
||||
<div className="space-y-0.5">
|
||||
<Link href="/" className="j13-bcard" aria-current={activeBoard === 0 ? "page" : undefined}>
|
||||
@@ -37,7 +28,7 @@ export function WorkspaceNav({ boards, user }: { boards: BoardWithCount[]; user:
|
||||
>
|
||||
<Home size={16} />
|
||||
</span>
|
||||
<span className="j13-bcard-name flex-1 truncate text-[13px] font-bold">
|
||||
<span className="j13-bcard-name flex-1 truncate text-[14px]">
|
||||
全部讨论
|
||||
</span>
|
||||
</Link>
|
||||
@@ -48,7 +39,7 @@ export function WorkspaceNav({ boards, user }: { boards: BoardWithCount[]; user:
|
||||
<div>
|
||||
<Link
|
||||
href="/boards"
|
||||
className="group px-1 mb-2 flex items-center justify-between text-[11.5px] font-bold tracking-[0.08em] uppercase text-[var(--ink-3)] hover:text-[var(--accent)] transition-colors"
|
||||
className="group px-1 mb-2 flex items-center justify-between text-[11.5px] font-medium tracking-[0.08em] uppercase text-[var(--ink-3)] hover:text-[var(--accent)] transition-colors"
|
||||
aria-label="进入板块目录列表页"
|
||||
>
|
||||
<span className="flex items-center">
|
||||
@@ -60,7 +51,7 @@ export function WorkspaceNav({ boards, user }: { boards: BoardWithCount[]; user:
|
||||
/>
|
||||
</span>
|
||||
{boards.length > 0 && (
|
||||
<span className="tracking-normal font-semibold tabular-nums">{boards.length} 个</span>
|
||||
<span className="tracking-normal tabular-nums">{boards.length} 个</span>
|
||||
)}
|
||||
</Link>
|
||||
<div className="space-y-2">
|
||||
@@ -76,7 +67,7 @@ export function WorkspaceNav({ boards, user }: { boards: BoardWithCount[]; user:
|
||||
{b.name.slice(0, 1)}
|
||||
</span>
|
||||
<span className="min-w-0 flex-1 flex items-center justify-between gap-2">
|
||||
<span className="j13-bcard-name truncate text-[13px] font-bold">
|
||||
<span className="j13-bcard-name truncate text-[14px]">
|
||||
{b.name}
|
||||
</span>
|
||||
<span className="meta shrink-0 text-[11px] tabular-nums">{b.post_count} 篇</span>
|
||||
|
||||
Reference in New Issue
Block a user