dsh-liquid-glass-ui

为 DeepSeek Harness（DSH）Web UI 打造的 液态玻璃（Liquid Glass） + 灵动岛（Dynamic Island） 美学增强插件。将整个界面变为玻璃质感——流动的渐变壁纸、毛玻璃三栏框架、玻璃侧栏——外加一个悬浮于所有列之上的实时状态岛。

English readme: README.md

功能特性

全局液态玻璃主题

• 动态渐变壁纸 + 色板驱动 — 应用背景为高饱和彩虹渐变（浅色：粉/紫/薄荷/蓝；深色：宝石蓝/紫/品红/青），以 background-size: 400% + 14 秒缓动持续流动（prefers-reduced-motion 降级为 30 秒缓漂）。左上 + 右下两团强调色光晕由所选玻璃色板（--lg-accent）混合生成 —— 明暗两套主题切换色板都会让背景色调跟着变。
• 毛玻璃框架 — 三栏 AppFrame 整体 backdrop-filter: blur(24px) saturate(170%)；框架自身不透明背景被剥离，动画壁纸与模糊真正可见。
• 全界面半透明 — 通过官方主题通道 ctx.theme.overrideTokens 覆盖约 80 个 --dsw-alias-* 与 --dsw-specific-* 设计令牌（面板、卡片、按钮、工具栏、边框、滚动条、代码块、Toast，以及输入栏、消息气泡、模型选择器、菜单、提示框——后者正是之前保持实心的元凶）；输入卡片与气泡还额外获得直接 backdrop-filter 毛玻璃 + 强调色光晕，明暗两种主题下都是液态玻璃；每个令牌带 { light, dark } 双值，深色/浅色自动适配。
• 玻璃侧栏 — 左侧栏为独立柔光玻璃面板 + 镜面高光边缘；新建会话按钮为强调色玻璃胶囊；选中导航项带强调色染色。
• 弹层毛玻璃 — 对话框 / 菜单 / 提示框自带模糊。
• 整体由 html[data-lg-glass] 门控（apply 时设置、dispose 时移除）。

主题化开机动画

• 启动卡片在每次页面加载（启动服务或刷新）时变为玻璃风格：动画壁纸、毛玻璃卡片 + 入场动画、彩虹渐变流动的 HARNESS 文字、强调色转圈；明暗两套配色与主界面壁纸一致。可在灵动岛中关闭（localStorage['lg-boot-animation'] 持久化）。

实时灵动岛

• 真实 AI 状态 — 通过 ctx.sessions.list 的 live feed 读取当前会话宿主 running 位：空闲 / 思考中 / 执行中 / 已完成。状态小圆球在全部状态下跟随所选色板（空闲为柔和混合色、思考中脉冲、执行中强光晕、已完成白芯高光）。
• 实时会话信息头 — 展开态显示当前会话标题、工作区路径、agent preset 与待交互徽章。
• 真实后台任务 — 当前会话的 jobsBySession 渲染为玻璃进度条（运行中为不定扫光动画）。
• 真实通知 — 待处理交互（等待批准 / 确认计划 / 回答问题）以及后台完成的其他会话。
• 真实快捷动作（展开态）：
  • 新建会话 — ctx.workspaces.startSession()
  • 分支会话 — ctx.sessions.fork() 后打开子会话
  • 切换主题 — 明暗切换。主题服务被包裹后，无论从原生设置（通用设置 → 外观）还是灵动岛切换，都带丝滑交叉淡入淡出（旧壁纸覆盖新主题并 0.55 秒渐隐，切换不生硬），岛上实时显示 浅色/深色徽章
  • 归档会话 — ctx.workspaces.archiveSession()
  • 回到新会话 — ctx.sessions.clear()
  • 取消 — session.cancel() 中断当前轮次
• 岛上直接选色板 — 8 个色板圆点；全界面（壁纸光晕、强调表面、小圆球）即时跟随，与通用设置行双向同步。
• 最近会话切换 — 通过 shell 全局插槽的 useSessions hook 拉取最多 3 个真实会话，点击即切换（ctx.sessions.open）。
• 插件启动台 — 展开态列出浏览器 loader 树中的真实插件（模块名），点击即临时禁用/启用（与插件控制 tab 同一契约，受保护插件不绕过，结果经灵动岛通知反馈）。
• 三态变形（最小 / 紧凑 / 展开）悬浮于顶部安全区下；自动收拢时长、空闲时是否显示、显示的快捷操作均由设置页控制。

完整设置页（设置 → 液态玻璃）

