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

chore：让智能客服到AI气泡上方

Browse Source
This commit is contained in:
jinhhanhan
2025-12-10 10:10:18 +08:00
parent 179a9089b7
commit 7da168e1b2
1 changed files with 643 additions and 746 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -43,8 +43,8 @@
<image :src="aiAvatar" mode="aspectFill" />
</view>
<view class="message-content">
<!-- AI昵称固定，不可修改 -->
<view class="message-nickname">智能助手</view>
<!-- AI昵称固定，不可修改 - 左移到气泡上方 -->
<view class="message-nickname ai-nickname">智能助手</view>
<view class="message-bubble">
<!-- 文本消息 -->
<view v-if="message.type === 'text'" class="text-content">
@@ -357,7 +357,6 @@
</view>
</view>
</template>
<script>
import nsLoading from '@/components/ns-loading/ns-loading.vue'
import aiService from '@/common/js/ai-service.js'
@@ -1313,6 +1312,14 @@ $radius-lg: 36rpx;
&:not(.ai-message .message-nickname) {
text-align: right;
}
// AI昵称专属样式 - 左移到气泡上方
&.ai-nickname {
text-align: left;
margin-left: 0;
padding-left: 0;
align-self: flex-start;
margin-bottom: 4rpx;
}
}
.message-bubble {
@@ -1765,7 +1772,7 @@ $radius-lg: 36rpx;
right: -14rpx;
width: 24rpx;
height: 24rpx;
background: inherit;
background: #ffffff !important; /* 菱形改为白色 */
border-radius: 6rpx;
transform: rotate(45deg);
box-shadow: 4rpx -4rpx 4rpx rgba(0, 0, 0, 0.05);
@@ -1792,6 +1799,11 @@ $radius-lg: 36rpx;
/* AI消息特有样式 */
.ai-message {
.message-content {
/* 确保昵称在气泡上方的布局 */
display: flex;
flex-direction: column;
align-items: flex-start;
.message-bubble {
background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important; /* 蓝色浅渐变 */
color: #2c3e50 !important;
@@ -1813,7 +1825,7 @@ $radius-lg: 36rpx;
left: -14rpx;
width: 24rpx;
height: 24rpx;
background: $bg-card;
background: #ffffff !important; /* 菱形改为白色 */
border-radius: 6rpx;
transform: rotate(45deg);
box-shadow: -4rpx 4rpx 4rpx rgba(0, 0, 0, 0.05);
@@ -1913,7 +1925,10 @@ $radius-lg: 36rpx;
font-size: 28rpx;
font-weight: 500;
border: none;
top: -17px;
text-align: center; /* 兼容多端文字居中 */
white-space: nowrap; /* 强制文字单行横向显示 */
line-height: 1; /* 重置行高，避免文字垂直偏移 */
top:-10px;
&.disabled {
background-color: $color-primary-light;
@@ -1953,10 +1968,6 @@ $radius-lg: 36rpx;
}
}
// 昵称编辑弹窗样式（修复右侧溢出问题）
.nickname-editor-popup {
position: fixed;
@@ -2061,49 +2072,29 @@ $radius-lg: 36rpx;
font-size: 24rpx;
color: $color-text-light;
margin-bottom: 32rpx;
text-align: center;
width: 100%;
box-sizing: border-box;
display: block;
line-height: 1.5;
}
.nickname-editor-actions {
display: flex;
gap: 24rpx;
width: 100%;
box-sizing: border-box;
justify-content: center;
padding: 0 20rpx;
justify-content: flex-end;
gap: 16rpx;
.nickname-action-btn {
flex: none;
width: 160rpx;
height: 96rpx;
padding: 16rpx 32rpx;
border-radius: $radius-lg;
font-size: 28rpx;
font-weight: 500;
transition: all 0.2s ease;
box-sizing: border-box;
// 核心：文字下移 + 垂直居中
padding-top: 12rpx; // 顶部内边距增加，文字下移
padding-bottom: 0;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
// hover动效：文字轻微上移
&:hover {
padding-top: 8rpx;
}
border: none;
&.cancel {
background-color: $bg-card;
border: 2rpx solid #f0f4f8;
background-color: $bg-main;
color: $color-text-light;
// 修复：替换未定义的 $f8fafc 为已定义的 $bg-main
&:hover {
background-color: $bg-main;
background-color: #e8edf3;
}
}
@@ -2112,33 +2103,32 @@ $radius-lg: 36rpx;
color: white;
box-shadow: 0 4rpx 12rpx rgba(108, 142, 191, 0.2);
&:hover {
&.disabled {
background-color: $color-primary-light;
opacity: 0.7;
box-shadow: none;
}
&:not(.disabled):hover {
background-color: #5a7cb0;
transform: translateY(-2rpx);
}
}
}
}
}
}
&.disabled {
background-color: $color-primary-light;
box-shadow: none;
opacity: 0.7;
transform: none;
}
}
}
}
}
}
/* 弹窗样式基础 */
.tools-popup, .voice-popup, .avatar-selector-popup {
/* 工具面板 */
.tools-popup {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
}
.tools-mask, .voice-mask, .avatar-selector-mask {
.tools-mask {
position: absolute;
top: 0;
left: 0;
@@ -2148,7 +2138,6 @@ $radius-lg: 36rpx;
backdrop-filter: blur(6rpx);
}
/* 工具面板样式 */
.tools-panel {
position: absolute;
bottom: 0;
@@ -2156,14 +2145,16 @@ $radius-lg: 36rpx;
right: 0;
background-color: $bg-card;
border-radius: $radius-lg $radius-lg 0 0;
box-shadow: 0 -4rpx 24rpx rgba(0, 0, 0, 0.1);
padding: 32rpx;
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
.tools-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 32rpx;
margin-bottom: 32rpx;
border-bottom: 2rpx solid #f0f4f8;
padding-bottom: 16rpx;
text {
font-size: 34rpx;
@@ -2172,8 +2163,8 @@ $radius-lg: 36rpx;
}
.close-btn {
width: 64rpx;
height: 64rpx;
width: 56rpx;
height: 56rpx;
border-radius: 50%;
background-color: $bg-main;
display: flex;
@@ -2187,7 +2178,7 @@ $radius-lg: 36rpx;
}
.iconfont {
font-size: 34rpx;
font-size: 28rpx;
color: $color-text-light;
}
}
@@ -2196,24 +2187,27 @@ $radius-lg: 36rpx;
.tools-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 32rpx;
gap: 32rpx;
gap: 24rpx;
.tool-item {
display: flex;
flex-direction: column;
align-items: center;
transition: all 0.3s ease;
padding: 24rpx 16rpx;
border-radius: $radius-md;
background-color: $bg-main;
transition: all 0.2s ease;
&:hover {
background-color: #e8edf3;
transform: translateY(-4rpx);
}
.tool-icon {
width: 96rpx;
height: 96rpx;
width: 88rpx;
height: 88rpx;
border-radius: 50%;
background-color: $bg-main;
background-color: $bg-card;
display: flex;
align-items: center;
justify-content: center;
@@ -2227,29 +2221,53 @@ $radius-lg: 36rpx;
}
.tool-text {
font-size: 26rpx;
font-size: 24rpx;
color: $color-text;
font-weight: 500;
}
}
}
}
}
/* 语音输入面板样式 */
.voice-input-panel {
position: absolute;
bottom: 0;
/* 语音输入面板 */
.voice-popup {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
.voice-mask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(6rpx);
}
.voice-input-panel {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: $bg-card;
border-radius: $radius-lg $radius-lg 0 0;
box-shadow: 0 -4rpx 24rpx rgba(0, 0, 0, 0.1);
border-radius: $radius-lg;
padding: 48rpx;
width: 60%;
max-width: 520rpx;
box-shadow: 0 8rpx 36rpx rgba(0, 0, 0, 0.15);
.voice-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 32rpx;
margin-bottom: 32rpx;
border-bottom: 2rpx solid #f0f4f8;
padding-bottom: 16rpx;
text {
font-size: 34rpx;
@@ -2258,8 +2276,8 @@ $radius-lg: 36rpx;
}
.close-btn {
width: 64rpx;
height: 64rpx;
width: 56rpx;
height: 56rpx;
border-radius: 50%;
background-color: $bg-main;
display: flex;
@@ -2273,53 +2291,56 @@ $radius-lg: 36rpx;
}
.iconfont {
font-size: 34rpx;
font-size: 28rpx;
color: $color-text-light;
}
}
}
.voice-content {
padding: 64rpx 32rpx;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 48rpx;
.voice-wave {
width: 240rpx;
height: 240rpx;
border-radius: 50%;
background-color: $bg-main;
width: 280rpx;
height: 160rpx;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 48rpx;
box-shadow: $shadow-md;
margin-bottom: 24rpx;
&.recording .wave-bar {
animation: wave 1.2s infinite ease-in-out;
}
.wave-bar {
width: 12rpx;
width: 8rpx;
height: 40rpx;
background-color: $color-primary-light;
border-radius: 6rpx;
margin: 0 8rpx;
transition: height 0.3s ease;
}
margin: 0 4rpx;
background-color: $color-primary;
border-radius: 4rpx;
animation: none;
&.recording {
.wave-bar {
animation: waveAnimation 1.2s infinite ease-in-out;
}
&:nth-child(1) { height: 60rpx; animation-delay: 0s; }
&:nth-child(2) { height: 90rpx; animation-delay: 0.1s; }
&:nth-child(3) { height: 50rpx; animation-delay: 0.2s; }
&:nth-child(4) { height: 120rpx; animation-delay: 0.3s; }
&:nth-child(5) { height: 70rpx; animation-delay: 0.4s; }
&:nth-child(6) { height: 100rpx; animation-delay: 0.5s; }
&:nth-child(7) { height: 80rpx; animation-delay: 0.6s; }
&:nth-child(8) { height: 40rpx; animation-delay: 0.7s; }
}
}
.voice-tip {
font-size: 28rpx;
color: $color-text;
color: $color-text-light;
}
}
.voice-actions {
padding: 32rpx;
display: flex;
justify-content: center;
@@ -2327,16 +2348,17 @@ $radius-lg: 36rpx;
width: 120rpx;
height: 120rpx;
border-radius: 50%;
background-color: $color-user;
background-color: $color-primary;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8rpx 24rpx rgba(134, 117, 169, 0.3);
transition: all 0.3s ease;
box-shadow: 0 8rpx 24rpx rgba(108, 142, 191, 0.3);
transition: all 0.2s ease;
border: none;
&:hover {
transform: scale(1.05);
background-color: #756298;
background-color: #5a7cb0;
}
.iconfont {
@@ -2346,8 +2368,27 @@ $radius-lg: 36rpx;
}
}
}
}
/* 头像选择弹窗 */
.avatar-selector-popup {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
.avatar-selector-mask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(6rpx);
}
/* 头像选择弹窗样式 */
.avatar-selector-panel {
position: absolute;
top: 50%;
@@ -2356,16 +2397,18 @@ $radius-lg: 36rpx;
background-color: $bg-card;
border-radius: $radius-lg;
padding: 32rpx;
width: 580rpx;
width: calc(100% - 80rpx);
max-width: 520rpx;
box-shadow: 0 8rpx 36rpx rgba(0, 0, 0, 0.15);
box-sizing: border-box;
.avatar-selector-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 32rpx;
margin-bottom: 24rpx;
border-bottom: 2rpx solid #f0f4f8;
padding-bottom: 24rpx;
padding-bottom: 16rpx;
text {
font-size: 34rpx;
@@ -2374,8 +2417,8 @@ $radius-lg: 36rpx;
}
.close-btn {
width: 64rpx;
height: 64rpx;
width: 56rpx;
height: 56rpx;
border-radius: 50%;
background-color: $bg-main;
display: flex;
@@ -2389,7 +2432,7 @@ $radius-lg: 36rpx;
}
.iconfont {
font-size: 34rpx;
font-size: 28rpx;
color: $color-text-light;
}
}
@@ -2397,13 +2440,13 @@ $radius-lg: 36rpx;
.avatar-selector-content {
.current-avatar-preview {
width: 200rpx;
height: 200rpx;
width: 180rpx;
height: 180rpx;
border-radius: 50%;
overflow: hidden;
margin: 0 auto 48rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
border: 8rpx solid $bg-main;
margin: 0 auto 32rpx;
box-shadow: $shadow-md;
border: 4rpx solid #f0f4f8;
image {
width: 100%;
@@ -2415,31 +2458,30 @@ $radius-lg: 36rpx;
.avatar-selector-actions {
display: flex;
flex-direction: column;
gap: 24rpx;
gap: 16rpx;
.avatar-select-action {
height: 96rpx;
padding: 24rpx;
border-radius: $radius-lg;
background-color: $bg-main;
font-size: 28rpx;
color: $color-text;
display: flex;
align-items: center;
justify-content: center;
gap: 16rpx;
transition: all 0.2s ease;
border: 2rpx solid #f0f4f8;
background-color: $bg-main;
color: $color-text;
&:hover {
background-color: #e8edf3;
}
&.cancel {
background-color: $bg-card;
color: $color-text-light;
background-color: #f8fafc;
border-color: #e9edf2;
&:hover {
background-color: #f8fafc;
background-color: #f0f4f8;
}
}
@@ -2451,15 +2493,28 @@ $radius-lg: 36rpx;
}
}
}
}
}
/* 动画定义 */
@keyframes dotPulse {
0%, 100% {
transform: scale(1);
opacity: 0.4;
transform: scale(0.8);
}
50% {
opacity: 1;
transform: scale(1.2);
}
}
@keyframes wave {
0%, 100% {
transform: scaleY(0.5);
opacity: 0.7;
}
50% {
transform: scale(1.3);
transform: scaleY(1);
opacity: 1;
}
}
@@ -2473,18 +2528,6 @@ $radius-lg: 36rpx;
}
}
@keyframes waveAnimation {
0%, 100% {
height: 40rpx;
background-color: $color-primary-light;
}
50% {
height: 120rpx;
background-color: $color-primary;
}
}
/* 新增：渐变流动动画（仅为背景增加动效，不影响其他样式） */
@keyframes gradient-flow {
0% {
background-position: 0% 50%;
@@ -2497,96 +2540,36 @@ $radius-lg: 36rpx;
}
}
/* 富文本样式补充 */
rich-text {
line-height: 1.8;
font-size: 26rpx;
color: $color-text;
display: block;
strong {
font-weight: 600;
color: $color-text;
/* 滚动条样式优化 */
::-webkit-scrollbar {
width: 8rpx;
height: 8rpx;
}
em {
font-style: italic;
color: $color-text-light;
::-webkit-scrollbar-track {
background: $bg-main;
border-radius: 4rpx;
}
code {
background-color: #f0f4f8;
padding: 4rpx 8rpx;
border-radius: $radius-sm;
font-family: monospace;
font-size: 24rpx;
color: $color-primary;
}
::-webkit-scrollbar-thumb {
background: $color-primary-light;
border-radius: 4rpx;
opacity: 0.7;
a {
color: $color-primary;
text-decoration: underline;
text-underline-offset: 4rpx;
}
br {
display: block;
height: 24rpx;
&:hover {
background: $color-primary;
opacity: 1;
}
}
/* 适配小程序和H5的按钮默认样式重置 */
button {
padding: 0;
margin: 0;
border: none;
background: none;
line-height: normal;
font-weight: normal;
outline: none;
&::after {
border: none;
}
}
/* 滑块样式优化 */
slider {
height: 12rpx;
&::before {
height: 12rpx;
border-radius: 6rpx;
}
&::after {
width: 24rpx;
height: 24rpx;
border-radius: 50%;
background-color: $color-primary;
border: none;
box-shadow: 0 2rpx 8rpx rgba(108, 142, 191, 0.3);
}
}
/* 输入框聚焦样式优化 */
input:focus, textarea:focus {
outline: none;
}
/* 响应式适配：小屏幕设备 */
@media (max-width: 375px) {
/* 响应式适配 */
@media (max-width: 750rpx) {
.ai-chat-container {
padding-bottom: calc(env(safe-area-inset-bottom) + 16rpx);
}
.chat-messages {
padding: 16rpx 24rpx;
}
.message-item {
margin-bottom: 24rpx;
}
.user-message, .ai-message {
.avatar {
@@ -2597,35 +2580,26 @@ $radius-lg: 36rpx;
.message-content {
margin-left: 16rpx;
max-width: calc(100% - 88rpx);
}
.user-message .message-content {
margin-right: 16rpx;
}
}
.message-bubble {
padding: 20rpx 24rpx !important;
}
padding: 16rpx 24rpx;
.message-text {
font-size: 26rpx !important;
font-size: 26rpx;
}
}
}
}
}
}
.input-area {
padding: 16rpx 24rpx;
padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
}
.input-tools .tool-btn {
width: 56rpx;
height: 56rpx;
margin-right: 12rpx;
}
.input-container .message-input {
min-height: 76rpx;
padding: 20rpx 24rpx;
.input-container {
.message-input {
min-height: 72rpx;
padding: 16rpx 24rpx;
font-size: 26rpx;
}
@@ -2634,84 +2608,7 @@ $radius-lg: 36rpx;
height: 68rpx;
font-size: 26rpx;
}
.avatar-selector-panel, .nickname-editor-panel {
width: 90vw;
padding: 24rpx;
}
.avatar-selector-content .current-avatar-preview {
width: 160rpx;
height: 160rpx;
margin-bottom: 32rpx;
}
.voice-input-panel .voice-content .voice-wave {
width: 200rpx;
height: 200rpx;
}
}
/* 深色模式适配（可选） */
@media (prefers-color-scheme: dark) {
$bg-main: #1e2128;
$bg-card: #2d3139;
$color-text: #e5e7eb;
$color-text-light: #9ca3af;
$color-primary: #8197c3;
$color-primary-light: #9aa7c0;
$color-user: #a594cc;
.ai-chat-container {
background-color: $bg-main;
}
.message-bubble {
border-color: #3d4149;
}
.ai-message .message-bubble::before {
background: $bg-card;
border-color: #3d4149;
}
.input-area {
background-color: $bg-card;
border-top-color: #3d4149;
}
.input-tools .tool-btn,
.tools-header .close-btn,
.voice-header .close-btn,
.avatar-selector-header .close-btn,
.nickname-editor-header .close-btn {
background-color: $bg-main;
}
.message-input,
.nickname-input {
background-color: $bg-main;
border-color: #3d4149;
color: $color-text;
}
.tools-panel, .voice-input-panel, .avatar-selector-panel, .nickname-editor-panel {
background-color: $bg-card;
}
.tools-header, .voice-header, .avatar-selector-header, .nickname-editor-header {
border-bottom-color: #3d4149;
}
.tool-item .tool-icon,
.voice-wave {
background-color: $bg-main;
}
.avatar-select-action,
.nickname-action-btn.cancel {
background-color: $bg-main;
border-color: #3d4149;
}
}
}