dsh-ui-web/packages/skins/ths

34Star2Fork0Issue0Watching

同花顺风格炒股主题皮肤，给 DSH Web 界面套上品牌红标题栏、行情状态栏与交易终端面板。

分类🖥️ 界面增强🎨 主题皮肤
CAPTAIN1275CAPTAIN1275
·CAPTAIN1275/dsh-ui-web.git
语言
TypeScript
License
Apache-2.0
分支
main
dsh-plugindsh-plugin-marketdsh-plugins

安装

$ dsh plugin --profile web add github:CAPTAIN1275/dsh-ui-web/packages/skins/ths

在终端中运行以上命令，通过 dsh CLI 安装此插件。可在右上角切换 Profile。 第一次用 dsh？看这篇新手教程

一句话定位

把 DSH Web 界面整套改成同花顺炒股终端的视觉风格：品牌红的固定标题栏带上证指数行情签，底部红涨绿跌的行情状态栏，自选股风格的侧栏和交易终端配色，给写代码这件事装上一层「盯盘」皮。

核心能力

  • 设置 data-dsh-ths body 属性，作为整张同花顺样式表的生效范围，主题色/字体/组件 token 全部跟随该属性覆盖
  • 在页面顶部插入品牌红固定标题栏：左侧白蜡烛 SVG 图标 + "同花顺 · DeepSeek 在线" 标题 + 上证指数行情签（数值/涨跌幅），右侧三个装饰性窗口按钮字符
  • 在页面底部插入行情状态栏：左侧品牌色"同花顺" + 上证/深证/创业板指数单元格（红涨绿跌配色） + 就绪/已连接/在线状态 + 实时"代码指数"单元格
  • 注入"同"字红底 SVG favicon 到 head，并把文档标题钉成 "同花顺 · DeepSeek 在线"（不影响会话覆盖后的标题）
  • 每 30 秒通过 codeKline RPC 汇总所有工作区当日净增代码行数，渲染为"代码指数"单元格的涨跌文本与配色
  • 在浅色/深色两套 Appearance 主题下都钉住自己的同花顺调色板，提供"日盘/夜盘"两种视觉

技术实现

  • 语言: TypeScript（CSS Modules 配合 lightningcss 编译）
  • 关键依赖: @deepseek-ai/cordis（effect 生命周期）、@deepseek-ai/dsh-client-connection（仅取 ConnectionHandle 读取 codeKline/workspace RPC），构建用 tsdown
  • 架构模式: 标准 DSH 客户端插件：host 半区 (src/index.ts) 是空 apply 占位，client 半区 (src/client/index.ts) 注入 DOM chrome；通过 cordis.patch.yml 注册名为 ui-skin-ths 的插件行，由 dsh-skin use 脚本统一互斥管理
  • 入口文件: packages/skins/ths/src/client/index.ts:75 (apply(ctx) 是唯一运行时入口)

适用场景

想给长时间盯盘又写代码的场景一个沉浸感的视觉切换，或者单纯喜欢同花顺 / 东方财富类交易终端红蓝配色的用户。皮肤只在视觉层叠加 chrome 与 token，不影响 AI 对话、不修改模型请求、不动用户数据，适合"换换心情但功能不变"的使用方式。

前置依赖与兼容性

依赖最低版本说明
DSH Web 主程序未声明仅声明 client 注入 @deepseek-ai/dsh-client-connection（devDependencies 中为 ^0.1.0-rc.6），未在 package.json 中硬性指定 DSH 版本
Node未声明包内未声明 engines 字段；构建需 pnpm ≥10（git 安装时 pnpm 首次会要求把包键加入 profile 的 pnpm-workspace.yaml 的 allowBuilds）
平台跨平台纯浏览器 DOM 操作，不绑定操作系统，macOS / Windows / Linux 桌面端 DSH 客户端均可用
原生模块无不依赖任何 node 原生模块
额外要求AppFrame 列的 data-pane 属性来自 ui-layout 包；缺少时面板级 chrome（侧栏渐变/会话详情表面）不生效，窗口标题栏与状态栏仍正常

