5.1 KiB
5.1 KiB
路由迁移总结
📋 迁移概述
已成功将旧项目 @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 # 通用占位页面组件
🎯 主要特性
- 模块化设计: 按功能模块拆分路由，便于维护
- 权限控制: 统一的权限管理机制
- 类型安全: 完整的 TypeScript 类型定义
- 响应式设计: 适配移动端和桌面端
- 代码复用: 使用通用组件减少重复代码
🚀 下一步计划
- 实现具体的页面功能
- 完善权限控制逻辑
- 添加路由懒加载
- 优化页面性能
- 添加路由守卫
📝 注意事项
- 所有页面目前都是占位页面，需要根据业务需求逐步实现
- 路由权限控制需要根据实际业务逻辑调整
- 建议按照模块优先级逐步开发页面功能