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:
@@ -301,6 +301,39 @@ export async function mockHermesApi(page: Page, options: MockHermesApiOptions =
|
||||
return
|
||||
}
|
||||
|
||||
// The settings view loads these four on mount. They were unmocked before
|
||||
// Phase 007 because naive's components fired their requests differently.
|
||||
if (pathname === '/api/hermes/config/moa') {
|
||||
// MoaConfig requires all of these; ModelsView reads presets and the
|
||||
// model slots eagerly, so a partial body throws during render.
|
||||
await route.fulfill(jsonResponse({
|
||||
default_preset: '',
|
||||
presets: {},
|
||||
reference_models: [],
|
||||
aggregator: { provider: '', model: '' },
|
||||
reference_temperature: 0,
|
||||
aggregator_temperature: 0,
|
||||
max_tokens: 0,
|
||||
enabled: false,
|
||||
}))
|
||||
return
|
||||
}
|
||||
|
||||
if (pathname === '/api/auth/users') {
|
||||
await route.fulfill(jsonResponse({ users: [], profiles: [] }))
|
||||
return
|
||||
}
|
||||
|
||||
if (pathname === '/api/hermes/stt/settings') {
|
||||
await route.fulfill(jsonResponse({ providers: [], settings: [], activeProvider: null }))
|
||||
return
|
||||
}
|
||||
|
||||
if (pathname === '/api/hermes/tts/settings') {
|
||||
await route.fulfill(jsonResponse({ providers: [], settings: [], activeProvider: null }))
|
||||
return
|
||||
}
|
||||
|
||||
unexpectedRequests.push(recordRequest(request))
|
||||
await route.fulfill(jsonResponse({ error: `Unexpected mocked route: ${request.method()} ${pathname}` }, 404))
|
||||
})
|
||||
|
||||
@@ -22,7 +22,12 @@ test('fetches custom provider models through the backend proxy', async ({ page }
|
||||
await page.getByRole('button', { name: 'Fetch' }).click()
|
||||
|
||||
await expect(page.getByText('Found 2 models')).toBeVisible()
|
||||
await expect(page.getByText('proxy-model-a')).toBeVisible()
|
||||
// Scope to the dropdown options: Arco renders both the select's current value
|
||||
// and the option list, so a bare text match resolves to two nodes. The option
|
||||
// list is collapsed by this point, so assert presence rather than visibility.
|
||||
await expect(
|
||||
page.locator('.arco-select-option-content', { hasText: 'proxy-model-a' }),
|
||||
).toHaveCount(1)
|
||||
|
||||
const proxyRequest = api.requests.find((request) => request.pathname === '/api/hermes/provider-models')
|
||||
expect(proxyRequest).toBeTruthy()
|
||||
|
||||
Reference in New Issue
Block a user