安装方式

dsh plugin --profile web add github:CAPTAIN1275/dsh-ui-web/packages/skins/ths

启用：dsh-skin use ths（仓库 scripts/dsh-skin 辅助脚本），同一时刻只能激活一个皮肤。

配置项

本插件无需额外配置。所有视觉表现（行情文案、指数数值、配色、刷新频率）都在源码里写死，安装后无任何开关、无环境变量、无 Schema 字段。

常见问题

Q: 安装后需要任何配置吗？

A: 不需要。该皮肤是纯呈现层插件，不读取环境变量、不注册配置项、不创建服务，安装后重启 DSH Web 并用 dsh-skin use ths 启用即可。

Q: 它会拦截或修改模型请求吗？

A: 不会。apply() 只改浏览器 DOM，不注入服务、不发 cordis 事件、不触及任何 provider 请求；KV Cache 不受影响。

Q: 状态栏里的指数数值是实时行情吗？

A: 不是。状态栏里 上证指数 / 深证成指 / 创业板指 的数值是固定文案，只为视觉效果；真正会动态变化的是"代码指数"单元格，它每 30 秒汇总一次所有工作区的当日净增代码行数。

Q: 可以同时启用多款皮肤吗？

A: 不可以。同花顺、Aurora 等皮肤会同时向窗口 chrome 注入元素，文档明确要求同一时刻只激活一个皮肤行；想换主题就 dsh-skin use <其它皮肤> 切换，或直接卸载本包回到默认外观。

Q: 卸载后页面会恢复到原始样子吗？

A: 会。cordis 卸载时 effect 清理器会移除 body 属性、标题栏、状态栏、favicon，并把被改写的文档标题还原；如果用户在皮肤启用期间已经打开了带标题的会话，皮肤不会把会话标题覆盖掉。

Q: 加载页（启动页）会被这个皮肤改样式吗？

A: 不会。外壳的启动页在插件 bundle 加载完成之前就已经渲染，皮肤从定型后的 UI 才开始生效；启动页的内部卡片会保持现代样式。

Q: 切到深色主题会变成非皮肤外观吗？

A: 不会。皮肤在 data-ds-dark-theme 两种状态下都钉住自己的调色板，切换 Appearance 主题得到的是浅色/深色两套交易终端配色，而不是回到默认 DSH 外观。

Q: 为什么标题栏的最小化/最大化/关闭按钮点了没反应？

A: 那些按钮是装饰性字符（aria-hidden），仅做视觉模拟，不绑定任何窗口控制事件；真实窗口操作仍走操作系统。

上手难度

入门 — 安装一行命令 + 一句启用即可，无任何配置项；唯一前提是已正确安装 ui-layout 才能看到完整面板级样式。

已知问题与限制

  • 启动页保持原样：DSH 外壳启动页先于插件 bundle 渲染，皮肤从定型后的 UI 开始生效；属性一旦设置，启动页也能获得窗口边框，但其内部卡片仍是现代样式
  • 主题切换被钉在皮肤内部：data-ds-dark-theme 两种状态都映射到皮肤自带的浅色/深色终端配色，切换 Appearance 主题不会回到默认 DSH 外观
  • 指数单元格是装饰性固定文案：状态栏里 上证指数 / 深证成指 / 创业板指 三项数值写死在源码中，不跟踪真实大盘行情
  • 同一时刻只允许一个皮肤生效：同时启用两个皮肤会造成 chrome 互相叠加，建议通过 scripts/dsh-skin 集中管理皮肤切换
  • codeKline RPC 不可用时"代码指数"单元格退化为横线占位符：实现里 try/catch + 显式判断 api === undefined，失败不会让终端崩溃，但用户看不到任何数据
返回插件目录
dsh-ui-web/packages/skins/ths — DeepSeek Harness 插件 | deepseek-plugin.org