Skip to content

v5.7.1 — 手机端右侧栏修复

Latest
Latest

Choose a tag to compare

View all tags
@godchen520 godchen520 released this 11 Oct 01:15
v5.7.1
d2a669b

v5.7.1 — 手机端右侧栏修复

📱 修好了什么

1️⃣ 右侧栏在手机上真正全屏了

此前在手机上打开右侧栏，看着像全屏，其实没有真的铺满。
现在改用 position: fixed + inset: 0 实现，真机验证过。

2️⃣ 修掉「底下的内容透上来」

右侧栏铺满后，底下的对话内容会隐约透上来。现在补了不透明底 + z-index。

3️⃣ 移除了 html{zoom:80%} 注入

插件之前在窄屏注入了一条 zoom: 80% 想让界面"看起来合适" ——
但它会把 vw 打坏，导致依赖视口宽度的布局全部算错。已彻底移除。

想要更舒服的字号，请用官方的 「设置 → 通用设置 → 字号大小」 ✅

4️⃣ /链接 的提示文案改了

机器人通道回复的 /链接 提示，以前让用户"调整页面缩放"；
现在改为指引去官方字号设置（上面那条 zoom 已经不存在了，旧提示指向的方向已作废）。

🔧 其他

  • 撤掉右侧栏底色（它就是「窄屏变纯色」的原因）
  • 版本号守卫新增「只增不减」检查（防止版本号倒退导致用户收不到更新）
  • 新增 docs/RELEASING.md 发布流程检查清单

✅ 测试

npm test 40 项全过。

安装 / 升级

cd $DSH_HOME/profiles/web
pnpm add github:godchen520/dsh-web-remote
# 重启 dsh web
📋 完整技术细节（点开看 CHANGELOG 原文）

Changed — 机器人通道的 /链接 提示：不再让用户"调整页面缩放"，改为指引官方字号设置

用户："第三方软件输入/链接的回复也应该改一下了，把调整页面缩放改成在通用设置里改字号。"

插件在窄屏注入的 html{zoom:80%} 已删除（见下方 Removed / Reverted 两节），
所以旧提示 "手机浏览器可根据需要调整页面缩放…" 已经指向一个我们不再做的方向 ——
而且那条 zoom 本身会把 vw 打坏。改为：

[想要更舒服的字号，可在「设置 → 通用设置」里调整「字号大小」]

文案里的位置是核实过的，不是猜的：

  • 官方标签 fontSize.title = "字号大小"（在 dsh-client-ui-theme）
  • 该包源码注释：Font-size preference row registered into the General section item slot
    → 也就是通用设置分区 ✓

守卫 #33 相应更新，并加了一条新断言：lib/index.mjs 里再出现「页面缩放」直接判失败
（防止有人把旧提示抄回来）。文案仍只允许出现在 LINK_MOBILE_HINT 定义那一处，
5 个通道（微信 / 飞书 / Telegram / QQ / 钉钉）继续共用同一条。

Reverted — 撤掉 dev.4 给右侧栏加的底色（它就是"窄屏变纯色"的原因）

用户反馈："深色直接什么都看不到了，但是是有文字的，鼠标移过去有反应。"
随后补了关键一句："不只是深色浅色也一样，当宽度缩小到一定程度就变纯色了。"

dev.4 的 background:var(--dsw-alias-bg-base) !important 是画蛇添足，而且后果很直观：

  • 那条规则作用在 position:fixed; inset:0; z-index:25 的元素上
  • 窄屏（<768）时官方会把右侧栏判成 fullscreen，面板就在那儿
  • 于是它等于往整个视口铺了一块纯色矩形 → 整页被盖住，只剩一个色块
    （所以深浅色都一样、文字其实还在、鼠标划过仍��触发 —— 只是全在色块下面）

而用户的观察本来就否掉了"需要底色"这个前提：他说"正文没有透过来" ——
正文没透、只有 composer 里的附件卡片透上来，这说明面板自己是不透明的，
透上来的是层级问题（composer 的 z-index:8~10 压在面板之上）。
给 z-index:25 就够了，底色完全不需要。

所以 dev.5：删掉 background，只保留
position:fixed; inset:0; width:auto; max-width:none; z-index:25。

守卫 #39 ⑩ 也反过来了：从"必须有底色"改成"出现底色直接判失败"，
并把 fixed + inset:0 + 底色 = 整页一块纯色 写进错误信息。

教训：position:fixed; inset:0 的元素加底色就等于画满整个视口。
在这种元素上补背景前，先想清楚它是不是本来就是全屏覆盖的。

Fixed — 右侧栏铺满后，底下的内容"透上来"

用户截图反馈：右侧栏全屏了（"开始" + 卡片确实占满），但主对话 composer 里的两个附件卡片
透到了右侧栏上 —— "红框的地方透过来了"。

根因：官方面板自己没有不透明背景。.P3OORG_panel 只写了
position/display/flex-direction，背景是由它里面的 dock pane 各自画的。
以前面板只有部分宽度（���被 zoom 缩到 80%），透出来的区域小、没被注意到；
现在它铺满整屏，它自己没画到的地方（底部 composer 一带）就把底下的主对话露出来了。

修法：给铺满态补一层不透明底 + 抬一层 z-index ——

body.webrm-mobile [data-sidebar-right-panel="fullscreen"]{
  position:fixed !important;inset:0 !important;width:auto !important;max-width:none !important;
  background:var(--dsw-alias-bg-base) !important;   /* 官方自己的表面 token，深色主题自动跟随 */
  z-index:25 !important                              /* 高于 overlayLayer(20)，低于浮动把手(9000)/设置弹窗(1000) */
}

