# Vue迁移到React规范

> 本规范约束了Element Plus组件迁移到Ant Design 6 react模式下的映射关系
> 版本: v3.3

## 1、Vue → React 迁移映射表

| Vue (Element Plus)                      | React (Ant Design 6)                                                 |
| --------------------------------------- | -------------------------------------------------------------------- |
| `<el-form v-model>`                     | `<Form form={form}>` + `Form.useForm()`                              |
| `ref.validate()`                        | `await form.validateFields()`（**只返回已挂载字段**）                |
| `<el-dialog :visible>`                  | `<Modal open={open}>`                                                |
| `<el-drawer :visible>`                  | `<Drawer open={open} onClose={...}>`                                 |
| `defineExpose({ open })`                | props: `open, id, onSuccess, onCancel`（Modal）/ `onClose`（Drawer） |
| `<el-table><el-table-column>`           | `<ProTable columns={[...]} request={...} />`                         |
| `v-model` 双向绑定                      | `useState` + `value/onChange`                                        |
| `reactive() / ref()`                    | `useState()`                                                         |
| `onMounted()`                           | `useEffect(() => {}, [])`                                            |
| `watch()`                               | `useEffect(() => {}, [dep])`                                         |
| `computed()`                            | `useMemo()`                                                          |
| `defineEmits(['success'])`              | `props.onSuccess()`                                                  |
| `pinia store`                           | `zustand store`                                                      |
| `v-hasPermi`                            | `<Access code="xxx">`                                                |
| `v-loading`                             | `<Spin spinning>` 或组件自身 `loading` 属性                          |
| `message.delConfirm()`                  | `modal.confirm({ title: '确认删除？', okType: 'danger', onOk })`     |
| `getStrDictOptions / getIntDictOptions` | `getDictOptions(type)` 统一返回                                      |
| `dateFormatter`                         | 复用项目同名 `dateFormatter`                                         |
| `el-tree show-checkbox`                 | `<Tree checkable selectable={false}>` + `onClick` 切换               |
| `v-model:visible` Drawer/Modal          | `open` + `onClose/onCancel`                                          |
| `el-input v-model`                      | `<Input value/onChange>` 受控                                        |
| `el-switch v-model`                     | `<Switch checked/onChange>`                                          |
| 原生 Date                               | `dayjs(value)` 或 `new Date(value).getTime()`                        |
| 自定义 SCSS 变量覆盖                    | `ConfigProvider` + `theme.token`                                     |

> **Vue 路径 → React 文件**：后端菜单 `component` 字段决定 React 文件位置。`ai/chat/index/index` → `src/pages/ai/chat/index/index.tsx`。

---