revert(ui): 回退 AURA 界面大改到 beta-3 外观，保留功能与今日修复

[appergb]

User description

背景

#650（android-beta-to-beta 合并）把 AURA / 玻璃拟态界面大改带进了 beta，整体外观从 beta-3（v1.3.6-3）的 PageHeader 简洁风变成了 AURA 卡片风。本 PR 把外部界面回退到 beta-3 外观，同时保留 AURA 期间合入的功能与后端，并带上今天的两处行为修复。

改了什么

回退到 beta-3 外观（前端）：

• FloatingShell（外壳/侧栏/磨砂框，aura 标记 45→1）
• pages/Overview（回 PageHeader，移除「AURA OVERVIEW」卡片大改）、pages/History
• pages/_atoms（Card / Btn / PageHeader / Collapsible）、components/SettingsModal、ui/Row、ui/SelectLite
• styles/tokens.css、styles/global.css
• 移除随 AURA 加入的主题切换：lib/themeMode.ts、pages/settings/ThemeSection.tsx
• 设置弹窗右上角关闭叉叉去掉圆形底（beta-3 本就透明）

保留（不回退）： Apple 语音、手机远程录入、安卓、划词追问（QaPanel）等功能；src-tauri/ 后端完全不动；WindowChrome（OS 类型含 android）保持当前。

今日两处行为修复（重新打上）：

• 风格页切换不再卡顿：prefs:changed 监听只订阅一次（避免每次点击重复 unlisten/listen 两次 IPC）+ motion layoutDependency 限制只在包列表增减时重测 layout。
• ASR 本地引擎不再锁死：provider 下拉不再 disabled，可在本页直接切到其它供应商（切走自动停用本地引擎）；Apple 语音在 macOS 直接作为常规可选项。

兼容性补丁： 为划词追问页补回它引用的 6 个 solid/radius token（--ol-accent-solid-bg/-ink、--ol-danger-solid-bg/-ink、--ol-control-radius、--ol-bubble-radius），用 var() 间接引用基础色，深浅模式自动跟随，避免回退后该页丢色。

不在本 PR 范围

• 版本号未改（发版流程另走 bump-version.sh）。
• 后端 src-tauri/ 未改。

测试

• tsc --noEmit 通过
• vite build 通过（552 modules）
• build-mac.sh 本地出包（arm64，ad-hoc 签名，codesign 校验通过），已安装试运行
• 代码级核对：Overview/History/_atoms 与 beta-3 完全一致（0 diff）；FloatingShell aura=1；Overview 无「AURA OVERVIEW」
• reviewer：界面在浅/深色下逐页目视确认
• reviewer：确认保留的功能页（远程录入 / Apple 语音 / 划词追问）在旧 token 下样式无明显塌陷

---

PR Type

Enhancement, Bug fix

---

Description

• Revert AURA UI overhaul to beta-3 appearance

• Keep AURA-introduced features (Apple speech, remote input, Android, QaPanel)

• Fix style page switching stutter (prefs:changed subscription, motion layoutDependency)

• Fix ASR local engine lock, enable direct provider switching

---

Diagram Walkthrough

flowchart LR
  A["Revert AURA UI"] --> B["FloatingShell: beta-3 sidebar"]
  A --> C["Overview: two-column hero, no mobile"]
  A --> D["SettingsModal: no mobile, external links"]
  A --> E["Atoms: revert Card/Pill/Btn tokens"]
  A --> F["Style: fix stutter, revert token usage"]
  A --> G["ProvidersSection: unlock ASR dropdown"]
  A --> H["History: remove search/retranscribe, revert layout"]

Loading

File Walkthrough

	Relevant files
