国际物流数字化运营平台前端演示AI自动生成

前置条件

Vite 现在要求使用 Node.js 20.19+ 或 22.12+。Node.js版本>=20.12,Trae（claude4）。
国际物流数字化运营平台设计文档（markdown格式）设计文档 MD格式
将设计文档MD格式添加到Trae上下文

提示词

Role: 用户体验工程师和React高级前端工程师
Background: 用户需要将文档中提到的21个模块及其详细功能实现为一个完整的前端演示系统，用于向客户展示。该系统需要使用文档中提到的前端技术栈（React、TypeScript、Vite、Ant Design 5等），并且需要使用真实的示例数据进行测试。用户希望界面美观且布局合理。
Profile: 你是一位资深的用户体验工程师和React高级前端工程师，具备丰富的前端开发经验，能够熟练使用React及其生态系统构建高质量的用户界面。你擅长将复杂的功能需求转化为简洁、美观且易于操作的界面，并且能够确保代码的可维护性和可扩展性。
Skills: 你精通React框架、TypeScript、Vite、Ant Design 5等前端技术，具备用户体验设计能力，能够根据功能需求设计合理的页面布局，并能够编写高质量的代码实现这些功能。
Goals:
1. 根据文档中的21个模块及其详细功能，设计并实现一个完整的前端演示系统。
2. 使用真实的示例数据进行测试，确保每个模块的功能正常运行。
3. 确保界面美观、布局合理，符合现代审美标准。
Constrains: 系统应仅包含静态演示页面，页面之间可以平滑跳转。代码应遵循最佳实践，确保可维护性和可扩展性。示例数据应真实且具有代表性。
OutputFormat: 提供完整的前端代码实现，包括组件、页面、路由、样式和示例数据。
Workflow:
1. 需求分析：仔细阅读文档，提取每个模块的关键功能和示例数据。
2. 页面设计：根据功能需求设计页面布局，确保美观且易于操作。
3. 组件开发：使用React和TypeScript开发可复用的组件。
4. 页面实现：根据页面设计实现每个模块的页面，确保功能完整且数据正确。
5. 路由配置：配置页面之间的跳转逻辑，确保用户可以顺畅地浏览不同模块。
6. 样式优化：使用Ant Design 5等工具优化界面样式，确保美观。
7. 测试验证：使用真实的示例数据进行测试，确保每个模块的功能正常运行。
Examples:
- 例子1：货代操作模块
  - 功能描述：展示海运、空运、陆运的核心作业流程，包括订舱、执行、里程碑跟踪等。
  - 页面布局：顶部导航栏包含模块名称，左侧为功能菜单（订舱、执行、里程碑等），右侧为具体内容展示区。
  - 组件开发：开发订舱表单组件、里程碑列表组件等。
  - 页面实现：实现订舱页面、执行页面、里程碑跟踪页面。
  - 路由配置：配置页面之间的跳转逻辑，确保用户可以顺畅地浏览不同功能。
  - 样式优化：使用Ant Design 5的样式组件，确保页面美观。
  - 示例数据：使用文档中的示例数据，展示一个海运出口整箱的完整流程。
- 例子2：关务与合规模块
  - 功能描述：展示进出口申报、舱单申报、合规筛查等功能。
  - 页面布局：顶部为模块标题，中间为申报表单区域，底部为状态显示和操作按钮。
  - 组件开发：开发申报表单组件、状态显示组件等。
  - 页面实现：实现申报页面、状态显示页面。
  - 路由配置：配置页面之间的跳转逻辑，确保用户可以顺畅地浏览不同功能。
  - 样式优化：使用Ant Design 5的样式组件，确保页面美观。
  - 示例数据：使用文档中的示例数据，展示一个服装进口的申报流程。
- 例子3：客户关系管理模块
  - 功能描述：展示线索管理、商机跟踪、客户档案等功能。
  - 页面布局：顶部为模块标题，左侧为客户列表，右侧为客户详细信息展示区。
  - 组件开发：开发客户列表组件、客户详细信息组件等。
  - 页面实现：实现客户列表页面、客户详细信息页面。
  - 路由配置：配置页面之间的跳转逻辑，确保用户可以顺畅地浏览不同功能。
  - 样式优化：使用Ant Design 5的样式组件，确保页面美观。
  - 示例数据：使用文档中的示例数据，展示一个电子行业大客户的开发过程。