一句话定位

为 DSH WebUI 提供手机端适配：把原本的三栏界面重排为左右两页的翻页器（侧边栏页 + 聊天页），手指一滑即可在侧边栏和对话之间切换，聊天卡片保持原样不被改写。

核心能力

• 在窄屏（≤768px）下把 DSH 的三栏框架变成横向 snap 翻页器：左页是半开的侧边栏，右页是全宽聊天区
• 让侧边栏始终完整渲染在 DOM 里——滑到聊天页时它继续留在后台，不再因切换而重新渲染
• 滚动时给聊天卡片加上 PiUI 风格的 3D 翻转效果（rotateY + scale），松手后自动吸附到最近整页
• 自动避开 iPhone 底部安全区、刘海/灵动岛、虚拟键盘，必要时调整输入框的位置
• 超长模型名超出输入框宽度时显示带间距的单向跑马灯，prefers-reduced-motion 下回退省略号
• 卸载插件后样式与控制器彻底清理，桌面端界面逐字节等同官方原生

技术实现

• 语言: TypeScript
• 关键依赖: cordis (^4.0.0-rc.7)、react (^18.2.0)、lightningcss、tsdown；运行时依赖宿主提供的 @deepseek-ai/dsh-client-runtime 与 @deepseek-ai/dsh-client-ui-layout
• 架构模式: Cordis 双入口插件——宿主侧 src/index.ts 为空（仅占位），客户端侧 apply(ctx) 注入一个 DOM 控制器 + 全局 CSS 表，全局 CSS 通过 tsdown 的 lightningcss 插件编译后内联为 <style data-plugin> 标签注入，作用域为 <html data-dsh-mobile>；钩子机制上订阅 ctx.sessions.list，当前会话切换时自动回到聊天页
• 入口文件: src/index.ts（宿主）+ src/client/index.ts（浏览器端）

适用场景

当你想在手机、平板或横屏折叠屏上使用 DSH Web UI 时安装。原生三栏在窄屏下会被压缩成几乎不可用的细列，而该插件把它们重排为大屏手机 App 常见的两页卡片结构，聊天卡片保持原貌不被改写、侧边栏可随时滑出；同时也让横屏手机、大折叠屏与小平板的内容区不再浪费宽度。

前置依赖与兼容性

安装方式

dsh plugin --profile web add github:lehhair/dsh-mobile

配置项

本插件无需额外配置。安装到 Web profile 后即在 ≤768px 视口下自动启用，无需用户调整任何选项。

常见问题

Q: 这个插件会改动 DSH 的核心代码吗？

A: 不会。插件只用客户端 CSS 与一个 DOM 控制器实现效果，样式以 <style data-plugin> 标签形式注入并被卸载时移除；控制器也仅做受控的滚动监听与属性变更，不修改任何宿主代码。

Q: 安装后需要在网页上做什么配置吗？

A: 不需要。本插件没有配置项，安装即生效；视口宽度与虚拟键盘弹出由内置控制器自动监听与处理。

Q: 在桌面浏览器上访问会改变原有布局吗？

A: 不会。翻页器仅在 max-width: 768px 时启用，桌面三栏布局保持原样。

Q: 用 iPhone Safari 还是微信内置浏览器打开都能用吗？

A: 可以。只要浏览器支持 visualViewport（现代浏览器与 PWA 均支持），虚拟键盘弹起时输入栏会自动上移；不支持时键盘内边距退化为 0，仍可使用但键盘可能遮挡输入区。

Q: 横屏手机、大折叠屏、小平板会怎样？

A: 视口宽度落在 560-768px 时启用宽屏模式，侧边栏页宽度从 360px 随视口增长到约半个屏幕（上限 420px），内容拉伸铺满整页，避免大片留白。

Q: 卸载插件后界面会立刻恢复原样吗？

A: 是的。样式标签在卸载时被移除；控制器在 dispose() 时还原 viewport meta、<html> 上的属性与 CSS 变量，桌面端逐字节等同官方原生。

上手难度

入门 — 安装到 Web profile 后无需任何配置，窄屏访问即自动生效；不需要修改设置或编写代码。

已知问题与限制

• 在窄屏下，详情列会遵循宿主框架的让步链自动关闭（核心行为，插件不越权覆盖），因此翻页器只支持两页（侧边栏 + 聊天），不存在详情页
• 虚拟键盘内边距依赖浏览器 visualViewport；不支持时退化为 0，键盘可能遮挡输入区（README 已说明）
• jsdom 测试环境无 ResizeObserver，跑测时模型名跑马灯仅靠 MutationObserver 触发（源码 src/client/controller.ts:198 显式分支处理）
• 升级时 pnpm 可能按 releases/latest URL 缓存旧 tarball，需先 dsh plugin --profile web remove 再重装（README 升级提示）

