跳到正文

lehhair/dsh-mobile

143最近提交 2026年8月15日

dsh-mobile DSH 插件

该插件通过 CSS 和轻量 DOM 控制器将 DSH WebUI 桌面三栏布局重排为两页横向 scroll-snap 翻页器，提供侧边栏半开页和全宽聊天页。无需修改 DSH 核心，官方 rc.2 发行版即可直接使用。

browser-webui-productivity

如何安装 dsh-mobile DSH 插件

dsh plugin --profile web add "https://github.com/lehhair/dsh-mobile/releases/latest/download/dsh-external-dsh-mobile.tgz

复制不会执行命令。安装 dsh-mobile DSH 插件前请核对仓库和版本。

dsh-mobile DSH 插件数据来源

dsh-mobile DSH 插件快照日期：2026年8月16日

discovered

dsh-mobile DSH 插件能做什么

  • PiUI 翻页器：≤768px 时重排为两页 snap 轨道，侧边栏半开，聊天页全宽，侧边栏页时聊天卡片右侧露出。
  • 侧边栏始终完整渲染：DOM 内容保留，滚动时不惰性渲染。
  • 同色区分：侧边栏与信息流同色背景，仅聊天卡片有圆角和阴影。
  • 3D 翻页效果：滚动时聊天卡片旋转/缩放，尊重 prefers-reduced-motion。
  • 吸附修正：滑动停止后自动吸附最近整页，永不卡半页。
  • 安全区和键盘处理：viewport-fit=cover、safe-area env()、visualViewport 驱动的 --dshm-keyboard-inset、100dvh 动态视口。
  • 原生视觉：桌面宽度下规则全部在 <html data-dsh-mobile> 作用域内，卸载即恢复原样。

dsh-mobile DSH 插件适合哪些场景

  • 在手机或窄屏设备上使用 DSH WebUI 聊天。
  • 在窄屏下快速切换侧边栏（会话列表、设置）与聊天全屏。
  • 在移动端保持 PiUI 一致的视觉体验。
  • 在移动浏览器或 PWA 中正确适配键盘弹出和刘海屏安全区域。

dsh-mobile DSH 插件适合谁

  • 通过手机访问 DSH WebUI 的用户。
  • 希望无需修改核心即可优化移动端体验的 DSH 管理员或开发者。

dsh-mobile DSH 插件的限制

  • 窄屏下详情列仍遵循框架行为自动关闭，因此翻页器只有两页。
  • 键盘 inset 依赖 visualViewport，不支持时退化为 0（仅影响老旧浏览器）。
  • 插件针对 DSH rc.2+ 设计，早期版本兼容性未验证。

dsh-mobile DSH 插件的仓库 README 摘录

以下文字摘自 dsh-mobile DSH 插件的上游仓库 lehhair/dsh-mobile 的 README，版权归原作者，仅作引用。

DSH WebUI 移动端适配插件（**PiUI 翻页器结构**）：窄屏下框架本身就是横向 scroll-snap 翻页器，两页卡片——**半开侧边栏页**（`min(360px, 50vw)`）+ **全宽聊天页**。滑到侧边栏页后聊天卡片仍在右边露出一半（PiUI 同款 overlayWidth 效果），聊天渲染零改动。纯客户端适配，零核心改动——官方 rc.2 发行版直接可用。 ## 功能 - **PiUI 翻页器**：≤768px 时三栏框架重排为两页横向 snap 轨道——侧边栏页半开宽（约半个视口），聊天页全宽；**滑到侧边栏页时聊天卡片在右半露出（半边信息流）**，PiUI 同款结构 - **侧边栏始终完整渲染**：窄屏下控制器自动展开 AppFrame 折叠的侧边栏并保持（滑动翻页**不同步状态**）——侧边栏列的内容在聊天全屏时也完整留在 DOM 里，滑回来立即可见，**绝不"滑动才跟着渲染"** - **同色区分**：侧边栏与信息流同色（平页，无圆角阴影）；**只有信息流是卡片**（16px 圆角 + 阴影 + 细边框），PiUI 同款视觉 - **PiUI 3D 翻页**：滚动时聊天卡片 `rotateY/scale` 跟随（`transform-origin` 偏向滑动侧），`prefers-reduced-motion` 关闭 - **吸附修正**：滑动停止后自动吸附最近整页（滑不到位自动回弹/修正），永不卡半页 - **安全区与键盘**：`viewport-fit=cover` + safe-area env() 变量 + visualViewport 驱动的 `--dshm-keyboard-inset`；`100dvh` 动态视口 - **原生视觉**：桌面宽度下逐字节等同原生（全部规则以 `<html data-dsh-mobile>` 为作用域，卸载即恢复原样） ## 效果 | 桌面（原生三栏） | 手机（侧边栏半开，聊天露半边） | 手机（聊天全屏） | |---|---|---| | ![桌面原生](screenshots/desktop-native.png) | ![侧边栏半开](screenshots/mobile-sidebar-page.png) | ![聊天全屏](screenshots/mobile-chat-page.png) | ## 安装 ### 推荐：GitHub Release 构建产物（开箱即用） `releases/latest` 永远指向最新版本，链接不用随版本改动： ```sh dsh plugin --profile web add "https://github.com/lehhair/dsh-mobile/releases/latest/download/dsh-e

阅读完整 README仓库许可: BSD-3-Clause

dsh-mobile DSH 插件常见问题

如何安装 dsh-mobile？

执行命令：`dsh plugin --profile web add "https://github.com/lehhair/dsh-mobile/releases/latest/download/dsh-external-dsh-mobile.tgz"`。然后重启 `dsh web`，用手机或 DevTools 设备模拟访问即可。

dsh-mobile 在桌面上会生效吗？

只在窄屏（≤768px）下生效。桌面宽度 ≥769px 时布局恢复原生三栏。所有样式都限定在 `<html data-dsh-mobile>` 作用域内，卸载插件后自动恢复。

如何升级到最新版本？

由于 pnpm 按 URL 缓存 tarball，同一 `latest` 链接可能指向旧版本。建议先删除插件：`dsh plugin --profile web remove @dsh-external/dsh-mobile`，然后重新安装。必要时可执行 `pnpm store prune` 清除缓存。

dsh-mobile 和 PiUI 有什么区别？

dsh-mobile 是为 DSH WebUI 量身定制的插件，实现了与 PiUI 完全相同的翻页器结构（两页 snap、侧边栏半开、聊天卡片部分露出）。它不修改 DSH 核心，而是通过 CSS 和轻量控制器直接作用于现有 AppFrame。

dsh-mobile 支持键盘弹出时自动避让吗？

支持。它利用 `visualViewport` 检测键盘高度，并设置 CSS 变量 `--dshm-keyboard-inset` 调整布局。在不支持 `visualViewport` 的浏览器上退化为 0。同时使用 `100dvh` 动态视口单位和 safe-area env() 变量适配刘海屏。