第八轮改用"读CSS选择器+核对JSX结构"的方式复测全部11章,命中了7轮纯接口测试从未发现的一类 问题——选择器写对了但目标元素的实际DOM结构/className对不上,样式静默失效: - 语音通话最小化胶囊按钮尺寸被同特异度规则覆盖;移动端悬浮通话窗口left/right/width三值同时 生效导致过度约束;来电全屏页认证徽章/姓名标题缺少专属样式覆盖 - 我的收藏-语音卡片三列grid对应实际只有1个子元素,播放器被压缩到卡片左侧一角;链接/记录头部 完全没有基础样式,退化成浏览器默认外观 - 多选模式下"收到的"消息气泡被flex auto-margin一起拖到最右侧;.avatar-box/#send-message-panel 两处逗号断句错误导致后半句选择器丢失祖先限定 - 按住说话悬浮反馈渲染成内联胶囊,而参考图要求的居中悬浮卡片样式其实已经存在(挂在了另一个非 生产demo组件上);批量转发确认框沿用了80%视口高度;audio-player.jsx的playback类点在canvas 上而非包裹层,波形和计时器可能纵向堆叠 - "消息已撤回"占位符误拼了日期分隔条的class而非专属的deleted 品牌清理:浏览器标签页标题、未读数标题更新均硬编码"Tinode";LINK_CONTACT_US等三个链接常量 指向开源Tinode项目自己的域名(联系我们改为跟用户条款/隐私协议一致的toast,不再发起外部mailto)。 以及:空会话丢失.chat-box样式类、青少年模式PIN定位、若干收藏/文件类型展示细节。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
40 lines
1.2 KiB
React
40 lines
1.2 KiB
React
// Message bubble with non-payload content, such as an indicator of deleted content or a date stamp.
|
||
|
||
import React from 'react';
|
||
|
||
export default class MetaMessage extends React.PureComponent {
|
||
constructor(props) {
|
||
super(props);
|
||
}
|
||
|
||
render() {
|
||
let content = null;
|
||
let bubbleClass = 'bubble';
|
||
if (this.props.date) {
|
||
// A date badge.
|
||
content = <>{this.props.date}</>
|
||
bubbleClass += ' date';
|
||
} else if (this.props.deleted) {
|
||
// 撤回/删除占位。messages-view.jsx 对 msg.hi 的消息一直在传 deleted={true},但这里从来
|
||
// 没有处理过这个分支,于是整个组件走到下面的 `return null` —— 撤回一条消息之后时间线上
|
||
// 什么都不剩,看不出这里曾经有过一条消息。文案复用已有的 message_deleted("消息已删除")。
|
||
content = <i className="gray">{this.props.deletedText || '消息已删除'}</i>;
|
||
bubbleClass += ' deleted';
|
||
}
|
||
|
||
if (!content) {
|
||
return <>{null}</>
|
||
}
|
||
|
||
return (
|
||
<li className="meta">
|
||
<div className={bubbleClass}>
|
||
<div className="message-content">
|
||
{content}
|
||
</div>
|
||
</div>
|
||
</li>
|
||
);
|
||
}
|
||
};
|