fix(chat): repair Arco migration fallout in the chat page

The Phase 006 walkthrough surfaced four issues the automated checks could
not see. Dead naive-ui class names left behind by the migration stopped
matching, tooltips that carried their label as trailing default-slot text
leaked that text into the flex row, the workspace panel squeezed the chat
column until the input toolbar wrapped, and the Escape fallback still
looked for naive-ui's modal mask.

Tooltips now pass their label through the content prop, the tool panel
reserves a minimum width for the chat column, and Escape finds the visible
Arco modal and clicks its close button.
This commit is contained in:
2026-10-18 03:11:35 +08:00
parent effc29085c
commit c3eeea4187
10 changed files with 181 additions and 85 deletions
+11
View File
@@ -82,3 +82,14 @@ Phase 005 起,新代码与迁移代码一律使用 Arco Design Vue。本文表
排查手法:`el.__vueParentComponent.props` 看目标组件到底认不认这个 prop,
再看 `el.outerHTML` 确认渲染出来的骨架。回归由
`tests/e2e/chat-input-dropdown.spec.ts` 卡住。
- **迁移时最容易漏的是 CSS 里的 naive 类名**,因为 `grep naive-ui` 匹配不到
`:deep(.n-button__content)` 这种写法。聊天页原本有 35 处这类死样式,在 Arco 下
全部不生效,必须逐条改写成 Arco 类名。注意三处结构差异:
- `a-button` **没有** content 包裹层(naive 有 `.n-button__content`),
`gap` / `min-width` 要直接写在 button 上
- `a-modal` 没有 `body-wrapper` 分层,用 `.arco-modal` / `.arco-modal-body`
- `a-drawer` 同理,没有 `content` / `body-content-wrapper` 分层
- `useKeyboard.ts` 里查 `.n-modal-mask` 的 Esc 兜底属于跨组件的全局约定,迁移
组件时最容易漏掉。改弹窗库时必须同步 grep `.n-modal|.n-drawer|.n-base-` 这类
**字符串字面量**里的类名,而不只是组件 import。回归由
`tests/client/session-search.test.ts` 的 Esc 用例卡住。