Bug fix	6 files FloatingShell.tsx Revert FloatingShell to beta-3 sidebar layout                        +137/-134 Overview.tsx Revert Overview to beta-3 two-column hero                                +17/-234 Style.tsx Fix style page stutter and revert tokens                                  +61/-56  History.tsx Revert History to beta-3 layout, remove search and retranscribe +25/-109 _atoms.tsx Revert atoms (Card, Pill, Btn, PageHeader) to beta-3 tokens +30/-75  ProvidersSection.tsx Unlock ASR dropdown, remove 'taken over' notice                    +21/-26
Enhancement	1 files SettingsModal.tsx Revert SettingsModal rail, remove mobile layout, add external links +65/-62
Formatting	12 files Marketplace.tsx Revert border-radius and token usage                                          +17/-17  Vocab.tsx Revert border-radius and token usage                                          +12/-12  Onboarding.tsx Revert border-radius and color tokens                                        +17/-17  MarketplaceSection.tsx Revert color tokens for marketplace section                            +3/-3      LessComputerPanel.tsx Revert border-radius and color tokens                                        +22/-21  LocalAsr.tsx Revert border-radius and color tokens                                        +11/-11  Capsule.tsx Revert border-radius and color tokens                                        +12/-12  SelectLite.tsx Revert styling tokens                                                                        +9/-19    Translation.tsx Revert border-radius and color tokens                                        +10/-10  MarketplaceModal.tsx Revert styling tokens                                                                        +6/-6      ShortcutRecorder.tsx Revert styling tokens                                                                        +6/-6      GithubLoginModal.tsx Revert styling tokens                                                                        +4/-4
Additional files	25 files AutoUpdate.tsx +2/-2      Modal.tsx +5/-5      Row.tsx +3/-5      SegSimple.tsx +15/-24  SwitchLite.tsx +3/-3      en.ts +1/-9      ja.ts +0/-8      ko.ts +0/-8      zh-CN.ts +1/-9      zh-TW.ts +0/-8      platform.ts +0/-18    themeMode.ts +0/-52    main.tsx +0/-5      SelectionAsk.tsx +4/-4      AboutSection.tsx +3/-3      CheckUpdateButton.tsx +2/-2      ClaudeConsoleSection.tsx +1/-1      RecordingInputSection.tsx +5/-5      RemoteInputSection.tsx +4/-4      ShortcutsSection.tsx +5/-5      ThemeSection.tsx +0/-36    shared.tsx +6/-8      tabs.tsx +2/-4      global.css +11/-410 tokens.css +23/-75

---

[appergb]

@claude 请审核这个 PR：把 #650 引入的 AURA 界面大改回退到 beta-3 外观，同时保留功能与今日的两处行为修复（风格页性能、ASR 可切换）。重点看：1) 回退是否完整、有没有 AURA 残留；2) 保留的功能页在回退后的 token 下是否丢色/塌陷；3) #5/#6 两处行为修复逻辑是否正确。

[claude]

Claude finished @appergb's task in 3m 47s —— View job

---

PR #656 审核报告

• 读取任务要求
• 分析 diff（git diff origin/beta...HEAD）
• 检查 AURA 残留
• 检查保留功能页的 token 兼容性
• 检查两处行为修复逻辑
• 汇总审核结论

---

1. 回退完整性 / AURA 残留

结论：回退干净，无 AURA 组件类残留。

检查项	状态
global.css 中 .ol-aura-panel、.ol-aura-card、.ol-app-shell-bg、.ol-aura-sidebar-*、.ol-aura-mobile-*	✅ 全部删除
FloatingShell.tsx 中移动端布局（topbar / bottom-nav / mobileLayout 分支）	✅ 全部删除
_atoms.tsx 中 Card 的 ol-aura-card class、PageHeader 中 useMobileLayout	✅ 已移除
themeMode.ts / ThemeSection.tsx 及其在 main.tsx、tabs.tsx 中的引用	✅ 已删除且无悬挂引用
useMobileLayout 在 FloatingShell / _atoms / SettingsModal 中	✅ 已移除

可接受的残留（tokens.css）： --ol-aura-surface、--ol-aura-glass-blur、--ol-aura-shadow 等 token 仍存在，被 --ol-panel-bg 等 alias 引用，属于设计系统底层 token，非组件级 AURA 类，合理保留。

---

2. 保留功能页 token 兼容性

✅ QaPanel（划词追问）6 个 compat token

QaPanel.tsx 引用 --ol-accent-solid-bg/-ink、--ol-danger-solid-bg/-ink、--ol-control-radius、--ol-bubble-radius。PR 在 tokens.css :root 顶部正确补回：

--ol-accent-solid-bg: var(--ol-blue);
--ol-accent-solid-ink: var(--ol-on-accent);
--ol-danger-solid-bg: var(--ol-err);
--ol-danger-solid-ink: #ffffff;
--ol-control-radius: 8px;
--ol-bubble-radius: var(--ol-r-lg);

