dsh-sidebar-suite 0.2.8 → 0.2.9

package/CHANGELOG.md

@@ -1,12 +1,27 @@
 # 更新日志 / Changelog
 
-> 版本号以 npm registry **实际发布记录**为准（当前：`0.0.0-stage`、`0.1.3`、`0.2.4`、`0.2.5`、`0.2.6`、`0.2.7`、`0.2.8`）。
+> 版本号以 npm registry **实际发布记录**为准（当前：`0.0.0-stage`、`0.1.3`、`0.2.4`、`0.2.5`、`0.2.6`、`0.2.7`、`0.2.8`、`0.2.9`）。
 > `0.2.0`、`0.2.1`、`0.2.2`、`0.2.3` 是开发过程中的本地迭代号，**从未单独发布**；它们的功能一次性随 `0.2.4` 上线，所以在下面合并记录。
 >
 > Versions mirror the npm registry. `0.2.0`–`0.2.3` were local iteration numbers that were never published on their own; all of their features shipped together in `0.2.4`.
 
 ---
 
+## 0.2.9 — 布局栏重做 + 视觉精修 / Toolbar rebuilt as a segmented control（2026-11-11）
+
+**这次改了运行时代码**（`lib/client.js`），所以**升级后要托盘退出 DSH 再重开一次**。This release touches `lib/client.js`; quit DSH from the tray and reopen once after upgrading.
+
+- **布局栏改成图标分段控件** — 三个互斥布局（折叠 / 标签页 / 浮层）装进同一枚圆角胶囊，选中的那个白底 + 1px 投影；当前布局专用的动作按钮隔一道竖线排在右侧。原来是一排文字按钮，宽窄都不好看。The three mutually exclusive layouts now share one rounded pill (active = light fill + 1 px shadow), with the layout-specific action buttons on the far side of a divider.
+- **图标是矢量，不是拼出来的色块** — 8 个图标（布局 ×3、折叠、全部折叠、换标签页、浮出、换布局）全部改成 CSS `mask-image` 内联 SVG，用 `currentColor` 上色，所以深浅主题自动跟随，放大也不糊。原先用两个伪元素拼边框，22×8 的盒子里根本画不完整。All eight glyphs are inline-SVG masks painted in `currentColor`, so they follow the host theme and stay sharp; the old pseudo-element shapes could not fit the 22×8 box they were given.
+- **修掉 0.2.8 的塌陷** — 上一版 `line-height:0` + `padding:4px 5px` 把按钮压成 **22×8**，图标被裁成几根线，右侧按钮还被挤出可视区。现在按钮固定 **28×26**、图标 16px、`padding:0`，实测在 280px 侧栏里间距正确。The 0.2.8 bar collapsed to 22×8 with clipped glyphs; buttons are now 28×26 with 16 px icons and zero padding.
+- **两个折叠按钮不再长得一样** — 布局 A 下「展开扩展」和「展开工作区」并排，原来共用同一个下箭头图标，只能靠悬停提示区分。现在前者单箭头、后者双箭头。In layout A the two fold buttons sat side by side with an identical glyph; they now use a single vs. double chevron.
+- **「换布局」按钮终于有图标** — 该按钮此前没有任何 glyph，开了 `showQuickSwitch` 会显示一个空白按钮。The cycle button had no glyph at all and rendered blank when enabled.
+- **窄 / 宽自适应** — 窄侧栏（< 300px）只留图标、悬停显示文字；拖宽后动作按钮把文字长回来（`min-width:max-content` —— 这里不能靠 `flex:none`，宿主的按钮样式会把它压回 48px）。Icon-only below 300 px with tooltips; action buttons regain their labels when the column widens.
+- **会话行** — 选中行加一条 2px 内嵌强调色竖条（取宿主 `--dsw-alias-state-business-primary`，跟着工作区主题色走），并给行加 `tabular-nums` 让时间列数字等宽。只在选中态、且不在折叠图标条里生效。The active row gets a 2 px inset accent rail in the workspace's own theme colour, and rows use tabular numerals so the time column stops jittering.
+- **测试** — 新增 `tests/test_029.mjs`（源码契约：分段结构、8 个图标定义与按钮属性、尺寸、窄宽规则、强调条、版本与文档），`npm test` 链扩为 7 套。
+
+---
+
 ## 0.2.8 — 设置全图形化 + 配置热重载 / Graphical settings & hot reload（2026-11-11）
 
 **这次改了运行时代码**（`lib/client.js`、`lib/temp-session-host.mjs`），所以**升级后要托盘退出 DSH 再重开一次**；但从此以后改任何设置都不用再重启。

package/DETAIL.md

@@ -36,7 +36,7 @@ Each card draws a small diagram of its layout, and the selected one is marked as
 ### 美观性 / Looks native
 
 - **不另起一套皮肤 / No custom skin** — 颜色、边框、文字层级全部取宿主的设计变量（`--dsw-alias-*`），深色 / 浅色主题自动跟随，侧栏里不会出现一块「外来的」色块。Colours, borders and text levels come from the host's own design tokens, so light and dark themes both look native.
