# dsh-ui-web

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

## Metadata

- Author: [@CAPTAIN1275](https://github.com/CAPTAIN1275)
- Repo: <https://github.com/CAPTAIN1275/dsh-ui-web.git>
- GitHub: [CAPTAIN1275/dsh-ui-web](https://github.com/CAPTAIN1275/dsh-ui-web)
- Stars: 34
- Language: TypeScript
- License: [Apache-2.0](https://spdx.org/licenses/Apache-2.0.html)
- Topics: `dsh-plugin`, `dsh-plugin-market`, `dsh-plugins`
- Forks: 2
- Open Issues: 0
- Last push: 2026-08-16T18:08:27.000Z
- Added: 2026-08-20T00:00:00.000Z

## Install

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

## Wiki

## 一句话定位
把 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（侧栏渐变/会话详情表面）不生效，窗口标题栏与状态栏仍正常 |

## 安装方式
```bash
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`，失败不会让终端崩溃，但用户看不到任何数据

---

This document is auto-generated by [deepseek-plugin.org](https://deepseek-plugin.org). HTML page: [dsh-ui-web](https://deepseek-plugin.org/plugins/CAPTAIN1275/dsh-ui-web/packages/skins/ths)
Wiki generated by AI (model: `MiniMax-M3`)
