adspecs 0.1.12

package/references/ant6-front-standard/05-/350/267/257/347/224/261/347/212/266/346/200/201/346/216/245/345/217/243/350/247/204/350/214/203.md

@@ -0,0 +1,175 @@
+# 路由、状态管理与接口规范
+
+> 适用范围: React 19 + TypeScript 6 + Ant Design 6 + ProComponents
+> 版本: v3.3
+
+---
+
+## 1、路由规范
+
+### 1.1 路由定义
+
+```typescript
+import { createBrowserRouter } from 'react-router';
+
+const router = createBrowserRouter([
+  { path: '/login', Component: LoginPage },
+  {
+    path: '/',
+    Component: AdminLayout,
+    children: [
+      { path: 'dashboard', Component: DashboardPage },
+      { path: 'profile', Component: ProfilePage },
+      { path: '*', Component: NotFoundPage },
+    ],
+  },
+]);
+```
+
+### 1.2 动态路由注入
+
+- 登录成功后通过 `addDynamicRoutes(menus)` 动态注入路由
+- 使用 `import.meta.glob('@/pages/**/index.{tsx,jsx}')` 实现懒加载
+- 配合 `Suspense` + `Spin` 提供加载态反馈
+- 退出登录时调用 `resetDynamicRoutes()` 清除动态路由
+- **外部链接（http/https 路径）在路由生成时被过滤**
+
+### 1.3 路由导航
+
+```typescript
+import { useNavigate, useSearchParams, useParams } from 'react-router';
+
+const navigate = useNavigate();
+const [searchParams] = useSearchParams();
+const { id } = useParams();
+
+navigate('/user/list');
+navigate(`/user/detail/${id}`);
+navigate(-1); // 返回上一页
+```
+
+### 1.4 路由守卫
+
+- 使用 `<AuthGuard>` 组件保护受保护的路由
+- AuthGuard 检查 token 和 userInfo，未登录则重定向至 `/login`
+- 携带 `redirect` 参数以便登录后自动跳转回原页面
+- AuthGuard 使用 `useRef` 守卫防止重复 fetch
+
+---
+
+## 2、状态管理规范
+
+### 2.1 Zustand Store 结构
+
+```typescript
+// stores/useAuthStore.ts
+import { create } from 'zustand';
+
+interface AuthState {
+  token: string | null;
+  userInfo: UserInfo | null;
+  roles: string[];
+  permissions: string[];
+  menus: Permission[];
+  setToken: (token: string) => void;
+  login: (username: string, password: string) => Promise<void>;
+  logout: () => void;
+  hasPermission: (code: string) => boolean;
+}
+
+export const useAuthStore = create<AuthState>((set, get) => ({
+  token: null,
+  userInfo: null,
+  roles: [],
+  permissions: [],
+  menus: [],
+  setToken: (token) => set({ token }),
+  login: async (username, password) => {
+    const res = await login({ username, password });
+    set({ token: res.data.accessToken });
+  },
+  logout: () => set({ token: null, userInfo: null, roles: [], permissions: [], menus: [] }),
+  hasPermission: (code) => {
+    const { permissions } = get();
+    return permissions.includes('*:*:*') || permissions.includes(code);
+  },
+}));
+```
+
+### 2.2 Store 使用规范
+
+```typescript
+import { useAuthStore } from '@/stores/useAuthStore';
+
+export default function UserList() {
+  // 选择器模式避免不必要的重渲染
+  const { token, hasPermission } = useAuthStore();
+  const userName = useAuthStore((state) => state.userInfo?.name);
+  const canDelete = hasPermission('system:user:delete');
+
+  return <div>{userName}</div>;
+}
+```
+
+### 2.3 Store 分类
+
+| Store          | 职责                        | 持久化                              |
+| -------------- | --------------------------- | ----------------------------------- |
+| `useAuthStore` | token、用户信息、权限、菜单 | 否（页面刷新清空）                  |
+| `useAppStore`  | 侧边栏折叠状态、暗色模式    | 是（localStorage: `admin-pro-app`） |
+| `useDictStore` | 字典类型到数据的映射        | 否                                  |
+
+---
+
+## 3、API 接口规范
+
+### 3.1 文件组织
+
+```typescript
+// api/system/user.ts
+import request from '@/utils/request';
+import type { ApiResponse, PageResult, PageParams } from '@/types/api';
+
+export interface UserVO {
+  id?: number;
+  name: string;
+  createTime?: string;
+}
+
+export const getUserPage = (params: PageParams) =>
+  request.get<unknown, ApiResponse<PageResult<UserVO>>>('/system/user/page', { params });
+
+export const getUser = (id: number) =>
+  request.get<unknown, ApiResponse<UserVO>>(`/system/user/get?id=${id}`);
+
+export const createUser = (data: UserVO) =>
+  request.post<unknown, ApiResponse<void>>('/system/user/create', data);
+
+export const updateUser = (data: UserVO) =>
+  request.put<unknown, ApiResponse<void>>('/system/user/update', data);
+
+export const deleteUser = (id: number) =>
+  request.delete<unknown, ApiResponse<void>>(`/system/user/delete?id=${id}`);
+
+export const deleteUserList = (ids: number[]) =>
+  request.delete<unknown, ApiResponse<void>>(`/system/user/delete-list?ids=${ids.join(',')}`);
+```
+
+### 3.2 约定
+
+- `ApiResponse<T>`、`PageParams`、`PageResult<T>` 来自 `@/types/api`，**不要重写**
+- `code === 0` 时拦截器自动解包；`code === 401` 自动跳登录；其余 `Promise.reject` 并 `message.error`
+- 文件下载用 `download(url, params)`（`@/utils/request` 导出，自动 blob + Content-Disposition 解析）
+- Axios 实例超时时间 30s
+- 请求拦截器自动附加 `Bearer` token 和 `tenant-id` 头
+- **Token 刷新**：并发 401 请求排队，刷新 token 后重放
+
+### 3.3 响应码
+
+| code  | 含义                              |
+| ----- | --------------------------------- |
+| `0`   | 成功                              |
+| `401` | 未授权（自动刷新 token 或跳登录） |
+| 其他  | 失败，`message` 为错误提示        |
+
+---

