Uniapp/lucky_shop
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

chore：用户气泡可以随着字数改变而改变

Browse Source
This commit is contained in:
jinhhanhan
2025-12-09 17:53:25 +08:00
parent eb189ae9f7
commit 4cfbfa7d8f
1 changed files with 27 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
components/ai-chat-message/ai-chat-message.vue
View File

@@ -1627,12 +1627,20 @@ $radius-lg: 36rpx;
text-align: right;
.message-bubble {
background: linear-gradient(135deg, #8cb4ff 0%, #a0c4ff 100%);
color: white;
border-radius: $radius-md $radius-sm $radius-md $radius-md;
box-shadow: 0 4rpx 12rpx rgba(134, 117, 169, 0.2);
backdrop-filter: blur(2rpx);
background: linear-gradient(135deg, #ffadd2, #f783ac) !important; /* 粉色渐变 */
color: white !important;
border-radius: 16rpx 16rpx 4rpx 16rpx; /* 右对齐气泡尖角适配 */
box-shadow: 0 8rpx 20rpx rgba(247, 131, 172, 0.3) !important;
border: none !important;
/* ✅ 关键：允许内容撑开高度 */
min-height: auto;
height: auto;
padding: 24rpx 32rpx; /* 保留内边距 */
display: inline-block; /* 让宽度也随内容收缩（可选） */
max-width: 80%; /* 防止过宽 */
word-break: break-word;
white-space: pre-wrap; /* 保留用户输入的换行符 */
line-height: 1.6;
&::before {
content: '';
position: absolute;
@@ -1668,9 +1676,19 @@ $radius-lg: 36rpx;
.ai-message {
.message-content {
.message-bubble {
background: $bg-card;
border-radius: $radius-sm $radius-md $radius-md $radius-md;
background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important; /* 蓝色浅渐变 */
color: #2c3e50 !important;
border-radius: 16rpx 16rpx 16rpx 4rpx; /* 左对齐气泡尖角适配 */
box-shadow: 0 8rpx 20rpx rgba(191, 219, 254, 0.4) !important;
border: 1rpx solid #dbeafe !important;
min-height: auto;
height: auto;
padding: 24rpx 32rpx;
display: inline-block;
max-width: 80%;
word-break: break-word;
white-space: pre-wrap;
line-height: 1.6;
&::before {
content: '';
position: absolute;