feat: 站点媒体库与移动端底部导航，服务测试补强

- 新增媒体库：media_library/media_thumbs 服务（WebP 缩略图）、管理端 media 页面
- 移动端底部导航 MobileTabBar 替换 MobilePostBar
- 旧数据导入增强与测试、路由与登录会话/板块侧边栏测试补强
- site-doc 组件精简（移除 Breadcrumb），文档新增迁移公告说明

frontend/app/globals.css

@@ -9,6 +9,8 @@
   /* 浅色（默认）——画廊白底，卡片纯白浮起 */
   --bg: #fafbfc;
   --panel: #ffffff;
+  /* 前台 main 纸面：纯白，与页头/页脚（--panel）连成一张白纸，画布只在页缘露出 */
+  --main-bg: #ffffff;
   --panel-2: #f2f4f7;
   --tint: #eceff3;
   --ink: #161a22;
@@ -103,9 +105,9 @@
   --focus-glow: color-mix(in srgb, var(--accent) 22%, transparent);
   --focus-glow-danger: color-mix(in srgb, var(--danger) 18%, transparent);
 
-  /* 顶栏 68px 条 + 1px 底边；main 桌面 py-9。侧栏 sticky 必须等于
+  /* 顶栏 56px 条 + 1px 底边；main 桌面 py-9。侧栏 sticky 必须等于
      栏在 scrollY=0 时的视口 top，否则第一下滚动会先空走一截再吸住 */
-  --header-bar: 68px;
+  --header-bar: 56px;
   --header-h: calc(var(--header-bar) + 1px);
   --main-pad-y: 1.25rem;
   --rail-top: calc(var(--header-h) + var(--main-pad-y));
@@ -130,6 +132,8 @@
   /* 近黑冷灰：面板逐层浮起，靛蓝提亮为长春花蓝 */
   --bg: #0c0d10;
   --panel: #181b21;
+  /* 暗色 main 纸面：比画布略亮一档，保持「主内容区略浮起」的层级对应 */
+  --main-bg: #131418;
   --panel-2: #20242c;
   --tint: #282d37;
   --ink: #eef1f6;
@@ -2852,27 +2856,25 @@ body:has([data-compose-viewport]) > footer {
   gap: 0.35rem 0.75rem;
   min-width: 0;
 }
