dsh-kaze-tachinu-theme

dsh plugin --profile web add dsh-kaze-tachinu-theme

dsh-kaze-tachinu-theme · 風立ちぬ Theme

中文 | [English](README.en.md)

<p align="center">

<img src="assets/logo/logo.svg" alt="Kaze Tachinu (The Wind Rises)" width="460">

</p>

<p align="center">

<img src="https://img.shields.io/github/license/suuuuunamei/dsh-kaze-tachinu-theme?style=flat-square" alt="License">

&nbsp;

<img src="https://img.shields.io/github/v/tag/suuuuunamei/dsh-kaze-tachinu-theme?style=flat-square" alt="Version">

&nbsp;

<img src="https://img.shields.io/github/stars/suuuuunamei/dsh-kaze-tachinu-theme?style=flat-square" alt="Stars">

</p>

<p align="center">

<strong>宫崎骏《起风了》（風立ちぬ / The Wind Rises）主题，为 DeepSeek Harness (DSH) Web GUI 而作</strong><br>

<em>天蓝玻璃拟态 · 晴空电影壁纸 · 自绘矢量徽标 · 输入卡重绘 · 主题化占位文案 · 会话统计胶囊 · 消息列底部渐隐 · 统一滚动条</em>

</p>

<div align="center">

[是什么](#是什么) · [主题细节](#主题细节) · [抗哈希漂移设计](#抗哈希漂移设计) · [快速开始](#快速开始) · [自定义](#自定义) · [常见问题](#常见问题) · [已知限制](#已知限制) · [许可证](#许可证与素材版权)

</div>

是什么

dsh-kaze-tachinu-theme 把 DSH Web GUI 变成宫崎骏《起风了》的模样：一张菜穗子在山坡上写生的电影壁纸垫底，全部界面表面换成半透明毛玻璃，交互色统一为天蓝（#1C96B5），侧边栏品牌与首页 hero 标题替换为自绘矢量徽标（红翼飞机 + The Wind Rises 字标），输入卡重绘为云海蓝玻璃胶囊，占位文案换成「風立ちぬ——让想法随风飘去」。

它是一个标准的 dsh 插件包：一条 dsh plugin 命令装进 profile，随 DSH 启动常驻，不修改任何 DSH 源码；卸载后页面完全还原。

维度 · 原生 dsh web · dsh-kaze-tachinu-theme

背景 · 纯色 / 纯色渐变 · 晴空电影壁纸 + 全局模糊遮罩

界面表面 · 不透明分层 · 半透明毛玻璃（backdrop-filter）

品牌标识 · DSH 默认 · 自绘红翼飞机徽标（展开态 + 折叠态纸飞机）

交互色 · DSH 默认 · 天蓝 #1C96B5（按钮/选中/高亮/描边/滚动条）

输入卡 · 默认样式 · 云海蓝玻璃胶囊，占位文案主题化

会话统计栏 · 默认样式 · 居中轻玻璃胶囊 + 分隔符配色

消息列底部 · 直切 · 40px 渐变淡出蒙版（输入框零裁切）

安装 · — · dsh plugin --profile web add ... 一条命令

还原 · — · 卸载即完全还原

<p align="center">

<img src="docs/screenshots/home-hero.png" alt="主页：居中大尺寸徽标" width="760">

</p>

主题细节

天蓝玻璃拟态

主题通过官方 theme.overrideTokens API 叠加一层约 60 项的 design token 覆盖：背景层全部半透明化（露出壁纸）、边框换成低饱和天蓝描边、交互态（悬停/激活/选中）统一为天蓝系、状态色（错误/成功/警告）微调至与深色玻璃协调。亮色与暗色模式共用同一套视觉。完整 token 清单见 [docs/theme-tokens.md](docs/theme-tokens.md)。

壁纸与徽标

• 壁纸由插件宿主半区以 /kaze-tachinu/current.jpg 路由提供（包内 assets/current.jpg），叠加一层轻微的深色渐变保证文字可读性；
• 侧边栏展开态显示横向徽标（红翼飞机 + The Wind Rises 字标），折叠态显示纸飞机字母标记（两个 SVG 均为本仓库自绘原创矢量，由插件路由提供）；
• 首页（hero）标题替换为居中大尺寸徽标。

<p align="center">

<img src="docs/screenshots/chat-main.png" alt="会话视图：壁纸上的玻璃拟态界面" width="676">

</p>

输入卡与占位文案

输入卡重绘为云海蓝玻璃胶囊，占位文案按界面语言自动替换（含 CJK 检测：中文界面统一为「風立ちぬ——让想法随风飘去」）。当前 DSH 的输入框是基于 Lexical 的富文本编辑器：占位同时存在于 data-placeholder / aria-label 属性与可见占位层（绝对定位、类名以 _placeholder 结尾的节点）——引擎会同步这三处（旧版 <textarea placeholder> 同样支持），宿主重渲染后由 MutationObserver 自动补写。当前 DSH 为单一输入框，只显示「输入框」一列；仅当宿主版本另提供独立的“描述/新会话”输入框时，「新会话」列的文案才会出现。

界面语言 · 输入框（统一入口） · 新会话描述（仅独立描述框的版本）

中文 · 風立ちぬ——让想法随风飘去 · 風立ちぬ——让想法随风飘去

英文 · 風立ちぬ。いざ生きめやも。 · Kaze Tachinu — let your thoughts ride the wind

消息滚动下沉 + 底部渐隐蒙版

DSH 原生把输入框与消息列放在同一个可滚动容器里，直接给容器加蒙版会裁到输入框。本主题把滚动视口下沉到纯消息列：外层滚动容器退化为布局（固定输入框），消息列表成为有界滚动视口并承载 40px 底部渐隐；滚到最底时消息文本完整停在渐变区上方。

会话统计栏胶囊

输入卡上方（composer 区）的会话统计行（「20 轮 · 185 步 | LLM …」）重绘为居中轻玻璃胶囊：内容自动撑宽、暗色半透明底 + 毛玻璃，把文字从壁纸中托出，分隔符弱化为天蓝细点。

统一滚动条

全局滚动条统一为天蓝玻璃风格，适配主流 Chromium 内核浏览器（含 Firefox 的 scrollbar-color 兜底）。

抗哈希漂移设计

DSH 前端的组件类名是构建期哈希（形如 .Md3f7G_、._7mWUNa_、.wSkVaW_*），前端升级后必然漂移——历史上这类漂移曾导致「滚动下沉」直接失效、外层容器被禁滚而内层没人接棒，表现为对话滚不动。

本主题自 v2 起采用运行时定位 + 安全回退：

• CSS 不再引用任何消息滚动/统计栏相关的哈希类名；凡是可能影响可用性的布局都由 hooks.mjs / bundle 浏览器半区的运行时引擎处理：
• 用稳定属性（[data-conversation-scroll]、[data-slot="conversation.session"]、[data-chat-flow]）与类名后缀（…_scroll，后缀来自组件作者命名，跨构建稳定）定位消息滚动器；
• 定位成功后以内联样式 + 自定义标记落地：data-kaze-scroll（会话根）、data-kaze-scroll-inner（内层滚动器）、data-kaze-stats / data-kaze-stats-sep（统计栏胶囊及其分隔符）；
• 统计栏通过文本特征在 [data-composer-seat] 内定位后打标记，样式选择器只挂在这些 data-kaze-* 属性上。
• 安全回退：任何一步定位失败，运行时引擎直接不动手——原生滚动与默认外观完好（最坏只丢装饰，绝不冻结对话）；引擎内部还有 try/catch 兜底，异常只写 console.warn。

标记探测（打开任一会话的「对话」页签后在 Console 运行，预期 1 / 1 / 1 / 2）：

console.log('kaze-scroll根=', document.querySelectorAll('[data-kaze-scroll]').length,
  '| 内层=', document.querySelectorAll('[data-kaze-scroll-inner]').length,
  '| 统计栏=', document.querySelectorAll('[data-kaze-stats]').length,
  '| conv-scroll=', document.querySelectorAll('[data-conversation-scroll]').length);

仍在依赖少量哈希类名的只剩纯装饰区域（首页 hero 徽标、侧边栏品牌、输入卡内的高亮/hint），漂移只会造成局部视觉降级，不会影响可用性（见「已知限制」）。

快速开始

浏览器建议：主题大量使用 backdrop-filter 毛玻璃、滚动条定制与 CSS 蒙版，推荐使用 Microsoft Edge 或 Google Chrome；Firefox 下部分显示效果不兼容（滚动条、渐变蒙版等可能打折）。

系统要求

• 已安装 DeepSeek Harness，dsh web 可正常启动；
• 机器上有 pnpm（dsh plugin 内部使用；Node.js 自带的 corepack 可提供）。
• DSH Desktop 用户：dsh 的 profile 位于 %APPDATA%/dsh-desktop/harness/profiles/（命令行环境需先设置 DSH_HOME 指向对应 harness 目录）。

安装（发布版）

dsh plugin --profile web add dsh-kaze-tachinu-theme
dsh web   # 重启 DSH 生效

也可以直接从 GitHub 安装：

dsh plugin --profile web add github:suuuuunamei/dsh-kaze-tachinu-theme

壁纸出现、侧边栏徽标替换生效，即安装成功。安装后随 DSH 启动常驻，无需每次重装。

安装（本地开发 / 未发布版本）

仓库本地包未发布到 npm 时，可先以本地目录安装（file: 为快照拷贝；想「改代码即生效」可改用 link:）：

dsh plugin --profile web add file:/绝对路径/dsh-kaze-tachinu-theme
# 或
dsh plugin --profile web add link:/绝对路径/dsh-kaze-tachinu-theme

Windows 提示：跨盘 file:E:/... 会被 pnpm 解析异常。稳妥做法是在 profile 目录内建 junction 指向仓库，再用相对路径安装，例如在 profiles/web 下执行

mklink /J kaze-local E:\绝对路径\dsh-kaze-tachinu-theme

然后 dsh plugin --profile web add file:./kaze-local。

每次改完仓库代码需重跑一次该 add 刷新快照。

更新

dsh plugin --profile web update dsh-kaze-tachinu-theme
dsh web   # 重启生效

暂时关闭（不卸载）

编辑 profile 的 package.json，删掉 dsh.profile.bundles 数组中的 "dsh-kaze-tachinu-theme" 一行，重启生效；加回该行再重启即恢复。长期不用请直接卸载。

卸载

dsh plugin --profile web remove dsh-kaze-tachinu-theme
dsh web   # 重启后页面完全还原

皮肤中心方式（可选）

若使用 dsh-web-ui 的皮肤中心（skin-center），可改以皮肤包形式安装：把仓库 skin/kaze-tachinu/ 整个目录拷到 ~/.dsh/skins/kaze-tachinu/（DSH Desktop 为 %APPDATA%/dsh-desktop/harness/skins/kaze-tachinu/），刷新页面即出现在「设置 → 皮肤中心」，支持试穿 / 一键切换 / 互斥管理。

说明：手工投放的皮肤因皮肤中心的溯源安全门不带 hooks.mjs 行为增强（运行时滚动下沉、占位文案、统

…(truncated)