所有偏好写入 DSH 设置文档（ctx.settingsScope 绑定 host liquid-glass 命名空间，非 localStorage；localStorage 仅作启动兜底）：

• 玻璃色板 — 8 个色板圆点，与岛上/通用设置行实时双向同步。
• 自动收拢 — 展开态停留时长（从不 / 3 秒 / 6 秒 / 10 秒）。
• 快捷操作 — 勾选在展开岛中显示的快捷动作（新建 / 分支 / 切换主题 / 归档 / 回到新会话）。
• 空闲时显示 — 关闭后 Agent 空闲时整个岛隐藏，开始工作后自动出现。

插件控制（临时禁用）

• 设置 → 插件 → 插件控制 tab：每个客户端插件一张卡片，带禁用/启用开关。禁用为内存态、不落盘（刷新自动恢复）。受保护插件不尝试绕过 —— loader 拒绝时通过灵动岛通知提示。

玻璃组件库

GlassCard、GlassButton、GlassPanel、GlassModal、GlassBadge、GlassDivider——含 SVG 折射（feDisplacementMap）、色差文字、镜面高光与扫光动效，可供其他 DSH 插件复用。

架构

遵循 DSH 标准双半区插件结构：

dsh-liquid-glass-ui/
├── cordis.patch.yml          # bundle 补丁：浏览器名册行
├── package.json              # dsh.bundle.patch + dsh.client 声明
├── tsdown.config.ts          # ESM 构建：src/index.ts → lib/index.js，src/client → lib/client.js
├── src/
│   ├── index.ts              # 宿主半区：feed 服务 + 设置命名空间
│   └── client/
│       ├── index.tsx         # 浏览器半区入口：主题层 + 岛屿接线
│       ├── liquid-glass-tokens.ts    # 约 80 个 --dsw-alias-*/--dsw-specific-* 覆盖
│       ├── liquid-glass-theme.css    # 动态壁纸 + 框架毛玻璃 + 侧栏面板
│       ├── DynamicIsland.tsx         # 灵动岛组件（三态）
│       ├── DynamicIsland.module.css
│       ├── LiquidGlassDefs.tsx       # 隐藏 SVG 滤镜（#lg-refract、#lg-glow）
│       ├── GlassComponents/          # 可复用玻璃组件库
│       │   └── glassBase.module.css  # 共享玻璃原子样式
│       ├── hooks/
│       │   ├── liveFeed.ts           # 真实会话/任务/通知 feed 适配器（ctx.sessions.list）
│       │   ├── useIslandState.ts     # 最小/紧凑/展开 状态机
│       │   ├── useAgentStatus.ts     # feed → idle/thinking/executing/done
│       │   ├── useNotificationQueue.ts
│       │   ├── useProgressTasks.ts
│       │   └── useGlassPalette.ts    # 8 种色板 + 持久化 store
│       ├── settings/
│       │   ├── GlassPaletteSetting.tsx           # 通用设置中的色板行
│       │   ├── LiquidGlassSettingsSection.tsx    # 完整设置页（设置 → 液态玻璃）
│       │   ├── PluginControlTab.tsx              # 每个插件的临时禁用/启用
│       │   └── PluginControl.module.css
│       └── locales/{en,zh}.ts
├── tsconfig.json
└── README.md / README.zh.md

浏览器半区（src/client/index.tsx）

• 注入 ['slots', 'locale', 'theme', 'sessions', 'workspaces', 'settingsScope']。
• 通过 ctx.theme.overrideTokens('dsh-liquid-glass-ui-simple', …) 将令牌覆盖折入当前主题（官方第三方主题通道；presenter 以 body 内联变量应用）。
• 设置 html[data-lg-glass] 激活元素级毛玻璃 CSS。
• 将 theme/change 以 lg:theme window 事件广播给灵动岛（显示为 浅色/深色 徽章）。
• 将灵动岛注册进 shell.overlay（id: 'liquid-glass-ui'，order: 100），由 liveFeed({ sessions: ctx.sessions.list }) 供数并接上真实动作；IslandSlot 订阅 host 设置（自动收拢 / 空闲显示 / 快捷操作过滤）并从 loader 树派生插件启动台。
• 通过 ctx.settingsScope.bind({ namespace: 'liquid-glass' }) 读写 host 设置命名空间：注册 settings.section 完整设置页（设置 → 液态玻璃），色板行同步走 host 文档（localStorage 兜底）。
• 在 settings.general.item 注册色板行、在 settings.plugins.tab 注册插件控制 tab，并注册 liquid-glass locale 字典。

宿主半区（src/index.ts）

