dsh-any-background 0.1.7 → 0.1.8

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.zh.md CHANGED
@@ -10,288 +10,120 @@
10
10
 
11
11
  ---
12
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
-
70
- 本插件是一个 Cordis 插件,分为两个部分:
71
-
72
- - **Node 端**(`src/index.ts`)— 负责文件持久化。管理 DSH 数据主目录(`~/.dsh/`)下的 `.dsh-any-background-data/` 存储,并在专用 `/dsh-any-background` 通道上暴露一组小的 RPC 接口。
73
- - **浏览器端**(`src/client/`)— 所有 UI 逻辑都在这里。浏览器无法直接读写文件系统,因此通过 Node 端的 RPC 接口读写存储。
74
-
75
- ### 持久化
76
-
77
- 由于插件运行在浏览器中,持久化数据由 **Node 端** 写入磁盘:
78
-
79
- ```
80
- ~/.dsh/.dsh-any-background-data/
81
- ├── theme-config.json # 主题色、分部位透明度与模糊度、设置/壁纸透明度、模糊、壁纸编辑状态
82
- └── wallpaper.jpg # 选中的背景图片(移除时删除)
83
- ```
84
-
85
- - 启动时客户端调用 `read`,返回配置以及(如果存在)壁纸的 data URL。
86
- - 每次设置变更都会同步写回 `theme-config.json`;更换壁纸写入 `wallpaper.jpg`,移除壁纸则删除文件。
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
- #### 主题色调整
13
+ ## 截图
122
14
 
123
15
  <p align="center">
124
- <img src="example_img/image.png" alt="蓝色主题" width="600">
16
+ <img src="example_img/image.png" alt="自定义主页" width="720">
125
17
  <br/>
126
- <em>蓝色主题 · 较亮 · 默认深色字体</em>
18
+ <em>自定义主页 · 壁纸与主题色同时生效</em>
127
19
  </p>
128
20
 
129
21
  <p align="center">
130
- <img src="example_img/image-1.png" alt="粉色主题" width="600">
22
+ <img src="example_img/image-2.png" alt="主题色选择器" width="720">
131
23
  <br/>
132
- <em>粉色主题 · 较暗 · 默认浅色字体</em>
24
+ <em>主题色选择器 · PS 风格色轮 + 精确 HSL/RGB 输入</em>
133
25
  </p>
134
26
 
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
27
  <p align="center">
146
- <img src="example_img/image-2.png" alt="壁纸透明度和模糊调整" width="600">
28
+ <img src="example_img/image-3.png" alt="分部位透明度与模糊度" width="720">
147
29
  <br/>
148
- <em>壁纸透明度和模糊调整</em>
30
+ <em>分部位透明度与模糊度 · 主背景、侧边栏、卡片、设置面板</em>
149
31
  </p>
150
32
 
151
- #### 编辑器调整
152
-
153
33
  <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">
34
+ <img src="example_img/image-4.png" alt="背景编辑器" width="720">
156
35
  <br/>
157
- <em>编辑器调整 · 背景实际对应</em>
36
+ <em>背景编辑器 · 图片壁纸支持拖动平移与滚轮缩放</em>
158
37
  </p>
159
38
 
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
39
  <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">
40
+ <img src="example_img/image-6.png" alt="动态生成背景" width="720">
177
41
  <br/>
178
- <em>设置透明度 100% · 设置透明度 49%</em>
42
+ <em>动态生成背景 · 网格渐变 / Shader / 几何图案预设</em>
179
43
  </p>
180
44
 
181
- #### 主界面透明度
182
-
183
45
  <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">
46
+ <img src="example_img/image-9.png" alt="几何背景 低多边形模式" width="720">
186
47
  <br/>
187
- <em>主界面透明度 100% · 主界面透明度 0%</em>
48
+ <em>动态生成背景 · 几何 低多边形模式预览</em>
188
49
  </p>
189
50
 
190
- #### 壁纸透明度
191
-
192
51
  <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">
52
+ <img src="example_img/image-10.png" alt="配置导出导入" width="720">
195
53
  <br/>
196
- <em>壁纸透明度 0% · 壁纸透明度 100%</em>
54
+ <em>配置的导出和导入进行分享</em>
197
55
  </p>
198
56
 
199
- #### 壁纸模糊
57
+ ## 功能特性
200
58
 
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>
59
+ - **PS 风格色轮** — 在色相环上选取色相,在内嵌方形中调整饱和度与明度,实时生成 30+ 个 CSS 设计令牌。
60
+ - **精确 HSL / RGB 输入** — 通过数值精确输入颜色,与色轮实时双向同步。
61
+ - **智能取色** — 一键从壁纸提取主题色:采样可见区域、量化像素、剔除灰色/近黑/近白,选出现量最大的鲜亮色。纯客户端完成。
62
+ - **吸管取色** — 在壁纸上悬停预览颜色,点击即可选为主题色。
63
+ - **背景壁纸** — 上传任意图片作为壁纸,在视口比例的编辑器中拖动平移、滚轮缩放。
64
+ - **动态生成背景** — 支持网格渐变、Shader、几何图案,可调节扩散范围、色彩强度并锁定种子。
65
+ - **分部位界面透明度** — 主背景、侧边栏、卡片面板、设置面板与壁纸各自独立滑块。
66
+ - **分部位界面模糊度** — 每个界面部位可独立调整毛玻璃 `backdrop-filter` 模糊(0–60 px)。
67
+ - **主题导出 / 导入** — 一键导出为自包含的 `dsh-any-theme.json`(配置 + 壁纸),可随时导入还原。
68
+ - **文件持久化** — 所有设置保存到文件系统 `~/.dsh/.dsh-any-background-data/`,不再依赖 `localStorage`。
69
+ - **中英双语** — 完整的中英文界面,自动跟随语言设置。
70
+ - **主题守护** — 宿主重置主题后自动重新激活自定义主题。
207
71
 
