From cfc6c1403b1cac171a9dbbb23172ac53cfc17d20 Mon Sep 17 00:00:00 2001 From: freefire Date: Wed, 16 Sep 2026 18:19:53 +0800 Subject: [PATCH] =?UTF-8?q?polish(ui):=20=E4=BE=A7=E6=A0=8F=E5=8F=AF?= =?UTF-8?q?=E7=82=B9=E5=9D=97=E6=82=AC=E5=81=9C/=E8=81=9A=E7=84=A6?= =?UTF-8?q?=E7=BB=9F=E4=B8=80=E4=B8=BA=E4=B8=BB=E9=A2=98=E8=89=B2=E6=B7=A1?= =?UTF-8?q?=E5=BA=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Cursor --- frontend/app/globals.css | 64 +++++++++++++++++--- frontend/app/post/[id]/page.tsx | 5 +- frontend/components/PostToc.tsx | 9 +-- frontend/components/home/BoardPanels.tsx | 7 +-- frontend/components/home/CommunityPanels.tsx | 7 +-- 5 files changed, 62 insertions(+), 30 deletions(-) diff --git a/frontend/app/globals.css b/frontend/app/globals.css index e31bd70..8cf1a22 100644 --- a/frontend/app/globals.css +++ b/frontend/app/globals.css @@ -2155,7 +2155,7 @@ a.j13-mention-token:hover { } } - /* 侧栏导航项 */ + /* 侧栏导航项：无选中态的悬停/聚焦与榜单、公告一致，用主题色淡底 */ .j13-raillink { display: flex; align-items: center; @@ -2168,11 +2168,14 @@ a.j13-mention-token:hover { color: var(--ink-2); transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease; } - .j13-raillink:hover { - background: var(--panel-2); + .j13-raillink:hover, + .j13-raillink:focus-visible { + background: var(--accent-soft); color: var(--ink); } - .j13-raillink[aria-current="page"] { + .j13-raillink[aria-current="page"], + .j13-raillink[aria-current="page"]:hover, + .j13-raillink[aria-current="page"]:focus-visible { background: var(--nav-active-bg); border-color: var(--nav-active-line); color: var(--nav-active-ink); @@ -2407,6 +2410,18 @@ a.j13-mention-token:hover { .j13-rank:focus-visible { background: var(--accent-soft); } + .j13-rank-title { + display: block; + color: var(--ink); + font-size: 13px; + font-weight: 500; + line-height: 1.375; + transition: color 0.16s ease; + } + .j13-rank:hover .j13-rank-title, + .j13-rank:focus-visible .j13-rank-title { + color: var(--accent); + } .j13-rank .j13-rank-no { width: 18px; padding-top: 2px; @@ -2465,11 +2480,15 @@ a.j13-mention-token:hover { white-space: nowrap; transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease; } - .j13-chip:hover { - border-color: var(--line-2); - color: var(--ink); + .j13-chip:hover, + .j13-chip:focus-visible { + background: var(--accent-soft); + border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); + color: var(--accent); } - .j13-chip[aria-current="page"] { + .j13-chip[aria-current="page"], + .j13-chip[aria-current="page"]:hover, + .j13-chip[aria-current="page"]:focus-visible { background: var(--nav-active-bg); border-color: var(--nav-active-line); color: var(--nav-active-ink); @@ -2494,6 +2513,35 @@ a.j13-mention-token:hover { .j13-rail-scroll::-webkit-scrollbar-track { background: transparent; } + + /* 文章目录项：悬停/聚焦与侧栏其他可点块统一为主题色淡底 */ + .j13-toc-link { + display: block; + padding: 6px 4px 6px 12px; + margin-left: -1px; + font-size: 12.5px; + line-height: 1.375; + color: var(--ink-2); + border-left: 2px solid transparent; + border-radius: 0 8px 8px 0; + transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease; + } + .j13-toc-link.is-h3 { + padding-left: 20px; + } + .j13-toc-link:hover, + .j13-toc-link:focus-visible { + color: var(--accent); + background: var(--accent-soft); + } + .j13-toc-link.is-active, + .j13-toc-link.is-active:hover, + .j13-toc-link.is-active:focus-visible { + color: var(--accent); + font-weight: 600; + border-left-color: var(--accent); + background: var(--accent-soft); + } } /* ============================================================ diff --git a/frontend/app/post/[id]/page.tsx b/frontend/app/post/[id]/page.tsx index 4c5e5a8..7c0dab4 100644 --- a/frontend/app/post/[id]/page.tsx +++ b/frontend/app/post/[id]/page.tsx @@ -290,10 +290,7 @@ function RelatedPosts({ {i + 1} - + {p.title} diff --git a/frontend/components/PostToc.tsx b/frontend/components/PostToc.tsx index a1f4fb4..156f9e9 100644 --- a/frontend/components/PostToc.tsx +++ b/frontend/components/PostToc.tsx @@ -73,14 +73,7 @@ export default function PostToc({ items }: { items: TocItem[] }) { data-toc-id={it.id} href={`#${it.id}`} onClick={jump(it.id)} - className="block py-1.5 pr-1 text-[12.5px] leading-snug transition-colors" - style={{ - paddingLeft: it.level === 3 ? 20 : 12, - marginLeft: -1, - borderLeft: `2px solid ${isActive ? "var(--accent)" : "transparent"}`, - color: isActive ? "var(--accent)" : "var(--ink-2)", - fontWeight: isActive ? 600 : 400, - }} + className={`j13-toc-link${it.level === 3 ? " is-h3" : ""}${isActive ? " is-active" : ""}`} > {it.text} diff --git a/frontend/components/home/BoardPanels.tsx b/frontend/components/home/BoardPanels.tsx index 2637e10..f961cfd 100644 --- a/frontend/components/home/BoardPanels.tsx +++ b/frontend/components/home/BoardPanels.tsx @@ -162,13 +162,10 @@ function BoardHot({ posts }: { posts: PostListItem[] }) {
    {posts.map((p, i) => (
  1. - + {i + 1} - + {p.title} diff --git a/frontend/components/home/CommunityPanels.tsx b/frontend/components/home/CommunityPanels.tsx index adc6b4f..09960e5 100644 --- a/frontend/components/home/CommunityPanels.tsx +++ b/frontend/components/home/CommunityPanels.tsx @@ -150,13 +150,10 @@ function HotRanking({ posts }: { posts: PostListItem[] }) {
      {posts.map((p, i) => (
    1. - + {i + 1} - + {p.title}