dsh_shenxian/dsh-server-docs/04-调整方案/61-插件管理页官方插件列表加高与底部留白.md

# 61 · 插件管理页：官方插件列表加高 + 页面底部留白 200px

- 日期：2026-09-12
- 状态：✅ **已实施并验证**（服务器已生效；本地待提交）
- 触发：用户「插件管理的**官方插件管理** 列表页**高度增加** 和**页面底部间隔 200PX** 即可」
- 关联：档案 31（插件管理页双 Tab）、16（插件三层归属模型）、06（工作台UI规范 —— 本次为**用户指定的间距例外**）

---

## 一、先定位：改的不是 `plugins.html`

`web/plugins.html` **只是 11 行的跳转壳**（`<meta http-equiv="refresh">` → `/portal.html#/plugins`）；**真正的页面是 `portal.html`**（655 行 SPA），插件管理页在其 **L383-546**，官方插件列表在第 403 行附近。

## 二、改动（2 处；`git diff --numstat` = **5 增 2 删**）

| 位置 | 改动 |
|---|---|
| `portal.html` L103-106（CSS 段）| 新增 `#view.page-plugins { padding-bottom: 200px }` —— 页面底部留白 200px。**代码注释里注明**：`06-工作台UI规范` 的常规区块间距是 14~24px，**200px 是用户明确指定的例外**（防止日后被"按规范修正"回去）|
| `portal.html` L406（行内 style）| 官方插件列表容器 `max-height: 460px` → **`clamp(560px, calc(100vh - 260px), 900px)`** —— 下限 **560px**（比原 460 高）、随视口自适应、上限 900px 防超长屏过高。1080p 下实测约 **690px** |

**范围克制**：只改 **`official` tab**（用户明确说"官方插件管理"）；`manual`（手动添加/管理）tab 的列表**本来就没有 `max-height`**（不限高），**未动**；「手动添加」列表是否统一可另议（已告知用户）。

## 三、验证记录

| 项 | 结果 |
|---|---|
| 改动精确性 | `git diff --numstat` = **5 增 2 删**（**没有整文件 diff**）|
| 改前先比双端 | 本机 655 行**全 CRLF**、服务器 **LF**，**内容完全一致**（字节差 655 恰等于 655 个 `\r`）→ 用 `diff <(tr -d '\r')` 证实无内容差异后才动手，**未拿旧版覆盖服务器** |
| 部署 | 备份 → `scp` → **服务器 `sed -i 's/\r$//'` 转回 LF**（保持与仓库 blob 一致）→ 服务器 `git status` 只多出 `M web/portal.html` 一行 |
| 生效 | `portal.html` 是**静态文件** → **改完立即生效，无需重启服务**（与 R8 无关）；`curl https://alotbuy.com/portal.html \| grep -c` 命中改动 ✓ |

**备份**：`/opt/dsh/backups/portal.html.bak-20260912-listheight`

## 四、回滚

```bash
cp /opt/dsh/backups/portal.html.bak-20260912-listheight /opt/dshs/web/portal.html
```

静态文件，无需重启；**浏览器需硬刷新**（静态资源有缓存）。

## 五、后续若要调高度

改 `portal.html` 里那一处 `max-height: calc(100vh - 420px)` 即可 —— 数值是**「预留的顶部+底部空间」**，调大 = 列表变矮、调小 = 列表变高。

---

## 六、修正（同日 09:09，用户反馈「列表都超出屏幕了」）

**现象**：官方插件列表把整个页面撑出视口，要滚动才能看全。

**根因（两处叠加，且第一版把"200px"理解错了）**：
- 列表**上方**内容约 **362px**：导航 56 + view padding 24 + pageHead 70 + tabs 50 + card padding 16 + 搜索行 46 + hint 70 + info 30
- 第一版列表高度 `clamp(560px, calc(100vh - 260px), 900px)` → 900px 视口下取 **640px**
- **再加上** `padding-bottom: 200px`
- ⇒ 页面总高 = 362 + 640 + 50（按钮行）+ 200 = **1252px**，而视口只有 900px → **超出 350px**

**修正（2 处）**：

| 位置 | 改为 |
|---|---|
| 列表容器 | **`max-height: calc(100vh - 420px)`** —— **纯自适应**：小屏自动变矮（不超屏）、大屏自然更高（视口 900→480px / 1200→780px）。**去掉下限 560px**（它正是小屏超屏的直接原因）|
| 页面底部 | **移除** `padding-bottom: 200px` —— 它在**文档内**占高，与"不超屏"数学上互斥 |

**验证**：`padding-bottom: 200px` 零残留；门户 `curl` 已命中新值 ✓；`git diff --numstat` = **5 增 4 删**（仍无整文件 diff）。

**⚠️ 关于原始需求里的「200px」——第一版理解错了**
第一版把"和页面底部间隔 200px"理解成「列表下方到**文档底部**留 200px」（所以用 `padding-bottom`）。但那必然导致整页可滚动 ⇒ **与"不超屏"冲突**。

---

## 七、第二次修正（同日 09:12，用户「还是有页面滚动条，应该只有列表滚动条才对」）

**目标已明确**：**整页不滚动、只有列表内部滚动**（`.table-wrap` 自带 `overflow: auto`，容器层面本就支持）。

**第一版漏算了「列表下方」的高度** —— 只调了列表高度，没算下方元素。按实测重算：

| 段 | 内容 | 约 |
|---|---|---|
| **上方** | 导航 56 + `#view` padding-top 24 + pageHead 70 + tabs 50 + card padding 18 + 搜索行 50 + hint（2 段）76 + wlInfo 28 | **372 px** |
| **列表** | 第一版 `100vh - 420px` → 视口 900 时 **480 px** | 480 px |
| **下方** | 按钮行 50 + `#wlResult` + card padding-bottom 18 + **`#view` padding-bottom 48** | **116 px** |

⇒ 总高 **968 px** > 视口 900 px ⇒ **页面滚动 68 px** —— 正是用户看到的"页面滚动条"。

**最终值：`max-height: calc(100vh - 520px)`**
（372 + 116 = 488，再留 **32 px** 应对 hint 文字换行等浮动）

| 视口高 | 列表高 |
|---|---|
| 900（1080p 常见）| 380 px |
| 1200 | 680 px |
| 768（小笔记本）| 248 px —— 矮，但**不超屏** |

**取舍说明**：本页取向 = 「**整页不滚动，只有列表内部滚动**」。代价是列表比最初的 460px 略矮。若改成"列表尽量高、可接受页面滚动"，把 520 调小即可（`420` ≈ 页面可滚 68 px）。

**验证**：门户 `curl` 已命中 `calc(100vh - 520px)` ✓