Back to home

richards878

dsh-mobUI

让deepseek-harness的web移动端更方便查看

Stars
0
Language
JavaScript
Created
Aug 15, 2026
Updated
Aug 15, 2026

Introduction

移动端 Web UI 适配 (mobui)

静态 Cordis 客户端插件方式为 DeepSeek Harness Web GUI 做移动端适配,不改动产品源码,从 profile 卸载即完整还原。

插件身份与状态

  • 插件: mobui-static(静态客户端插件,挂在 dsh profile 的 loader 层)
  • 当前版本: pkg-8(含 [data-cordis-panel] transform 陷阱修复)
  • 历史: 前身为会话动态插件 mobui-1 / mobui-2(进程重启即失);已静态化——随 profile 启动自动加载,重启不丢,不依赖会话
  • 宿主半: 空实现(仅为 loader 激活 + client-modules 发现)
  • 客户端半: /plugins/mobui-static/client.js,经 window.__ModuleLoader__ 注入页面

安装(一键)

./install.sh                 # 装入 web profile
DSH_PROFILE=demo ./install.sh   # 装入其他 profile

脚本幂等,可重复执行。装完重启 profile 生效(web: 重启 web 进程)并刷新浏览器。

手动安装等价步骤(脚本做的事):

# 1) 从源码生成静态插件包(package.json + index.js + client.js)
node scripts/build-static.js mobui7-plugin-client.js ~/dsh-plugins/mobui-static
# 2) 装入 profile
dsh plugin --profile web add ~/dsh-plugins/mobui-static
# 3) 在 profile 的 cordis.patch.yml 挂载 loader 条目
- insert:
    - id: mobui
      name: 'mobui-static'
# 4) 重启 profile

功能(pkg-8)

移动端(max-width: 1023.98px)下:

  1. 左侧导航:侧栏整列 fixed 离屏成抽屉(320px),中列独占全宽;左上角 FAB(汉堡)触发抽屉;抽屉内点会话行自动关抽屉。
  2. 遮罩/捕捉层:根作用域(shell.overlay 插槽,id mobui7-fab/mobui7-scrim),点遮罩即关抽屉;会话与 hero 均可点。
  3. 设置/插件页全屏:修复 fixed 后代落入抽屉 transform 包含块被压窄的根因(侧栏列 transform:none + 100vw,对话框 position:fixed inset:0 全屏,nav 变顶部横向滚动行);[data-cordis-panel] 同陷阱一并修复(钉进抽屉盒内,实测 296px 完整内嵌)。
  4. 发送按钮保护:composer 行 tools 可缩、trailing 不换模型挤压,发送按钮 flex:0 0 auto; min-width:34px 永不被裁;抽屉滞留遮挡发送的路径已被"选定会话即关抽屉"消除。
  5. composer 回车 = 换行(IME 合成回车不受影响),不提交。
  6. safe-areaprefers-reduced-motion 尊重、Toast 层级协议(内容 auto < 遮罩 29 < 抽屉 30 < 详情 31 < Toast 32)。

设计决策

  1. 表现层接管,而非替换 shipped 插槽占位者。 实时 Slot 树确认 root/sidebar/conversation/details 均为 replaceRisk: shadows-shipped-ui 的单一占位者;替换它们会连带拆除其声明的全部子插槽。插件改为在 @media (max-width: 1023.98px) 下用全局样式表重排现有布局。
  2. 只依赖稳定的 data-* 钩子,不碰 CSS Modules 类名。 构建产物中类名是哈希的(如 .pI_x6G_frame),跨构建不稳定。插件锚定 AppFrame 写出的 data-sidebar-collapsed / data-details-collapsed / data-shell-overlay / data-side 属性与结构选择器(:has() + :nth-child),并对帧内联的 grid-template-columns!important 覆盖。
  3. 状态由产品布局商店驱动。 抽屉开合不引入自有状态:rail 折叠开关 → 布局商店 → 帧属性 → CSS 呈现;点击捕捉层经 ctx.get('layout').toggleSidebar() 写回同一商店。
  4. 层级协议(移动端): 中列内容(auto) < 遮罩/捕捉层(29) < 侧栏抽屉(30) < 详情抽屉(31) < Toast 浮层(32)。

运行时依赖

客户端半依赖宿主 shell 提供:

  • React(经 module loader require('react')
  • 客户端服务 layout@deepseek-ai/dsh-client-ui-layout)与 slots@deepseek-ai/dsh-client-runtime)——已在 dsh.client.inject 声明

已知边界

  1. details 面板:视口 <996px 时被产品布局求解器强制关为 0 宽(纯 CSS 无法拦截);996–1023px 区间以右侧抽屉呈现。替换 details 占位者受 chatStore 跨插件私有限制,<996px 的详情可用性属上游产品缺口。
  2. iOS 键盘顶起 / visualViewport、composer 触控目标放大等需 DOM 级 JS,当前静态客户端插件环境未覆盖。
  3. 回车拦截依赖 document 全局:若插件运行环境屏蔽该全局,该功能静默失效(有 typeof 守卫,不会报错)。
  4. 点遮罩关闭依赖 layout 服务的 toggleSidebar();若产品未来改变该服务面,插件需同步更新。

工作区文件

  • mobui7-plugin-client.js单一事实源(CSS + 行为 + 插槽注册的完整客户端插件函数体)
  • mobui7.css — 内嵌 CSS 的可读独立副本
  • mobui7-page.js — 页面行为逻辑的可读独立副本(mobui7Install(api) 抽象)
  • scripts/build-static.js — 源码 → 静态插件包生成器
  • install.sh — 一键安装(幂等)

历史调试脚本(probe-/sim-/verify-mobile.cjs)与截图(p7*/p7b*/s7*/s8*/shot-/sim-/v5-*.png)及上游克隆 repo/ 已清理;旧验证结论见 git 历史。