dsh-claude-desktop-theme 0.2.0 → 0.4.0

package/README.md

@@ -1,13 +1,9 @@
 <div align="center">
 
-# 🐳 DSH Claude Desktop Theme — Claude 风格桌面主题
+# DSH Claude Desktop Theme — Claude 风格桌面主题
 
 ### 为 DeepSeek Harness（DSH）Desktop 换上 Claude Code Desktop 外观
 
-**A Claude Code Desktop-style theme plugin for DeepSeek Harness (DSH) Desktop on macOS and Windows.**
-
-Light and dark themes, a compact sidebar, model and reasoning-effort pickers, Markdown styling, and an interactive pixel whale with three random click reactions.
-
 <p align="center">
   <img src="https://img.shields.io/badge/License-MIT-3DA639?style=for-the-badge&logo=opensourceinitiative&logoColor=white" alt="License Badge"/>
   <img src="https://img.shields.io/badge/DSH-0.2.0--rc.2-4D6BFE?style=for-the-badge" alt="DSH Badge"/>
@@ -19,21 +15,39 @@ Light and dark themes, a compact sidebar, model and reasoning-effort pickers, Ma
 
 ---
 
-`dsh-claude-desktop-theme`是面向 macOS 与 Windows 的 **DSH Claude 风格主题 / 界面美化插件**。CCD 指 Claude Code Desktop；紧凑侧栏、统一的新会话页与聊天页、独立的模型与推理强度（effort）选择器，跟随宿主的浅色 / 深色主题，首次安装后自动开启。
+`dsh-claude-desktop-theme`是面向 macOS 与 Windows 的 **DSH Claude 风格主题 / 界面美化插件**。
 
 [安装指南](https://github.com/zkforge/dsh-claude-desktop-theme/blob/main/install.md) · [架构说明](https://github.com/zkforge/dsh-claude-desktop-theme/blob/main/ARCHITECTURE.md) · [设计规范](https://github.com/zkforge/dsh-claude-desktop-theme/blob/main/DESIGN.md) · [问题反馈](https://github.com/zkforge/dsh-claude-desktop-theme/issues)
 
 </div>
 
-## Quick install / 快速安装
+## 🚀 快速安装
+
+[npm 包](https://www.npmjs.com/package/dsh-claude-desktop-theme)已发布，可通过官方插件页或终端安装。
+
+<div align="center">
+
+| 入口 | 安装方式 |
+| --- | --- |
+| 官方插件页 | 「插件 → 添加插件」输入 `dsh-claude-desktop-theme` |
+| 终端 | `dsh plugin --profile desktop add dsh-claude-desktop-theme` |
+| 插件市场 | 待目录收录后可搜索安装；当前请使用上面两个入口 |
+
+</div>
 
-In DSH Desktop, open the plugin page and add `dsh-claude-desktop-theme`, or run:
+**终端**（需先注册 `dsh`）
 
 ```sh
 dsh plugin --profile desktop add dsh-claude-desktop-theme
 ```
 
-Requires DSH Desktop **0.2.0-rc.2**. Reload DSH after installation. See the [installation guide](https://github.com/zkforge/dsh-claude-desktop-theme/blob/main/install.md) for CLI setup and platform-specific steps.
+**插件页**：打开「插件 → 添加插件」，粘贴
+
+```text
+dsh-claude-desktop-theme
+```
+
+首次安装后插件自动开启，升级沿用已保存的配置。应用内添加插件无需注册 CLI；安装后重载 DSH，具体步骤、应用内置 CLI 路径与源码安装见 [安装指南](https://github.com/zkforge/dsh-claude-desktop-theme/blob/main/install.md)。
 
 ## 🌟 核心特性
 
@@ -62,85 +76,91 @@ Requires DSH Desktop **0.2.0-rc.2**. Reload DSH after installation. See the [ins
 
 </div>
 
-- **紧凑侧栏**：工作区导航与会话列表，新会话条目在第一次发送后出现。
+- **紧凑侧栏**：工作区导航与会话列表，浏览区只有一行表头——工作区名在左，新建会话、搜索与视图选项在右；新会话条目在第一次发送后出现。
 - **统一会话页**：新会话页、输入卡片与聊天布局共用一套样式，正文边缘随滚动渐隐。
-- **模型与 effort**：两个独立选择器，支持搜索、滑块和键盘操作。
+- **模型与 effort**：两个独立选择器，支持搜索、滑块和键盘操作；滑杆停在最后一档时，轨道上的实心填充换成一条像素流光。
 - **会话顶栏**：项目文件夹、终端、浏览器三个右侧栏入口；展开侧栏收进会话 ⋯ 菜单第一项。
+  标题左侧显示电脑图标，右侧下拉按参考提供 Open in、Rename、Fork、Transcript view、Output style、Archive、Delete；项目名以灰色标签显示，点击打开目录菜单。重命名、Fork、归档、对话／轨迹切换、宿主默认外部应用打开、复制目录路径／名称与打开终端接入真实操作。Show in Finder、Open repository on GitHub、Change folder、Output style 和 Delete 因 DSH 未提供相应公开接口或仓库信息，仅还原外观，点击显示具体限制说明；不会伪造删除或目录变更。
+- **右侧栏与 Files 页签**：Files、浏览器等视图各占一张卡，多个终端共用一张卡并通过标签页切换，加号新增真实终端；前两块上下排列，第三块开启右列；两列的上下分隔线独立可拖，关闭后同列补位，比例按会话保留。卡片可以放大到覆盖聊天区域（保留左导航）／还原，单视图标题为无交互文本，顶部按视频排列加号／搜索、⋮、展开与关闭，最后一块关闭时收起右侧栏。文件预览放在 Files 卡片内部，文件树与预览左右分栏；窄列无预览时优先显示完整文件树，放宽后显示空预览。支持拖动树宽、点击标题左侧蓝色清单按钮收起／展开文件树和切换已打开的文件；过滤框按名字收窄已加载的行，Esc 清除。
+  浏览器按参考提供 Servers／Files／Settings 分组菜单，以及单项 Save screenshot 菜单；桌面网页可保存 PNG，空页禁用。地球按钮右侧可直接输入服务地址并回车访问，dev 可聚焦地址框；启动服务器、本地文件直接浏览及三项配置暂时提供限制说明。独立窗口按钮暂时隐藏；浏览器元素选取保留按钮外观，点击说明 DSH 暂无接口；全目录搜索未接入，当前只过滤已加载文件。
 - **输入框与状态栏**：聚焦时加深输入边框；细线发送 / 停止按钮、模型、effort、权限与语音控件统一尺寸和间距，权限始终显示文字，上下文圆环位于行末。
 - **统一菜单**：工作区、会话、权限与模型等选单共用紧凑行高、圆角和悬停反馈，浅色与深色模式保持一致。
+- **滚动条**：平时不画——滚动时出现、停下约一秒淡出，鼠标移到滚动条那条窄边上也会出现；五个页面级滚动面（会话页、转录列、侧栏树、文件树、智能体团队面板）改用一条封顶的深色浮层胶囊（长短不随内容变成整条高），轨道几何仍是宿主的（正文 5px、设置列 9px），宿主自己隐藏滚动条的几条横条保持原样。
+- **视图选项**：按参考图分成状态、分组与排序、空分组三段；「维度 + 当前值 + ›」的值行展开紧贴右侧的二级卡片。状态按活跃／已归档／全部命名，底部可一键清除筛选，并可开关空分组。
+- **上下文分解面板**：点上下文圆环打开分段面板。收起态是标题行加一条 4px 分段条；点标题行展开成分类行（MCP 工具／系统工具／系统提示词／技能／记忆文件／对话消息／自动压缩余量／空闲空间）与可折叠的逐项分组（逐工具、逐指令文件、逐技能）。数字来自 DSH 的投影；每次打开时标题和各明细分组都默认收起，不显示估算差额，没有底部按钮。
 - **Markdown 排版**：链接、行内代码、表格与代码块按 CCD 风格重绘。
 - **像素小鲸鱼**：停在新会话页的输入卡旁，待机时眨眼与摆尾；点击随机喷一口水、轻弹眨眼或摆尾回应。
 - **主题跟随**：跟随 DSH 的浅色、深色和系统主题，支持自定义背景色与字体。
-- **用量统计卡片**：Overview／Models 视图、时间范围、贡献热力图与模型图表，默认关闭。
+- **用量统计卡片**：概览／模型视图、时间范围、贡献热力图与模型图表。
 
 ## 🐳 与小鲸鱼互动
 
-小鲸鱼以 **32 × 24 像素**的造型停在新会话输入框右上方，配色跟随浅色 / 深色主题。待机时偶尔眨眼、轻轻摆尾；点击鲸鱼，或用 Tab 聚焦后按 **Enter / Space**，会等概率播放一次回应：
-
-| 动作 | 动效 | 时长 |
-| --- | --- | --- |
-| 喷一口水 | 身体轻晃、闭眼，从头顶喷出水柱，水滴向两侧散开落下 | 约 1.05 秒 |
-| 轻弹眨眼 | 蓄力、向上轻跳、落地回弹并眨眼 | 约 0.68 秒 |
-| 摆尾回应 | 身体左右轻晃，尾巴与胸鳍摆动并眨眼 | 约 0.90 秒 |
-
-动作结束后回到待机，再接受下一次点击。透明点击区域扩到 44 × 44 像素，向上延伸，避免遮挡下方输入框。打开模型或 effort 选单时，小鲸鱼仍在原位，选单显示在它上方；输入框上方出现额外内容、发送回显或进入聊天页时，它会收起。
+<div align="center">
 
-系统开启「减少动态效果」时，待机动画关闭，点击仅短暂闭眼约 0.2 秒。窗口进入后台时暂停待机动画并取消正在播放的回应；回到前台后恢复。可在插件设置的模块开关中关闭「输入框小鲸鱼」。
+<table>
+<tr>
+<td width="33%" align="center">
+<img src="https://raw.githubusercontent.com/zkforge/dsh-claude-desktop-theme/main/assets/pet/pet-spout.gif" width="150" alt="喷一口水：身体轻晃、闭眼，从头顶喷出水柱，水滴向两侧散开落下"><br/>
+<b>喷一口水</b><br/>
+身体轻晃、闭眼，从头顶喷出水柱，水滴向两侧散开落下
+</td>
+<td width="33%" align="center">
+<img src="https://raw.githubusercontent.com/zkforge/dsh-claude-desktop-theme/main/assets/pet/pet-hop.gif" width="150" alt="轻弹眨眼：蓄力、向上轻跳、落地回弹并眨眼"><br/>
+<b>轻弹眨眼</b><br/>
+蓄力、向上轻跳、落地回弹并眨眼
+</td>
+<td width="33%" align="center">
+<img src="https://raw.githubusercontent.com/zkforge/dsh-claude-desktop-theme/main/assets/pet/pet-wag.gif" width="150" alt="摆尾回应：身体左右轻晃，尾巴与胸鳍摆动并眨眼"><br/>
+<b>摆尾回应</b><br/>
+身体左右轻晃，尾巴与胸鳍摆动并眨眼
+</td>
+</tr>
+</table>
 
-## 📦 0.2.0 更新与旧包迁移
+</div>
 
-从 **0.2.0** 起，npm 包名与 GitHub 仓库名统一为 **`dsh-claude-desktop-theme`**，旧包名为 `dsh-ccd-style`。本次增加鲸鱼点击动效、项目文件夹入口，统一菜单与状态栏样式，并完善输入框聚焦和按钮反馈。
+## 🎚️ Effort 选单
 
-已安装旧包的用户请先记录自定义颜色、字体与模块开关，再移除旧包、安装新包，避免同时启用两套主题：
+<div align="center">
 
-```sh
-dsh plugin --profile desktop remove dsh-ccd-style
-dsh plugin --profile desktop add dsh-claude-desktop-theme
-```
+<table>
+<tr>
+<td width="50%" align="center">
+<img src="https://raw.githubusercontent.com/zkforge/dsh-claude-desktop-theme/main/assets/effort/effort-light.gif" width="260" alt="浅色 Effort 面板：滑杆停在 Max，实心填充淡出，像素流光从右端扫入并在轨道上持续流动"><br/>
+<b>浅色</b>
+</td>
+<td width="50%" align="center">
+<img src="https://raw.githubusercontent.com/zkforge/dsh-claude-desktop-theme/main/assets/effort/effort-dark.gif" width="260" alt="深色 Effort 面板：同一条像素流光，亮紫像素落在深色轨道上"><br/>
+<b>深色</b>
+</td>
+</tr>
+</table>
 
-安装后重载 DSH，并核对设置。包名迁移不会自动复制旧包的自定义配置；同名包的后续升级继续沿用已保存的配置。完整步骤见 [安装指南](https://github.com/zkforge/dsh-claude-desktop-theme/blob/main/install.md#从旧包名迁移)。
+</div>
 
 ## 🖼️ 界面预览
 
-截图为 macOS 版本，使用默认配色与 Geist 字体，统计卡片已开启。静态截图展示整体布局，小鲸鱼交互及本次细节调整以以上说明为准。
+截图为 macOS 版本，使用默认配色与 Geist 字体，统计卡片已开启，状态栏统计读数保持默认关闭。新会话页展示像素小鲸鱼与统计卡片，聊天页展示 Markdown 表格与代码高亮；插件设置两图分别展示模块开关，以及主题、背景色、视图与字体。小鲸鱼的三种点击回应与 Effort 拉到底的动效见上方。
 
 <div align="center">
 
 |  | 浅色 | 深色 |
 | --- | --- | --- |
 | 新会话页 | ![新会话页浅色：工作区与模式选择、像素小鲸鱼和统计卡片](https://raw.githubusercontent.com/zkforge/dsh-claude-desktop-theme/main/assets/screenshots/new-session-light.png) | ![新会话页深色：工作区与模式选择、像素小鲸鱼和统计卡片](https://raw.githubusercontent.com/zkforge/dsh-claude-desktop-theme/main/assets/screenshots/new-session-dark.png) |
-| 聊天页 | ![聊天页浅色：Markdown 表格、js 代码块和 Effort 滑杆](https://raw.githubusercontent.com/zkforge/dsh-claude-desktop-theme/main/assets/screenshots/chat-light.png) | ![聊天页深色：Markdown 表格、js 代码块和 Effort 滑杆](https://raw.githubusercontent.com/zkforge/dsh-claude-desktop-theme/main/assets/screenshots/chat-dark.png) |
-| 插件设置 | ![插件设置浅色：模块开关、主题、背景色与字体](https://raw.githubusercontent.com/zkforge/dsh-claude-desktop-theme/main/assets/screenshots/settings-light.png) | ![插件设置深色：模块开关、主题、背景色与字体](https://raw.githubusercontent.com/zkforge/dsh-claude-desktop-theme/main/assets/screenshots/settings-dark.png) |
+| 聊天页 | ![聊天页浅色：Markdown 表格、对齐示例与 Python 代码高亮](https://raw.githubusercontent.com/zkforge/dsh-claude-desktop-theme/main/assets/screenshots/chat-light.png) | ![聊天页深色：Markdown 表格、对齐示例与 Python 代码高亮](https://raw.githubusercontent.com/zkforge/dsh-claude-desktop-theme/main/assets/screenshots/chat-dark.png) |
+| 插件设置 | ![插件设置浅色：启用 CCD 风格界面与模块开关](https://raw.githubusercontent.com/zkforge/dsh-claude-desktop-theme/main/assets/screenshots/settings-light.png) | ![插件设置深色：上下文分解面板、主题、背景色、空分组与字体](https://raw.githubusercontent.com/zkforge/dsh-claude-desktop-theme/main/assets/screenshots/settings-dark.png) |
 
 </div>
 
-## 🚀 安装
-
-[npm 包](https://www.npmjs.com/package/dsh-claude-desktop-theme)已发布，可通过官方插件页或终端安装。
-
-<div align="center">
-
-| 入口 | 安装方式 |
-| --- | --- |
-| 官方插件页 | 「插件 → 添加插件」输入 `dsh-claude-desktop-theme` |
-| 终端 | `dsh plugin --profile desktop add dsh-claude-desktop-theme` |
-| 插件市场 | 待目录收录后可搜索安装；当前请使用上面两个入口 |
-
-</div>
-
-首次安装后插件自动开启，升级沿用已保存的配置。
-
-终端命令需先注册 `dsh`；应用内添加插件无需注册 CLI。安装后重载 DSH，具体步骤、应用内置 CLI 路径与源码安装见 [安装指南](https://github.com/zkforge/dsh-claude-desktop-theme/blob/main/install.md)。
-
 ## ⚙️ 配置
 
-打开「插件 → dsh-claude-desktop-theme → ui-skin-ccd-style」，调整总开关、模块、主题、颜色和字体。改动即时生效。
+打开「插件 → dsh-claude-desktop-theme」，调整总开关、模块、主题、颜色和字体。改动即时生效。
 
 <div align="center">
 
 | 分组 | 可调项 |
 | --- | --- |
-| 模块 | 窗口与分栏骨架、侧栏、新建页、聊天页、输入框小鲸鱼、统计卡片 |
+| 模块 | 窗口与分栏骨架、侧栏、新建页、聊天页、输入框小鲸鱼、统计卡片、状态栏统计读数、上下文分解面板 |
 | 外观 | 主题（浅色 / 深色 / 跟随系统）、会话背景色、侧栏背景色 |
 | 字体 | 界面字体、代码与等宽字体 |
 
@@ -170,7 +190,7 @@ npm run check
 npm run pack:local --cache .cache/npm
 ```
 
-`npm run check` 依次执行类型检查、模块边界与文档链接检查、测试、构建和包内容校验。
+`npm run check` 依次执行类型检查、模块边界与文档链接检查、测试、构建和包内容校验。本机有 Chrome 时，测试还会在真实浏览器中验证视图选项二级菜单的鼠标命中、跨菜单间隙与键盘操作，以及上下文分解面板的两态、锚定几何、分段间隙与浅深配色；没有 Chrome 时跳过这一项，可用 `CHROME` 指定浏览器路径。
 
 <details>
 <summary><b>全部脚本</b></summary>
@@ -185,6 +205,8 @@ npm run pack:local --cache .cache/npm
 | `npm run check` | 依次执行以上全部 |
 | `npm run dev` | 客户端增量构建 |
 | `npm run pack:local` | 生成用于本地安装的 tarball |
+| `npm run pet:gifs` | 重新渲染 README 里小鲸鱼的三个动图（需已安装 Chrome 与 ffmpeg） |
+| `npm run effort:gifs` | 重新渲染 README 里 Effort 拉到底的深浅两个动图（同上） |
 
 </details>