Skip to content

🗄️ 项目结构

项目代码主要在 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 point

index.ts 应export所有外部需要的组件和函数等

引用方式:

import {AwesomeComponent} from "@/features/awesome-feature"

而不是:

import {AwesomeComponent} from "@/features/awesome-feature/components/awesome-component