fix(SelectLite): 下拉位置错位 + 关闭动画 + 滚外部自动收缩 (v1.3.1-7)

[appergb]

User description

v1.3.1-6 装机后用户报 macOS LLM provider 下拉 3 个问题。一次性收。

1. 位置错位（根因）

positionPopover useCallback deps []，useLayoutEffect 在 open=true fire 一次 —— 此时 popoverRef.current 还没挂载，popoverWidth 用 trigger.width 兜底。Popover mount 后真实宽度（长选项撑大）≠ trigger 宽，但 effect 不再重算，位置漂掉。

修：popoverRef 改 callback ref，每次 mount 时 RAF 推到下一帧重算 anchor，拿到真实宽。Math.max(popoverRect.width, rect.width) 保证 popoverWidth 不低估。

2. 滚外部应自动收缩

之前 scroll 触发 reposition。改成 capture phase 监听 scroll + wheel —— popover 内部 scroll（长列表）保留打开，外部 scroll/wheel 直接 closeMenu()。window resize 也强制关闭。

3. 关闭动画

加 leaving state，popover unmount 前播 ol-select-pop-out 反向 keyframe（opacity 1→0 + translateY 0→-4 + scale 1→.98，跟入场对偶），140ms 后真正卸载。

Test plan

• macOS: Settings → 模型与凭据 → LLM 供应商下拉，popover 紧贴 trigger 下方对齐
• macOS / Windows: 点击 trigger 外区域，popover 平滑淡出 ~140ms 不再瞬时消失
• macOS / Windows: popover 打开时滚动 Settings 主面板，popover 自动关闭
• macOS / Windows: popover 内部长列表滚动（如 LLM 提供商列表），popover 不关闭
• Windows: window resize 时 popover 关闭（避免错位的尴尬中间态）

---

PR Type

Bug fix, Enhancement

---

Description

• Fix popover misalignment: callback ref + requestAnimationFrame recalculates position with real popover width

• Add exit animation: leaving state triggers reverse keyframe, delays unmount by 140ms

• Auto-close on external scroll/wheel/resize: capture-phase listeners close menu; internal scroll preserved

• Remove useLayoutEffect repositioning; streamline event handling

---

Diagram Walkthrough

flowchart LR
  A["Trigger open"] --> B["Callback ref on popover mount"]
  B --> C["RAF reposition with real width"]
  C --> D["Correct popover alignment"]
  B --> E["Add scroll/wheel/resize listeners"]
  E --> F["External event triggers close"]
  F --> G["Leaving state starts exit animation"]
  G --> H["Unmount after 140ms"]

Loading

File Walkthrough

	Relevant files
Bug fix	SelectLite.tsx Fix SelectLite positioning, close animation, and external scroll close openless-all/app/src/components/ui/SelectLite.tsx Replaced popoverRef with callback ref that uses requestAnimationFrame on mount to fix misalignment when popover content is wider than trigger Added leaving state to delay unmount until 140ms exit animation (ol-select-pop-out) completes Replaced scroll repositioning with capture-phase scroll/wheel listeners to close popover when scrolling outside; added resize listener to force close Removed useLayoutEffect for positioning and its reflow handler; cleaned up imports and comments +62/-25
Enhancement	global.css Add exit animation keyframes for SelectLite popover            openless-all/app/src/styles/global.css Added @keyframes ol-select-pop-out for reverse exit animation: fades out, moves up 4px, scales to 0.98 +6/-0

---

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

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

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Popover never opens anchor is still required for rendering, but it is now only set from the popover ref callback. On the first open anchor is null, so the portal never mounts, the ref callback never runs, and the menu cannot appear. // popover ref callback：每次 popover DOM mount/unmount 调一次。 // 关键：mount 时拿到真实 popover 宽（content 撑大），requestAnimationFrame // 推到下一帧 paint 前再重算 anchor —— 修复"first paint 用 trigger 宽 fallback 后 // popover 位置漂掉"的 bug。 const setPopoverRef = useCallback( (node: HTMLDivElement | null) => { popoverRef.current = node; if (node) { requestAnimationFrame(() => positionPopover()); } }, [positionPopover], ); Exit timer race closeMenu() schedules a timeout but never cancels any pending one. If the menu is reopened before the 140ms delay expires, the old timer still fires and closes it again; the same delayed state update can also hit after the component unmounts. const closeMenu = () => { if (!open) return; setLeaving(true); window.setTimeout(() => { setOpen(false); setLeaving(false); setHighlight(-1); setAnchor(null); }, EXIT_ANIM_MS);