-- **视觉重量对齐 / Same visual weight** — 控制栏用 11px 细字号、6px 圆角、1px 分隔线，和宿主按钮同一量级；选中态只加一层浅底色和半粗字重，不用刺眼高亮。The bar uses 11 px text, 6 px radii and a 1 px divider; the active state is a subtle tint plus medium weight.
+- **视觉重量对齐 / Same visual weight** — 0.2.9 起控制栏换成 **28×26 的图标按钮 + 16px 矢量图标**：三个布局装进一枚圆角胶囊（选中项白底 + 1px 投影），动作按钮用 1px 竖线分隔。图标是 CSS mask（`currentColor` 上色），所以跟着宿主主题走；窄侧栏只留图标，宽于 300px 时动作按钮把文字长回来。Since 0.2.9 the bar is 28×26 icon buttons with 16 px vector glyphs: the three layouts share a rounded pill (active = light fill + 1 px shadow), and a 1 px divider separates the action buttons. The glyphs are CSS masks painted in `currentColor`, so they follow the host theme; icon-only when narrow, labelled again past 300 px.
 - **看得懂的示意图 / Diagrams, not words** — 三张布局卡各画一个 36×24 的迷你侧栏示意，选中的那张标「当前默认」，不用读说明也能分辨。Each layout card draws a 36×24 mini sidebar and marks the current default.
 - **不遮挡、不闪烁 / No jumps** — 隐藏分组用 `display:none` + `aria-hidden` + `inert`，切换是纯 CSS 显隐，不卸载重建节点；浮层用 10px 圆角和柔和阴影盖在工作区上方，不把内容挤走。Pure-CSS show/hide, no unmounting; the overlay uses a 10 px radius and a soft shadow.
 - **标记不破坏行高 / Unobtrusive badges** — 「临时」标签由 CSS `::after` 画在会话行上，不插入新节点，行高、缩进、悬停态跟原生会话完全一致。The TEMP badge is a CSS pseudo-element, so rows keep their native height, indent and hover state.
@@ -76,8 +76,10 @@ The report always carries: plugin version (read from `package.json`, so it canno
 
 ## 控制栏在哪 / Where the controls are
 
-侧栏顶部一排文字按钮：`折叠 · 标签页 · 浮层 │ 显示工作区 / 展开扩展 · 换布局`。
-A single row of text buttons sits at the top of the sidebar. `换布局 / Cycle` is hidden below 300 px and can be turned off with `showQuickSwitch: false`.
+侧栏顶部是一条分段控件：`[折叠 | 标签页 | 浮层] │ 动作按钮`。前三个互斥，装在同一枚胶囊里，选中的那个白底高亮；竖线右边是当前布局专用的动作按钮（展开/折叠扩展、显示工作区、换标签页、浮出面板）。
+The toolbar is one segmented control: `[fold | tabs | overlay] │ actions`. The first three are mutually exclusive inside a single pill with the active one highlighted; right of the divider sit the buttons that act on the chosen layout.
+
+`换布局 / Cycle` 默认不出现（`showQuickSwitch`），打开后和其它动作按钮共用同一套图标。`Cycle` is off by default and shares the icon set when enabled.
 
 ## 安装与生效 / Install & apply
 

package/README.md

@@ -98,9 +98,11 @@ Scan with WeChat Pay — **purely voluntary, no rewards promised**. The author a
 
 ## 控制栏 / Where the controls are
 
-侧栏顶部一排文字按钮：`折叠 · 标签页 · 浮层 │ 显示工作区 / 展开扩展 · 换布局`。
-`换布局 / Cycle` 在侧栏窄于 300px 时隐藏，可用 `showQuickSwitch: false` 彻底移除。
-A single row of text buttons at the top of the sidebar. `Cycle` hides below 300 px and can be removed with `showQuickSwitch: false`.
+侧栏顶部是一条**分段控件**：三个互斥布局（折叠 / 标签页 / 浮层）装在同一枚灰色胶囊里，选中的那个是白底高亮；右侧隔一道竖线是当前布局专用的动作按钮（展开/折叠扩展、显示工作区、换标签页、浮出面板）。0.2.9 起全部换成矢量图标，窄侧栏只留图标（悬停有文字提示），侧栏宽于 300px 时动作按钮把文字长回来。
+The toolbar is one segmented control: the three mutually exclusive layouts share a single pill with the active one highlighted, and the buttons that act on the chosen layout sit on the far side of a divider. Since 0.2.9 the icons are real vectors — icon-only in a narrow column (with tooltips), and the action buttons grow their labels back once the column passes 300 px.
+
+`换布局 / Cycle` 默认不出现，可用 `showQuickSwitch: true` 打开；它和其余动作按钮一起走同一套图标。
+`Cycle` stays hidden unless `showQuickSwitch: true`; it uses the same icon set as the other action buttons.
 
 ## 实现要点 / How it works