SuperAPI AI 工具集

laravel-inertia-react-structure

前端与建站

查看项目

更新于 10-15 21:47

技能介绍

用途:为 Laravel Inertia React 应用提供前端目录与代码组织约定,适用于创建、脚手架搭建或审查项目时统一结构。

主要能力:规定 resources/js 下四个基础目录——common(跨项目通用可复用代码)、modules(项目内跨页面共享的特定代码)、pages(Inertia 页面组件)、shadcn(自动生成的 shadcn/ui 组件,如使用)。区分 common 与 modules 的判断标准是:是否与某个领域或功能相关,是则归 modules,通用且与项目无关则归 common。

命名约定:组件与 React context 用 PascalCase(如 Button.tsx、AuthContext.tsx);helpers、hooks、constants、stores 等其他文件用 camelCase(如 useAuth.ts、formatDate.ts);目录用 kebab-case(如 date-picker/、user-management/)。

模块组织:小模块用少量顶层文件;较大模块按类型分 components、contexts、constants、helpers、hooks、stores 及 types.ts(大时用 types/ 目录)。common/ 采用相同结构。

页面目录:pages 镜像 URL 结构,组件以 Page 为后缀,可含全局 layouts、分区 layouts、页面专属 components 与 helpers。

组件约定:使用函数声明而非 const 箭头函数,仅用命名导出;一个文件一个组件;不使用 barrel 文件(index.ts 再导出)。导入分两块,中间空行:先库导入,再应用导入,使用 @/ 别名的绝对路径。Props 按字母排序,className 与 children 放最后。样式使用 Tailwind,多数项目单个 app.css,较大项目拆为 base、components、utilities。多区域应用(如 admin/client)引入 apps/ 目录,各区域可有自己的 modules、pages 与 app.tsx。shadcn/ui 组件应抽象为更简单的项目专属实现,而非在应用代码中直接使用底层 API,抽象放在 common/ 或 modules/。

限制:资料未提供安装命令、依赖版本、构建配置或具体工具链要求。