forked from 27hrs/dsh-long-skin
9c06acf15b
- 双图层交叉淡化人像过渡：备用层加载完成才淡入，无白闪；拖动 120ms 快速过渡、落定 340ms 慢速过渡，prefers-reduced-motion 直切 - 滑块位置固定：原生模型座位按钮级 180px 固定足迹（选择器限定 button，避免误伤 label/effort 子元素）+ 滑块 flex 固定尺寸 + 交互期 rAF 漂移补偿 - 原生推理等级与滑块实时同步：拖动预览乐观回写共享 directory store，松手提交、失败/Esc/取消自动回滚 - 滑动更丝滑：移除图片序列模式下对隐藏 video 的每帧 seek，24 张锚点预加载 + decoding=async，交叉淡化走合成器动画 - 滑块自定义光标：liang-cursor.cur（热点居中 16,16），加载失败回退 ew-resize - 版本升至 0.2.0，随包新增 CHANGELOG.md 优化说明
73 lines
3.6 KiB
Markdown
73 lines
3.6 KiB
Markdown
# 滑动变祖 · 社区优化版 0.2.0
|
||
|
||
基于上游 [kingOfSoySauce/dsh-liang-skin](https://github.com/kingOfSoySauce/dsh-liang-skin) v0.1.5 优化，
|
||
已针对 DeepSeek Harness `0.1.0-rc.6` 验证。本包为**本地优化构建**，未推送上游仓库。
|
||
|
||
## 优化清单
|
||
|
||
1. **图像过渡更自然（交叉淡化）**
|
||
- 原版：切换推理等级时直接硬换人像 `src`，跳变生硬。
|
||
- 现版：双图层交叉淡化（备用层先加载、加载完成才淡入，不出现白闪），并叠加轻微
|
||
缩放（1.018→1）缓动。拖动中快速过渡（120ms，跟手），松手落定时慢速过渡
|
||
（340ms ease-out）；`prefers-reduced-motion` 用户自动降级为直切。
|
||
|
||
2. **滑块位置固定，切换等级不再移位**
|
||
- 根源：原生「模型 · 等级」座位宽度随等级文本变化，在右锚定 flex 行里把滑块挤动。
|
||
- 修复：① 原生座位按钮固定 180px 足迹（模型名省略号吸收变化）；② 滑块自身
|
||
`flex: 0 0 124px` 固定尺寸；③ 交互/提交期间 rAF 逐帧检测漂移并用 `translateX`
|
||
补偿，把滑块钉在屏幕上，结束后 200ms 平滑回位。
|
||
- 注意：固定宽度的选择器必须限定为 `button[class*="_7KE1Ra_trigger"]`——宿主的
|
||
`_7KE1Ra_triggerLabel`/`_7KE1Ra_triggerEffort` 子元素类名包含同样子串，宽选择器
|
||
会误伤并把等级文本挤出按钮。
|
||
|
||
3. **原生推理等级与滑块实时同步（新增）**
|
||
- 拖动预览期间把最近档位乐观回写共享 directory store（`SnapshotStore.update`），
|
||
原生座位实时跟随滑块档位变化；松手才经官方 `ModelDirectory.select` 提交，
|
||
失败 / Esc / 取消时自动回滚到交互前快照。
|
||
|
||
4. **滑动更丝滑**
|
||
- 移除图片序列模式下每帧对隐藏 `<video>` 的无谓 seek（原版最大卡顿源），
|
||
仅视频回退模式保留 seek；24 张人像锚点全量预加载 + `decoding="async"`；
|
||
交叉淡化走 opacity/transform 合成器动画（`will-change`），不触发重排。
|
||
|
||
5. **滑块自定义光标**
|
||
- 使用 `.cur` 标准光标（type=cursor、热点 16,16 居中），挂载于滑块交互区，
|
||
加载失败自动回退 `ew-resize`。源素材为 32×32 的 `.ico`，已在打包时一并附带。
|
||
|
||
6. **修复：模型名与推理等级拆开显示（回归修复）**
|
||
- 问题：固定原生座位宽度时子串选择器误伤子元素，等级文本被挤出按钮、孤立显示。
|
||
- 修复：选择器限定按钮本身，「DeepSeek-V4-Pro · 高」恢复一体显示。
|
||
|
||
## 与上游 v0.1.5 的差异
|
||
|
||
| 文件 | 说明 |
|
||
| --- | --- |
|
||
| `src/client/index.tsx` | 双图层 crossfade 呈现器、seek 条件化、预览乐观同步 + 回滚、位置锁定 |
|
||
| `src/client/skin.css` | crossfade 过渡、滑块固定尺寸、按钮级固定宽度、自定义光标 |
|
||
| `src/index.js` | 静态路由新增 `liang-cursor.cur` / `liang-cursor.ico` |
|
||
| `assets/liang-cursor.cur` / `.ico` | 新增光标资产 |
|
||
| `lib/client.js` / `.map` | 重新构建的客户端产物 |
|
||
|
||
## 安装（tarball）
|
||
|
||
```sh
|
||
dsh plugin --profile web add ./dsh-client-liang-intensity-skin-0.2.0.tgz
|
||
```
|
||
|
||
安装后重启 DSH Web 生效；入口仍为「设置 → 通用设置 → 外观皮肤 → 滑动变祖」，
|
||
「滑动变祖绑定思考等级」开关控制滑块是否联动推理等级。
|
||
|
||
## 卸载 / 回退
|
||
|
||
```sh
|
||
dsh plugin --profile web remove dsh-client-liang-intensity-skin
|
||
```
|
||
|
||
## 构建与测试
|
||
|
||
```sh
|
||
npm install
|
||
npm test # 8/8 通过（vitest，沙箱环境需 --pool=threads）
|
||
npm run build # esbuild 产出 lib/client.js
|
||
```
|