docs: 添加模块化重构设计文档

支持多 BI 大类(资产管理、里程管理)的架构重构设计,
包括目录结构、Shell 布局、导航机制和迁移策略。

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
kkfluous
2026-04-01 19:03:13 +08:00
parent 44c6f98254
commit cfd81b1b9d

View File

@@ -0,0 +1,106 @@
# 模块化重构设计:支持多 BI 大类
## 背景
当前项目是一个单体 BI 看板(资产管理),所有前端逻辑集中在 `App.tsx`~2800 行)。后续需要扩展"里程管理"等新 BI 大类。本次重构目标是建立模块化架构,让新模块可以低成本接入,同时不影响现有功能。
## 目标
- 建立模块级拆分架构,每个 BI 大类作为独立模块
- 新增全局导航Web 端侧边栏、移动端底部导航栏
- 去掉现有资产管理内部的移动端底部导航(与顶部 Tab 重复)
- 里程管理模块仅做占位,具体功能后续实现
- 后端不动
## 重构后目录结构
```
src/
├── App.tsx # 顶层Shell + hash 路由分发
├── main.tsx # 入口(不变)
├── index.css # 全局样式(不变)
├── components/ # 公共组件
│ ├── Shell.tsx # 布局壳(侧边栏 + 底部导航 + 内容区)
│ └── SearchSelect.tsx # 搜索下拉组件(从 App.tsx 抽出)
├── modules/
│ ├── assets/ # 资产管理模块
│ │ ├── AssetsModule.tsx # 现有 App.tsx 全部逻辑迁入
│ │ ├── api.ts # 现有 src/api.ts 迁入
│ │ └── types.ts # 现有 src/types.ts 迁入
│ │
│ └── mileage/ # 里程管理模块(占位)
│ └── MileageModule.tsx # 占位组件
└── server/ # 后端完全不动
```
## Shell 布局设计
### 模块注册
```ts
const MODULES = [
{ id: 'assets', label: '资产管理', icon: Truck, component: AssetsModule },
{ id: 'mileage', label: '里程管理', icon: Route, component: MileageModule },
];
// 未来新模块只需往数组加一项
```
### Web 端md 及以上)— 左侧侧边栏
- 侧边栏窄版(约 64px图标 + 文字纵向排列
- 固定定位,内容区有左 margin
- 选中项高亮
### 移动端md 以下)— 底部导航栏
- 底部固定导航栏,切换 BI 大类(资产管理 / 里程管理)
- 替换掉现有资产管理内部的底部导航
### 路由机制
- `window.location.hash``#assets``#mileage`
- 默认无 hash 时进入 `#assets`
- Shell 监听 `hashchange` 事件切换模块
- 不引入任何路由库
## AssetsModule 迁移策略
### 改动
1. 去掉底部导航栏(原 App.tsx 2773-2802 行)
2. 去掉底部导航的 padding 留白
3. SearchSelect 改为从 `components/SearchSelect.tsx` 导入
4. 组件名从 `App` 改为 `AssetsModule`
### 不改
- 所有内部状态管理、Tab 切换、数据加载、图表、弹窗逻辑
- 顶部 Tab 栏(总览/按部门/按区域/按客户)
- API 调用逻辑(仅调整 import 路径)
## 文件迁移映射
| 原文件 | 目标 | 操作 |
|--------|------|------|
| `src/App.tsx` | `src/modules/assets/AssetsModule.tsx` | 迁移内容,去掉底部导航和 SearchSelect |
| `src/api.ts` | `src/modules/assets/api.ts` | 直接移动 |
| `src/types.ts` | `src/modules/assets/types.ts` | 直接移动 |
| App.tsx 中 SearchSelect | `src/components/SearchSelect.tsx` | 抽取为独立文件 |
## 新增文件
| 文件 | 内容 |
|------|------|
| `src/App.tsx`(重写) | 模块注册 + Shell 渲染 |
| `src/components/Shell.tsx` | 全局布局(侧边栏 / 底部导航 + 内容区) |
| `src/modules/mileage/MileageModule.tsx` | 占位页面 |
## 不在范围内
- AssetsModule 内部进一步拆分(保持现有结构)
- 里程管理具体功能实现
- 后端改动
- 新增依赖