-@media (max-width: 640px) {
+/* <1024px（移动/平板，底部公共菜单显示区间）：三区堆叠、统一左对齐连成整体，
+   避免「左中右各自断开」的残缺观感；底部避让公共菜单 */
+@media (max-width: 1023px) {
+  .site-footer {
+    padding-bottom: calc(4.75rem + env(safe-area-inset-bottom));
+  }
   .site-footer-inner {
     display: flex;
     flex-direction: column;
     align-items: stretch;
+    gap: 0.5rem;
   }
   .site-footer-zone,
   .site-footer-zone-left,
   .site-footer-zone-center,
   .site-footer-zone-right {
     justify-self: unset;
-    width: 100%;
-  }
-  .site-footer-zone-left {
     justify-content: flex-start;
-  }
-  .site-footer-zone-center {
-    justify-content: center;
-  }
-  .site-footer-zone-right {
-    justify-content: flex-end;
+    width: 100%;
   }
   .site-footer-zone:empty {
     display: none;
@@ -3720,6 +3722,16 @@ select:focus-visible {
 .j13-search-field:focus-visible {
   background: var(--panel);
 }
+/* 聊天界面滚动容器：隐藏滚动条（飞书式无滚动条外观，滚动能力保留） */
+.j13-chat-scroll {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.j13-chat-scroll::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
 .j13-chat-composer-mirror {
   position: absolute;
   inset: 0;
@@ -6269,7 +6281,7 @@ a.j13-mention-token:hover {
     padding: 4px 11px;
     background: var(--clay-soft);
     color: var(--clay);
-    border-radius: 999px;
+    border-radius: 4px;
     white-space: nowrap;
   }
   .badge-rec {
@@ -6281,7 +6293,7 @@ a.j13-mention-token:hover {
     padding: 4px 11px;
     background: var(--gold-soft);
     color: var(--gold);
-    border-radius: 999px;
+    border-radius: 4px;
     white-space: nowrap;
   }
   .badge-pending {
@@ -6969,16 +6981,6 @@ a.j13-mention-token:hover {
     font-weight: 600;
   }
 
-  /* 正文内嵌面包屑：无独立底块，靠所在面板保证对比 */
-  .j13-page-crumb {
-    color: var(--ink-3);
-  }
-  .j13-page-crumb.is-ruled {
-    padding-bottom: 14px;
-    margin-bottom: 20px;
-    border-bottom: 1px solid var(--line);
-  }
-
   /* 板块导航行：默认独立卡片；落入 j13-module 后收成内嵌列表 */
   .j13-bcard {
     display: flex;
@@ -7063,12 +7065,6 @@ a.j13-mention-token:hover {
     flex-direction: column;
     gap: 8px;
   }
-  .j13-board-split {
-    height: 1px;
-    background: var(--line);
-    margin: 2px 4px;
-    flex-shrink: 0;
-  }
   @media (prefers-reduced-motion: reduce) {
     .j13-bcard {
       transition: none;
@@ -7172,6 +7168,20 @@ a.j13-mention-token:hover {
     padding: 0 4px;
     font-size: 12.5px;
   }
+  .j13-ads-chip.is-priced {
+    flex-direction: column;
+    gap: 2px;
+    min-height: 0;
+    padding: 6px 4px;
+    line-height: 1.15;
+  }
+  .j13-ads-chip-price {
+    font-size: 11px;
+    font-weight: 500;
+    line-height: 1;
+    opacity: 0.75;
+    white-space: nowrap;
+  }
   .j13-ads-chip.is-on {
     border-color: var(--accent);
     background: var(--accent);
@@ -7480,6 +7490,7 @@ a.j13-mention-token:hover {
   /* 编辑器行（时长档位） */
   .j13-ads-row {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     gap: 8px;
     padding: 8px 10px;
@@ -7851,32 +7862,63 @@ a.j13-mention-token:hover {
     align-items: center;
     gap: 6px;
     flex-shrink: 0;
-    padding: 7px 14px;
-    border: 1px solid var(--line-2);
-    background: var(--panel);
+    padding: 7px 12px;
+    /* 无框 chip：透明边框占位，选中/悬停切底色时尺寸不跳 */
+    border: 1px solid transparent;
+    background: transparent;
     border-radius: 999px;
     font-size: 13px;
     font-weight: 500;
     color: var(--ink-2);
     white-space: nowrap;
-    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
+    transition: background 0.16s ease, color 0.16s ease;
   }
   .j13-chip:hover,
   .j13-chip:focus-visible {
     background: var(--item-hover-bg);
-    border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
     color: var(--accent);
   }
   .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);
+    background: var(--accent-soft);
+    color: var(--accent);
+    font-weight: 600;
   }
   .j13-chip:focus-visible {
     outline-offset: -2px;
   }
+  /* 板块条两端渐隐：提示「可左右滑动」，滚动到头时对应侧隐藏 */
+  .j13-chip-fade {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 2.5rem;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.18s ease;
+  }
+  .j13-chip-fade.is-on {
+    opacity: 1;
+  }
+  .j13-chip-fade-left {
+    left: -1rem;
+    border-radius: 1rem 0 0 1rem;
+    background: linear-gradient(
+      to right,
+      color-mix(in srgb, var(--main-bg) 92%, transparent) 20%,
+      transparent
+    );
+  }
+  .j13-chip-fade-right {
+    right: -1rem;
+    border-radius: 0 1rem 1rem 0;
+    background: linear-gradient(
+      to left,
+      color-mix(in srgb, var(--main-bg) 92%, transparent) 20%,
+      transparent
+    );
+  }
 
   /* overflow:hidden 的列表面板：整行链接外描边会被圆角裁切 */
   .panel.overflow-hidden > a:focus-visible {
@@ -8451,29 +8493,196 @@ html.dark .prose-content pre[data-theme] span {
   color: var(--accent-on);
   outline: none;
 }
-/* 帖子移动端底栏上方抬高，避免遮挡 */
-.j13-back-top.is-lifted {
-  bottom: 5.25rem;
-}
-@media (min-width: 1024px) {
-  .j13-back-top.is-lifted {
-    bottom: 1.25rem;
-  }
-}
 @media (min-width: 640px) {
   .j13-back-top {
     right: 1.35rem;
     bottom: 1.5rem;
   }
-  .j13-back-top.is-lifted {
-    bottom: 5.25rem;
-  }
 }
 @media (min-width: 1024px) {
-  .j13-back-top.is-lifted {
+  .j13-back-top {
     bottom: 1.5rem;
   }
 }
+/* 移动端抬高避开底部公共菜单（lg 以下显示底栏）；置于最后以覆盖上面的 bottom */
+@media (max-width: 1023px) {
+  .j13-back-top {
+    bottom: calc(4.75rem + env(safe-area-inset-bottom));
+  }
+}
+
+/* 首页移动端：板块条白底上贴页头（#main 顶部不留白，板块条与帖子框连成一张白纸） */
+@media (max-width: 1023px) {
+  body:has(.j13-fluid-home) #main {
+    padding-top: 0;
+  }
+}
+
+/* 首页桌面：顶部留白 20px → 8px，中栏信息流上移贴页头；
+   sticky 侧栏的 --rail-top/--rail-max-h 在 #main 上重算（custom property
+   在声明处求值，:root 的 --rail-max-h 不会因子级重定义 --rail-top 而更新） */
+@media (min-width: 1024px) {
+  body:has(.j13-fluid-home) #main {
+    padding-top: 0.5rem;
+    --rail-top: calc(var(--header-h) + 0.5rem);
+    --rail-max-h: calc(100vh - var(--rail-top) - 1rem);
+  }
+}
+
+/* ============================================================
+   前台 main 纸面 + 首页三栏「白纸一体」
+   main 铺 --main-bg（浅色纯白 / 暗色比画布略亮一档），左右外缘
+   1px --line 描边与页头下边线围合成框；站长配置了自定义站点
+   背景图时让位（保持透出画布）。左栏与窄屏下沉面板无框化，
+   内容直接坐在纸面上；右栏保留卡片板块感（j13-module 原样）。
+   ============================================================ */
+html:not(.j13-has-site-bg) #main {
+  background: var(--main-bg);
+  border-left: 1px solid var(--line);
+  border-right: 1px solid var(--line);
+}
+
+/* 左栏模块去框：j13-module 退化为无底小节，内容直接坐在纸面上 */
+.j13-rail-left .j13-module {
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  padding: 0;
+}
+/* 左栏小节分隔：任意块相邻时画发丝线（含站长自定义工具块） */
+.j13-rail-left > * + *,
+.j13-fluid-home .j13-flat-rail > * + * {
+  margin-top: 1.25rem;
+  padding-top: 1.25rem;
+  border-top: 1px solid var(--line);
+}
+/* 左栏小节标题：纸面小节标（弱化为 meta 级），标题图标随之缩小 */
+.j13-rail-left .j13-module-title {
+  font-size: 12px;
+  letter-spacing: 0.05em;
+  color: var(--ink-3);
+}
+.j13-rail-left .j13-module-title > svg {
+  width: 14px;
+  height: 14px;
+}
+/* 栏内图标无底色：只留彩色字形本身（收成图标实际大小，避免隐形占位拉大间距） */
+.j13-rail-left .j13-bcard-ico,
+.j13-fluid-home .j13-flat-rail .j13-bcard-ico {
+  background: transparent !important; /* 覆盖「全部讨论/管理面板」图标的内联底色 */
+  border-radius: 0;
+  width: 20px;
+  height: 20px;
+  font-size: 13px;
+}
+/* 首页三栏竖向分隔线：与页头下边线同色同宽，居中于栏间距（gap-6 / xl:gap-7），
+   画在中栏伪元素上与左右栏共用一条；类名跟随左右栏显隐，避免悬空线 */
+.j13-home-sep-l,
+.j13-home-sep-r {
+  position: relative;
+}
+@media (min-width: 1024px) {
+  .j13-home-sep-l::before,
+  .j13-home-sep-r::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    background: var(--line);
+  }
+  .j13-home-sep-l::before {
+    left: calc(-0.75rem - 0.5px);
+  }
+  .j13-home-sep-r::after {
+    right: calc(-0.75rem - 0.5px);
+  }
+}
+@media (min-width: 1280px) {
+  .j13-home-sep-l::before {
+    left: calc(-0.875rem - 0.5px);
+  }
+  .j13-home-sep-r::after {
+    right: calc(-0.875rem - 0.5px);
+  }
+}
+/* 左栏分组标题：小号灰字，纸面风格的段落断点 */
+.j13-rail-left .j13-rail-group,
+.j13-fluid-home .j13-flat-rail .j13-rail-group {
+  padding: 10px 8px 4px;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--ink-3);
+  letter-spacing: 0.02em;
+}
+.j13-rail-left .j13-rail-group:first-child,
+.j13-fluid-home .j13-flat-rail .j13-rail-group:first-child {
+  padding-top: 2px;
+}
+/* 手机端下沉面板：推广占位放开到整栏宽（248 定宽是桌面右栏尺寸，
+   窄屏居中两侧大片空白显得稀疏）；/ads/buy 购买页预览保持真实尺寸不受影响 */
+@media (max-width: 1023px) {
+  .j13-fluid-home .j13-flat-rail .j13-ad-promo {
+    width: 100%;
+  }
+}
+/* 左栏板块导航：当前项 accent 竖条 + 浅色底 */
+.j13-rail-left .j13-module .j13-bcard {
+  position: relative;
+}
+.j13-rail-left .j13-module .j13-bcard[aria-current="page"],
+.j13-rail-left .j13-module .j13-bcard[aria-current="page"]:hover,
+.j13-rail-left .j13-module .j13-bcard[aria-current="page"]:focus-visible {
+  background: var(--nav-active-bg);
+  border-color: transparent;
+}
+.j13-rail-left .j13-module .j13-bcard[aria-current="page"]::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 55%;
+  border-radius: 2px;
+  background: var(--accent);
+}
+
+/* 中栏排序 Tab：描边胶囊改下划线式，active 下划线压在首行发丝线上 */
+.j13-feed-head [role="tablist"] {
+  align-items: stretch;
+}
+.j13-feed-head .j13-tab {
+  position: relative;
+  border: 0;
+  background: transparent;
+  border-radius: 0;
+  /* 上下对称，Tab 文字与右侧 meta（self-center）垂直居中对齐；下划线仍贴行底 */
+  padding: 7px 2px;
+}
+.j13-feed-head .j13-tab::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 2px;
+  border-radius: 1px 1px 0 0;
+  background: transparent;
+}
+.j13-feed-head .j13-tab:hover,
+.j13-feed-head .j13-tab:focus-visible {
+  background: transparent;
+  border: 0;
+}
+.j13-feed-head .j13-tab[aria-selected="true"] {
+  background: transparent;
+  border: 0;
+}
+.j13-feed-head .j13-tab[aria-selected="true"]::after {
+  background: var(--accent);
+}
 
 /* 评论楼层树
    主评论全宽；子回复默认折叠。视觉缩进最多两级，更深靠「回复谁」说明。 */