Files

Yep_Q 2b1ed656cd feat: 优化会展网站首页用户体验和视觉效果

主要改进:
- 修复星形图标可见性问题，改为黄色高对比度显示
- 移除'立即参展'按钮，清理冗余CTA元素
- 修正背景图片路径并优化透明度(opacity-10)
- 为所有容器区域添加hover提示文字
- 删除'立即参与，共创绿色出行未来'整个CTA区块
- 优化页面加载器和图片错误处理
- 修复展会信息卡片文字对比度问题
- 增强多层背景遮罩效果

影响文件:
- web_frontend/web_result/index.html
- web_frontend/web_result/css/animations.css
- web_frontend/web_result/js/main.js
- 新增多个页面和样式文件

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>

2025-09-08 14:05:26 +08:00

2.5 KiB

Raw Blame History

会展策划多Agent演示系统 - 技术实施方案

项目定义

构建一个基于React的Web演示系统，实时展示多Agent协同生成会展策划方案的完整过程。

技术决策

框架: React 18 + TypeScript
动画: GSAP / https://animejs.com/
样式: Tailwind CSS (参考字节跳动、Flowith、Raycast设计风格)
状态管理: Zustand
构建工具: Vite

演示参数

总时长: 3分钟
文字生成速度: 30-40字/秒
Agent Prompt展示: 完整展示，逐步显示
交互控制: 暂时不支持跳过，保证演示完整性

设计风格指南

视觉风格: 简洁实用、年轻化、高端感
参考产品: 火山引擎、Trea、Flowith、Raycast
核心特征:
- 精致的微动画
- 清晰的信息层级
- 中性色调搭配品牌色
- 优雅的过渡效果

内容板块

网页的Page形式按照一级标题进行独立输出，每一个一级标题都是一个独立页面

分为

策划案
展会介绍与预期效果
营销方案
现场运营方案
预算与收益分析
风险评估与应急预案

这个六个页面是必须要创建的

演示流程

可以先出一个页面，上面有一个run的按钮
当点击run按钮的时候，开始执行mermaid的流程，每个流程独立输出对应Agent的Prompt，加一些延迟和loading动画，让它像终端生成一样生成每个内容的文字内容和图片内容
需要增加文字生成的动画
图片加载的时候，需要有loading转圈的动画，模拟延迟

整体目标

其实就是仿真模拟出一个多Agent生成各个方案的一个演示动画

页面内容完善

创建一个TODO清单，扩展每个一级标题中信息缺失和不完善的部分
让每个板块中的内容更加充实，符合现实业务场景，尽可能多

构建网页规范

在构建网页的时候需要满足参考claude.md中的superdesign规范
现代化网页，符合UX设计规范的交互

Agent角色

Agent的角色有

1.信息检索专家:web_frontend/data/Agent_prompt/信息检索专家.md

2.格式编辑专家:web_frontend/data/Agent_prompt/格式编辑专家.md

3.会展策划专家:web_frontend/data/Agent_prompt/会展策划专家.md

4.设计专家:web_frontend/data/Agent_prompt/设计师专家.md

5.财务预算专家:web_frontend/data/Agent_prompt/财务预算专家.md

6.活动执行专家:web_frontend/data/Agent_prompt/活动执行专家.md

7.营销宣传专家:web_frontend/data/Agent_prompt/会展营销宣传专家.md

2.5 KiB Raw Blame History Unescape Escape