polish(ui): 侧栏可点块悬停/聚焦统一为主题色淡底

Co-authored-by: Cursor <cursoragent@cursor.com>

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 {
+  .j13-raillink:hover,
-    background: var(--panel-2);
+  .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 {
+  .j13-chip:hover,
-    border-color: var(--line-2);
+  .j13-chip:focus-visible {
-    color: var(--ink);
+    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);
+  }
 }
 
 /* ============================================================

frontend/app/post/[id]/page.tsx

@@ -290,10 +290,7 @@ function RelatedPosts({
             <Link href={`/post/${p.id}`} className="j13-rank" data-tip={p.title}>
               <span className="j13-rank-no">{i + 1}</span>
               <span className="min-w-0 flex-1">
-                <span
+                <span className="j13-rank-title line-clamp-2">
-                  className="block text-[13px] leading-snug line-clamp-2"
-                  style={{ color: "var(--ink)" }}
-                >
                   {p.title}
                 </span>
                 <span className="mt-1 flex items-center gap-2.5 meta text-[11.5px]">

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"
+                className={`j13-toc-link${it.level === 3 ? " is-h3" : ""}${isActive ? " is-active" : ""}`}
-                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,
-                }}
               >
                 {it.text}
               </a>

frontend/components/home/BoardPanels.tsx

@@ -162,13 +162,10 @@ function BoardHot({ posts }: { posts: PostListItem[] }) {
         <ol className="j13-ranklist">
           {posts.map((p, i) => (
             <li key={p.id}>
-              <Link href={`/post/${p.id}`} className="j13-rank group" data-tip={p.title}>
+              <Link href={`/post/${p.id}`} className="j13-rank" data-tip={p.title}>
                 <span className="j13-rank-no">{i + 1}</span>
                 <span className="min-w-0 flex-1">
-                  <span
+                  <span className="j13-rank-title truncate">
-                    className="block truncate text-[13px] font-medium leading-snug transition-colors group-hover:text-[var(--accent)]"
-                    style={{ color: "var(--ink)" }}
-                  >
                     {p.title}
                   </span>
                   <span className="mt-1 flex items-center gap-2.5 meta text-[11.5px]">

frontend/components/home/CommunityPanels.tsx

@@ -150,13 +150,10 @@ function HotRanking({ posts }: { posts: PostListItem[] }) {
         <ol className="j13-ranklist">
           {posts.map((p, i) => (
             <li key={p.id}>
-              <Link href={`/post/${p.id}`} className="j13-rank group" data-tip={p.title}>
+              <Link href={`/post/${p.id}`} className="j13-rank" data-tip={p.title}>
                 <span className="j13-rank-no">{i + 1}</span>
                 <span className="min-w-0 flex-1">
-                  <span
+                  <span className="j13-rank-title truncate">
-                    className="block truncate text-[13px] font-medium leading-snug transition-colors group-hover:text-[var(--accent)]"
-                    style={{ color: "var(--ink)" }}
-                  >
                     {p.title}
                   </span>
                   <span className="mt-1 flex items-center gap-2.5 meta text-[11.5px]">