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,7 +2,7 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { createPinia, setActivePinia } from 'pinia'
|
||||
import { defineComponent, h } from 'vue'
|
||||
import ArcoVue from '@arco-design/web-vue'
|
||||
import FileList from '@/components/hermes/files/FileList.vue'
|
||||
import FileTree from '@/components/hermes/files/FileTree.vue'
|
||||
import { useFilesStore } from '@/stores/hermes/files'
|
||||
@@ -12,11 +12,6 @@ vi.mock('vue-i18n', () => ({
|
||||
useI18n: () => ({ t: (key: string) => key }),
|
||||
}))
|
||||
|
||||
vi.mock('naive-ui', async (importOriginal) => ({
|
||||
...(await importOriginal<typeof import('naive-ui')>()),
|
||||
useMessage: () => ({ error: vi.fn() }),
|
||||
}))
|
||||
|
||||
vi.mock('@/api/hermes/files', () => ({
|
||||
listFiles: vi.fn(),
|
||||
}))
|
||||
@@ -25,44 +20,10 @@ vi.mock('@/api/hermes/download', () => ({
|
||||
downloadFile: vi.fn(),
|
||||
}))
|
||||
|
||||
const NSpinStub = defineComponent({
|
||||
props: ['show'],
|
||||
setup(_props, { slots }) {
|
||||
return () => h('div', slots.default?.())
|
||||
},
|
||||
})
|
||||
|
||||
const NButtonStub = defineComponent({
|
||||
props: ['title'],
|
||||
setup(props, { slots }) {
|
||||
return () => h('button', { title: props.title }, slots.default?.())
|
||||
},
|
||||
})
|
||||
|
||||
const NEmptyStub = defineComponent({
|
||||
props: ['description'],
|
||||
setup(props) {
|
||||
return () => h('div', String(props.description || ''))
|
||||
},
|
||||
})
|
||||
|
||||
const NTreeStub = defineComponent({
|
||||
props: ['data', 'renderLabel'],
|
||||
setup(props) {
|
||||
return () => h('div', (props.data || []).map((option: any) =>
|
||||
h('div', { class: 'tree-node' }, [props.renderLabel({ option })]),
|
||||
))
|
||||
},
|
||||
})
|
||||
|
||||
function mountFileList() {
|
||||
return mount(FileList, {
|
||||
global: {
|
||||
stubs: {
|
||||
NSpin: NSpinStub,
|
||||
NButton: NButtonStub,
|
||||
NEmpty: NEmptyStub,
|
||||
},
|
||||
plugins: [ArcoVue],
|
||||
},
|
||||
})
|
||||
}
|
||||
@@ -105,9 +66,7 @@ describe('workspace long names', () => {
|
||||
|
||||
const wrapper = mount(FileTree, {
|
||||
global: {
|
||||
stubs: {
|
||||
NTree: NTreeStub,
|
||||
},
|
||||
plugins: [ArcoVue],
|
||||
},
|
||||
})
|
||||
await vi.waitFor(() => {
|
||||
|
||||
Reference in New Issue
Block a user