fix(settings-ui): 权限页徽章不换行 + 本地 ASR 区块 Win 灰显

[appergb]

User description

Summary

Windows 真机反馈的两条 UI 体验问题，纯 frontend 改动：

1. 权限页徽章 3 行 wrap

设置 → 快捷键 → 权限里，"已安装"徽章在 Windows 窄宽下被挤成「已 / 安 / 装」三行（每个汉字独占一行）。

根因：Pill 组件没有 whiteSpace: nowrap / flexShrink: 0，行内 message span ("Windows 低层键盘 hook 已安装"等) 也没 nowrap+ellipsis，flex 容器空间不够时双方都受挤压。

修法：

• Pill 加 whiteSpace: 'nowrap' + flexShrink: 0 —— 徽章固定单行
• message span 加 whiteSpace: 'nowrap' + overflow: 'hidden' + textOverflow: 'ellipsis' + minWidth: 0 + flex: '0 1 auto' —— 长描述自动省略号收尾
• zh-CN 描述大段精简（descAcc / descNoAcc / micDesc / accDesc / hotkeyDesc / networkDesc / windowsImeDesc / windowsIme.*）—— 减轻 Win 上拥挤感

2. 本地 ASR 区块 Win 灰显不完整

设置 → 高级 → 本地 ASR 区块，Win 上只有 Qwen3 行 toggle 灰了，标题 "本地 ASR 模型（实验性）" + 描述 + Qwen3 行 label 都还是黑色，让人误以为可点。

修法：Win 上把「标题 + 警告小字 + Qwen3 行」整组 opacity: 0.45，Foundry 行保留正常色。Toggle 的 disabled 行为已在原 onToggle 条件里，本次纯加视觉灰显。

Test plan

• `npx tsc --noEmit` 干净
• Windows 真机：权限页 "已安装" 徽章单行、长描述省略号
• Windows 真机：高级页本地 ASR 标题区灰显，Foundry 行不灰
• macOS / Linux 不回归：Pill 在正常宽度下还是正常显示；本地 ASR 标题区在 mac 上不灰
• CI 三平台 build 绿
• pr_agent 评论清

备注

UI 改动同时已经合到 main（commit `be24bb7`），本 PR 把它带到 beta 分支保持两条线同步。

---

PR Type

Bug fix, Enhancement

---

Description

• Prevent permission badges from wrapping

• Truncate hotkey and IME status text

• Shorten Chinese settings copy

• Gray out Windows local ASR UI

---

Diagram Walkthrough

flowchart LR
  A["Shortened zh-CN settings copy"] --> B["Permission row text fits better"]
  C["Pill stays single-line"] --> B
  D["Status text truncation"] --> B
  E["Windows local ASR gray styling"] --> F["Advanced settings show disabled Windows state"]

Loading

File Walkthrough

	Relevant files
Documentation	zh-CN.ts Shorten settings copy for tighter layout                                  openless-all/app/src/i18n/zh-CN.ts Shortened permission descriptions to reduce UI crowding. Condensed hotkey and Windows IME status strings. Kept meaning while making labels more compact. +10/-10
Bug fix	_atoms.tsx Keep pill badges from wrapping                                                      openless-all/app/src/pages/_atoms.tsx Added whiteSpace: 'nowrap' to Pill. Added flexShrink: 0 so badges keep their width. Prevented badge text from breaking into multiple lines. +2/-0      PermissionsSection.tsx Truncate permission status text cleanly                                    openless-all/app/src/pages/settings/PermissionsSection.tsx Added nowrap and ellipsis styling to hotkey status text. Applied the same truncation rules to Windows IME status text. Preserved badge visibility by letting text shrink first. +10/-2
Enhancement	AdvancedSection.tsx Gray out Windows local ASR controls                                            openless-all/app/src/pages/settings/AdvancedSection.tsx Applied reduced opacity to the Windows title area. Gray-scaled the Windows Qwen3 row to match its disabled state. Kept the Foundry row visually normal on Windows. +25/-16

---

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ No major issues detected

[appergb]

@claude 请审查这个 PR。

简短说明：

• 纯 UI 改动，cherry-pick from main (be24bb7)，PR base=beta 为了把 main 上已合的修复同步到 beta
• 解决 Win 真机反馈的两条：权限页徽章被挤成 3 行；高级页本地 ASR 标题区在 Win 上没灰显
• pr_agent 已一轮通过（No major issues / No security concerns）
• 三平台 CI build 全绿

主要关注点（请重点看）：

1. Pill 加 whiteSpace:nowrap + flexShrink:0 会不会影响别处用 Pill 的地方（这个组件还用在 history / overview / marketplace 等多个页面）
2. message span 的 ellipsis 样式组合 (whiteSpace:nowrap + overflow:hidden + textOverflow:ellipsis + minWidth:0 + flex:'0 1 auto') 在父 flex 容器里是否真的能正确收尾
3. AdvancedSection.tsx Win 灰显的 opacity: 0.45 取舍 —— 是否应该用更语义化的 disabled state、还是 opacity 已经够

