DSH HUB
HomePlugin StorePlugin PacksCommunityRankingsResourcesPublish Guide
Plugin source
Back to catalog

kaijia323 /

kaijia323/dsh-mobile-ui

Verified

DSH Web 的移动端外壳插件:抽屉式导航、触控尺寸控件、安全区适配、对话区占满整屏,桌面端行为不变。

★ 1 Stars0 Forks0 IssuesN/A Community rating0 Confirmed installs
View on GitHub
READMESource: main@8fcd2010

dsh-mobile-ui

license platform plugin mobile

dsh-mobile-ui — DSH Web 的移动端外壳插件

DSH Web 的移动端外壳插件。桌面浏览器不受影响:所有样式和组件都只在 html[data-dsh-mobile](视口宽度 ≤ 767px)下生效。

界面预览

移动端界面总览:对话、抽屉导航、命令面板、全局面板、设置

演示(GIF,工作区与会话名均为示例占位):

移动端操作演示

安装

前提:DSH Web 0.2.1-rc.2(本插件按该版本构建;其他版本可能静默降级成桌面样式)。

方式一:插件市场(推荐)

  1. 在插件页打开实验性「自定义插件市场」(插件 → 实验性插件 → 更多);

  2. 切到「发现」标签,点「添加索引源」,填:

    https://kaijia323.github.io/dsh-mobile-ui/index.json
    
  3. 找到「移动端外壳」,点安装。

方式二:GitHub 地址

  1. 打开 DSH Web → 左侧栏「插件」→ 右上「添加插件」;
  2. 输入 github:kaijia323/dsh-mobile-ui;
  3. 点「安装」,装完在插件列表里启用 dsh-mobile-ui(按需安装的插件通常会自动启用)。

仓库是公开的,任何人只要有 GitHub 账号就能用这种方式安装。如果之后改成私有, 需要把安装的人加成协作者,或者改用本地目录 / npm 包名。

方式三:本地目录

git clone https://github.com/kaijia323/dsh-mobile-ui.git ~/dsh-mobile-ui

然后在「添加插件」里填本地目录路径(例如 /home/you/dsh-mobile-ui)。

方式四:npm 包名

发布到 npm 之后,在「添加插件」里直接填包名即可(当前未发布)。

装完怎么确认

手机宽度(≤ 767px)打开:左上角出现汉堡键、侧栏变成覆盖式抽屉、对话区占满整屏; 桌面宽度下布局与原来一致。

卸载 / 临时关闭

  • 插件列表里禁用 dsh-mobile-ui;
  • 或地址后加 ?dsh-mobile=off 临时关闭。

做了什么

  • 左侧栏不再占宽:移动端原本常驻的 56px 图标竖条会吃掉约 14% 屏宽。现在左右两列 都不占 grid 宽度,左栏改成覆盖式抽屉(84vw / 最大 320px,右缘圆角 + 阴影), 对话区占满整屏。
  • 抽屉行为:顶部栏左侧新增汉堡键打开。点会话行、点「新会话」(含品牌区)、切全局 面板会自动收起;点工作区里的「新建会话」会在会话真正创建后自动收起;点遮罩或按 Esc 也会收起(有菜单打开时 Esc 只关菜单,抽屉留在原地)。抽屉里的就地操作(搜索、工作区 展开、会话「…」菜单、底部「更多」菜单、菜单里的置顶/归档/设置)不会把抽屉关掉。
  • 全局面板:插件页、自动化任务这类面板底部有一条栏,左键开抽屉、右键回对话; 全局面板页不会有"出不来"的死路。
  • 设置面板:移动端改为全屏、分类横向排列,主题选择三块并排。
  • 安全区:宿主侧把 viewport-fit=cover 写进页面,样式里用 env(safe-area-inset-*) 给抽屉、顶栏、输入区留出刘海和小白条的位置。
  • 键盘:跟踪 visualViewport,用 --dsh-mobile-vv 让布局高度跟可见区域走, 输入框不会被软键盘顶出屏幕。
  • 不抢键盘:切会话、新建会话、首次加载时输入框不再自动聚焦;点「+」时它需要输入框 焦点才能挂出菜单,所以只在同一轮点击内短暂聚焦、下一个任务立刻收掉,菜单照常出现。 点菜单后再点输入框会先收起面板并进入输入;本来就在打字时点「+」不会把焦点踢掉。
  • 输入区:加号/发送键保持正圆;模型名不再被自带实现的宽度上限截断(隐藏版本号、 放宽上限);底部统计(轮次/步数、token/缓存命中)按设置里的详细级别保留。
  • 触屏可达:自带界面的会话行「…」和工作区行「… / +」原本只在鼠标悬停时出现, 触屏下常显,手机上也能够重命名、归档、置顶、在工作区新建会话。
  • 阅读与密度:正文 16px、代码 13.5px;去掉点击高亮块,控件最小高度 36px。

关掉它

  • 临时:在地址后面加 ?dsh-mobile=off。
  • 彻底:插件管理里禁用 dsh-mobile-ui bundle。

结构

文件 作用
index.js 宿主半:webServer.tapIndex 注入 viewport-fit=cover 和首帧前的 data-dsh-mobile 标记
client.js 浏览器半:样式、视口标记、键盘高度、抽屉交互、顶部栏导航键、焦点守卫
cordis.patch.yml bundle 插入行
locale/{zh,en}.json 插件列表里的标题 / 描述

版本锚定

抽屉、遮罩、面板底栏使用的是自带框架上稳定的 data-* 锚点([data-slot="sidebar"]、 [data-slot="main"]、[data-shell-overlay]、[data-sidebar-collapsed]、 [data-row-key]),不依赖哈希类名。DSH 升级后如果结构变了,样式会自动降级成 "没有移动层",不会把桌面端弄坏。

设置页、主题块、统计 pill、加号按钮这几处用的是当前构建的哈希类名 (.VOzbGW_*、_8HJdBW_*、bOPqQW_*、.uV2eYG_*、._7KE1Ra_*),升级后会 静默退回桌面样式,同样不会崩。

验证

已按功能清单做过移动视口与桌面视口的回归验证(抽屉开合、会话切换、面板底栏、 设置全屏、输入条、无横向溢出、无控制台报错、桌面布局不受影响、逃生开关)。 验证截图不纳入仓库,避免把会话内容带进版本库。

真机上的软键盘、安全区这类只在真实设备才准的行为,以实际使用为准。

已知边界

  • 真机输入法:软键盘的弹出/收起时序、安全区数值,模拟环境量不出来,只能真机确认。
  • 真实触屏:滚动惯性、长按这类手势只做了样式预设。
  • 半屏以上宽度(768–1023)仍走桌面版(56px 栏),没有平板专用布局。
  • 输入条统计与设置页的少数版式依赖当前构建的哈希类名,升级后会静默退回桌面样式。
  • 宿主半的 viewport meta 是全局替换的,桌面端也会带 viewport-fit=cover(无视觉影响)。

License

MIT

—/ 5

No ratings yet

Verified DSH bundle

Commit 8fcd2010788b

Community comments

No comments yet. Be the first to write one.

DSH HUB

A community index for DSH plugins. Not an official GitHub or DeepSeek AI product.

CommunityResourcesAPIAbout