toor
4baccd5d88
- Vendor ArkScope decorative layers (ScrambleTitle / IsometricWave) with provenance notes; decorative-only per AGENTS.md red lines - Migrate theme tokens to Arco, register the Arco theme, and add hook adapter composables (useMessage / useDialog / useNotification) with matching signatures - Sample pages: LoginView and AppSidebar on the new baseline; docs/arco-mapping.md and docs/ui-baseline.md land - agent-bridge: prefer the PM-selected venv from facts.json over legacy in-tree venvs (legacy lacks the mcp extra, so every MCP server showed 0 tools / not connected) - agent-bridge python (vendored, deliberate deviation): MCP discovery import fallback and pyyaml -> hermes_yaml so plugins and MCP work under the PM env; install the mcp extra via `hermes pm install --extra mcp` - Chat-chain fragment: docs/chat-chain-changes/2026-10-17-phase005-arkscope-baseline.md Verified: harness:check, test (2020 passed), test:e2e (30 passed), build all green; manual: plugins 100/0 warnings, MCP 6/6 servers connected with 104 tools.
5.1 KiB
5.1 KiB
Naive UI → Arco Design Vue 组件映射表
Phase 005 起，新代码与迁移代码一律使用 Arco Design Vue。本文表是迁移的唯一映射依据： 先查表，再改代码。表中没有的组件，先在此表补一行再动手。
- 全局注册：
main.ts全量app.use(ArcoVue)，不做按需引入 - 主题：
body[arco-theme='dark']（见styles/arco-theme.ts与docs/ui-baseline.md） - hooks：
useMessage/useDialog/useNotification适配层在packages/client/src/composables/， 签名冻结，不得在页面里直接 import Arco 的Message/Modal/Notification
Provider / hooks
| Naive | Arco | 备注 |
|---|---|---|
NConfigProvider |
直接用 body[arco-theme] |
不需要组件 |
NMessageProvider / useMessage |
composables/useMessage.ts |
适配层，签名冻结 |
NDialogProvider / useDialog |
composables/useDialog.ts |
positiveText→okText、onPositiveClick→onBeforeOk（resolve false / reject → 保持打开）由适配层转换 |
NNotificationProvider / useNotification |
composables/useNotification.ts |
description→content 由适配层转换 |
基础组件（按当前仓库用量排序）
| Naive | Arco | 用量 | 备注 |
|---|---|---|---|
NButton |
a-button |
732 | block→long、size="tiny"→size="mini"、type="warning"→type="primary" status="warning"、quaternary→status="secondary" |
NInput |
a-input / a-textarea |
160 | type="textarea" 用独立 a-textarea；a-input 关闭了 attrs 透传，autofocus 无效，需 ref + focus() |
NModal |
a-modal |
138 | v-model:show→v-model:visible；preset="dialog" 无对应，信息型弹窗用 :footer="false"（footer 为 Boolean prop，默认 true） |
NFormItem |
a-form-item |
136 | 校验规则 API 不同（rules 结构、required 表达式）需适配 |
NSelect |
a-select |
97 | options 的 label/value 语义一致；consistent-menu-width 等 prop 无对应 |
NSpin |
a-spin |
86 | show→loading |
NTooltip |
a-tooltip |
76 | trigger="hover" 默认一致；placement 语义基本一致 |
NTag |
a-tag |
57 | bordered prop 存在（默认 true）；size="small" 一致；naive type="info"→color="arcoblue" 等内建色（red/orange/green/arcoblue/...），自定义色用 color 传 CSS 颜色 |
NSwitch |
a-switch |
53 | value/v-model 一致 |
NSpace |
a-space |
51 | size 语义一致（数字/预设名） |
NInputNumber |
a-input-number |
43 | min/max/precision 一致 |
NPopconfirm |
a-popconfirm |
36 | positive-text→ok-text；@positive-click→@ok |
NForm |
a-form |
32 | 校验规则 API 不同，需适配 |
NTabPane |
a-tab-pane |
30 | NTabs/NTabPane → a-tabs/a-tab-pane |
NDrawer / NDrawerContent |
a-drawer |
27 | Arco 无独立 content 组件；footer slot 用 a-drawer 的 footer |
NDropdown |
a-dropdown |
25 | options 结构不同（label→content，需转换函数） |
NDescriptions / NDescriptionsItem |
a-descriptions / a-descriptions-item |
19 | 基本一致 |
NAlert |
a-alert |
19 | type 一致；show-icon 一致 |
NRadioButton / NRadioGroup / NRadio |
a-radio（type="radio-button"）/ a-radio-group |
32 | Arco radio-button 是 a-radio 的 type prop |
NCheckbox / NCheckboxGroup |
a-checkbox / a-checkbox-group |
17 | options 数组语义一致 |
NEmpty |
a-empty |
12 | 基本一致 |
NCollapse / NCollapseItem |
a-collapse / a-collapse-item |
24 | arrow 语义不同 |
NUpload |
a-upload |
9 | file-list 结构不同，需适配 |
NText |
<a-typography> / 原生 span |
8 | 多数场景直接用原生元素 + class |
NTabs |
a-tabs |
6 | 见 NTabPane 行 |
NBreadcrumb / NBreadcrumbItem |
a-breadcrumb / a-breadcrumb-item |
8 | 基本一致 |
NDataTable |
a-table |
4 | 列定义 API 差异最大（columns/render/slots），逐例处理 |
NSlider |
a-slider |
3 | 基本一致 |
NScrollbar |
a-scrollbar |
3 | Arco 全局可用，无需组件包裹注册 |
NPopselect |
a-select（trigger-element） |
3 | 无直接对应，改用 a-dropdown 或带 trigger 的 a-select |
NPopover |
a-popover |
3 | trigger 语义有差异 |
NIcon |
<icon-*>（@arco-design/web-vue/es/icon） |
3 | Arco 图标是独立组件，需 import |
NBadge |
a-badge |
3 | value→count |
NTree |
a-tree |
2 | 结构差异大，逐例处理 |
NCard |
a-card |
— | 当前仓库未直接使用；若出现按此映射 |
NProgress |
a-progress |
— | 当前仓库未直接使用；若出现按此映射 |
NLayout / NLayoutSider |
a-layout / a-layout-sider |
— | 当前仓库未使用（侧栏是手写 div），保持手写或按需引入 |
迁移批次（Phase 006/007 使用）
- Phase 006：聊天页（
components/hermes/chat/）——消息气泡内部不用 Arco 组件（性能红线） - Phase 007：其余视图 +
stores/+composables/批量替换 + 删除 naive-ui 依赖