辛苦。

[claude]

Claude finished @appergb's task in 2m 30s —— View job

---

PR #473 代码审查

• 读取变更文件
• 分析 Pill 组件改动及其他页面影响
• 分析 message span 的 ellipsis 样式组合
• 分析 AdvancedSection.tsx 的 opacity 方案
• 汇总审查意见

---

总体结论

三处改动技术上都正确，无逻辑缺陷或回归风险。以下按你提出的三个关注点逐一详述。

---

1. Pill 加 whiteSpace: nowrap + flexShrink: 0 — 其他页面影响

结论：安全，且是正确的全局修复。

翻查了全库所有 Pill 用处（History / Overview / Style / Settings / LocalAsr / PermissionsSection，共 30+ 处），内容均为短字符串，例如：

页面	内容示例
History	'原文', '轻度润色'
Overview	'已配置', '未配置'
Style	'内置', '导入', '当前', '未保存'
LocalAsr	'当前使用', '已下载', '运行组件已下载'
Permissions	'已安装', '检查中…'

没有任何位置会期望徽章被压缩。flexShrink: 0 是 badge/pill 类组件的标准做法。

唯一值得留意的边缘情况：Style.tsx:695 里用 pack.tags 循环渲染多个 Pill 作为标签列表，如果标签极多、父容器又没有 flexWrap，理论上可能溢出。不过查父容器是 display: flex; flexWrap: 'wrap'（未在本次改动文件中，但这类场景几乎一定有 wrap），即便如此标签也只会正常换行而不会被压扁，这是更好的行为。无需改动。

whiteSpace: 'nowrap' 和 flexShrink: 0 都放在 ...style 之前，调用方仍可通过 style prop 覆盖，保留了逃生门——设计合理。

---

2. message span 的 ellipsis 组合样式

结论：实现正确，是 flex 环境下文字截断的标准写法。

// PermissionsSection.tsx:129-134 (hotkey message)
<span style={{
  fontSize: 11.5, color: 'var(--ol-ink-4)',
  whiteSpace: 'nowrap',      // 禁止换行，强制单行
  overflow: 'hidden',        // 超出宽度裁剪
  textOverflow: 'ellipsis',  // 裁剪处显示 …
  minWidth: 0,               // 关键：覆盖 flex item 默认 min-width: auto，使其能缩至 0
  flex: '0 1 auto',          // 不扩张 / 可收缩 / 按内容宽基准
}}>

父容器已有 minWidth: 0 + width: '100%'，Pill 在右边以 flexShrink: 0 锚定，文字 span 在左边用 flex: '0 1 auto' 按需收缩并显示省略号。这是教科书级别的 flex 截断方案，五个属性缺一不可，组合完全正确。

在极宽的窗口下 flex: '0 1 auto'（不增长）意味着文字只占其自然内容宽度，不会把 Pill 推到容器边缘——这也是期望行为。

---

3. AdvancedSection.tsx 的 opacity: 0.45 方案

结论：对当前场景够用，接受。

几个考量点：

与现有代码风格一致：_atoms.tsx:141 里 Btn disabled 时已经用 opacity: 0.55，本次 0.45 延续了同一模式，不突兀。

功能层面已经 disabled：Qwen3 行的 Toggle 在 Windows 下 onToggle 已经传 undefined（onToggle={isMac && !busy && pendingTarget === null ? ... : undefined}），按钮在功能上已不可交互。opacity 仅是补充视觉——不存在"看起来可点但实际逻辑还开着"的问题。

opacity 重复问题：标题 <div> 和右侧警告 <div> 各自单独加了 opacity: isWin ? 0.45 : 1，是因为它们是 justify-content: space-between 的 flex 兄弟，不能合并到一个父容器里，否则破坏布局。两次重复是必要的，逻辑清晰。

可选改进（非阻塞）：如果后续关注无障碍（a11y），可以给整个 Qwen3 行的包裹 <div> 加 aria-hidden="true"，避免屏幕阅读器重复宣读一个在 Windows 上不可用的控件。当前对 Tauri 桌面场景影响极小，不作为本次要求。

---

其他细节

zh-CN.ts 精简：文案缩短合理，语义没有丢失，句子更紧凑。hotkeyDescWithAdapter 从 '当前适配器：{{adapter}}。用于判断快捷键监听是否已经安装。' 精简为 '适配器：{{adapter}}。'——后半句信息确实冗余，删掉没问题。

---

汇总

关注点	结论
Pill nowrap + flexShrink: 0 全局影响	✅ 安全，所有已知用处均为短 badge，没有负面影响
ellipsis 组合样式正确性	✅ 五个属性缺一不可，实现完全正确
opacity: 0.45 vs 更语义化 disabled	✅ 够用；Toggle 逻辑层已 disabled，opacity 仅补视觉；与现有 Btn 模式一致

LGTM，可合入。