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:
Yep_Q
2025-09-29 16:07:19 +08:00
parent 67f5dfbe50
commit a884afc494
89 changed files with 1580 additions and 2009 deletions

View File

@@ -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] 修复了暂停和重置按钮功能evidenceWorkflowPageV4.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] 实现了文旅和食品两个订单班的模拟数据evidencewenlu.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-demoevidence移动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_
- Riskn8n 1.109.2 版本可能存在兼容性问题Mitigation使用标准安装流程和依赖锁定
- Risk12个订单班同时开发资源分散Mitigation优先开发3个重点订单班模板化快速复制
- Risk动态切换订单班可能造成状态管理复杂Mitigation使用JSON配置文件统一管理清晰的数据流
- RiskJSON文件格式不一致可能导致加载失败Mitigation统一数据格式标准
- RiskTSX模拟系统缺少数据可能影响演示效果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、outputsJSON文件格式必须包含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参数
- 配置内容: 每个订单班包含项目名称、规模、投资、技术指标等专业参数