dsh-any-background 0.1.6 → 0.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +298 -274
- package/README.zh.md +283 -259
- package/lib/client.js +1626 -502
- package/lib/client.js.map +1 -1
- package/lib/index.js +25 -2
- package/package.json +106 -106
package/README.zh.md
CHANGED
|
@@ -1,54 +1,76 @@
|
|
|
1
|
-
# dsh-any-background
|
|
2
|
-
|
|
3
|
-
<a href="https://github.com/Tkingxiao/dsh-any-background" target="_blank">
|
|
4
|
-
<img src="https://img.shields.io/github/stars/Tkingxiao/dsh-any-background?style=social" alt="GitHub stars" />
|
|
5
|
-
</a>
|
|
6
|
-
|
|
7
|
-
[English](README.md) | 中文
|
|
8
|
-
|
|
9
|
-
一个 **DeepSeek Harness** 外观插件，让你完全自定义 Web
|
|
10
|
-
|
|
11
|
-
---
|
|
12
|
-
|
|
13
|
-
## 功能特性
|
|
14
|
-
|
|
15
|
-
- **PS 风格色轮** — 在色相环上选取色相，在内嵌方形中调整饱和度与明度。实时生成 30+ 个 CSS 设计令牌并立即生效。
|
|
16
|
-
-
|
|
17
|
-
-
|
|
18
|
-
-
|
|
19
|
-
-
|
|
20
|
-
-
|
|
21
|
-
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
├──
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
├──
|
|
37
|
-
│ ├──
|
|
38
|
-
│
|
|
39
|
-
│
|
|
40
|
-
│
|
|
41
|
-
├──
|
|
42
|
-
├──
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
1
|
+
# dsh-any-background
|
|
2
|
+
|
|
3
|
+
<a href="https://github.com/Tkingxiao/dsh-any-background" target="_blank">
|
|
4
|
+
<img src="https://img.shields.io/github/stars/Tkingxiao/dsh-any-background?style=social" alt="GitHub stars" />
|
|
5
|
+
</a>
|
|
6
|
+
|
|
7
|
+
[English](README.md) | 中文
|
|
8
|
+
|
|
9
|
+
一个 **DeepSeek Harness** 外观插件，让你完全自定义 Web 端的主题色、背景壁纸，以及分部位精细的透明度与模糊度控制。
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
## 功能特性
|
|
14
|
+
|
|
15
|
+
- **PS 风格色轮** — 在色相环上选取色相，在内嵌方形中调整饱和度与明度。实时生成 30+ 个 CSS 设计令牌并立即生效。
|
|
16
|
+
- **精确 HSL / RGB 输入** — 通过数值精确输入颜色（HSL / RGB 两个标签页），与色轮实时双向同步。
|
|
17
|
+
- **智能取色** — 一键从壁纸提取主题色：采样当前取景框（可见区域）、量化像素、剔除灰色/近黑/近白，选出现量最大的鲜亮色作为主题色。纯客户端 64×64 采样完成，不产生任何 RPC 通信。
|
|
18
|
+
- **吸管取色** — 在壁纸上悬停预览颜色，点击即可选为主题色。
|
|
19
|
+
- **背景壁纸** — 选择任意图片作为壁纸。在视口比例的编辑器中拖动平移、滚轮缩放（以视图中心为锚点），所见即所得。
|
|
20
|
+
- **分部位界面透明度** — 主背景、侧边栏、卡片面板各自独立滑块，另有设置面板与壁纸透明度。
|
|
21
|
+
- **分部位界面模糊度** — 每个界面部位可独立调整毛玻璃 `backdrop-filter` 模糊（0–60 px）。
|
|
22
|
+
- **主题导出 / 导入** — 一键导出为自包含的 `dsh-any-theme.json`（配置 + 壁纸），可随时导入还原。
|
|
23
|
+
- **文件持久化** — 所有设置（颜色、透明度、模糊度、壁纸、编辑器位置）由 Node 端保存到 **文件系统** 的 `~/.dsh/.dsh-any-background-data/`，下次启动自动恢复。不再受 `localStorage` 容量限制。
|
|
24
|
+
- **中英双语** — 完整的中英文界面，自动跟随语言设置。
|
|
25
|
+
- **主题守护** — 后台看门狗定期重新激活自定义主题，即使宿主重置也不会丢失你的选择。
|
|
26
|
+
|
|
27
|
+
## 项目结构
|
|
28
|
+
|
|
29
|
+
```
|
|
30
|
+
dsh-any-background/
|
|
31
|
+
├── package.json # 包元数据、dsh.client 声明、依赖
|
|
32
|
+
├── cordis.patch.yml # 捆绑补丁层（插入到 profile 组合配置中）
|
|
33
|
+
├── cordis.yml # 开发用补丁覆盖层（pnpm dsh web --patch）
|
|
34
|
+
├── tsdown.config.ts # 构建配置：Node 端（ESM）+ 客户端（CJS 浏览器包）
|
|
35
|
+
├── src/
|
|
36
|
+
│ ├── index.ts # Node 端 — 文件持久化（RPC 文件存储）
|
|
37
|
+
│ ├── invariant.ts # 不变量 companion（注册包所有权）
|
|
38
|
+
│ └── client/ # 浏览器端 — 按职责模块化
|
|
39
|
+
│ ├── index.tsx # 生命周期编排（主题、壁纸、i18n、区块、守护）
|
|
40
|
+
│ ├── types.ts # 共享类型定义
|
|
41
|
+
│ ├── state.ts # 内存配置镜像 + 访问器
|
|
42
|
+
│ ├── rpc.ts # 文件持久化 RPC 客户端
|
|
43
|
+
│ ├── wallpaper.ts # 壁纸 DOM 层 + 分部位透明度/模糊度应用
|
|
44
|
+
│ ├── i18n.ts # 中/英词典
|
|
45
|
+
│ ├── styles.ts # 共享内联样式
|
|
46
|
+
│ ├── utils/
|
|
47
|
+
│ │ ├── color.ts # 颜色数学、令牌生成、壁纸取色
|
|
48
|
+
│ │ └── image.ts # 壁纸文件读取（原样 data URL）
|
|
49
|
+
│ └── components/
|
|
50
|
+
│ ├── ThemeSection.tsx # 设置面板区块（所有控件）
|
|
51
|
+
│ ├── ColorWheel.tsx # 色相环 + SL 方形画布
|
|
52
|
+
│ ├── ColorInputs.tsx # 精确 HSL/RGB 输入
|
|
53
|
+
│ ├── ColorPicker.tsx # 吸管取色弹窗
|
|
54
|
+
│ ├── BgEditor.tsx # 壁纸位置/大小编辑器
|
|
55
|
+
│ ├── LiveSlider.tsx # 节流实时滑块
|
|
56
|
+
│ ├── ErrorBoundary.tsx # 面板崩溃兜底
|
|
57
|
+
│ └── icons.tsx # 迁移的导航图标（太阳图标）
|
|
58
|
+
├── lib/ # 构建产物（已提交，安装无需构建步骤）
|
|
59
|
+
│ ├── index.js # Node 入口
|
|
60
|
+
│ ├── invariant.js # 不变量入口
|
|
61
|
+
│ ├── client.js # 浏览器包（经 __ModuleLoader__ 包装）
|
|
62
|
+
│ └── client.js.map # 源码映射
|
|
63
|
+
├── example_img/ # 示例截图
|
|
64
|
+
├── README.md # 英文版说明
|
|
65
|
+
└── README.zh.md # 本文件（中文）
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
## 实现原理
|
|
69
|
+
|
|
48
70
|
本插件是一个 Cordis 插件，分为两个部分：
|
|
49
71
|
|
|
50
|
-
- **Node 端**（`src/index.ts`）— 负责文件持久化。管理 DSH 数据主目录（`~/.dsh/`）下的 `.dsh-any-background-data/`
|
|
51
|
-
- **浏览器端**（`src/client
|
|
72
|
+
- **Node 端**（`src/index.ts`）— 负责文件持久化。管理 DSH 数据主目录（`~/.dsh/`）下的 `.dsh-any-background-data/` 存储，并在专用 `/dsh-any-background` 通道上暴露一组小的 RPC 接口。
|
|
73
|
+
- **浏览器端**（`src/client/`）— 所有 UI 逻辑都在这里。浏览器无法直接读写文件系统，因此通过 Node 端的 RPC 接口读写存储。
|
|
52
74
|
|
|
53
75
|
### 持久化
|
|
54
76
|
|
|
@@ -56,218 +78,220 @@ dsh-any-background/
|
|
|
56
78
|
|
|
57
79
|
```
|
|
58
80
|
~/.dsh/.dsh-any-background-data/
|
|
59
|
-
├── theme-config.json #
|
|
81
|
+
├── theme-config.json # 主题色、分部位透明度与模糊度、设置/壁纸透明度、模糊、壁纸编辑状态
|
|
60
82
|
└── wallpaper.jpg # 选中的背景图片（移除时删除）
|
|
61
83
|
```
|
|
62
84
|
|
|
63
85
|
- 启动时客户端调用 `read`，返回配置以及（如果存在）壁纸的 data URL。
|
|
64
86
|
- 每次设置变更都会同步写回 `theme-config.json`；更换壁纸写入 `wallpaper.jpg`，移除壁纸则删除文件。
|
|
65
|
-
- 存储目录不存在时会自动创建；配置缺失或损坏时回退默认值（并记录警告），所有写入都有错误保护以避免数据丢失。
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
│
|
|
75
|
-
│
|
|
76
|
-
│
|
|
77
|
-
│
|
|
78
|
-
│
|
|
79
|
-
│
|
|
80
|
-
│
|
|
81
|
-
│
|
|
82
|
-
│
|
|
83
|
-
│
|
|
84
|
-
│
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
-
|
|
93
|
-
- `
|
|
94
|
-
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
<
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
-
|
|
116
|
-
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
<
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
<
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
<
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
<
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
```
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
```sh
|
|
206
|
-
|
|
207
|
-
```
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
87
|
+
- 存储目录不存在时会自动创建；配置缺失或损坏时回退默认值（并记录警告），所有写入都有错误保护以避免数据丢失。
|
|
88
|
+
- 旧版配置（单一 `opacity` 字段、无分部位字段）会在加载时自动迁移为分部位结构。
|
|
89
|
+
|
|
90
|
+
### 架构
|
|
91
|
+
|
|
92
|
+
```
|
|
93
|
+
┌─────────────────────────────────────────────────────────┐
|
|
94
|
+
│ apply(ctx) — 插件入口 │
|
|
95
|
+
├─────────────────────────────────────────────────────────┤
|
|
96
|
+
│ │
|
|
97
|
+
│ 1. 恢复保存的颜色 → registerCustom() → setTheme │
|
|
98
|
+
│ 2. 注入渐变 <style> 到 <head> │
|
|
99
|
+
│ 3. 创建状态存储（defineStore） │
|
|
100
|
+
│ 4. applyWp() → 壁纸 + 分部位透明度/模糊度 │
|
|
101
|
+
│ 5. 监听 theme/change → 重新应用 │
|
|
102
|
+
│ 6. ResizeObserver → 视口感知重定位 │
|
|
103
|
+
│ 7. 语言注册（中/英） │
|
|
104
|
+
│ 8. 设置面板注入（ThemeSection） │
|
|
105
|
+
│ 9. 设置导航图标补丁（太阳图标） │
|
|
106
|
+
│ 10. 延迟启动恢复（300ms, 1500ms） │
|
|
107
|
+
│ 11. 主题守护（1 秒间隔） │
|
|
108
|
+
│ │
|
|
109
|
+
└─────────────────────────────────────────────────────────┘
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
### 色轮
|
|
113
|
+
|
|
114
|
+
- 单个 `<canvas>` 元素：色相环（360° 分段）+ 内嵌 SL 方形（HSV S-V 平面）。
|
|
115
|
+
- `hitTest()` 判断点击落在色相环（色相）还是方形（饱和度/明度）上。
|
|
116
|
+
- 色轮拾取的 HSV 值通过 `hsvToHsl()` 转换为 HSL 后传给 `genTokens()`。
|
|
117
|
+
- `genTokens()` 根据所选颜色生成 30+ 个 CSS 自定义属性（`--dsw-alias-*`），根据明度自动选择深色或浅色方案。
|
|
118
|
+
- 完整令牌集以内联样式写入 `<body>`，主题色完全不依赖主题服务的时序。
|
|
119
|
+
- 色轮旁配有**精确输入面板**（HSL / RGB 两个标签页），数值输入与画布实时双向同步。
|
|
120
|
+
|
|
121
|
+
#### 主题色调整
|
|
122
|
+
|
|
123
|
+
<p align="center">
|
|
124
|
+
<img src="example_img/image.png" alt="蓝色主题" width="600">
|
|
125
|
+
<br/>
|
|
126
|
+
<em>蓝色主题 · 较亮 · 默认深色字体</em>
|
|
127
|
+
</p>
|
|
128
|
+
|
|
129
|
+
<p align="center">
|
|
130
|
+
<img src="example_img/image-1.png" alt="粉色主题" width="600">
|
|
131
|
+
<br/>
|
|
132
|
+
<em>粉色主题 · 较暗 · 默认浅色字体</em>
|
|
133
|
+
</p>
|
|
134
|
+
|
|
135
|
+
### 背景壁纸
|
|
136
|
+
|
|
137
|
+
- 一个 `position:fixed; z-index:-1` 的 `<div>` 被插入到 `<body>` 最前面。
|
|
138
|
+
- 选中的图片**原样存储**（原始 data URL，不做任何重编码），壁纸保持完整画质；Node 端写入 `~/.dsh/.dsh-any-background-data/wallpaper.jpg`，客户端在内存中保留 data URL 用于显示。
|
|
139
|
+
- 编辑器弹窗显示视口比例的矩形区域；拖动平移，滚轮缩放（0.1×–10×），以视图中心为锚点。
|
|
140
|
+
- 提交的位置以分数中心坐标 + 原始图片尺寸存储，布局在视口变化时保持一致。
|
|
141
|
+
- 壁纸透明度直接作用于 `<div>` 元素；壁纸模糊通过 `filter: blur()` 实现。
|
|
142
|
+
|
|
143
|
+
#### 背景图片
|
|
144
|
+
|
|
145
|
+
<p align="center">
|
|
146
|
+
<img src="example_img/image-2.png" alt="壁纸透明度和模糊调整" width="600">
|
|
147
|
+
<br/>
|
|
148
|
+
<em>壁纸透明度和模糊调整</em>
|
|
149
|
+
</p>
|
|
150
|
+
|
|
151
|
+
#### 编辑器调整
|
|
152
|
+
|
|
153
|
+
<p align="center">
|
|
154
|
+
<img src="example_img/image-3.png" alt="编辑器调整" width="400">
|
|
155
|
+
<img src="example_img/image-4.png" alt="背景实际对应" width="400">
|
|
156
|
+
<br/>
|
|
157
|
+
<em>编辑器调整 · 背景实际对应</em>
|
|
158
|
+
</p>
|
|
159
|
+
|
|
160
|
+
### 界面透明度与模糊度
|
|
161
|
+
|
|
162
|
+
每个界面部位都有独立的**透明度**和**模糊度**滑块。透明度通过以该部位的 alpha 重新输出主题表面令牌实现；模糊度通过 AppFrame 各列上的 `backdrop-filter: blur()` 实现（设置面板通过 CSS 变量）。
|
|
163
|
+
|
|
164
|
+
| 部位 | 透明度字段 | 模糊度字段 | 默认透明度 | 实现方式 |
|
|
165
|
+
|------|-----------|-----------|-----------|---------|
|
|
166
|
+
| 主背景 | `opacities.bg` | `blurs.bg` | 85% | `<body>` 上的内联令牌覆盖 |
|
|
167
|
+
| 侧边栏 | `opacities.sidebar` | `blurs.sidebar` | 93% | `<body>` 上的内联令牌覆盖 |
|
|
168
|
+
| 卡片面板 | `opacities.card` | `blurs.card` | 100% | `<body>` 上的内联令牌覆盖 |
|
|
169
|
+
| 设置面板 | `settingsOpacity` | `blurs.settings` | 100% | CSS 变量，通过 `[aria-modal]` 选择器定位 |
|
|
170
|
+
| 壁纸 | `wallpaperOpacity` | — | 100% | 壁纸 `<div>` 上的 `style.opacity` |
|
|
171
|
+
|
|
172
|
+
#### 设置透明度
|
|
173
|
+
|
|
174
|
+
<p align="center">
|
|
175
|
+
<img src="example_img/image-5.png" alt="设置透明度100%" width="400">
|
|
176
|
+
<img src="example_img/image-6.png" alt="设置透明度49%" width="400">
|
|
177
|
+
<br/>
|
|
178
|
+
<em>设置透明度 100% · 设置透明度 49%</em>
|
|
179
|
+
</p>
|
|
180
|
+
|
|
181
|
+
#### 主界面透明度
|
|
182
|
+
|
|
183
|
+
<p align="center">
|
|
184
|
+
<img src="example_img/image-6.png" alt="主界面透明度100%" width="400">
|
|
185
|
+
<img src="example_img/image-7.png" alt="主界面透明度0%" width="400">
|
|
186
|
+
<br/>
|
|
187
|
+
<em>主界面透明度 100% · 主界面透明度 0%</em>
|
|
188
|
+
</p>
|
|
189
|
+
|
|
190
|
+
#### 壁纸透明度
|
|
191
|
+
|
|
192
|
+
<p align="center">
|
|
193
|
+
<img src="example_img/image-8.png" alt="壁纸透明度100%" width="400">
|
|
194
|
+
<img src="example_img/image-9.png" alt="壁纸透明度50%" width="400">
|
|
195
|
+
<br/>
|
|
196
|
+
<em>壁纸透明度 0% · 壁纸透明度 100%</em>
|
|
197
|
+
</p>
|
|
198
|
+
|
|
199
|
+
#### 壁纸模糊
|
|
200
|
+
|
|
201
|
+
<p align="center">
|
|
202
|
+
<img src="example_img/image-10.png" alt="壁纸模糊50%" width="400">
|
|
203
|
+
<img src="example_img/image-11.png" alt="壁纸模糊0%" width="400">
|
|
204
|
+
<br/>
|
|
205
|
+
<em>壁纸模糊 50% · 壁纸模糊 0%</em>
|
|
206
|
+
</p>
|
|
207
|
+
|
|
208
|
+
### 主题导出 / 导入
|
|
209
|
+
|
|
210
|
+
- **导出** — 下载自包含的 `dsh-any-theme.json`：完整配置（主题色、分部位透明度与模糊度、壁纸设置）加上壁纸的原始 data URL，文件可独立携带。
|
|
211
|
+
- **导入** — 从主题文件应用配置与壁纸，并通过常规路径持久化（配置 → `theme-config.json`，壁纸 → `wallpaper.jpg`）。缺少新字段的旧格式文件会自动迁移为默认值。
|
|
212
|
+
|
|
213
|
+
## 安装方式
|
|
214
|
+
|
|
215
|
+
### 方式一：npm 安装（推荐）
|
|
216
|
+
|
|
217
|
+
直接从 GitHub 安装插件到 Web profile：
|
|
218
|
+
|
|
219
|
+
```sh
|
|
220
|
+
dsh plugin --profile web add github:Tkingxiao/dsh-any-background
|
|
221
|
+
# 或，若已发布到 registry：
|
|
222
|
+
dsh plugin --profile web add dsh-any-background
|
|
223
|
+
```
|
|
224
|
+
|
|
225
|
+
然后启动 Web UI：
|
|
226
|
+
|
|
227
|
+
```sh
|
|
228
|
+
dsh web
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
插件将作为 **"主题"** 分区出现在设置面板中。
|
|
232
|
+
|
|
233
|
+
### 方式二：npx（无需全局安装）
|
|
234
|
+
|
|
235
|
+
如果没有全局安装 `dsh`，可以使用 `npx`：
|
|
236
|
+
|
|
237
|
+
```sh
|
|
238
|
+
npx @deepseek-ai/dsh plugin --profile web add github:Tkingxiao/dsh-any-background
|
|
239
|
+
# 或：
|
|
240
|
+
npx @deepseek-ai/dsh plugin --profile web add dsh-any-background
|
|
241
|
+
```
|
|
242
|
+
|
|
243
|
+
然后启动：
|
|
244
|
+
|
|
245
|
+
```sh
|
|
246
|
+
npx @deepseek-ai/dsh web
|
|
247
|
+
```
|
|
248
|
+
|
|
249
|
+
### 方式三：本地构建（开发模式）
|
|
250
|
+
|
|
251
|
+
`lib/` 目录已提交，安装无需构建步骤。若修改了 `src/` 需要重新构建（需 Node + pnpm）：
|
|
252
|
+
|
|
253
|
+
```sh
|
|
254
|
+
# 1. 克隆本仓库
|
|
255
|
+
git clone https://github.com/Tkingxiao/dsh-any-background.git
|
|
256
|
+
cd dsh-any-background
|
|
257
|
+
|
|
258
|
+
# 2. 安装构建工具（同时拉取 @deepseek-ai/dsh-home-paths 运行时依赖）
|
|
259
|
+
pnpm install
|
|
260
|
+
|
|
261
|
+
# 3. 重新构建 lib/
|
|
262
|
+
pnpm run bundle
|
|
263
|
+
|
|
264
|
+
# 4. 从本地安装到 web profile
|
|
265
|
+
# （`dsh plugin add` 是 `pnpm add <dir>` 的封装，传入本目录即可）
|
|
266
|
+
pnpm dsh plugin --profile web add "dsh-any-background"
|
|
267
|
+
|
|
268
|
+
# 5. 启动
|
|
269
|
+
pnpm dsh web
|
|
270
|
+
```
|
|
271
|
+
|
|
272
|
+
## 兼容性
|
|
273
|
+
|
|
274
|
+
插件同时支持 **Web 界面** 和 **桌面客户端**：
|
|
275
|
+
|
|
276
|
+
- **[`dsh web`](https://github.com/deepseek-ai/deepseek-harness)** — Web profile，完整支持。
|
|
277
|
+
- **[deepseek-harness-desktop](https://github.com/anywhere-labs/deepseek-harness-desktop)** — 已支持，但存在一个已知的 Electron 打包问题：**左侧边栏与主区域的透明度相反**（侧边栏看起来比主区域更透明，反之亦然）。这是客户端侧打包问题，并非插件缺陷 —— 我们正在等待桌面客户端更新修复。
|
|
278
|
+
|
|
279
|
+
## 依赖
|
|
280
|
+
|
|
281
|
+
| 包名 | 用途 |
|
|
282
|
+
|------|------|
|
|
283
|
+
| `@deepseek-ai/cordis` | 插件框架（Cordis） |
|
|
284
|
+
| `@deepseek-ai/dsh-home-paths` | 解析 DSH 数据主目录，用于持久化存储 |
|
|
285
|
+
| `@deepseek-ai/dsh-client-runtime` | 客户端运行时 + `defineStore` |
|
|
286
|
+
| `@deepseek-ai/dsh-client-locale` | 国际化（中/英） |
|
|
287
|
+
| `@deepseek-ai/dsh-client-ui-theme` | 主题服务（register/setTheme/overrideTokens） |
|
|
288
|
+
| `@deepseek-ai/dsh-invariants` | 包不变量 companion |
|
|
289
|
+
| `react` ^18.2.0 | UI 渲染 |
|
|
290
|
+
|
|
291
|
+
## Star History
|
|
292
|
+
|
|
293
|
+
[](https://www.star-history.com/?repos=Tkingxiao%2Fdsh-any-background&type=timeline&legend=bottom-right)
|
|
294
|
+
|
|
295
|
+
## 许可证
|
|
296
|
+
|
|
297
|
+
MIT
|