feat: 皮肤兼容（令牌驱动）+ CSS 修复（#106 #105 #90 #60，附带 #52 #57 #92）

[Menghuan1918]

概要

本 PR 的目标是与 dsh-web-ui 皮肤中心兼容（并覆盖 #106、#105、#60、#90），方案是令牌驱动：不引入任何自有令牌/钩子/类名契约，侧边栏只消费 DSH 标准令牌，皮肤系统覆盖什么令牌就跟随什么。附带独立修复 #52、#57 前半、#92。

兼容机制（调研确认）

dsh-web-ui 的 10 款皮肤全部覆盖 --dsw-static-* + --dsw-alias-* 两层令牌（--dsw-alias-bg-layer-1 做成半透明玻璃 rgba 0.16–0.7，--dsw-specific-sidebar-fill 也全部覆盖）。因此 better-sidebar 消费标准令牌即自动换肤，不需要 aionui 那种每款皮肤 remap 一套 --aion-* 令牌的重适配。

改动

🎨 令牌驱动兼容

• 面板表面：.panel/.bottomPanel 背景从 var(--dsw-specific-sidebar-fill)（宿主左导航专属令牌，皮肤按左导航语义覆盖它）改为 var(--dsw-alias-bg-layer-1)（通用卡片表面，10 款皮肤全覆盖）——dsh-web-ui 皮肤中心换肤后面板自动跟随，零每皮肤适配（UI字体没有跟随主题色 #60/希望可以配置透明度、颜色等，和其他主题根本不搭配 #105/适配DSH-Transparent-UI-Plugin的实践 #106）。stock 外观色阶仅 ±8 RGB 差异。
• 终端/编辑器透明度回退（TerminalView 读取 --dsw-alias-bg-base 建议对 transparent 也走回退（与皮肤类插件的令牌冲突） #90）：effectiveTokenValue 新增 alpha 阈值——transparent 与 alpha < 0.9 的半透明玻璃值（dsh-web-ui 皮肤 bg-base 为 rgba 0.16–0.7）一律回退不透明底色，文字永不叠在皮肤背景画上滚动；≥ 0.9 的近不透明值（如皮肤作用域 0.96 瓷器玻璃）放行，皮肤仍可控终端表面。新增 colorAlpha() 解析 computed 颜色（rgb/rgba/hsl/hsla 逗号与空格语法、#hex 家族）。

📐 独立修复（与皮肤兼容无关）

• z-index（Cordis 插件的弹出框会被底部工作台遮挡 #52）：面板 50→40、按钮簇 55→45、角手柄移入面板后为面板内局部 2——低于 DSH 浮层栈（100/1000+，30–99 无 DSH 元素），Cordis 弹出框不再被底部工作台遮挡。
• 角手柄几何 CSS 化：移入右面板，position: absolute; left: -6px; bottom: calc(var(--dsh-sidebar-height) + 6px)，删除 JS 内联 viewport 坐标（cornerRef 一并移除）。
• 刷新按钮统一 14px（两处 UI 问题：刷新按钮图标大小不一致；分屏后新预览不进入预览 Tab 组 #57 前半）。
• 拖拽逐帧回归 e2e（[Bug] 拖动侧边栏分栏线时主会话框左右抖动（0.12.1 回归） #92）：真实挂载下 rAF 采样（拖条以 cursor: col-resize 语义定位），断言拖拽期间 data-dsh-sidebar-dragging 存在、#root transition 为 none、会话列与面板边单调 1:1 跟随（实测通过，现行代码无抖动）。

🗑️ 按 KISS 回退（首版方案）

• 首版曾实现 panel 家族类名 kebab-case 改名（breaking）与 data-bs-* 语义钩子——令牌驱动下均不需要，已全部回退（tests/skin-hooks.spec.tsx 删除；mount e2e 改为断言 --dsh-sidebar-width 布局变量随面板挂载生效）。
• 文档：AGENTS.md §8 重写为「皮肤兼容（令牌驱动）」；docs/plans/2026-08-15-skin-compat-design.md 记录决策与回退。
• 不改版本号、不更新 README——发布时统一处理。

测试

• tests/theme.spec.ts：colorAlpha（hex/rgb/hsl/不可解析）+ effectiveTokenValue（transparent/关键词/半透明回退/0.96 放行/缺失）。
• tests/e2e/mount.e2e.ts：布局变量挂载断言；tests/e2e/drag-layout.e2e.ts：拖拽逐帧回归。
• pnpm typecheck && pnpm test（511）&& pnpm build && pnpm pack && pnpm test:mount 全绿（真实 DSH 挂载 + 无头渲染 + 拖拽逐帧验证）。

[Menghuan1918]

@codex CR

[chatgpt-codex-connector]

Code Review

[P2] Correct the corner handle’s vertical offset

The corner handle is 12 px too high. Because it is absolutely positioned inside the full-height right panel, bottom measures the distance from the panel’s bottom edge to the handle’s bottom edge. For a 12 px handle centered on the bottom-panel seam, the correct offset is sidebar height - 6px, not sidebar height + 6px.

With a 300 px bottom panel, the current declaration places the handle from 318–306 px above the viewport bottom, while the seam is 300 px above it. This contradicts the documented “intersection” behavior and makes the diagonal resize target visually and interactively detached from the panel corner. Change the expression to:

bottom: calc(var(--dsh-sidebar-height, 0px) - 6px);

The existing structural test only checks that the handle has no inline style, so it cannot detect this geometry regression. Consider adding an actual bounding-box assertion to the mount test. src/client/sidebar.module.cssL271-L285

Checks

• ✅ pnpm typecheck
• ⚠️ pnpm test (Vitest did not complete in the available run and was terminated; no test failure was reported before termination.)
• ✅ git diff --check HEAD^ HEAD

No repository changes were made, so no commit or follow-up pull request was created.

View task →