需求描述

功能描述

1.查看已发送消息

2.发送消息

界面

界面元素

名称 用途
 显示规则
 交互
联系人 展示
 联系人头像、联系人名称，是否在线（在线时头像左上角显示小绿点）
 a.点击联系人进入【联系人资料】页面
聊天框 查看已发送消息

消息按照日期从小到大排序，按日期分类（例：“May 31，2020”）；

一天的消息从早到晚显示；

默认滚动到最新消息的位置

 a.上下滑动聊天框查看消息，可一直向上滚动直到没有消息
已发送消息 展示

发送消息显示在右侧、背景颜色：蓝色、字体颜色：白色；

接收消息显示在左侧、背景颜色：灰色、字体颜色：黑色；

消息内容、消息发送人头像、消息发送人名称（例：“Rob”）、

发送时间（例：“1:04PM”）

 无
常用消息
 用于快速回复

显示预设的消息，随机排序；

每个消息长短不同，要考虑多行消息的情况

 a.点击常用消息，发送该消息
破冰游戏 邀请对方一起玩破冰游戏
 “”按钮
 a.点击按钮发送破冰游戏消息
破冰游戏消息 展示
 邀请方：“Invite Maggie to play a 

game of Ice Breakers!”+“invite”按钮；

被邀请方：“Lily invited you to play a 
game of Ice Breakers!”+“get started”按钮

a.对方在线：点击“invite”按钮或“get started”按钮进入【破冰游戏】页面，开始游戏；

b.对方不在线：点击“invite”按钮或“get started”按钮进入【破冰游戏】页面，提示对方不在线，结束游戏；
消息输入框
 填写消息

输入框为空时，显示：“post your message here”；

不限制输入长度、字符；

 a.点击输入框，输入消息
发送
 发送消息

“发送”按钮；

a.点击“发送”按钮发送消息，聊天框滚动到最新位置

