下载页 2K 大屏适配变更说明

原文档在 2026-09-03 下载中心误删事故中丢失，2026-09-19 依据会话记录重建（内容与原文一致）。

范围：只改 CSS（三处 @media (min-width:1600px)），未动 JS 逻辑、路由、安全校验。 档位：min-width:1600px（覆盖 2560×1440 的 2K 屏）；max-width:767px 手机分栏规则未改。

改了哪些 CSS 规则

1. BASE_CSS：列表页单卡（未分栏）

默认仍是 .card { max-width: 860px; }。新增：

@media (min-width:1600px) {
  .card { max-width: 1080px; }
}

列表页实际宽度由 .layout 约束（见下），卡片本身在 .layout .card { max-width:none } 下不另限宽。此规则给整页预览之外、以及未走 .layout 的卡片一个更宽的大屏上限。

2. PREVIEW_CSS：整页预览卡片（?preview=1 的 md / pdf）

默认仍是 .card { max-width: 960px; }。新增：

@media (min-width:1600px) {
  .card { max-width: min(1400px, calc(100vw - 64px)); }
}

md 正文与 PDF iframe 都在 .card 内且 width:100%，卡片变宽后内容跟随变宽。小屏仍是 960px。

3. LIST_CSS：分栏预览 + 列表未分栏宽度

默认保持不变：

• .layout { max-width:860px; }
• .layout.split { max-width:min(1400px, calc(100vw - 32px)); }
• .layout.split .list-pane { flex:0 0 46%; max-width:50%; }
• @media (max-width:767px) 整段原样（分栏改全屏浮层）。

在该 767px 查询之后新增大屏档（不覆盖手机规则）：

@media (min-width:1600px) {
  .layout { max-width:1080px; }
  .layout.split { max-width:min(1920px, calc(100vw - 48px)); }
  .layout.split .list-pane { flex:0 0 30%; max-width:34%; }
}

含义：

场景	<1600px（原行为）	≥1600px（2K）
未点开预览的列表	布局 860px	布局 1080px
分栏总宽	min(1400px, 100vw-32px)	min(1920px, 100vw-48px)
列表 pane	46% / 最大 50%	30% / 最大 34%（约 480–650px）
预览 pane	剩余约一半	剩余约 66–70%（约 1300–1400px @2560）
手机 ≤767px	全屏浮层预览	不变

.layout 已有 transition:max-width .32s ease, gap .32s ease，分栏开合过渡保持平滑。卡片白底、圆角 12px、阴影未改。

大屏档具体数值一览

• 断点：@media (min-width:1600px)
• 分栏容器：max-width: min(1920px, calc(100vw - 48px))
• 列表 pane：flex: 0 0 30%; max-width: 34%
• 整页预览 .card：max-width: min(1400px, calc(100vw - 64px))
• 列表未分栏 .layout / 基础 .card：1080px

如何验证

1. 语法：node --check /home/zyw/Downloads/download-server.js
2. 浏览器（2K 或把窗口拉到 ≥1600px）：点 md/pdf 行看右侧预览明显变宽；缩到普通桌面/手机宽度应与改前一致。
3. 改造时已实测列表页与整页预览页 HTML 均含上述规则字符串，PDF/md 预览、面包屑、返回上级、穿越防护 403 均正常。