refactor: 优化RequirementModal UI设计和代码清理
主要更新: - 🎨 UI改进: - 将头部背景改为苹果风格设计 - 添加背景图片 /image/bg.png - 将图标替换为动态视频logo - 统一配色为蓝色系,移除紫色元素 - 优化标题和副标题布局 - 🧹 代码清理: - 删除5个临时测试文件 (test-*.html) - 删除4个旧版本页面组件 (WorkflowPage V1-V3, ResultPage V1) - 保留当前使用的 WorkflowPageV4 和 ResultPageV2 - 🔧 细节调整: - 视频logo尺寸调整为 80x80px - 移除视频容器的圆角和阴影效果 - 按钮颜色从紫色渐变改为蓝色渐变 项目结构更加清晰,界面设计更加现代化
This commit is contained in:
23
progress.md
23
progress.md
@@ -11,6 +11,8 @@ _Last updated: 2025-09-29_
|
||||
- ⚠️ 多订单班演示系统架构:使用单一exhibition-demo项目,动态切换12个订单班
|
||||
- ⚠️ 数据存储方案:使用JSON文件存储所有订单班配置,不使用SQLite数据库
|
||||
- ⚠️ 结果页面架构:采用混合模板方案(1个基础模板 + 动态内容加载)
|
||||
- ⚠️ 终端模拟系统必须使用TSX格式,不能使用JSON文件加载方式
|
||||
- ⚠️ 每个订单班需要agent prompt和专家头像数据才能实现模拟
|
||||
|
||||
## Decisions(按时间顺序追加,历史不可改)
|
||||
- 2025-09-07: 确定使用 n8n-1.109.2 版本进行完整中文化(理由:成熟稳定版本,功能完整)
|
||||
@@ -26,6 +28,8 @@ _Last updated: 2025-09-29_
|
||||
- 2025-09-28: 确定结果页面采用混合模板方案(理由:1个基础模板 + 动态内容加载,特殊订单班可定制组件)
|
||||
- 2025-09-28: 决定暂不实施Docker Compose方案(理由:现阶段项目架构已简化为单项目+JSON配置,避免过度工程化,专注核心功能开发)
|
||||
- 2025-09-29: 确定将orderClasses.json移动到exhibition-demo项目的data目录(理由:需求模板数据与演示系统紧密耦合,便于动态加载)
|
||||
- 2025-09-29: 决定使用动态JSON数据结构替代硬编码agent数据(理由:提高可维护性和扩展性)
|
||||
- 2025-09-29: 决定将终端模拟系统改为TSX格式(理由:替代JSON文件加载方式,提升代码复用性和类型安全)
|
||||
|
||||
## TODO(权威待办清单)
|
||||
- [P1][OPEN][#1] 优化 Duoduo Agent 设计系统的用户交互体验
|
||||
@@ -46,11 +50,21 @@ _Last updated: 2025-09-29_
|
||||
- [P1][OPEN][#36] 实现Agent动态加载机制(Context:选择订单班后动态加载对应Agent)
|
||||
- [P0][OPEN][#37] 生成所有Agent头像(Context:约100个Agent形象设计,需要统一风格)
|
||||
- [P1][OPEN][#46] 优化需求模板数据映射的用户体验(Context:改进点击订单班后的模板填充交互)
|
||||
- [P1][OPEN][#53] 补充其他10个订单班的agent prompt和头像数据(Context:已完成文旅和食品两个订单班)
|
||||
- [P1][OPEN][#54] 在浏览器中实际测试文旅和食品的演示流程(Context:验证TSX模拟系统功能)
|
||||
|
||||
## In Progress
|
||||
- [P1][DOING][#5] 维护和优化当前多智能体展示分支功能
|
||||
|
||||
## Done(最近完成的放前面)
|
||||
- 2025-09-29: [#58] 修复了暂停和重置按钮功能(evidence:WorkflowPageV4.tsx添加resumeDemo函数导入,修改按钮点击逻辑支持idle/paused/running三种状态切换,重置按钮添加调试日志并清除selectedOrderClass和terminalData状态)
|
||||
- 2025-09-29: [#55] 创建了TSX版本的终端模拟系统(evidence:替代原有JSON文件加载方式,创建/src/data/terminalSimulations/目录结构,实现index.ts统一管理器,定义TerminalLine和SimulationData类型接口)
|
||||
- 2025-09-29: [#56] 实现了文旅和食品两个订单班的模拟数据(evidence:wenlu.ts文旅订单班2024长三角国际新能源汽车展会策划案,food.ts食品订单班青莳轻食连锁品牌创业方案,每个文件包含完整7个Agent输出模拟)
|
||||
- 2025-09-29: [#57] 更新了WorkflowPageV4组件(evidence:修改loadTerminalData函数使用新TSX模拟系统,通过import('@/data/terminalSimulations')动态导入,自动转换数据格式兼容现有终端显示系统)
|
||||
- 2025-09-29: [#49] 完成动态加载终端数据功能开发(evidence:创建wenlu.json数据结构,修改WorkflowPageV4.tsx支持动态加载,修复agent数据映射问题,更新底部Agent状态栏使用动态数据)
|
||||
- 2025-09-29: [#50] 修复了JSON数据格式映射问题(evidence:将agentData.agent.name改为agentData.name,修复executeAgent函数调用)
|
||||
- 2025-09-29: [#51] 创建了文旅订单班终端数据JSON文件(evidence:/web_frontend/exhibition-demo/public/data/terminal/wenlu.json,包含完整agent配置和输出内容)
|
||||
- 2025-09-29: [#52] 实现了终端数据动态加载机制(evidence:添加loadTerminalData函数,支持错误处理和无数据提示)
|
||||
- 2025-09-29: [#44] 完成12个订单班需求模板集成到exhibition-demo(evidence:移动orderClasses.json到/web_frontend/exhibition-demo/src/data/,修改RequirementModal组件使用配置文件数据,修复标题显示问题,实现需求模板数据映射,点击不同订单班自动填充对应专业需求描述)
|
||||
- 2025-09-29: [#43] 完成订单班需求模板配置文件创建(evidence:创建orderClasses.json配置文件,包含12个订单班完整需求模板,基于实际文档内容提取,文件位置/web_frontend/orderClasses.json)
|
||||
- 2025-09-28: [#38] 完成项目重组和文档资料整理(evidence:将2345个文件从doc/订单班文档资料/迁移到data/订单班文档资料/,保持所有12个订单班的完整文档资料,commit beb1ba38)
|
||||
@@ -78,14 +92,22 @@ _Last updated: 2025-09-29_
|
||||
- Risk:n8n 1.109.2 版本可能存在兼容性问题(Mitigation:使用标准安装流程和依赖锁定)
|
||||
- Risk:12个订单班同时开发资源分散(Mitigation:优先开发3个重点订单班,模板化快速复制)
|
||||
- Risk:动态切换订单班可能造成状态管理复杂(Mitigation:使用JSON配置文件统一管理,清晰的数据流)
|
||||
- Risk:JSON文件格式不一致可能导致加载失败(Mitigation:统一数据格式标准)
|
||||
- Risk:TSX模拟系统缺少数据可能影响演示效果(Mitigation:优先补充文旅和食品两个重点订单班数据)
|
||||
- Assumption:用户具备基本的n8n使用经验(Confidence: Medium)
|
||||
- Assumption:展会策划需求相对标准化(Confidence: High)
|
||||
- Assumption:开发环境支持 Node.js 和 pnpm 工具链(Confidence: High)
|
||||
- Assumption:食品订单班基于文旅订单班框架,代码复用可达90%(Confidence: High)
|
||||
- Assumption:订单班模板化开发可将总工期从6-7周缩短至4周(Confidence: High)
|
||||
- Assumption:其他11个订单班的Agent数据可以及时收集到位(Confidence: Medium)
|
||||
- Assumption:其他订单班的数据结构与文旅订单班类似(Confidence: High)
|
||||
|
||||
## Notes(简要要点)
|
||||
- 2025-09-29: 暂停和重置按钮功能修复完成:修复了暂停按钮点击后无法恢复的问题和重置按钮无法完全清理状态的问题,添加resumeDemo函数导入,修改按钮点击逻辑支持idle/paused/running三种状态切换,重置按钮现在能正确清除selectedOrderClass和terminalData状态,添加调试日志便于问题排查
|
||||
- 2025-09-29: TSX终端模拟系统创建完成:替代原JSON文件加载方式,创建/src/data/terminalSimulations/目录,实现index.ts统一管理器,定义TerminalLine和SimulationData类型接口,实现文旅和食品两个订单班模拟数据(wenlu.ts和food.ts),每个文件包含完整7个Agent输出模拟,更新WorkflowPageV4组件使用新系统
|
||||
- 2025-09-29: 关键决策:只保留文旅和食品两个订单班,因为其他订单班缺少agent prompt和专家头像数据;使用函数形式导出便于传入agents参数保持与store同步;保持向后兼容数据格式转换确保现有终端显示逻辑无需修改
|
||||
- 2025-09-29: 动态加载终端数据功能完成:创建了wenlu.json数据结构包含orderClassId、orderClassName、projectTitle、startupSequence、agents数组、completionSequence;修改WorkflowPageV4.tsx添加loadTerminalData函数和相关state;修复agent数据映射问题(agentData.agent.name改为agentData.name);更新底部Agent状态栏使用动态数据;添加错误处理显示无数据时的提示
|
||||
- 2025-09-29: JSON数据格式标准:agents数组中每个agent包含id、name、description、outputs;JSON文件格式必须包含agents数组,每个agent需要有name属性;其他订单班会显示提示:"暂无{orderClassId}订单班的演示数据,目前仅支持文旅订单班"
|
||||
- 2025-09-29: 12个订单班需求模板集成完成:实现了点击不同订单班自动填充专业需求描述的功能,包括食品-青莳轻食连锁品牌、文旅-2024长三角新能源汽车展、智能制造-汽车零部件智能分拣系统等12个专业领域具体项目需求,需求模板数据成功映射到RequirementModal组件
|
||||
- 2025-09-29: orderClasses.json文件迁移完成:从项目根目录移动到exhibition-demo/src/data/目录,与演示系统实现紧密耦合,支持动态加载需求模板数据
|
||||
- 2025-09-29: RequirementModal组件功能升级:从静态展会策划需求改为基于配置文件的动态需求模板,标题统一显示为"输入需求",用户体验更加一致
|
||||
@@ -135,6 +157,7 @@ _Last updated: 2025-09-29_
|
||||
- overview.html (总览页面)
|
||||
- 多订单班配置:
|
||||
- orderClasses.json (所有订单班配置文件,位置:exhibition-demo/src/data/,包含12个订单班需求模板)
|
||||
- 终端模拟系统: exhibition-demo/src/data/terminalSimulations/ (TSX格式,当前支持wenlu.ts和food.ts)
|
||||
- 跳转格式: /web_result/?orderClass=food
|
||||
- 数据存储: sessionStorage配合URL参数
|
||||
- 配置内容: 每个订单班包含项目名称、规模、投资、技术指标等专业参数
|
||||
Reference in New Issue
Block a user