左侧对齐优化说明
优化目标
- 将左侧小乔的头像换成名字显示
- 优化左侧对齐方式，与右侧对齐保持镜像对称
- 确保整体布局的视觉平衡
主要修改内容
1. 头像替换为名字
修改前：
xml
<image class="pet-avatar-small" src="/images/qiao.gif" mode="aspectFit"></image>
修改后：
xml
<view class="pet-name-small">小乔</view>
样式设计：
css
.pet-name-small {
font-size: 24rpx;
color: #666;
margin-bottom: 8rpx;
font-weight: 500;
}
2. 左侧对齐优化
左侧消息容器样式：
css
.pet-content {
align-self: flex-start; /* 容器左对齐 */
align-items: flex-start; /* 内容左对齐 */
width: fit-content; /* 宽度自适应内容 */
max-width: 70%; /* 最大宽度限制 */
padding-left: 32rpx; /* 左侧边距，避免贴边 */
margin-right: auto; /* 自动右边距，推向左侧 */
display: flex; /* Flex布局 */
flex-direction: column; /* 垂直排列 */
align-items: flex-start; /* 子元素左对齐 */
}
3. 镜像对称设计
左右对称对比：
| 属性 | 左侧（宠物消息） | 右侧（用户消息） |
|---|---|---|
| 容器对齐 | align-self: flex-start | align-self: flex-end |
| 内容对齐 | align-items: flex-start | align-items: flex-end |
| 边距 | padding-left: 32rpx | padding-right: 32rpx |
| 自动边距 | margin-right: auto | margin-left: auto |
| 时间对齐 | text-align: left | text-align: right |
| 气泡圆角 | border-bottom-left-radius: 8rpx | border-bottom-right-radius: 8rpx |
4. 时间显示优化
时间对齐方式：
css
.user-content .message-time {
text-align: right; /* 用户消息时间右对齐 */
}
.pet-content .message-time {
text-align: left; /* 宠物消息时间左对齐 */
}
5. 消息气泡对称
宠物消息气泡样式：
css
.pet-bubble {
background: white;
color: #333;
border: 1rpx solid #e8e8e8;
border-bottom-left-radius: 8rpx; /* 左下角圆角 */
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
word-break: break-word; /* 文字换行 */
overflow-wrap: break-word; /* 溢出换行 */
white-space: pre-wrap; /* 保留格式，允许换行 */
}
用户消息气泡样式：
css
.user-bubble {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-bottom-right-radius: 8rpx; /* 右下角圆角 */
text-align: left;
word-break: break-word;
overflow-wrap: break-word;
white-space: pre-wrap;
}
响应式适配
移动端优化
css
@media (max-width: 750rpx) {
.pet-content {
padding-left: 24rpx; /* 移动端减少左边距 */
}
.user-content {
padding-right: 24rpx; /* 移动端减少右边距 */
}
.pet-name-small {
font-size: 22rpx; /* 移动端减小字体 */
}
}
深色模式适配
css
@media (prefers-color-scheme: dark) {
.pet-name-small {
color: #ccc; /* 深色模式下调整颜色 */
}
}
视觉效果对比
优化前
- 左侧显示小头像，占用空间较大
- 左右对齐方式不够对称
- 时间显示对齐方式不统一
优化后
- 左侧显示名字，更加简洁
- 左右对齐完全镜像对称
- 时间显示分别左右对齐
- 整体视觉效果更加平衡
布局结构
聊天消息区域
├── 宠物消息（左侧）
│ ├── 宠物名字（小乔）
│ ├── 消息气泡（左下角圆角）
│ └── 时间戳（左对齐）
└── 用户消息（右侧）
├── 消息气泡（右下角圆角）
└── 时间戳（右对齐）
测试用例
测试用例1：短消息对称
宠物消息：你好
用户消息：你好
预期：左右完全对称，时间分别左右对齐
测试用例2：长消息对称
宠物消息：这是一条很长的消息，用来测试左侧对齐和文字换行功能
用户消息：这是一条很长的消息，用来测试右侧对齐和文字换行功能
预期：左右消息气泡大小相近，时间分别左右对齐
测试用例3：不同长度消息
宠物消息：短消息
用户消息：这是一条很长的消息，用来测试右侧对齐和文字换行功能是否正常工作
预期：左侧消息紧凑，右侧消息自适应宽度，整体保持平衡
技术细节
Flexbox镜像对称实现
- 容器对齐：
align-self: flex-start/end - 内容对齐：
align-items: flex-start/end - 自动边距：
margin-right/left: auto - 固定边距：
padding-left/right: 32rpx
文字处理一致性
- 左右消息气泡都使用相同的文字换行策略
word-break: break-wordoverflow-wrap: break-wordwhite-space: pre-wrap
响应式设计
- 桌面端：32rpx边距
- 移动端：24rpx边距
- 字体大小自适应
优化效果
- ✅ 视觉平衡：左右完全镜像对称
- ✅ 简洁美观：头像替换为名字，更加简洁
- ✅ 对齐统一：时间戳分别左右对齐
- ✅ 响应式适配：在不同设备上保持对称
- ✅ 深色模式支持：适配深色主题
- ✅ 文字处理一致：左右消息气泡文字处理方式相同
使用建议
- 测试对称效果：发送相同长度的左右消息验证对称性
- 检查时间对齐：确认时间戳分别左右对齐
- 验证响应式：在不同屏幕尺寸下测试
- 深色模式测试：验证深色模式下的显示效果
左侧对齐优化完成，现在聊天界面左右完全镜像对称，视觉效果更加平衡美观！🎉