package/references/ant6-front-standard/06-/345/233/275/351/231/205/345/214/226/350/247/204/350/214/203.md

@@ -0,0 +1,126 @@
+# 国际化（i18n）规范
+
+> 适用范围: React 19 + TypeScript 6 + Ant Design 6 + ProComponents
+> 版本: v3.3
+
+---
+
+## 1、国际化（i18n）规范
+
+项目使用 `react-i18next` + `i18next-resources-to-backend` 实现多语言支持，通过 Vite 的 `import.meta.glob` 自动加载所有 locale 文件，**无需手动注册**。
+
+### 1.1 语言包目录结构
+
+```
+src/locales/
+├── zh-CN/              # 简体中文（默认语言）
+│   ├── system/
+│   │   ├── post.ts
+│   │   └── user.ts
+│   ├── mdm/
+│   │   ├── codeRule.ts
+│   │   └── codeMapping.ts
+│   ├── login.ts
+│   ├── common.ts
+│   └── ...
+├── en-US/              # 英文
+│   ├── system/
+│   ├── mdm/
+│   └── ...
+├── ja-JP/              # 日语
+├── fr-FR/              # 法语
+├── es-ES/              # 西班牙语
+├── ar-SA/              # 阿拉伯语
+├── ru-RU/              # 俄语
+└── de-DE/              # 德语
+```
+
+### 1.2 命名空间（Namespace）
+
+- 每个 locale 文件的路径即为命名空间名。例如 `src/locales/zh-CN/mdm/codeRule.ts` 对应 `useTranslation('mdm/codeRule')`。
+- **命名空间路径规则**：按模块目录组织，文件名与业务模块对应。
+- 通用文案放在 `common.ts`（`common` 命名空间），页面/模块级文案放在对应子目录。
+
+### 1.3 语言包文件格式
+
+```typescript
+// src/locales/zh-CN/mdm/codeRule.ts
+export default {
+  table: {
+    id: '编号',
+    ruleName: '规则名称',
+    createTime: '创建时间',
+    action: '操作',
+  },
+  form: {
+    ruleName: '规则名称',
+    inputRuleName: '请输入规则名称',
+    editTitle: '编辑编码规则',
+    addTitle: '新增编码规则',
+  },
+  btn: {
+    add: '新增',
+    edit: '编辑',
+    delete: '删除',
+  },
+  msg: {
+    deleteSuccess: '删除成功',
+    updateSuccess: '更新成功',
+    createSuccess: '创建成功',
+    deleteConfirm: '确认删除该编码规则？',
+  },
+};
+```
+
+**结构约定**：
+- 统一使用嵌套对象，**不导出具名变量**。
+- 按 UI 区域分组：`table`（列标题）、`form`（表单标签/占位符/弹窗标题）、`btn`（按钮文案）、`msg`（提示/确认消息）。
+- key 用 camelCase，不使用中文拼音或缩写。
+
+### 1.4 组件中使用
+
+```tsx
+import { useTranslation } from 'react-i18next';
+
+const { t } = useTranslation('mdm/codeRule');
+
+// 表格列
+{ title: t('table.ruleName'), dataIndex: 'ruleName' }
+
+// 按钮文案
+<Button>{t('btn.add')}</Button>
+
+// 成功提示
+message.success(t('msg.createSuccess'));
+
+// 带插值
+t('msg.deleteConfirm', { name: record.ruleName })
+// 对应语言包中: "确认删除「{{name}}」吗？"
+```
+
+### 1.5 Modal 标题动态化
+
+```tsx
+<Modal title={id ? t('form.editTitle') : t('form.addTitle')} ...>
+```
+
+### 1.6 新增模块步骤
+
+**每新增一个业务模块，必须为所有 8 种语言创建对应的 locale 文件**：
+
+1. 在 `src/locales/<lng>/<module>/` 下创建语言包文件（codeRule.ts、codeMapping.ts 等）
+2. 确保 8 种语言包（zh-CN / en-US / ja-JP / fr-FR / es-ES / ar-SA / ru-RU / de-DE）都包含相同的 key 结构
+3. 组件中使用 `useTranslation('<module>/<file>')` 引用
+
+> **注意**：`i18next` 通过 `import.meta.glob('@/locales/**/*.ts')` 自动加载所有文件，**不需要**在 `src/i18n/index.ts` 中手动注册。
+
+### 1.7 语言切换
+
+用户通过 Header 的语言切换组件切换语言，切换后调用 `i18n.changeLanguage(lng)` 并持久化到 `localStorage('app-language')`。
+
+### 1.8 不支持的语言
+
+`fallbackLng` 配置为 `'zh-CN'`，任何缺失的 key 都会回落到简体中文。
+
+---
+

