fix(shell): 退出按钮加 flex-shrink:0/nowrap，长用户名下不再竖排（#75）

[HandyWote]

背景

Closes #75

侧栏 footer 的退出按钮在长用户名（邮箱截断显示）下被 flex-shrink 压窄，「退出」按 CJK min-content 逐字换行 → 竖排。根因：用户名过长使 footer 一行超宽，flex-shrink 把 .shell-logout 从约 62px 压到约 49px。

改动

文件	改动
apps/shell/src/App.vue	.shell-logout 增加 flex-shrink: 0; white-space: nowrap;——按钮永不收缩，超宽压力按设计转嫁给用户名 ellipsis 截断
apps/shell/vite.config.ts	开启 vitest css: true，使 jsdom 的 getComputedStyle 能级联到 SFC scoped CSS（组件级布局回归的前提）
apps/shell/src/App.test.ts	新增 #75 用例（长/短用户名各一）：断言退出按钮「不收缩 + 单行」契约与压力去处

关于验收标准 1 的一处偏差（请评审知悉）

issue 验收标准 1 写的是 getBoundingClientRect().width ≥ 60。jsdom 不实现布局，getBoundingClientRect() 恒返回 0×0（本 PR 已实测确认），该断言在 @vue/test-utils + jsdom 下不可执行（恒假）。因此组件级测试采用可执行、且与修复因果绑定的等价契约断言：

• .shell-logout computed flex-shrink === '0'（不被压窄）
• .shell-logout computed white-space === 'nowrap'（文案不换行/不竖排）
• .shell-logout computed height === '30px'，文案完整为「退出」
• .shell-user-name computed overflow: hidden + text-overflow: ellipsis（压力去处）

真实像素（宽度 49→62、单行）由 agent-browser 真机证据补充，见 PR 评论。

破坏性回验（红 → 绿）

操作	结果
临时移除 flex-shrink: 0	#75 长/短名用例均红：expected '' to be '0'
临时移除 white-space: nowrap	#75 长/短名用例均红：expected '' to be 'nowrap'
还原后	@unself/shell 43/43 绿

验收对照表

#	验收标准	结果
1	组件级测试：长用户名场景断言按钮不被压窄、文字不竖排；短名回归不破坏	✅ App.test.ts 新增 2 用例（长名 handy@unself.demo.example / 短名 黄一），断言上列契约；jsdom 布局限制与真机证据见上
2	破坏性回验：移除 flex-shrink:0 → 测试红 → 还原绿	✅ 见上表，两种移除均红，还原 43/43 绿
3	三件套绿；PR base m0/dev；不合并；中文描述 + 验收对照表	✅ 见下「三件套验证」；base m0/dev；本 PR 不合并

三件套验证（issue #75 · m0/issue-75）

typecheck ✅ pnpm -r typecheck EXIT=0 —— 7/8 项目全过（contracts / ui / shell / cloudflare / module-sdk / core-api / hello）。

test ✅ pnpm -r test EXIT=0 —— 7 包 31 文件 267 用例全绿：
apps/shell 43 · deploy/cloudflare 69 · modules/hello 12 · packages/contracts 23 · packages/module-sdk 39 · packages/ui 7 · services/core-api 74。

#75 新用例（@unself/shell · verbose 逐名确认）：

✓ src/App.test.ts > App.vue 侧栏退出按钮不被长用户名压窄（#75） > 长用户名：退出按钮保持内容宽度、文案单行（不竖排）
✓ src/App.test.ts > App.vue 侧栏退出按钮不被长用户名压窄（#75） > 短用户名回归：同一契约不被破坏（正常场景无副作用）

build ✅ pnpm -r build EXIT=0 —— 7 包全过；产物：packages/ui dist（index.css 5.53 kB / index.js 6.16 kB）、apps/shell dist（index.html + index-HAX6bGJC.css 19.59 kB + index-D_KFHRjM.js 210.58 kB）。

工作区卫生：git status --short 仅 #75 三文件，无额外跟踪文件改动；dist/ 均在 gitignore 内。

既有噪音（非本次改动引起）：zod v4 源码注释 @__PURE__ 注解被 Rollup 忽略；shell 的 session-api.ts 同时被动态/静态导入的 chunk 拆分提示。

真机证据

见 PR 评论（agent-browser 实测：修复前长名按钮约 49px + 竖排；修复后约 62px + 单行；短名基线约 62px 单行）。

[HandyWote]

真机像素证据（agent-browser / Chromium 真实渲染）

viewport 1280×633，dpr 1；被测元素 .shell-logout（侧栏 footer 退出按钮）。页面为真实 App.vue（独立 worktree，origin/m0/dev @ ae2e9b7），通过临时入口覆盖 window.fetch 注入用户名（/api/me → 指定名字，/api/modules → []）。行数用按钮内文本节点的 Range.getClientRects() 矩形数判定。

组	场景	width	height	flex-shrink	white-space	文本矩形	结论
A	修复前 + 长名 handy@unself.demo.example	49px	30px	1	normal	2 个（13×18 各一行）	「退」「出」竖排两行 ✅ 复现 issue
B	修复前 + 短名 黄一（基线）	62px	30px	1	normal	1 个（26×18）	单行
C	修复后 + 长名	62px	30px	0	nowrap	1 个（26×18）	压窄与竖排均消除 ✅

补充（C 组 footer）：footer 宽 219px；.shell-user-name 宽 89px / scrollWidth 181px，text-overflow: ellipsis 生效——长名溢出由用户名省略号承担（设计意图），按钮宽度不再与用户名字长耦合。

截图：

• A-before-long.png（按钮 49px，「退/出」竖直堆叠）
• B-before-short.png（62px 单行）
• C-after-long.png（62px 单行）

结论：实测数值与 issue #75 声称的 49px 压窄 + 竖排完全一致，且修复后恢复 62px 单行。组件级测试受 jsdom 无布局限制，改用计算样式契约断言；本评论为等价的真实像素佐证。