208
- ### 主题导出 / 导入
72
+ ## 近期优化
209
73
 
210
- - **导出** — 下载自包含的 `dsh-any-theme.json`:完整配置(主题色、分部位透明度与模糊度、壁纸设置)加上壁纸的原始 data URL,文件可独立携带。
211
- - **导入** — 从主题文件应用配置与壁纸,并通过常规路径持久化(配置 → `theme-config.json`,壁纸 → `wallpaper.jpg`)。缺少新字段的旧格式文件会自动迁移为默认值。
74
+ - **消除启动闪屏** — 主题令牌改为通过独立的 `!important` 样式表注入,可抵御宿主主题服务的重置。
75
+ - **修复色轮覆盖** — 色相环绘制在饱和度/明度方形之上,方形四角不再遮挡色环。
76
+ - **灵感色板选中重置** — 在色轮中选取主题色后,灵感色板中的之前选中状态自动清除。
77
+ - **移除调试埋点** — 清理了临时的启动日志与 `MutationObserver` 探针代码。
78
+ - **分部位模糊隔离** — 模糊效果施加在 `::before` 伪元素上,避免影响宿主固定定位的设置弹窗。
212
79
 
213
- ## 安装方式
80
+ ## 安装
214
81
 
215
82
  ### 方式一:npm 安装(推荐)
216
83
 
217
- 直接从 GitHub 安装插件到 Web profile:
218
-
219
84
  ```sh
220
85
  dsh plugin --profile web add github:Tkingxiao/dsh-any-background
221
- # 或,若已发布到 registry:
86
+ # 若已发布到 registry:
222
87
  dsh plugin --profile web add dsh-any-background
223
88
  ```
224
89
 
225
- 然后启动 Web UI:
90
+ 然后启动:
226
91
 
227
92
  ```sh
228
93
  dsh web
229
94
  ```
230
95
 
231
- 插件将作为 **"主题"** 分区出现在设置面板中。
96
+ 插件会出现在设置面板的 **“主题”** 分类中。
232
97
 
233
98
  ### 方式二:npx(无需全局安装)
234
99
 
235
- 如果没有全局安装 `dsh`,可以使用 `npx`:
236
-
237
100
  ```sh
238
101
  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
102
  npx @deepseek-ai/dsh web
247
103
  ```
248
104
 
249
- ### 方式三:本地构建(开发模式)
105
+ ### 方式三:本地构建(开发)
250
106
 
251
- `lib/` 目录已提交,安装无需构建步骤。若修改了 `src/` 需要重新构建(需 Node + pnpm):
107
+ `lib/` 目录已提交,安装后无需构建。修改 `src/` 后重新构建:
252
108
 
253
109
  ```sh
254
- # 1. 克隆本仓库
255
110
  git clone https://github.com/Tkingxiao/dsh-any-background.git
256
111
  cd dsh-any-background
257
-
258
- # 2. 安装构建工具(同时拉取 @deepseek-ai/dsh-home-paths 运行时依赖)
259
112
  pnpm install
260
-
261
- # 3. 重新构建 lib/
262
113
  pnpm run bundle
263
-
264
- # 4. 从本地安装到 web profile
265
- # (`dsh plugin add` 是 `pnpm add <dir>` 的封装,传入本目录即可)
266
114
  pnpm dsh plugin --profile web add "dsh-any-background"
267
-
268
- # 5. 启动
269
115
  pnpm dsh web
270
116
  ```
271
117
 
272
118
  ## 兼容性
273
119
 
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 渲染 |
120
+ - **[`dsh web`](https://github.com/deepseek-ai/deepseek-harness)** — 完全支持。
121
+ - **[deepseek-harness-desktop](https://github.com/anywhere-labs/deepseek-harness-desktop)** — 支持;已知 Electron 打包问题导致左侧边栏与中心区域透明度显示相反,需等待桌面端更新修复。
290
122
 
291
123
  ## Star History
292
124
 
293
125
  [![Star History Chart](https://api.star-history.com/chart?repos=Tkingxiao/dsh-any-background&type=timeline&legend=bottom-right&sealed_token=f5MhnHibC049CC0Ed_nZX8rYpIq2wPTdTXUsPPafAiYxYKOeqyKyMFirxKppeLNJygxv1iw2BlsnCYOWgu9zN6ffr7kJlAG1SlRoQRmQivCIkPzZ2lhSBQ)](https://www.star-history.com/?repos=Tkingxiao%2Fdsh-any-background&type=timeline&legend=bottom-right)
294
126
 
295
- ## 许可证
127
+ ## 许可
296
128
 
297
129
  MIT
package/cordis.patch.yml CHANGED
@@ -1,8 +1,8 @@
1
- # Deep Midnight theme plugin: bundle patch layer.
2
- # When this package is installed into a profile via `dsh plugin add`,
3
- # this patch is applied as a layer, inserting the theme plugin row
4
- # into the composed configuration.
5
-
6
- - insert:
7
- - id: dsh-any-background
8
- name: 'dsh-any-background'
1
+ # Deep Midnight theme plugin: bundle patch layer.
2
+ # When this package is installed into a profile via `dsh plugin add`,
3
+ # this patch is applied as a layer, inserting the theme plugin row
4
+ # into the composed configuration.
5
+
6
+ - insert:
7
+ - id: dsh-any-background
8
+ name: 'dsh-any-background'