dsh-mobile

DSH WebUI 移动端适配插件（PiUI 翻页器结构）：窄屏下框架本身就是横向 scroll-snap 翻页器，两页卡片——半开侧边栏页（手机 clamp(280px, 70vw, 360px)；宽屏 560-768px 随视口涨到 clamp(360px, 50vw, 420px)，内容拉伸铺满整页）+ 全宽聊天页。滑到侧边栏页后聊天卡片仍在右边露出一半（PiUI 同款 overlayWidth 效果），聊天渲染零改动。纯客户端适配，零核心改动——官方 rc.2 发行版直接可用。

功能

• PiUI 翻页器：≤768px 时三栏框架重排为两页横向 snap 轨道——侧边栏页半开宽（约半个视口），聊天页全宽；滑到侧边栏页时聊天卡片在右半露出（半边信息流），PiUI 同款结构
• 宽度自适应：560-768px 宽屏（横屏手机、大折叠屏、小平板）下侧边栏页从 360px 随视口涨到约半个视口（上限 420px），侧边栏壳冻结的桌面 280px 内容同步拉伸铺满页列——屏幕变宽，侧边栏内容跟着变大，不再留白
• 输入栏省位：移动端权限选择器只留盾形图标（标签与箭头收起，紧贴 + 按钮），模型名限宽（手机 96px / 宽屏 160px），超长时带间距的单向循环跑马灯（双副本 + GPU transform，尾部滚出留空白再从头进入；prefers-reduced-motion 下回退省略号），上下文圆环与权限/+/发送统一 36px 圆形、固定座位不挤压（模型选择器让位收缩），上下文明细面板限宽不溢出——任何宽度都不再挤压、变形或重叠
• 侧边栏始终完整渲染：窄屏下控制器自动展开 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> 为作用域，卸载即恢复原样）

效果

安装

推荐：GitHub Release 构建产物（开箱即用）

releases/latest 永远指向最新版本，链接不用随版本改动：

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

重启 dsh web，用手机模式（DevTools 设备模拟）或真实手机访问即可。

⚠️ 升级注意：pnpm 会按 URL 缓存 tarball——同一 latest 链接在新版本发布后可能命中旧缓存。装到旧版时先 dsh plugin --profile web remove @dsh-external/dsh-mobile 再重新安装（必要时 pnpm store prune）。

开发环境（从源码）

git clone https://github.com/lehhair/dsh-mobile.git
dsh plugin --profile web add link:E:/dev/dsh-mobile

使用

• 初始：侧边栏半开常驻（左侧平页 + 右侧半边聊天卡片）
• 聊天全屏：手指向左拖；回侧边栏：手指向右拖（跨过中点自动吸附整页）
• 桌面不受影响：≥769px 时框架恢复三栏

设计约束（为什么是 CSS + 轻量控制器，而不是替换 root）

• dsh 的 root 槽位是框架内建的 single 槽，由 ui-layout 独占——插件不能替换 AppFrame（single slot already has a registration 直接抛错）
• 因此翻页器直接作用于 AppFrame 本身：CSS 把 grid 轨道重排为两页（clamp(280px, 70vw, 360px) 100% 0，560-768px 宽屏为 clamp(360px, 50vw, 420px)，并把侧边栏壳的冻结展开宽度用 min-width:100% 拉伸到整页）+ overflow-x: auto + scroll-snap，控制器只滚动它、镜像页面状态、并在滑动结束后吸附+同步——全部基于稳定 data 属性（data-sidebar-collapsed / data-details-collapsed，rc.2 与工作区快照一致）与对话骨架的 data 座位，不依赖任何哈希类名
• 已知限制：详情列在窄屏下仍遵循框架让步链自动关闭（核心行为，插件不越权），故 pager 只有两页
• 键盘 inset 依赖 visualViewport（现代浏览器/PWA 均有）；不支持时退化为 0

开发

pnpm install        # devDeps link 到 ../dsh2026/deepseek-harness（DSH 源码，需先构建其 client 包）
pnpm run check      # typecheck + test + build

src/client/
  controller.ts      # DOM 控制器：viewport meta、翻页镜像、键盘 inset、FAB、选会话回聊天页
  mobile.css         # 全局移动端样式表（<style data-plugin> 注入，卸载即移除）
  MobileMenuButton.tsx  # 页头 ☰（header.actions 槽位，order -10）
  locales.ts         # 中英文案

License

BSD-3-Clause

友情链接 / Friend Links

• DSHFind — DeepSeek Harness 插件市场与学习社区