通过 var() 间接引用，暗色模式下 --ol-blue → #60a5fa、--ol-err → #f87171，自动跟随——设计正确。--ol-control-solid、--ol-control-muted、--ol-control-muted-strong 也已确认在 tokens.css 中保留，QaPanel 其余样式无缺失。

⚠️ Style.tsx 在暗色模式下的白色背景问题

Style.tsx 中的 inputStyle 和 textareaStyle 被改为硬编码白色：

// Style.tsx ~L1245, ~L1257
const inputStyle: CSSProperties = {
  ...
  background: '#fff',  // ← 暗色模式下仍为白色
};
const textareaStyle: CSSProperties = {
  ...
  background: '#fff',  // ← 同上
};

同样，风格卡片的编辑器区域也用了 background: '#fff'（L1147、L1165）。原先这些位置使用 var(--ol-style-input-bg)（暗色下为 rgba(255,255,255,0.04)），回退后直接写死白色，在系统暗色模式下风格编辑器的输入框会显示刺眼白底。

Fix this →

⚠️ 死 token 未清理

tokens.css 中约 25 个 --ol-style-card-*、--ol-style-delete-*、--ol-style-add-*、--ol-style-editor-* 等 token 仍然定义，但 Style.tsx 已不再使用（改为 hardcoded 值或通用 token）。另有 --ol-nav-hover-bg 在 tokens.css 中定义，但 FloatingShell 的 hover 样式现在直接写 rgba(0,0,0,0.04)，token 无人使用。

这是无功能影响的"dead token"噪音，建议后续清理，不阻塞本 PR。

---

3. 两处行为修复逻辑

✅ 修复 #5：Style 页 prefs:changed 不重复订阅

修复前：useEffect 依赖 selectedId，每次切换风格包都 unlisten + listen（每次点击 2 次 IPC）。

修复后：引入 selectedIdRef，useEffect 空依赖只注册一次；listener 闭包通过 .current 读取最新值，避免闭包陈旧：

const selectedIdRef = useRef(selectedId);
selectedIdRef.current = selectedId;           // 每次渲染同步

useEffect(() => {
  listen('prefs:changed', () => {
    void loadPacks(selectedIdRef.current);    // 始终读最新值
  });
}, []);                                        // 只注册一次

Ref 模式解决 stale closure 问题，逻辑正确。

layoutDependency={bodyPacks.length} 也正确：framer-motion layout 重测从"每次 active 变化"限缩为"列表增删时"，切换 active pack 不再触发全列卡片重新测量，消除抖动。

✅ 修复 #6：ASR provider 下拉解锁

修复前：isLocked 逻辑在本地引擎激活时将整个下拉 disabled，用户只能进"高级 → 本地模型"才能切走。

修复后：

• 删除 isLocked/disabled，下拉始终可用
• 隐藏的本地引擎（hiddenLocalActive）作为额外 option 呈现当前值，允许切走
• Apple 语音在 macOS 成为常规可选项（p.id !== 'apple-speech' || os === 'mac'）

逻辑正确，非 macOS 平台继续过滤 apple-speech，macOS 正常显示。

---

4. 其他注意点

⚠️ Android 平台 guard 被移除

原 FloatingShell 中两处 getPlatformCapabilities() 检查在 caps.platform === 'android' 时跳过 ProviderSetupPrompt 和 HotkeyModeMigration 提示，现在这两个检查被移除：

// 修复前
const caps = await getPlatformCapabilities();
if (cancelled || caps.platform === 'android') return;
// 修复后：直接继续

意味着 Android 也会弹这两个引导窗口。如果 Android 版本不支持对应功能，这些提示可能产生误导。建议确认 Android 路径是否需要重新加回保护。

ℹ️ AndroidMicGrantBanner / InAppDictationControl 从 Overview 移除

这是有意回退，beta-3 原本没有这两个组件。Android 后端完整保留，但 Android 用户的麦克风权限申请入口（Banner）在本版 Overview 中消失。后续 Android 适配时需重新加回。

---

总结

审核维度	结论
AURA 回退完整性	✅ 完整，无 AURA 组件类残留
QaPanel 6 个 compat token	✅ 正确补回，深浅模式自动跟随
Style.tsx 暗色模式	⚠️ input/textarea 白色底在 dark mode 下明显，建议修复
prefs:changed 修复	✅ 逻辑正确
ASR 下拉解锁修复	✅ 逻辑正确
死 token 清理	ℹ️ 建议后续清理，不阻塞
Android guard 移除	⚠️ 请确认是否需要重新保护