• 监听 agent/status、agent/error、workflow/start、workflow/end，归约为有界标量 feed（最多 200 条）。
• 提供 liquidGlass 服务：getFeed(limit?)、subscribe(listener)、push(entry)、clear()。
• 注册 liquid-glass 设置命名空间（palette、autoCollapseMs、quickActions、showWhenIdle）。

构建

npm install
npm run bundle     # tsdown（宿主 ESM + 客户端 CJS）→ scripts/postbundle.mjs
npm run typecheck  # tsc --noEmit
node scripts/smoke-client.mjs   # 像浏览器模块表一样物化 lib/client.js 做冒烟测试

要求 Node ≥ 20、TypeScript ≥ 5.5、React 18。bundle 脚本产出：

• lib/index.js — 宿主半区：普通 Node ESM 插件。
• lib/client.js — 浏览器半区，按 DSH Web shell 要求的打包格式交付：通过 window.__ModuleLoader__.load({ id, factory }) 注册的 CJS factory，CSS Modules 与主题样式由 scripts/postbundle.mjs 内联为 <style data-plugin-css> 标签。

安装到 DSH

lib/（构建产物：浏览器/宿主 bundle）已被 git 忽略，因此新克隆的仓库必须先构建，DSH 才能加载插件。

从 Git 安装

# 1. 克隆仓库
git clone https://github.com/bbear8297-creator/dsh-liquid-glass-ui-simple.git dsh-liquid-glass-ui
cd dsh-liquid-glass-ui

# 2. 安装依赖并构建（生成 lib/）
npm install
npm run bundle

# 3. 链接到你的 web profile
dsh plugin --profile web add link:D:\path\to\dsh-liquid-glass-ui

npm run bundle = tsdown（宿主 ESM + 客户端 CJS）→ scripts/postbundle.mjs（内联样式表）。类型检查用 npm run typecheck，冒烟测试构建产物用 node scripts/smoke-client.mjs。

从 npm 安装（发布后）

npm i dsh-liquid-glass-ui-simple

两种方式安装后：

1. 包内 cordis.patch.yml 通过 dsh.bundle.patch 自动插入 liquid-glass-ui 浏览器名册行。

2. 重启 dsh 并打开 Web UI：整个界面变为玻璃质感，岛屿位于顶部居中。进入 通用设置 → 玻璃色板 可实时切换强调色。

耦合说明：框架毛玻璃与侧栏面板的选择器指向 @deepseek-ai/dsh-client-ui-layout 的 AppFrame.module.css 在当前版本下的编译类名（pI_x6G_*）。构建内稳定；仅当 ui-layout 重新编译时才可能改名（效果会退化为仅半透明，不会报错）。

数据接线

灵动岛消费推送式 FeedLike（应用中为真实 liveFeed；演示 feed 仅用于独立预览），并叠加实时会话状态：

| Prop | 来源 | 默认 | | --- | --- | --- | | feed | liveFeed({ sessions: ctx.sessions.list })（真实状态/任务/通知） | 演示 feed | | actions | 接 startSession / fork / setTheme | 3 个空操作回退 | | sessions / useSessions | shell 全局插槽 hook → 实时会话列表 | 无（隐藏区块） | | plugins | 插件清单（经 props） | 无（隐藏区块） | | paletteStore | 设置命名空间 / localStorage | localStorage + window 事件 | | t | locale 服务 | 键值直通 |

使用玻璃组件库

import { GlassCard, GlassButton, GlassModal, GlassBadge } from 'dsh-liquid-glass-ui-simple/client'

<GlassCard interactive accent>
  毛玻璃内容
</GlassCard>

组件通过 --lg-accent / --lg-tint / --lg-ink 自定义属性取色，并回退到 --dsw-alias-* 主题令牌。

路线图

• [x] 第一阶段 — 骨架、bundle 补丁、双半区入口、构建管线
• [x] 第二阶段 — 玻璃组件 + 色板系统 + 深浅色自适应
• [x] 第三阶段 — 岛屿：三态、安全区、状态光球、快捷操作、通知、进度、会话切换
• [x] 第四阶段 — 全局玻璃主题（动态壁纸、框架毛玻璃、玻璃侧栏）、岛屿真实数据（状态/任务/通知）、真实动作（新建/分支/主题/取消）
• [x] 第五阶段 — 插件启动台清单、完整设置页（settings.section + host 命名空间持久化）、跨浏览器/性能优化（color-mix 降级、单层壁纸动画 + will-change）、npm 发布准备（files 修复、repository 元数据）
• [ ] 第六阶段 — npm 实际发布（需解决包名占用）、插件图标、CHANGELOG

协议

MIT