dsh-mobile-adapt

v0.1.0

Published

a month ago

Mobile adaptation for the DSH web UI: on phones the persistent 56px sidebar rail is hidden, the sidebar becomes a slide-in drawer overlay (floating button + edge swipe + scrim), and the details panel becomes a full-screen slide-over. Desktop is untouched.

0High
0Medium
0Low

zzz99wugc

dsh deepseek-harness cordis mobile responsive drawer web-ui

dsh-mobile-adapt — DSH Web UI 移动端适配

rc.6 的 web 壳子零移动端适配（CSS 里一个宽度断点都没有）。本插件在手机宽度（max-width: 767px）下重排布局，桌面/平板一字节不动。纯 client 插件，host 半区空 apply。

安装

dsh plugin --profile web add dsh-mobile-adapt

零配置，装完重启 dsh web，手机访问（或浏览器缩到 <768px）即生效。桌面端不加载任何覆盖规则。

解决的问题

AppFrame（dsh-client-ui-layout）三列网格里侧栏收起时保底 56px rail（computeColumns: sidebar === 0 ? 56 : ...）——手机上常驻竖条白吃 56px；手动展开还是挤压式（center 被挤到 viewport - 264），不是浮层
better-sidebar 右面板宽度是内联 JS 值，手机上溢出屏幕、关闭按钮被右上按钮堆盖住
设置弹窗桌面是 800px + 188px 文字导航，手机只剩 ~150px 内容

实现要点

手机断点 max-width: 767px，所有规则包在媒体查询里
CSS 覆盖：data-ma-frame（打在 AppFrame 根 div 上）→ 网格列改 0px 1fr 0px、侧栏列改 position: fixed 抽屉（min(84vw, 340px)）、details 列改全屏浮层
结构选择器（> div:first-child 等）而非 build-hash 类名——但 frame 定位仍优先 .pI_x6G_frame（rc.6 hash），fallback 匹配 inline grid style 特征；DSH 升级后 hash 变了要重对（涉及类名：.pI_x6G_frame / .hHd-Xa_regionArea / .hHd-Xa_newSession / .W-zNGW_* / .VOzbGW_* / .ydkMvW_header）
帧跟踪用 MutationObserver 盯 data-sidebar-collapsed 属性（React 拥有），镜像到 <html data-ma-sidebar-open> 供 CSS 用
交互：shell.overlay 槽注册 FAB（汉堡按钮，order: 500，左上角——不能放底部，手机 composer 可超 270px 高，底部锚点会叠输入区）+ 遮罩 scrim + 左边缘右滑打开/左滑关闭；toggle 走 ctx.layout.toggleSidebar()（narrow 模式翻 narrowExpanded）
遮罩在 overlay 层（z-index 20）里、抽屉 fixed z-index 60——层级刚好
抽屉打开时点击会话区/新建按钮自动收起（capture 阶段监听）
附带适配：better-sidebar 右面板钉满宽、底面板限 62dvh、设置弹窗全屏 + 导航收成图标栏、全屏 details 的 × 避开右上按钮堆（header 右 padding 96px）

踩坑记录

最大坑：grid 自动重排。侧栏列改 position: fixed 脱离网格流后，剩余网格项会被 auto-placement 重新就位——centerCol 排进 0px 的第 1 列（实测 w:0），detailsCol 反占 1fr 全宽列，症状是「会话完全看不到、只看到 details 空态（『点击消息流中的工具行查看详情』）且 × 不掉」。必须显式钉列：> div:nth-child(2) { grid-column: 2 }、> div:nth-child(3) { grid-column: 3 }
slot 注册写法照抄 dsh-client-ui-settings-web-search：ctx.slots.inject('shell.overlay', () => ctx.slots.register({ name, id, order, inject }, Component))，inject 回调返回组件 props
部署双份同步：改完 cp 到 /root/.dsh/profiles/web/node_modules/dsh-mobile-adapt/lib/ 再 systemctl restart dsh-web
触摸事件挂 { passive: true }，别挡滚动
无头浏览器验证（puppeteer-core + chrome-headless-shell，临时装 /tmp 用完删）：390×844 视口断言 centerCol 宽 390、抽屉开合 x 坐标、FAB 存在；点遮罩要 tap 抽屉右侧露条（x≈360），点屏幕中心落在抽屉本体上，测的是假阴性
肉眼断言别信「看起来该怎样」——首次版本就是没实测 grid 重排，上线即坏；一律无头浏览器跑几何断言

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

dsh-mobile-adapt — DSH Web UI 移动端适配

安装

解决的问题

实现要点

踩坑记录