Appearance
🗄️ 项目结构
项目代码主要在 src 目录。
请按以下结构标准创建新功能:
项目结构
sh
src
|
+-- assets # 资源文件
|
+-- components # 全局组件
|
+------ layouts # 布局: <AdminLayout/>, <UserLayout/>, <AuthLayout/>
|
+------ atoms # 原子组件: <KBSelect/>
|
+----------- index.ts # export所有组件
|
+------ molecules # 分子组件: <KBSelectUser/>
|
+----------- index.ts # export所有组件
|
+-- contexts # 全局React Context,主要是语言,主题设置
|
+-- enums # 常数enum,自动生成的代码,一般不改
|
+-- locales # 国际化文件
|
+-- pages # 页面组件
|
+------ admin # 管理端页面组件
|
+----------- feature1 # 管理端模块组件
|
+------ auth # 登录注册页面组件
|
+------ user # 用户端页面组件
|
+----------- feature1 # 用户端模块组件
|
+-- api # API 定义 (自动生成)
|
+-- routes # 主路由定义,包括ProtectedRoute(用户侧), AdminRoute(管理侧)
|
+-- stores # 全局状态管理 jotai atom store
|
+-- themes # 主题设置
|
+-- types # 全局Type定义
|
+-- utils # Util页面组件(pages)包括所有页面UI。按模块内容分目录。
模块目录结构
每个模块的结构(不一定所有子目录都需要),举例说明:
sh
src/pages/admin/desks
|
+-- components # 该模块的组件
|
+-- hooks # 该模块需要的hooks(API调用)
|
+-- routes # 该模块内部的路由
|
+-- stores # 该模块自己的状态(几乎没有)
|
+-- types # 该模块的类型定义
|
+-- utils # 该模块的Util
|
+-- index.ts # entry pointindex.ts 应export所有外部需要的组件和函数等
引用方式:
import {AwesomeComponent} from "@/features/awesome-feature"
而不是:
import {AwesomeComponent} from "@/features/awesome-feature/components/awesome-component