AI-Agent

10.4 UI/UX 设计

响应式布局

1
2
3
4
5
6
7
8
9
.app {
  display: flex;
  height: 100vh;
}

@media (max-width: 768px) {
  .sidebar { position: absolute; }
  .tools-panel { display: none; }
}

组件样式

1
2
3
4
5
6
7
8
9
10
.message.user {
  background: #4a90d9;
  color: white;
  margin-left: auto;
}

.message.assistant {
  background: #2d2d42;
  color: #e0e0e0;
}

Step 8 总结

  • ✅ HTTP 静态服务
  • ✅ WebSocket 客户端
  • ✅ 响应式 UI
  • ✅ 实时流式输出

下一章： 第十一章：总结与展望 →

导航

上一篇： 10.3 WebSocket 客户端

下一篇： 11.1 多模态 AI 概述