主要阻塞点：Style.tsx 的 inputStyle/textareaStyle 和编辑器 textarea 在暗色模式下的白色底；其余问题不影响浅色模式正常使用，可按优先级后续处理。

[github-actions]

PR Reviewer Guide 🔍

(Review updated until commit 760f662)

Here are some key observations to aid the review process:

🎫 Ticket compliance analysis 🔶 650 - Partially compliant Compliant requirements: (none directly – this PR reverts UI and does not modify Android runtime files) Non-compliant requirements: Frontend adaptation: the revert removes useMobileLayout, getPlatformCapabilities calls, and mobile‑specific navigation/markup, which may break Android frontend conditional rendering. Requires further human verification: The Android frontend adaptation relies on getPlatformCapabilities and mobile layout detection; the revert removes these in FloatingShell.tsx and Overview.tsx, so Android behavior must be tested on a real device.

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

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Possible Android regression The revert removes the getPlatformCapabilities check that previously prevented the provider setup prompt from appearing on Android. Without this guard, Android users will see the provider setup prompt, which is inappropriate for that platform. The PR claims to retain Android support, but this removal may break the expected behavior. A concrete scenario: an Android user installs the debug APK and immediately sees a provider setup overlay that cannot be dismissed properly because the Android code path expects no such prompt. useEffect(() => { let cancelled = false; (async () => { const credentials = await getCredentials(); const promptDeferredValue = window.sessionStorage.getItem(PROVIDER_SETUP_PROMPT_DEFERRED_KEY); if (!cancelled && shouldShowProviderSetupPrompt(credentials, promptDeferredValue)) { setProviderPromptOpen(true); } })(); return () => { cancelled = true; }; }, []); useEffect(() => { const acknowledgedValue = window.localStorage.getItem(HOTKEY_MODE_MIGRATION_ACK_KEY); const deferredValue = window.sessionStorage.getItem(HOTKEY_MODE_MIGRATION_DEFERRED_KEY); if (shouldShowHotkeyModeMigrationPrompt(acknowledgedValue, deferredValue)) { setHotkeyModePromptOpen(true); } }, []); Lost functionality – retranscribe and search The revert removes the search bar (issue #612) and the “retranscribe” button (issue #613) from the history page. While this is part of the UI revert to beta‑3, the PR description says “保留功能” (retain features). These two features were added after beta‑3, so reverting them loses genuine user‑facing functionality. If the intent is to keep all non‑UI features, these should have been preserved. // History.tsx — 接 Tauri 后端 list_history / delete_history_entry / clear_history。 // 真实数据来自 ~/Library/Application Support/OpenLess/history.json。 import { useCallback, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Icon } from '../components/Icon'; import { detectOS } from '../components/WindowChrome'; import { formatComboLabel } from '../lib/hotkey'; import { clearHistory, deleteHistoryEntry, listHistory, readAudioRecording } from '../lib/ipc'; import type { DictationSession, PolishMode } from '../lib/types'; import { useHotkeySettings } from '../state/HotkeySettingsContext'; import { Btn, Card, PageHeader, Pill } from './_atoms'; function useFilters(): Array<{ id: 'all' | PolishMode; label: string }> { const { t } = useTranslation(); return [ { id: 'all', label: t('history.filterAll') }, { id: 'raw', label: t('style.modes.raw.name') }, { id: 'light', label: t('style.modes.light.name') }, { id: 'structured', label: t('style.modes.structured.name') }, { id: 'formal', label: t('style.modes.formal.name') }, ]; } function useModeLabel(): Record<PolishMode, string> { const { t } = useTranslation(); return { raw: t('style.modes.raw.name'), light: t('style.modes.light.name'), structured: t('style.modes.structured.name'), formal: t('style.modes.formal.name'), }; } export function History() { const { t } = useTranslation(); const os = detectOS(); const FILTERS = useFilters(); const MODE_LABEL = useModeLabel(); const [filter, setFilter] = useState<'all' | PolishMode>('all'); const [items, setItems] = useState<DictationSession[]>([]); const [selectedId, setSelectedId] = useState<string | null>(null); const [loading, setLoading] = useState(true); const [loadError, setLoadError] = useState<string | null>(null); const [actionError, setActionError] = useState<string | null>(null); const [justCopied, setJustCopied] = useState(false);

[github-actions]

Persistent review updated to latest commit 760f662