Instruction file imported from weiangogo21/luosiwang-master (
.cursor/rules/frontend-performance.mdc). Copyright stays with the author.
前端性能与交互规范
路由跳转
- 禁止使用
window.open做内部导航，必须用useRouter().push() - 新增路由组必须同时创建
loading.tsx（骨架屏），否则用户会看到白屏空等 - 高频入口使用
router.prefetch()预热（页面加载后 + 鼠标悬停时）
antd 上下文
- 禁止使用
import { message } from 'antd'静态调用 - 必须通过
const { message, modal, notification } = App.useApp()获取上下文实例
导航交互防护
- 所有触发路由跳转的元素必须有即时 loading 反馈（spinner/按钮 loading）
- 使用
useTransition+ 状态锁防止重复点击 - 导航期间禁用其他可点击元素
布局组件
- 禁止使用
dynamic(() => import(...), { ssr: false })加载布局组件 - 布局组件使用静态
import，配合loading.tsx实现过渡
开发环境
- 默认使用
next dev --turbopack（npm run dev 已配置） - 禁止同时存在多个 next.config 文件
- 禁止多处同时启动 frontend-admin：多个实例会共用同一个
frontend-admin/.next编译产物目录，导致文件产物目录冲突（如routes-manifest.jsonENOENT、vendor-chunks缺失），进而出现 500、白屏。这不是端口冲突，而是 Next 编译目录被并发写入破坏。如需并行调试，必须用NEXT_DIST_DIR=.next-alt等独立目录并指定不同端口。
详细文档
- 完整规范和代码示例见
docs/design/后台管理系统架构设计.md第九章