守卫 #39 ⑩ 相应加了两条断言：铺满态必须带不透明底与 z-index，
免得以后有人"简化"掉背景又把透底引回来。

注：这不算我引入的 bug —— 官方自己的 fullscreen 分支同样只给 width:100vw、不带背景。
只是以前它压根没铺满过（被 zoom 坑），所以没人看见。

Removed — 删掉 @media(max-width:768px){html{zoom:80%}}（"移动端视觉缩小"）

用户决定："去掉 80%，现在没有侧边栏，而且设置里有官方的字体大小设置，不需要 80% 了。"

删它的技术理由比视觉理由更硬 —— 它对 vw 的破坏已经在上一��被真机坐实：

真机取证：innerWidth=715、官方已判 fullscreen、面板实际只有 572 = 715 × 0.8、
左边缘 143 = 715 − 572。即 100vw 解析成未缩放的 715，元素再按 80% 渲染。

而官方在窄屏恰恰用 width:100vw 给右侧栏全屏 —— 所以这条 zoom 让右侧栏永远铺不满。
更糟的是 zoom 只在 <=768px 生效，只在手机上出问题，>=768 的窗口看着一切正常，
排查成本极高（我为它白修了一版）。

结论：根节点 zoom 是个会破坏 vw、fixed、媒体查询的坑，不要用。
要放大请走官方设置里的字体大小。守卫 #39 新增 ⑪：panel.mjs 里再出现根节点 zoom 直接判失败。

已删除 mobileTag 那段；其余适配层规则不依赖 zoom（都是 px / inset / grid-column），
所以这次删除不影响去竖栏、把手、设置弹窗重排、右侧栏铺满。

右侧栏那条 position:fixed + inset:0 保留：zoom 删除后官方自己的 100vw 理应也能铺满，
但这条不依赖 vw 的实现是一层保险（守卫里也禁止它用 vw）。

Fixed — 手机上打开右侧栏没有真的全屏（顺便做了现场取证）

用户反馈："手机打开右侧栏明明是全屏模式，但右侧栏没有真的全屏��"

根因在官方（dsh-client-ui-sidebar-right）：

const autoFullscreen = viewportWidth < 768;   // viewportWidth = window.innerWidth
const fullscreen = autoFullscreen || surface?.layout.mode === "fullscreen";
const track = shown && !autoFullscreen;       // 不全屏时它才要一条轨道
style: { width: fullscreen ? "100vw" : width }

也就是说只有 window.innerWidth < 768 时它才给自己 100vw。一旦 ≥768，右侧栏走 "push"
模式：按 width 给一个部分宽度、以 position:absolute; right:0 挂在右侧栏列的右边缘上 ——
而那条列在手机上恒为 0 宽轨道（computeColumns：available = viewport - s - 400 < 300 → r = 0），
于是它变成"盖住一半对话"的样子。

修法：适配层按官方自己的属性强制全屏，但不能用 vw ——

body.webrm-mobile [data-sidebar-right-panel="fullscreen"]{
  position:fixed !important;inset:0 !important;width:auto !important;max-width:none !important
}

⚠ 差点改错：html{zoom:80%} 会把 vw 打坏

第一版修法是 width:100vw !important，被真机取证直接否掉。

探针在真机上抓到两条（都是桌面 Edge 窄窗）：

innerWidth DSH 模式 面板实际宽 面板左边缘 内联网格
819 push 819 0 56px minmax(400px,1fr) minmax(0px,388px)
715 fullscreen 572 143 56px minmax(0px,1fr) minmax(0px,0px)

看第二条：572 = 715 × 0.8，143 = 715 − 572 —— 0.8 就是我们自己注入的
html{zoom:80%}。

即：zoom 生效时，100vw 解析成未缩放的视口宽（715），而元素按 80% 渲染 → 只剩 572。
官方让右侧栏全屏用的恰恰是 width:100vw，所以是我们这条 zoom 规则把它的全屏打坏的
（我的 width:100vw !important 自然也一起被坑）。

而 zoom 只在 @media(max-width:768px) 生效 —— 所以 ≥768 的窗口看着一切正常（819 那条就是），
只有手机上出问题。

改用 position:fixed + inset:0：走 ICB（zoom 感知），完全不碰 vw。

推论：任何在 <=768px 下依赖 vw 的官方布局都会少 20%。这条 zoom 规则是历史上
"手机上某些东西莫名偏窄"的一个系统性嫌疑，后续再遇到类似症状先怀疑它。

同时补上右侧栏现场取证

这次的教训是判断依据在"打开右侧栏那一刻"才产生（innerWidth 与 768 的关系），
而原来的上报只在页面加载时发两条 —— 永远抓不到那个现场，于是"为什么没全屏"又只能猜。

新增 rightbarProbe() + watchRightbar()：盯着 data-sidebar-right-panel 一出现就立刻
同步一次，并把 innerWidth / clientWidth / 面板模式（fullscreen 还是 push）/
面板实际宽度与位置 / 轨道的 grid-template-columns 一并回报（最多 3 次）。

顺带推翻了一个我自己的错误假设：我原本怀疑 html{zoom:80%} 会把 window.innerWidth
放大 1.25 倍从而越过 768 —— 真机取证显示 w=616 dw=616（相等），现代 Chrome 的 zoom
不会影响 window.innerWidth。差点按错的方向改。

Assets 2
Loading