# 下载页 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; }`。新增：

```css
@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; }`。新增：

```css
@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 查询**之后**新增大屏档（不覆盖手机规则）：

```css
@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 均正常。