package/references/ant6-front-standard/07-/345/255/227/345/205/270/346/235/203/351/231/220/350/247/204/350/214/203.md

@@ -0,0 +1,71 @@
+# 字典与权限规范
+
+> 适用范围: React 19 + TypeScript 6 + Ant Design 6 + ProComponents
+> 版本: v3.3
+
+---
+
+## q、字典系统规范
+
+字典在登录后由 `AuthGuard` 一次性 `useDictStore.fetchDictData()` 全部缓存到内存，所有页面直接读：
+
+```tsx
+const getDictOptions = useDictStore((s) => s.getDictOptions);
+const getDictLabel = useDictStore((s) => s.getDictLabel);
+
+// 渲染标签
+<DictTag type="common_status" value={record.status} />
+
+// ProTable 搜索下拉
+valueEnum: Object.fromEntries(
+  getDictOptions('ai_platform').map((d) => [d.value, { text: d.label }])
+)
+
+// Form Select 下拉
+options={getDictOptions('system_org_type').map((d) => ({
+  label: d.label, value: Number(d.value),  // ← 字段是 number 时记得转
+}))}
+```
+
+**新增字典必须三处都加**（`src/mocks/data/index.ts`）：
+
+1. `mockDictTypes` — 字典类型表
+2. `mockDictData` — 字典数据表（注意 value 始终是 string）
+3. 业务代码的 `<DictTag type="...">` 与 `getDictOptions('...')`
+
+> **注意**：字典 `value` 在数据库是 string；如果业务字段类型是 number（如 `status: number`），表单 Select 的 `value` 要 `Number(d.value)` 转回去。
+
+---
+
+## 2、权限系统规范
+
+### 2.1 组件级权限
+
+```tsx
+import Access from '@/components/Access';
+import { useAccess } from '@/components/Access';
+
+// 组件级权限控制
+<Access code="system:user:create">
+  <Button type="primary">新增</Button>
+</Access>
+
+// Hook 级权限控制
+const canUpdate = useAccess('system:menu:update');
+```
+
+### 2.2 权限检查
+
+- 权限码格式：`system:user:create`（模块:资源:操作）
+- `*:*:*` 代表超级管理员，拥有所有权限
+- `checkPermi(permissions[])` 检查是否有**任意一个**权限
+- `checkRole(roles[])` 检查是否有**任意一个**角色（`super_admin` 跳过）
+
+### 2.3 新增菜单+按钮权限三步
+
+1. `mockAdminBackendMenus`（或子菜单数组）加 type=2 菜单 + type=3 子按钮（path 为空，name 中文）
+2. `collectPermissionsFromBackendMenus` 的 `codeMap` 注册 `中文名 → 权限码`
+3. 业务代码用 `<Access code="xxx">` 包裹按钮
+
+---
+

