Files
dsh_shenxian/dsh-server-docs/04-调整方案/61-插件管理页官方插件列表加高与底部留白.md
T
admin 5ad755116e chore(docs): 文档库并入代码仓(R4 选 a)+ 索引/台账跟进
1) dsh-server-docs/ 从工作区(原 E:\...\aliyun-dsh-server\dsh-server-docs)**整体并入本仓**,
   保留目录名 ⇒ 仓库内 dsh-server-docs/... 的相对引用天然继续有效;旧目录(含其 .git)已归档到
   工作区 _中间产物_待清理/,未随本提交带入。
2) .gitattributes:新增 `dsh-server-docs/** -text` —— 原文档库是 `* -text` + autocrlf=false,
   必须保持纯 LF,否则会被本仓的 CRLF 规则翻掉。
3) 活引用里的绝对路径已全部改到新位置(docs 的 INDEX / README / scripts / skills + 用户级 skills
   + ~/.workbuddy/settings.json 的 hooks);历史档案(04-调整方案/、archive/)按「只增不改」未动。
   ⚠️ hooks 路径改动需「完全重启会话」才生效(配置是会话启动快照)。
4) 交接单/T08:新增 §16「生产整体切换执行记录」(形态 / 落地动作 / **4 个只有真上线才暴露的真 bug** /
   验收证据 / 回滚命令 / 残留项);台账 T08 行 → 已完成并归档;03-路线图 §二 登记 T08 收尾项。
5) 统一称谓:**「本机」只指跑 WorkBuddy 的开发机**,47 / 106 一律写「远程服务器」。
2026-09-15 18:47:13 +08:00

5.7 KiB
Raw Blame History

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

四、回滚

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) ✓