bq_react/doc/基础知识/当前框架技术栈说明.md

当前框架技术栈说明

本目录讲上手这套脚手架需要的概念。本仓库怎么分层、模块之间数据怎么走，见 项目架构。新代码怎么命名、怎么接进容器，见 代码撰写规范。

目录

• 阅读顺序
• 技术栈
• 样式
• 路由怎么挂页面

阅读顺序

1. 本文。
2. DDD是什么。知道四层、聚合根和端口各自放什么。
3. DI是什么。知道类怎样进容器，页面怎样拿到它们。
4. mobx是什么。知道页面状态、实体和快照。
5. 常见设计模式及使用。只看本仓库用到的几种。
6. 代码实践。沿登录走一遍。

国际化、数据库、Worker 的用法在 doc/项目文档/基础应用/。界面组件使用 Ant Design，不在本目录展开。

技术栈

作用	库
界面	React
路由	React Router。路由表在 src/app/routes.ts
构建	Vite。环境文件在 src/，只暴露 VITE_ 开头的变量
语言	TypeScript。装饰器需要 experimentalDecorators 和 emitDecoratorMetadata
依赖注入	Inversify。容器在 src/app/di/root_container.ts
页面状态	MobX，配合 mobx-react-lite 的 observer
实体	mobx-keystone 的 @model
请求	axios。封装在 src/app/network
文案	i18next
样式	Sass

路径别名 @/ 指向 src/。跨目录用它，同一功能模块内部用相对路径。

样式

组件样式用同名 .scss，在组件文件里 import。主题色由 src/app/theme 解析后交给 Ant Design，不在每个组件里各写一套亮色和暗色。

路由怎么挂页面

页面不自己注册路由。src/app/routes.ts 把 URL 指到 presentation 下的页面文件，页面使用默认导出。

export default [
  layout('routes/app_shell.tsx', [
    index('../features/home/presentation/home/home.tsx'),
    layout('routes/layouts/guest.layout.tsx', [
      route('security', '../features/security/presentation/security/security.tsx'),
    ]),
    layout('routes/layouts/auth.layout.tsx', [
      route('editor/:projectId', '../features/editor/presentation/editor/editor.tsx'),
    ]),
  ]),
] satisfies RouteConfig;

app_shell 提供文案和主题。guest 只允许未登录进入，例如 /security。auth 只允许已登录进入，例如 /editor/:projectId。判断使用 hasSession()，规则在 decideRoutePolicy。

新增页面时：在功能模块的 presentation 写下默认导出的页面，再在这张表里登记路径和布局。