package/references/ant6-front-standard/08-/346/200/247/350/203/275/350/264/250/351/207/217/350/247/204/350/214/203.md

@@ -0,0 +1,91 @@
+# 性能与质量规范
+
+> 适用范围: React 19 + TypeScript 6 + Ant Design 6 + ProComponents
+> 版本: v3.3
+
+---
+
+## 1、性能优化规范
+
+### 1.1 组件优化
+
+```tsx
+// 路由级代码分割
+import { lazy, Suspense } from 'react';
+import { Spin } from 'antd';
+
+const UserList = lazy(() => import('@/pages/user-list'));
+
+<Suspense fallback={<Spin size="large" />}>
+  <UserList />
+</Suspense>;
+
+// 避免不必要的重渲染
+export const UserItem = React.memo(function UserItem({ user }: { user: User }) {
+  return <div>{user.name}</div>;
+});
+```
+
+### 1.2 Hooks 优化
+
+```tsx
+// useCallback 缓存事件处理函数
+const handleDelete = useCallback(async (id: number) => {
+  await deleteUser(id);
+  fetchList();
+}, [fetchList]);
+
+// useMemo 缓存计算结果
+const filteredUsers = useMemo(
+  () => users.filter((user) => user.active),
+  [users],
+);
+```
+
+### 1.3 列表渲染
+
+```tsx
+// 必须提供稳定的 key
+{users.map((user) => <UserItem key={user.id} user={user} />)}
+```
+
+---
+
+## 2、代码质量标准
+
+### 2.1 代码复杂度
+
+- 单个函数不超过 50 行
+- 单个文件不超过 300 行，超出按职责拆分
+- 嵌套层级不超过 3 层
+- 圈复杂度不超过 10
+
+### 2.2 错误处理
+
+```typescript
+async function handleSubmit(values: UserFormValues) {
+  try {
+    await createUser(values);
+    message.success('新增成功');
+    closeModal();
+  } catch (error) {
+    // request 拦截器已弹出错误提示，此处可做额外处理
+    console.error('创建用户失败:', error);
+  }
+}
+```
+
+### 2.3 ESLint 规则
+
+- 使用 `typescript-eslint` 进行 TypeScript 感知检查
+- 启用 `eslint-plugin-react-hooks` 检查 Hooks 使用规则
+- 启用 `eslint-plugin-react-refresh` 检查 HMR 兼容性
+- 禁止在 `useEffect` 中遗漏依赖项
+- 提交前必须本地通过：`npx tsc -b` 与 `npx eslint <changed-files>`
+
+### 2.4 构建
+
+- 构建必须通过：`npm run build`（等价于 `tsc -b && vite build`）
+
+---
+

package/references/ant6-front-standard/09-/345/270/270/350/247/201/351/227/256/351/242/230/350/247/204/350/214/203.md

