R

Relay 演示

用示例会话体验界面。真实 QQ Bridge 暂未接入。

预览风格 
AI
AI 助手 · SnowLuma在线
今天 14:20
DESIGN_01.PNG
DESIGN_01.PNG · 1.2 MB
看看这个界面风格,能实现吗?
AI
可以。头部、消息和输入框共用一条约 900px 的居中内容列,大屏上也不会拉得太散。
AI
点开语音后,这条会在内容列里展开成完整波形和转写文字,播放进度会实时走。
那先把会话列表、语音和发图做出来,顺便说下整体实现顺序
AI

可以,按这个顺序做比较稳:

  1. 连接层:PWA 只和你本机的 Bridge 通信,用 WebSocket 收消息,用 HTTP 发消息和上传文件。登录页拿到的地址和 Token 存在本地,掉线后自动重连。
  2. 会话列表:首屏先读 IndexedDB 缓存再增量同步,离线也能看历史记录。
  3. 消息渲染:文字、图片、语音分成三种气泡。图片先给缩略图,点开后在当前内容列里展开;语音点播放后展开波形和转写。
  4. 输入区:Enter 发送,Shift+Enter 换行。图片支持选择、粘贴和拖拽。语音用 MediaRecorder 录制,由 Bridge 侧转成 QQ 能用的格式。
  5. PWA 外壳:manifest 加 Service Worker,缓存静态资源,可以安装到桌面和手机主屏。

另外 iOS Safari 对后台推送和录音格式有限制,后面单独处理。

好,就按这个来。
录音中 0:00
Enter 发送 · Shift+Enter 换行 · 点击图片 / 语音 / 长回复可在本栏内展开