140 lines
5.1 KiB
Markdown
140 lines
5.1 KiB
Markdown
# 路由迁移总结
|
||
|
||
## 📋 迁移概述
|
||
|
||
已成功将旧项目 @Cunkebao 的路由结构迁移到新项目 @nkebao，并进行了合理的文件拆分和归类。
|
||
|
||
## 🗂️ 路由模块结构
|
||
|
||
### 1. 基础路由模块 (`auth.tsx`)
|
||
- `/login` - 登录页面
|
||
|
||
### 2. 设备管理模块 (`devices.tsx`)
|
||
- `/devices` - 设备列表
|
||
- `/devices/:id` - 设备详情
|
||
|
||
### 3. 微信号管理模块 (`wechat-accounts.tsx`)
|
||
- `/wechat-accounts` - 微信号列表
|
||
- `/wechat-accounts/:id` - 微信号详情
|
||
|
||
### 4. 工作台模块 (`workspace.tsx`)
|
||
- `/workspace` - 工作台主页
|
||
- `/workspace/auto-like` - 自动点赞
|
||
- `/workspace/auto-like/new` - 新建自动点赞
|
||
- `/workspace/auto-like/:id` - 自动点赞详情
|
||
- `/workspace/auto-like/:id/edit` - 编辑自动点赞
|
||
- `/workspace/auto-group` - 自动分组
|
||
- `/workspace/auto-group/:id` - 自动分组详情
|
||
- `/workspace/group-push` - 群发推送
|
||
- `/workspace/group-push/new` - 新建群发推送
|
||
- `/workspace/group-push/:id` - 群发推送详情
|
||
- `/workspace/group-push/:id/edit` - 编辑群发推送
|
||
- `/workspace/moments-sync` - 朋友圈同步
|
||
- `/workspace/moments-sync/new` - 新建朋友圈同步
|
||
- `/workspace/moments-sync/:id` - 朋友圈同步详情
|
||
- `/workspace/moments-sync/edit/:id` - 编辑朋友圈同步
|
||
- `/workspace/ai-assistant` - AI助手
|
||
- `/workspace/traffic-distribution` - 流量分发
|
||
- `/workspace/traffic-distribution/new` - 新建流量分发
|
||
- `/workspace/traffic-distribution/edit/:id` - 编辑流量分发
|
||
- `/workspace/traffic-distribution/:id` - 流量分发详情
|
||
|
||
### 5. 场景管理模块 (`scenarios.tsx`)
|
||
- `/scenarios` - 场景列表
|
||
- `/scenarios/new` - 新建场景
|
||
- `/scenarios/new/:scenarioId` - 新建场景（带场景ID）
|
||
- `/scenarios/edit/:planId` - 编辑场景
|
||
- `/scenarios/list/:scenarioId/:scenarioName` - 场景列表详情
|
||
|
||
### 6. 内容管理模块 (`content.tsx`)
|
||
- `/content` - 内容管理
|
||
- `/content/new` - 新建内容
|
||
- `/content/edit/:id` - 编辑内容
|
||
- `/content/materials/:id` - 素材管理
|
||
- `/content/materials/new/:id` - 新建素材
|
||
- `/content/materials/edit/:id/:materialId` - 编辑素材
|
||
|
||
### 7. 流量池模块 (`traffic-pool.tsx`)
|
||
- `/traffic-pool` - 流量池列表
|
||
- `/traffic-pool/:id` - 流量池详情
|
||
|
||
### 8. 其他功能模块 (`other.tsx`)
|
||
- `/profile` - 个人中心
|
||
- `/plans` - 计划管理
|
||
- `/plans/:planId` - 计划详情
|
||
- `/orders` - 订单管理
|
||
- `/contact-import` - 联系人导入
|
||
|
||
## 🔧 技术实现
|
||
|
||
### 路由配置
|
||
- 使用 React Router DOM v6
|
||
- 支持动态路由参数
|
||
- 统一的权限控制
|
||
- 模块化路由管理
|
||
|
||
### 权限控制
|
||
- 每个路由都配置了 `auth` 属性
|
||
- 支持角色权限控制
|
||
- 自动权限检查
|
||
|
||
### 组件结构
|
||
- 使用 Layout 组件统一布局
|
||
- 使用 MeauMobile 组件作为底部导航
|
||
- 创建了 PlaceholderPage 通用占位组件
|
||
|
||
## 📁 文件结构
|
||
|
||
```
|
||
src/
|
||
├── router/
|
||
│ ├── module/
|
||
│ │ ├── index.tsx # 主路由文件
|
||
│ │ ├── auth.tsx # 认证路由
|
||
│ │ ├── devices.tsx # 设备管理路由
|
||
│ │ ├── wechat-accounts.tsx # 微信号管理路由
|
||
│ │ ├── workspace.tsx # 工作台路由
|
||
│ │ ├── scenarios.tsx # 场景管理路由
|
||
│ │ ├── content.tsx # 内容管理路由
|
||
│ │ ├── traffic-pool.tsx # 流量池路由
|
||
│ │ └── other.tsx # 其他功能路由
|
||
│ ├── index.tsx # 路由入口
|
||
│ ├── permissionRoute.tsx # 权限路由组件
|
||
│ └── config.ts # 路由配置
|
||
├── pages/
|
||
│ ├── login/ # 登录页面
|
||
│ ├── devices/ # 设备管理页面
|
||
│ ├── wechat-accounts/ # 微信号管理页面
|
||
│ ├── workspace/ # 工作台页面
|
||
│ ├── scenarios/ # 场景管理页面
|
||
│ ├── content/ # 内容管理页面
|
||
│ ├── traffic-pool/ # 流量池页面
|
||
│ ├── profile/ # 个人中心页面
|
||
│ ├── plans/ # 计划管理页面
|
||
│ ├── orders/ # 订单管理页面
|
||
│ └── contact-import/ # 联系人导入页面
|
||
└── components/
|
||
└── PlaceholderPage.tsx # 通用占位页面组件
|
||
```
|
||
|
||
## 🎯 主要特性
|
||
|
||
1. **模块化设计**: 按功能模块拆分路由，便于维护
|
||
2. **权限控制**: 统一的权限管理机制
|
||
3. **类型安全**: 完整的 TypeScript 类型定义
|
||
4. **响应式设计**: 适配移动端和桌面端
|
||
5. **代码复用**: 使用通用组件减少重复代码
|
||
|
||
## 🚀 下一步计划
|
||
|
||
1. 实现具体的页面功能
|
||
2. 完善权限控制逻辑
|
||
3. 添加路由懒加载
|
||
4. 优化页面性能
|
||
5. 添加路由守卫
|
||
|
||
## 📝 注意事项
|
||
|
||
- 所有页面目前都是占位页面，需要根据业务需求逐步实现
|
||
- 路由权限控制需要根据实际业务逻辑调整
|
||
- 建议按照模块优先级逐步开发页面功能 |