b.未输入消息时，无法点击按钮
验收标准
历史记录  
  1. 2020-11-24 15:20:21, 由 hfwang 创建。
  2. 2020-12-04 15:05:05, 由 hfwang 变更。
    修改了 当前状态，旧值为 "draft"，新值为 "active"。
    修改了 版本号 ，旧值为 "1"，新值为 "2"。
    修改了 描述 ，区别为：
    001-
    001+ 功能描述
    002+ 1.查看已发送消息
    003+ 2.发送消息
    004+ 界面
    005+
    006+
    007+ 界面元素
    008+ 名称
    009+ 用途
    010+ 显示规则
    011+ 交互
    012+ 联系人
    013+ 展示
    014+ 联系人头像、联系人名称
    015+ a.点击联系人进入【<a href="/zentao/story-view-678.html" target="_blank" rel="noreferrer noopener">联系人资料】页面
    016+ 聊天框
    017+ 查看已发送消息
    018+
    019+ 消息按照日期从小到大排序，按日期分类（例：“May 31，2020”）；
    020+ 一天的消息从早到晚显示；
    021+ 默认滚动到最新消息的位置
    022+
    023+ a.上下滑动聊天框查看消息，可一直向上滚动直到没有消息
    024+ 已发送消息
    025+ 展示
    026+
    027+ 发送消息显示在右侧、背景颜色：蓝色、字体颜色：白色；
    028+ 接收消息显示在左侧、背景颜色：灰色、字体颜色：黑色；
    029+ 消息内容、消息发送人头像、消息发送人名称（例：“Rob”）、
    030+ 发送时间（例：“1:04PM”）
    031+
    032+ 无
    033+ 常用消息
    034+ 用于快速回复
    035+
    036+ 显示预设的消息，随机排序；
    037+ 每个消息长短不同，要考虑多行消息的情况
    038+
    039+ a.点击常用消息，发送该消息
    040+ 消息输入框
    041+ 填写消息
    042+
    043+ 输入框为空时，显示：“post your message here”；
    044+ 不限制输入长度、字符；
    045+
    046+ a.点击输入框，输入消息
    047+ 发送
    048+ 发送消息
    049+
    050+ “发送”按钮；
    051+
    052+
    053+ a.点击“发送”按钮发送消息，聊天框滚动到最新位置
    054+ b.未输入消息时，无法点击按钮
    055+
    056+
    001-
    001+ <h1 style="color:#3C4353;background-color:#FFFFFF;"><span style="font-size:16px;">功能描述</span></h1>
    002+ <p style="font-size:14px;background-color:#FFFFFF;"><span style="font-size:16px;">1.查看已发送消息</span></p>
    003+ <p style="font-size:14px;background-color:#FFFFFF;"><span style="font-size:16px;">2.发送消息</span></p>
    004+ <h1 style="color:#3C4353;background-color:#FFFFFF;"><span style="font-size:16px;">界面</span></h1>
    005+ <p style="color:#3C4353;background-color:#FFFFFF;"><span style="font-size:16px;"><img src="{2684.png}" alt="" /></span></p>
    006+ <p style="color:#3C4353;background-color:#FFFFFF;"><span style="font-size:16px;"></span></p>
    007+ <p style="font-size:14px;background-color:#FFFFFF;"><span style="font-size:16px;">界面元素</span></p>
    008+ <table class="table table-kindeditor" style="font-size:14px;background-color:#FFFFFF;width:1107px;color:#3C4353;"><tbody><tr><th style="background-color:#F1F1F1;"><span style="font-size:16px;">名称</span></th>
    009+ <th style="background-color:#F1F1F1;"><span style="font-size:16px;">用途</span><br /></th>
    010+ <th style="background-color:#F1F1F1;"><span style="font-size:16px;">显示规则</span><br /></th>
    011+ <th style="background-color:#F1F1F1;"><span style="font-size:16px;">交互</span><br /></th>
    012+ </tr></tbody><tbody><tr><td><span style="font-size:16px;">联系人</span></td>
    013+ <td><span style="font-size:16px;">展示</span><br /></td>
    014+ <td><span style="font-size:16px;">联系人头像、联系人名称</span><br /></td>
    015+ <td><span style="font-size:16px;">a.点击联系人进入【<a href="/zentao/story-view-678.html" target="_blank" rel="noreferrer noopener"><span style="color:#337FE5;">联系人资料</span></a>】页面</span></td>
    016+ </tr><tr><td><span style="font-size:16px;">聊天框</span></td>
    017+ <td><span style="font-size:16px;">查看已发送消息</span><br /></td>
    018+ <td>
    019+ <p><span style="font-size:16px;">消息按照日期从小到大排序，按日期分类（例：“May 31，2020”）；</span></p>
    020+ <p><span style="font-size:16px;">一天的消息从早到晚显示；</span></p>
    021+ <p><span style="font-size:16px;">默认滚动到最新消息的位置</span></p>
    022+ </td>
    023+ <td><span style="font-size:16px;">a.</span><span style="font-size:16px;">上下滑动聊天框查看消息，</span><span style="font-size:16px;">可一直向上滚动直到没有消息</span></td>
    024+ </tr><tr><td><span style="font-size:16px;">已发送消息</span></td>
    025+ <td><span style="font-size:16px;">展示</span><br /></td>
    026+ <td>
    027+ <p><span style="font-size:16px;">发送消息显示在右侧、背景颜色：蓝色、字体颜色：白色；</span></p>
    028+ <p><span style="font-size:16px;">接收消息显示在左侧、背景颜色：灰色、字体颜色：黑色；</span></p>
    029+ <p><span style="font-size:16px;">消息内容、消息发送人头像、消息发送人名称（例：“Rob”）、</span></p>
    030+ <p><span style="font-size:16px;">发送时间（例：“1:04PM”）</span></p>
    031+ </td>
    032+ <td><span style="font-size:16px;">无</span><br /></td>
    033+ </tr><tr><td><span style="font-size:16px;">常用消息</span><br /></td>
    034+ <td><span style="font-size:16px;">用于快速回复</span><br /></td>
    035+ <td>
    036+ <p><span style="font-size:16px;">显示预设的消息，随机排序；</span></p>
    037+ <p><span style="font-size:16px;">每个消息长短不同，要考虑多行消息的情况</span></p>
    038+ </td>
    039+ <td><span style="font-size:16px;">a.点击常用消息，发送该消息</span><br /></td>
    040+ </tr><tr><td><span style="font-size:16px;">消息输入框</span><br /></td>
    041+ <td><span style="font-size:16px;">填写消息</span><br /></td>
    042+ <td>
    043+ <p><span style="font-size:16px;">输入框为空时，显示：“post your message here”；</span></p>
    044+ <p><span style="font-size:16px;">不限制输入长度、字符；</span></p>
    045+ </td>
    046+ <td><span style="font-size:16px;">a.点击输入框，输入消息</span><br /></td>
    047+ </tr><tr><td><span style="font-size:16px;">发送</span><br /></td>
    048+ <td><span style="font-size:16px;">发送消息</span><br /></td>
    049+ <td>
    050+ <p><span style="font-size:16px;">“发送”按钮；</span></p>
    051+ </td>
    052+ <td>
    053+ <p><span style="font-size:16px;">a.点击“发送”按钮发送消息，聊天框滚动到最新位置</span></p>
    054+ <p><span style="font-size:16px;">b.未输入消息时，无法点击按钮</span></p>
    055+ </td>
    056+ </tr></tbody></table><br /><p><br /></p>
  3. 2020-12-09 13:57:53, 由 hfwang 关联到项目 OpenInvite APP 1.0版。
  4. 2021-03-05 15:20:33, 由 hfwang 变更。
    修改了 版本号，旧值为 "2"，新值为 "3"。
    修改了 描述 ，区别为：
    005-
    005+
    014- 联系人头像、联系人名称
    014+ 联系人头像、联系人名称，是否在线（在线时头像左上角显示小绿点）
    015- a.点击联系人进入【<a href="/zentao/story-view-678.html" target="_blank" rel="noreferrer noopener">联系人资料】页面
    015+ a.点击联系人进入【<a href="/zentao/story-view-678.html" target="_blank" rel="noreferrer noopener">联系人资料】页面
    040- 消息输入框
    040+ 破冰游戏
    041- 填写消息
    041+ 邀请对方一起玩破冰游戏
    042-
    042+ “”按钮
    043- 输入框为空时，显示：“post your message here”；
    043+ a.点击按钮发送破冰游戏消息
    044- 不限制输入长度、字符；
    044+ 破冰游戏消息
    045-
    045+ 展示
    046- a.点击输入框，输入消息
    046+ 邀请方：“Invite Maggie to play agame of Ice Breakers!”+“invite”按钮；
    047- 发送
    047+ 被邀请方：“Lily invited you to play agame of Ice Breakers!”+“get started”按钮
    048- 发送消息
    048+
    049-
    049+
    050- “发送”按钮；
    050+ a.对方在线：点击“invite”按钮或“get started”按钮进入【<a href="/zentao/story-view-1035.html" target="_blank" rel="noreferrer noopener">破冰游戏】页面，开始游戏；
    051-
    051+ b.对方不在线：点击“invite”按钮或“get started”按钮进入【<a href="/zentao/story-view-1035.html" target="_blank" rel="noreferrer noopener">破冰游戏】页面，提示对方不在线，结束游戏；
    052-
    052+
    053- a.点击“发送”按钮发送消息，聊天框滚动到最新位置
    053+ 消息输入框
    054- b.未输入消息时，无法点击按钮
    054+ 填写消息
    055-
    055+
    056-
    056+ 输入框为空时，显示：“post your message here”；
    057+ 不限制输入长度、字符；
    058+
    059+ a.点击输入框，输入消息
    060+ 发送
    061+ 发送消息
    062+
    063+ “发送”按钮；
    064+
    065+
    066+ a.点击“发送”按钮发送消息，聊天框滚动到最新位置
    067+ b.未输入消息时，无法点击按钮
    068+
    069+
    005- <p style="color:#3C4353;background-color:#FFFFFF;"><span style="font-size:16px;"><img src="{2684.png}" alt="" /></span></p>
    005+ <p style="color:#3C4353;background-color:#FFFFFF;"><span style="font-size:16px;"><img src="{2684.png}" alt="" /><img src="{3113.png}" alt="" /></span></p>
    014- <td><span style="font-size:16px;">联系人头像、联系人名称</span><br /></td>
    014+ <td><span style="font-size:16px;">联系人头像、联系人名称，是否在线（在线时头像左上角显示小绿点）</span><br /></td>
    015- <td><span style="font-size:16px;">a.点击联系人进入【<a href="/zentao/story-view-678.html" target="_blank" rel="noreferrer noopener"><span style="color:#337FE5;">联系人资料</span></a>】页面</span></td>
    015+ <td><span style="font-size:16px;"><span style="font-size:16px;">a.点击联系人进入【</span><a href="/zentao/story-view-678.html" target="_blank" rel="noreferrer noopener"><span style="color:#337FE5;font-size:16px;">联系人资料</span></a><span style="font-size:16px;">】页面</span></span></td>
    040- </tr><tr><td><span style="font-size:16px;">消息输入框</span><br /></td>
    040+ </tr><tr><td style="border:1px solid #ddd;"><span style="font-size:16px;">破冰游戏</span></td>
    041- <td><span style="font-size:16px;">填写消息</span><br /></td>
    041+ <td style="border:1px solid #ddd;"><span style="font-size:16px;">邀请对方一起玩破冰游戏</span><br /></td>
    042- <td>
    042+ <td style="border:1px solid #ddd;"><span style="font-size:16px;">“</span><img src="{3114.png}" alt="" /><span style="font-size:16px;">”</span><span style="font-size:16px;">按钮</span><br /></td>
    043- <p><span style="font-size:16px;">输入框为空时，显示：“post your message here”；</span></p>
    043+ <td style="border:1px solid #ddd;"><span style="font-size:16px;">a.点击按钮发送破冰游戏消息</span></td>
    044- <p><span style="font-size:16px;">不限制输入长度、字符；</span></p>
    044+ </tr><tr><td style="border:1px solid #ddd;"><span style="font-size:16px;">破冰游戏消息</span></td>
    045- </td>
    045+ <td style="border:1px solid #ddd;"><span style="font-size:16px;">展示</span><br /></td>
    046- <td><span style="font-size:16px;">a.点击输入框，输入消息</span><br /></td>
    046+ <td style="border:1px solid #ddd;"><span style="font-size:16px;">邀请方：“</span><span style="font-size:16px;">Invite Maggie to play a</span><br /><p><span style="font-size:16px;">game of Ice Breakers!</span><span style="font-size:16px;">”+“invite”按钮；</span></p>
    047- </tr><tr><td><span style="font-size:16px;">发送</span><br /></td>
    047+ <p><span style="font-size:16px;">被邀请方：“</span><span style="font-size:16px;">Lily invited you to play a</span><br /><span style="font-size:16px;">game of Ice Breakers!</span><span style="font-size:16px;">”+“get started”按钮</span></p>
    048- <td><span style="font-size:16px;">发送消息</span><br /></td>
    048+ </td>
    049- <td>
    049+ <td style="border:1px solid #ddd;">
    050- <p><span style="font-size:16px;">“发送”按钮；</span></p>
    050+ <p><span style="font-size:16px;">a.对方在线：点击“invite”按钮或“get started”按钮进入【<a href="/zentao/story-view-1035.html" target="_blank" rel="noreferrer noopener"><span style="color:#337FE5;">破冰游戏</span></a>】页面，开始游戏；</span></p>
    051- </td>
    051+ <p><span style="font-size:16px;">b.对方不在线：<span>点击“invite”按钮或“get started”按钮进入【<a href="/zentao/story-view-1035.html" target="_blank" rel="noreferrer noopener"><span style="color:#337FE5;">破冰游戏</span></a>】页面，提示对方不在线，结束游戏；</span></span></p>
    052- <td>
    052+ </td>
    053- <p><span style="font-size:16px;">a.点击“发送”按钮发送消息，聊天框滚动到最新位置</span></p>
    053+ </tr><tr><td><span style="font-size:16px;">消息输入框</span><br /></td>
    054- <p><span style="font-size:16px;">b.未输入消息时，无法点击按钮</span></p>
    054+ <td><span style="font-size:16px;">填写消息</span><br /></td>
    055- </td>
    055+ <td>
    056- </tr></tbody></table><br /><p><br /></p>
    056+ <p><span style="font-size:16px;">输入框为空时，显示：“post your message here”；</span></p>
    057+ <p><span style="font-size:16px;">不限制输入长度、字符；</span></p>
    058+ </td>
    059+ <td><span style="font-size:16px;">a.点击输入框，输入消息</span><br /></td>
    060+ </tr><tr><td><span style="font-size:16px;">发送</span><br /></td>
    061+ <td><span style="font-size:16px;">发送消息</span><br /></td>
    062+ <td>
    063+ <p><span style="font-size:16px;">“发送”按钮；</span></p>
    064+ </td>
    065+ <td>
    066+ <p><span style="font-size:16px;">a.点击“发送”按钮发送消息，聊天框滚动到最新位置</span></p>
    067+ <p><span style="font-size:16px;">b.未输入消息时，无法点击按钮</span></p>
    068+ </td>
    069+ </tr></tbody></table>
  5. 2021-10-27 15:35:17, 由 夏凯英 变更。
    修改了 当前状态，旧值为 "active"，新值为 "changed"。
    修改了 版本号 ，旧值为 "3"，新值为 "4"。
    修改了 描述 ，区别为：
    021- 默认滚动到最新消息的位置
    021+ 默认滚动到最新消息的位置当配对聊天未有人发消息时，聊天框上方显示系统消息：New match! Introduce yourself :D
    021- <p><span style="font-size:16px;">默认滚动到最新消息的位置</span></p>
    021+ <p><span style="font-size:16px;">默认滚动到最新消息的位置<br /><span style="color:#E53333;font-size:16px;background-color:#FFFFFF;">当配对聊天未有人发消息时，聊天框上方显示系统消息：New match! Introduce yourself :D</span><br /></span></p>
    1.当配对聊天未有人发消息时，聊天框上方显示系统消息：New match! Introduce yourself :D
  6. 2021-10-27 15:36:04, 由 夏凯英 编辑。
    修改了 所属计划，旧值为 ""，新值为 "28"。
    修改了 所处阶段，旧值为 "projected"，新值为 "planned"。
  7. 2021-11-04 09:36:04, 由 夏凯英 记录评审意见，评审意见为 确认通过。
返回
所属产品 Openivite
所属%s
所属模块 消息
所属计划
来源
来源备注
当前状态 激活
所处阶段 主干 : 已立项
类型 功能
优先级 3
预计故事点 0sp
关键词
抄送给
由谁创建 hfwang 于 2020-11-24 15:20:21
指派给
评审人员
评审时间
由谁关闭
关闭原因
最后修改 夏凯英 于 2021-11-04 09:36:04
相关Bug
相关用例
相关合并请求