@@ -0,0 +1,87 @@
+# 常见问题规范（必读陷阱）
+
+> 适用范围: React 19 + TypeScript 6 + Ant Design 6 + ProComponents
+> 版本: v3.3
+
+---
+
+## 一、常见问题规范（必读陷阱）
+
+> 以下均为项目实际踩过的坑，新增代码时必须注意。
+
+### 1.1 `form.validateFields()` 只返回已挂载 Form.Item
+
+- 编辑模式隐藏字段（如 `username/password`）不会被收集
+- 提交时必须 `{ ...originData.current, ...values, id }` 合并
+- 隐藏字段用 `hidden={!!id}`，**不要**用 `{!id && <Form.Item>}`
+
+### 1.2 AntD `Upload` 不识别 `value` 属性
+
+- `<Form.Item name="logo">` 默认会注入 `value` → Upload 报警告
+- **正确做法**：外层 `Form.Item` 仅做标签（不带 `name`），里面套 `<Form.Item name="logo" noStyle hidden><Input /></Form.Item>` 持有值
+
+### 1.3 AntD Tree `onSelect` 点击已选节点返回空数组
+
+- 不要自己做 toggle，直接判断 `keys.length === 0`
+
+### 1.4 AntD Tree 勾选要收集 `halfCheckedKeys`
+
+- 菜单权限分配父节点半选也要提交，用 `onCheck` 的 `info.halfCheckedKeys`
+
+### 1.5 Tree 编辑回显只勾选叶子节点
+
+- 直接 `setCheckedKeys(所有menuIds)` 会让父节点全选 → 子节点都被选
+- 用 `getLeafKeys()` 只勾叶子
+
+### 1.6 `react-hooks/set-state-in-effect`
+
+- `useEffect` 内调 `setState` 或调用内部包含 setState 的函数会被 lint 标记
+- **统一处理**：在 setState 行（或 `void fetchList()` 行）上方加 `// eslint-disable-next-line react-hooks/set-state-in-effect`
+
+### 1.7 MSW 路径必须 `/admin-api/` 前缀
+
+- `baseURL = http://127.0.0.1:48080/admin-api`，handler 不带 `/admin-api/` 拦截不到
+
+### 1.8 flex 代替 Row/Col 做左右分栏
+
+- AntD `Row` 默认 `flex-wrap: wrap`，左侧树+右侧列表会被换行
+- 用原生 `display: flex` + `flexShrink: 0`
+
+### 1.9 Drawer 宽度直接使用 `width` 属性
+
+- Ant Design 6 中 `width` 属性直接可用：`<Drawer width={600}>`
+- 默认宽度 378px，常用值：480 / 520 / 600 / 720
+- 也可用 `size="large"` 取预设（约 736px）
+
+### 1.10 Badge 显示数字而非红点
+
+- `<Badge count={n} overflowCount={99} size="small">` 而非 `dot`
+- count 为 0 时 antd 自动隐藏徽标
+
+### 1.11 `localeCompare` 仅对 string 有效
+
+- 如果后端 `createTime` 可能是 number/Date，统一用 `new Date(v).getTime()` 比较
+
+### 1.12 ProTable `valueType: 'dateRange'` 列必须用 `render` 而非 `renderText`
+
+- `renderText` 会被 valueType 的 dateRange 处理逻辑覆盖，单元格显示空白
+
+### 1.13 页面文件路径必须等于后端菜单 `component`
+
+- 例：后端给 `infra/data-source-config/index` → 文件 `src/pages/infra/data-source-config/index.tsx`
+- 错位会出现 `Component not found` 警告，并 404
+
+### 1.14 mock 菜单注册点要更新 codeMap
+
+- 加新权限按钮时除了菜单数组，还要在 `collectPermissionsFromBackendMenus` 内的 `codeMap` 注册
+
+### 1.15 避免缓存数据为空导致 Select 显示原始 ID
+
+- 父组件应在挂载时一次性加载下拉数据：`useEffect(() => { fetch(); }, [])`，**不要**只在「新增」按钮 onClick 中拉
+
+### 1.16 CRLF/LF 警告
+
+- Windows 上 git add 会提示 `LF will be replaced by CRLF`，无需处理
+
+---
+

package/references/ant6-front-standard/index.md

