# 7-60 Page AI Pi 模型与思考深度弹层锚定修复

## 状态

- 已修复
- 日期：2026-07-11
- Owner：`07-ai`

## 症状

Page AI Pi 底部工具栏中：

- 先点击 `+` 后再打开模型或思考深度，原生下拉通常出现在按钮附近。
- 直接点击模型或思考深度，或先点击页面其它位置再打开时，Chromium 原生下拉可能出现在页面中央。
- `+` 与访问控制使用按钮锚定自定义菜单，模型与思考深度仍使用原生 `<select>`，交互与关闭规则不一致。

## 根因

模型与思考深度的选项面板由浏览器原生 `<select>` popup 承载，其位置不受 Page AI composer 的定位上下文和菜单互斥状态控制。焦点、滚动容器和点击顺序变化时，浏览器可能使用独立 popup 坐标，导致弹层脱离按钮。

## 修复

- 将模型与思考深度改为 `button + position: relative wrapper + absolute menu`。
- 菜单统一向对应按钮上方展开，不再依赖 Chromium 原生 select popup。
- 模型、思考深度、`+` 和访问控制统一使用互斥菜单状态。
- 点击工具栏其它位置、面板外或关闭 Page AI 时统一关闭 composer 菜单。
- 模型与思考深度选项继续写入原有 Pi session 配置状态，并沿 `/api/page-ai/pi/configure` 应用到 runtime。
- 增加 `aria-expanded`、`menuitemradio` 和选中状态，保留键盘/辅助技术可识别的控制语义。

## 验证

- `node --check rust/crates/mnote-web/browser/sidebar-page-ai-pi-lab-runtime.js`
- Chromium 真实页面验证：
  - 模型菜单位于模型按钮正上方。
  - 思考深度菜单位于思考按钮正上方。
  - 模型、思考深度、`+` 菜单互斥。
  - 点击输入框后关闭，再次打开仍锚定按钮。
  - 选择“思考 关”后标签与 runtime 状态同步。
- 专项静态与浏览器 smoke 见对应测试脚本结果。