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:
@@ -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 用例卡住。
|
||||
|
||||
Reference in New Issue
Block a user