dsh-component-manager

DeepSeek Harness Web 组件管理插件（v3）：侧边栏底部「组件」按钮打开布局原生第三列（注册进 details 槽，替换官方工具详情面板），面板是 AppFrame 的真实 grid 列——拥有布局自带的拖拽手柄、过渡动画、宽度管理，打开时聊天区被推窄而非被遮挡。

功能总览

| Tab | 能力 | | --- | --- | | 组件 | 组件显隐开关 + 搜索/分组 + 匹配计数徽章 + 行悬停高亮 + 一键定位闪烁 + 页面拾取器 + 手动添加 | | 样式 | 内置效果库（专属 + 通用，带缩略样张预览）+ 快捷预设芯片 + 全局 CSS + 手写 CSS（含语法校验），实时生效 | | 插件 | 当前 Host 插件清单（pluginInventory/list Remote） | | 挂件 | 悬浮挂件：标题/HTML/局部 CSS/可见性/拖动 + x/y 输入 + 内联预览，挂载 shell.overlay |

工具详情：官方工具详情面板完整保留，侧边栏按钮在「组件管理 ↔ 官方工具详情」之间切换（见下文实现）。

通用能力：撤销/重做（头部按钮）、配置导出/导入/一键重置（头部「⋯」菜单）、关闭按钮（调用 layout.closeDetails()）。

内置效果清单（每组件多种、UI/UX 各异，非简单换皮）：

• 状态栏：胶囊标签 / 主题强调色 / 磨砂玻璃 / 荧光仪表 / 左侧强调条 / 圆点分隔 / 终端风 / 渐变胶囊 / 下划线刻度
• 目标栏：霓虹描边 / 渐变描边 / 浮起阴影 / 徽章图标 / 下划线极简
• 上下文仪表盘：微光圆环 / 加粗进度环 / 呼吸光环
• 消息反馈按钮组：柔和胶囊组 / 描边按钮组 / 图标放大悬浮
• 产出文件行：卡片化行 / 文件清单分隔 / 悬浮文件胶囊
• 后台任务条：状态色条 / 紧凑行 / 徽章计数
• 计划模式控件：强调胶囊 / 浮动卡片
• 模型选择控件：描边触发器 / 菜单卡片 / 强调标签
• 轨迹工具栏：玻璃工具栏 / 下划线极简
• 通用（任意条目）：磨砂玻璃 / 霓虹发光 / 渐变边框 / 浮起阴影 / 极简线框 / 主题强调色
• 快捷预设：胶囊 / 柔化 / 紧凑 / 放大字号 / 高亮描边 / 等宽数字 / 重置；全局：护眼降亮 / 重置

配置保存在 localStorage（键 dsh.componentManager.v2，首次启动从 v1 自动迁移）。撤销历史仅会话内有效。

包结构

dsh-component-manager/
├── package.json      # dsh.client 声明 + exports["./client"]
├── lib/
│   ├── index.js      # Host 半身（空插件）
│   └── client.js     # 浏览器半身（window.__ModuleLoader__.load）
└── README.md

安装与注册（本机实测步骤）

1. 把本目录放到 dsh 安装树的 node_modules 中，例如： D:\dev-tools\Nodejs\node_modules\@deepseek-ai\dsh\node_modules\dsh-component-manager

2. 在 ${DSH_HOME}/profiles/node_modules/ 下建 junction（让 profile 模块解析能找到它）：

   New-Item -ItemType Junction -Path "$env:USERPROFILE\.dsh\profiles\node_modules\dsh-component-manager" `
     -Target "D:\dev-tools\Nodejs\node_modules\@deepseek-ai\dsh\node_modules\dsh-component-manager"

3. 在 $DSH_HOME/profiles/web/cordis.patch.yml 注册一行：

   - insert:
       - id: ui-component-manager
         name: dsh-component-manager

4. 首次安装需重启 dsh web；此后更新只需替换 lib/client.js 并 Ctrl+F5（hmr 轮询自动更新 rev）。

关键实现与风险（v3 原生第三列）

• 与官方详情共存、互不替换：侧边栏按钮打开/收起组件管理——打开时（priority: -1 shadow 官方）显示组件管理；收起时 closeDetails 收起整个右列。官方工具详情面板完整保留：收起组件管理后，点聊天里的工具行即可照常查看官方详情。
• 子槽约束：conversation.details.tool 已由官方声明，重复声明会抛错，故本插件不重托管官方渲染器——工具详情完全交给官方面板展示，本插件面板只含「组件/样式/插件/挂件」四个 Tab。
• 宽度：面板宽度由布局管理（300–520px，拖拽手柄）。
• 无会话/空白会话时：布局会自动收起第三列，侧边栏按钮点击无效果（属预期）。

注意事项

• 内置目录的 CSS 类名（如 .FJxK0a_root）提取自当前构建；升级 DSH 后若失效，行内出现「0 匹配」徽章，用页面拾取器重建。
• 重装/升级 @deepseek-ai/dsh 会清掉本包目录，需重新放置（cordis.patch.yml 保留后只恢复包目录）。
• 挂件 HTML 原样渲染（dangerouslySetInnerHTML），只使用自己信任的内容。
• 移除插件：删掉 cordis.patch.yml 对应行并重启；或设 disabled: true（重启后官方工具详情面板会恢复）。

开发调试

浏览器端：DevTools 查看 /plugins/dsh-component-manager/client.js（cache-control: no-cache），改完刷新页面即可。

三套无头测试（无需浏览器与重启）：

node unit-test.mjs          # 纯函数单测：选择器/CSS/历史/迁移/效果库/materialFor/readSelection
node smoke-test.mjs         # 求值 / CSS 注入 / 三个 Slot 注册 / 面板与工具详情渲染 / 持久化
node interaction-test.mjs   # 真实 ReactDOM + 最小 DOM shim：按钮开栏、5 Tab、拾取、高亮、预设、
                            # 效果、撤销、挂件、菜单、closeDetails、工具详情三态

修改 lib/client.js 后先跑三套测试，再同步到安装目录副本。