Phase 007: migrate every remaining view from naive-ui to Arco Design Vue
The project now has exactly one UI library. Every naive-ui component in
packages/client/src is replaced by its Arco equivalent across 24 views and
roughly 80 components, and naive-ui is dropped from package.json along with
its transitive vueuc / @css-render / vdirs / seemly dependencies.
The migration is rendering-layer only. No store logic, no API contract, and
no /chat-run payload was touched.
Three classes of leftover were invisible to `grep naive-ui` and are now
covered by tests/client/no-naive-ui.test.ts, which asserts all three:
- dead .n-* class names in style blocks
- dead --n-* custom properties
- naive-ui in package.json
Notable behavioural traps handled along the way, recorded in
docs/arco-migration-rules.md:
- a-input-password defaults to masked; passing default-visibility="false"
would have exposed API keys in clear text
- a-upload fires a real XHR unless auto-upload is false
- nested Trigger components fight over the first element child, so the
group-chat settings dropdown was flattened
- Arco renders tooltip default-slot text inline, which was silently
collapsing the chat and group-chat toolbars
This commit is contained in:
@@ -2,6 +2,7 @@
|
||||
import { afterEach, describe, expect, it, vi } from 'vitest'
|
||||
import { defineComponent } from 'vue'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import ArcoVue from '@arco-design/web-vue'
|
||||
|
||||
vi.mock('vue-i18n', () => ({
|
||||
useI18n: () => ({
|
||||
@@ -19,12 +20,16 @@ vi.mock('vue-i18n', () => ({
|
||||
}),
|
||||
}))
|
||||
|
||||
vi.mock('naive-ui', () => ({
|
||||
NTooltip: defineComponent({
|
||||
name: 'NTooltip',
|
||||
template: '<div class="n-tooltip-stub"><slot name="trigger" /><div class="tooltip-content"><slot /></div></div>',
|
||||
}),
|
||||
}))
|
||||
/**
|
||||
* Arco's a-tooltip only renders its content in a teleported popup, so it is
|
||||
* stubbed under Arco's *internal* component name — stubs key off that, not the
|
||||
* `a-*` template tag, because Arco is registered globally via `app.use(ArcoVue)`.
|
||||
*/
|
||||
const ATooltipStub = defineComponent({
|
||||
name: 'Tooltip',
|
||||
props: ['content'],
|
||||
template: '<div class="arco-tooltip-stub"><div class="tooltip-content">{{ content }}</div><slot /></div>',
|
||||
})
|
||||
|
||||
vi.mock('@/components/hermes/profiles/ProfileAvatar.vue', () => ({
|
||||
default: defineComponent({
|
||||
@@ -46,6 +51,12 @@ describe('KanbanTaskCard i18n', () => {
|
||||
vi.setSystemTime(new Date('2026-05-08T03:00:00Z'))
|
||||
|
||||
const wrapper = mount(KanbanTaskCard, {
|
||||
global: {
|
||||
plugins: [ArcoVue],
|
||||
stubs: {
|
||||
Tooltip: ATooltipStub,
|
||||
},
|
||||
},
|
||||
props: {
|
||||
assigneeAvatar: { type: 'generated', seed: 'alice-seed' },
|
||||
task: {
|
||||
|
||||
Reference in New Issue
Block a user