@@ -0,0 +1,100 @@
+# 前端编码规范索引
+
+> **适用范围**: React 19 + TypeScript 6 + Ant Design 6 + ProComponents
+> **版本**: v3.3
+
+---
+
+本目录包含 `front-demo`和`web-ui` 两个前端项目的前端开发规则。生成或修改代码前，先按任务类型读取对应规则。
+
+## 文件清单
+
+| 序号 | 文件名                                             | 主要内容                                                                                 |
+| ---- | -------------------------------------------------- | ---------------------------------------------------------------------------------------- |
+| 01   | [01-基础规范.md](./01-基础规范.md)                 | 一 ~  技术栈基线、目录结构、命名、编码风格、TypeScript、样式、Vue→React 迁移映射表、总结 |
+| 02   | [02-组件规范.md](./02-组件规范.md)                 | React 组件规范（函数组件 / Props / Hook）、上传组件、时间格式化                          |
+| 03   | [03-列表规范.md](./03-列表规范.md)                 | ProTable 列表页标准模式（标准模板、列定义规则）                                          |
+| 04   | [04-表单规范.md](./04-表单规范.md)                 | Modal / Drawer 使用标准规范（布局分级、标准模板、一栏~四栏布局）                         |
+| 05   | [05-路由状态接口规范.md](./05-路由状态接口规范.md) | 路由（动态路由 / 守卫）、Zustand 状态管理、API 接口规范                                  |
+| 06   | [06-国际化规范.md](./06-国际化规范.md)             | react-i18next 多语言支持（命名空间、语言包结构、切换）                                   |
+| 07   | [07-字典权限规范.md](./07-字典权限规范.md)         | 字典系统（DictTag / getDictOptions）、权限系统（Access / useAccess）                     |
+| 08   | [08-性能质量规范.md](./08-性能质量规范.md)         | 性能优化（lazy / memo / useMemo）、代码质量标准（复杂度 / ESLint / 构建）                |
+| 09   | [09-常见问题规范.md](./09-常见问题规范.md)         | 项目实际踩坑与解决方案（16 条必读陷阱）                                                  |
+
+---
+
+## 按场景推荐阅读
+
+### 新增普通业务页面
+
+1. `01-基础规范.md` — 熟悉技术栈与目录约定
+2. `05-路由状态接口规范.md` — 路由、状态、接口规范
+3. `03-列表规范.md` — ProTable 列表页模板
+4. `04-表单规范.md` — Modal / Drawer 表单模板
+5. `07-字典权限规范.md` — 字典渲染与按钮权限
+
+### 新增列表页
+
+1. `03-列表规范.md` — ProTable 标准模板与列规则
+2. `07-字典权限规范.md` — 字典下拉 + 权限按钮
+3. `02-组件规范.md` — 时间格式化与上传组件
+
+### 新增表单 / 流程页面
+
+1. `04-表单规范.md` — Modal / Drawer 布局分级与标准模板
+2. `05-路由状态接口规范.md` — API 接口规范
+3. `09-常见问题规范.md` — 必读陷阱（validateFields、Upload、Tree 等）
+
+### 国际化 / 字典 / 权限模块
+
+1. `06-国际化规范.md` — i18n 命名空间、语言包结构
+2. `07-字典权限规范.md` — 字典与权限系统
+
+### 代码评审 / 质量检查
+
+1. `08-性能质量规范.md` — 性能与质量标准
+2. `09-常见问题规范.md` — 16 条踩坑清单
+3. `01-基础规范.md` — 命名 / 编码风格 / TypeScript 规范
+
+### 从 Vue 迁移到 React
+
+1. `01-基础规范.md` — 熟悉技术栈与目录约定
+2. `vue迁移到react规范.md` —  Vue → React 迁移映射表
+3. `09-常见问题规范.md` — 常见差异点
+
+---
+
+
+## 维护说明
+
+- 拆分后的各文件章节号已独立重编号，每份均从「一」开始，便于独立阅读。
+- 更新规范时，请同步修改对应拆分文件及本索引。
+
+## 总结
+
+本规范文档涵盖了 React 19 + TypeScript 6 + Ant Design 6 项目的完整开发规范。团队成员必须严格遵守，以确保代码质量和协作效率。
+
+**重要提醒**：
+1. 所有新代码必须符合本规范
+2. 代码评审时重点检查规范遵守情况
+3. 定期更新规范以适应项目发展
+4. 遇到规范未覆盖的情况，及时讨论并补充
+
+**新模块自检清单**：
+
+- [ ] 文件路径与后端菜单 path 对齐
+- [ ] API、Mock handler、Mock data、菜单、权限码 五处全部更新
+- [ ] 所有时间字段用 `dateFormatter` 渲染
+- [ ] 所有字典字段用 `<DictTag>` + `valueEnum`
+- [ ] 所有按钮用 `<Access code="...">` 包裹
+- [ ] Modal 用 `open/id/onSuccess/onCancel` 四件套 + `originData` 合并
+- [ ] ProTable 而非手撸 Card+Form+Table
+- [ ] `npm run build` 通过
+- [ ] `npx eslint <new-files>` 零错误
+- [ ] 关键逻辑加中文注释，复杂分支说明「为什么这么写」
+
+---
+
+**文档结束**
+
+*本文档作为前端开发的标准规范，所有开发人员必须严格遵守。*

package/references/ant6-front-standard/vue/350/277/201/347/247/273/345/210/260react/350/247/204/350/214/203.md

@@ -0,0 +1,37 @@
+# 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`。
+
+---