dsh-todo-float
Float the conversation to-do list as a collapsible card in the top-right corner of the session, switchable back to the stock panel from Settings.
- Stars
- 0
- Language
- JavaScript
- Created
- Sep 24, 2026
- Updated
- Oct 7, 2026
Introduction
dsh-todo-float
拥有:
conversation.input.dock里的悬浮任务卡,以及隐藏官方[data-testid="todo-panel"]的那条 CSS。 冲突时:与官方 todo dock 面板争同一份数据 —— 本插件把官方那份隐藏,两者只应存在一份;与dsh-plugin-polish在 composer dock 上的间距调整无交集。 回滚:删todo-floatinsert + 重启应用(官方 dock 面板自动回来)。
Float the conversation to-do list as a collapsible card in the top-right corner of the session — switchable back to the stock panel from Settings.
把会话里的「任务」清单做成可在设置里切换的两种显示模式,默认是会话右上角的悬浮卡片。
| 模式 | 表现 |
|---|---|
| 卡片模式(默认) | 会话右上角悬浮卡片,点卡片头部可收起 / 展开(形态参考 macOS 的「进程」浮动卡片) |
| 列表模式 | 恢复 DSH 原来的样式:任务显示在输入框上方的清单面板里 |
切换位置:设置 → 内置插件 → 本插件条目 →「任务清单」页签(不在左侧导航另开分栏)。
切换即时生效,无需重启、无需刷新;选择存在 localStorage["dsh-todo-float:mode"],
并镜像到 <html data-todo-float-mode="card|list"> 供 CSS 判定。
安装
两种装法任选其一(都会往 profile 的 dependencies 加一项,再配一行 insert):
# ① npm(快,走 registry)
dsh plugin --profile <profile> add dsh-todo-float
# ② GitHub(源码直装,跟随 main 分支)
dsh plugin --profile <profile> add github:jipika/dsh-todo-float
# ~/.dsh/profiles/<profile>/cordis.patch.yml
- insert:
- id: todo-float
name: dsh-todo-float
desktop profile 被 Electron 独占(CLI 子命令会被拒),需手改 package.json + pnpm install;
改 lib/client.js 后必须重启 host 进程(或应用),刷新页面无效。
回滚:删掉(或注释 / disabled: true)那行 insert → 重启,官方面板与官方设置都恢复原样
(此时插件完全不加载,也不会留下 localStorage 影响);彻底移除再删掉 dependencies 里的那一项并 pnpm install。
设计规范(与 DSH 全局统一)
卡片不是一个自造控件 —— 所有视觉量与文案都取自全局,官方改了我们跟着变:
- 表面 = 官方
TodoPanel.module.css同一组声明:--dsw-alias-bg-base打不透明底 +--dsw-specific-menu叠主题色 +--dsw-menu-backdrop-filter,圆角--dsw-radius-lg, 边缘走--dsw-elevation-stroke-color/--dsw-elevation-prominent(描边在阴影里,不占布局)。 - 行量 = 官方:内衬
6px 12px、行 gap 10px、标题 13·500·24、列表max-height:180px、 任务名单行省略号(悬停 title 看全名)。 - 字号 = 字体 token:
--dsw-font-xs-13/--dsw-font-xs-strong-13(设置页 14 与 12 档同例), 不写散装font-size+line-height。 - 状态字形 = 官方
StateDot(done / ongoing / idle 三档,与官方statusDotState()同映射), 颜色、呼吸动画、reduced-motion 全部自带。 - 焦点环 =
--dsw-focus-ring-width/--dsw-focus-ring-color。 - 动效 = 官方时长档(120ms / 160ms +
ease),不自定义贝塞尔曲线。 - 文案 = 官方 i18n:注册声明
locale: "conversation"→ 框架注入官方t,标题 / 进度 / 状态名与官方清单逐字一致(含U+2002·U+2002分隔符),并跟随「设置 → 界面语言」切中英; 插件独有文案注册在自己的todoFloat命名空间(zh + en 成对)。 - 设置页 = 官方设置行规范 + 官方
SegmentedControl,不自造 radio。
卡片模式的细节
- 展开态:
任务 1 已完成 · 1 进行中 · 1 待处理+ 逐条任务,状态字形用官方StateDot(done 对勾 / ongoing 呼吸环 / idle 空心点),颜色、动画与 reduced-motion 全由官方组件自带。 - 收起态(默认):一枚小胶囊,只显示当前任务名;全部完成时收成
全部完成 3/3。 展开 / 收起记在localStorage["dsh-todo-float:expanded.v2"](换过键名,老用户回到新的默认收起态)。 - 宽度可拖:鼠标移到卡片左边缘会出现一根竖直把手(
cursor: col-resize,几何沿用官方宽度把手那档:8px 宽 / 透明底),按住左右拖即可调宽; 范围钳制在 240px ~ 560px(还会再受100vw - 48px限制),松手即写入localStorage["dsh-todo-float:width"],下次打开沿用。收起态是width:auto胶囊,但宽度上限就是这里拖出来的值 (组件把宽度写成--dsh-todo-float-width,卡片的max-width读它):任务短时继续收缩成窄胶囊, 任务长时最多长到展开宽度,不会比展开态还宽。 拖动期间直接改 DOM 并关掉宽度过渡([data-resizing='1']{transition:none}),松手才回写 React state。 - 位置贴住会话列右上角:右边界对齐会话列(右侧栏打开时自动避让),顶边在会话头部下方 12px。
- 会话标题行的角落元素(
[data-conversation-header-corner])与 ResizeObserver 一起负责跟随布局变化。
原理(零源码补丁)
- 浏览器半边
lib/client.js用window.__ModuleLoader__.load({ id, factory })手写,做三件事:- 往官方 list slot
conversation.input.dock再注册一个条目todo-float→ 渲染悬浮卡片; 数据仍取自官方投影useProjection("todos"),内容/状态/进度与官方一致。 - 往
settings.plugins.tab注册一页(id = 包名dsh-todo-float,「内置插件」页里本插件的 tab)→ 设置里的模式切换; 行量取官方设置行规范,二选一用官方SegmentedControl。 - 注入 CSS:只有
<html data-todo-float-mode="card">时才隐藏官方那枚面板 ([data-testid="todo-panel"]{display:none}),列表模式下它原样回来。
- 往官方 list slot
- 卡片
ReactDOM.createPortal到document.body+position: fixed:留在 composer 子树里 会被困在_composerSeat的层叠上下文,宽度拖拽手柄会吞掉点击。 - host 半边
lib/index.js是空apply()(只为让 cordis 行有 fiber),启动时打一行[dsh-todo-float] host half mounted供排查。
已知限制
- 依赖官方 slot 名(
conversation.input.dock、settings.plugins.tab)、useProjection("todos")与[data-testid="todo-panel"];官方重构这些契约后需要跟改。 - 切走再切回某个会话时,todos 投影可能变空(官方面板同样如此,不是本插件的 bug;刷新后恢复)。
License
MIT © 2026 jipika