From 992a01cc76748b6822da15ffa9eead6ab10af5d2 Mon Sep 17 00:00:00 2001
From: jinhhanhan <1683105490@qq.com>
Date: Sat, 31 Jan 2026 08:52:55 +0800
Subject: [PATCH] =?UTF-8?q?chore=EF=BC=9A=E6=9B=BF=E4=BA=86chat-message.vu?=
=?UTF-8?q?e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
components/chat-message/chat-message.vue | 3094 +++++++++++++++++++---
1 file changed, 2794 insertions(+), 300 deletions(-)
diff --git a/components/chat-message/chat-message.vue b/components/chat-message/chat-message.vue
index c0eff84..579da6e 100644
--- a/components/chat-message/chat-message.vue
+++ b/components/chat-message/chat-message.vue
@@ -1,332 +1,2826 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 客服不在线
-
-
- 客服在线
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ localUserNickname }}
+
+ {{ message.content }}
+
+
+
+
+
+
+
+
+
+
+
+
+ 智能助手
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ message.fileName }}
+ {{ formatFileSize(message.fileSize) }}
+
+
+
+
+
+
+
+
+
+
+
+ {{ message.title || '语音消息' }}
+ {{ formatDuration(message.duration) }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ message.title || '视频消息' }}
+ {{ formatDuration(message.duration) }}
+
+
+
+
+
+
+
+
+
+
+
+ {{ message.title }}
+ {{ message.description }}
+ {{ message.url }}
+
+
+
+
+
+
+
+
+
+
+
+ {{ message.title }}
+ ¥{{ message.price }}
+ {{ message.description }}
+
+
+
+
+
+
+
+
+
+
+
+ AI正在思考中...
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
\ No newline at end of file
+ .nickname-editor-mask {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.4);
+ backdrop-filter: blur(6rpx);
+ }
+
+ .nickname-editor-panel {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background-color: $bg-card;
+ border-radius: $radius-lg;
+ padding: 24rpx 32rpx; // 统一内边距
+ width: calc(100% - 80rpx); // 限制弹窗宽度（避免超出屏幕）
+ max-width: 520rpx; // 最大宽度（适配不同设备）
+ box-shadow: 0 8rpx 36rpx rgba(0, 0, 0, 0.15);
+ box-sizing: border-box; // 确保内边距不影响宽度
+
+ .nickname-editor-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 24rpx;
+ border-bottom: 2rpx solid #f0f4f8;
+ padding-bottom: 16rpx;
+
+ text {
+ font-size: 34rpx;
+ font-weight: 600;
+ color: $color-text;
+ }
+
+ .close-btn {
+ width: 56rpx;
+ height: 56rpx;
+ border-radius: 50%;
+ background-color: $bg-main;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.2s ease;
+ border: none;
+
+ &:hover {
+ background-color: #e8edf3;
+ }
+
+ .iconfont {
+ font-size: 28rpx;
+ color: $color-text-light;
+ }
+ }
+ }
+
+ .nickname-editor-content {
+ .nickname-input-container {
+ margin-bottom: 24rpx;
+ width: 100%; // 输入框容器占满弹窗宽度
+ box-sizing: border-box;
+
+ .nickname-input {
+ width: 100%;
+ height: 96rpx;
+ padding: 0 24rpx;
+ border-radius: $radius-lg;
+ border: 2rpx solid #f0f4f8;
+ font-size: 28rpx;
+ color: $color-text;
+ background-color: $bg-main;
+ transition: all 0.2s ease;
+ box-shadow: none;
+ box-sizing: border-box; // 确保输入框不超出容器
+
+ &:focus {
+ border-color: $color-primary;
+ box-shadow: 0 0 0 4rpx rgba(108, 142, 191, 0.1);
+ }
+
+ &::placeholder {
+ color: $color-text-light;
+ opacity: 0.8;
+ }
+ }
+ }
+
+ .nickname-tip {
+ font-size: 24rpx;
+ color: $color-text-light;
+ margin-bottom: 32rpx;
+ display: block;
+ line-height: 1.5;
+ }
+
+ .nickname-editor-actions {
+ display: flex;
+ justify-content: flex-end;
+ gap: 16rpx;
+
+ .nickname-action-btn {
+ padding: 16rpx 32rpx;
+ border-radius: $radius-lg;
+ font-size: 28rpx;
+ font-weight: 500;
+ transition: all 0.2s ease;
+ border: none;
+
+ &.cancel {
+ background-color: $bg-main;
+ color: $color-text-light;
+
+ &:hover {
+ background-color: #e8edf3;
+ }
+ }
+
+ &.confirm {
+ background-color: $color-primary;
+ color: white;
+ box-shadow: 0 4rpx 12rpx rgba(108, 142, 191, 0.2);
+
+ &.disabled {
+ background-color: $color-primary-light;
+ opacity: 0.7;
+ box-shadow: none;
+ }
+
+ &:not(.disabled):hover {
+ background-color: #5a7cb0;
+ transform: translateY(-2rpx);
+ }
+ }
+ }
+ }
+ }
+ }
+
+ /* 工具面板 */
+ .tools-popup {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 999;
+
+ .tools-mask {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.4);
+ backdrop-filter: blur(6rpx);
+ }
+
+ .tools-panel {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background-color: $bg-card;
+ border-radius: $radius-lg $radius-lg 0 0;
+ padding: 32rpx;
+ box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
+
+ .tools-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 32rpx;
+ border-bottom: 2rpx solid #f0f4f8;
+ padding-bottom: 16rpx;
+
+ text {
+ font-size: 34rpx;
+ font-weight: 600;
+ color: $color-text;
+ }
+
+ .close-btn {
+ width: 56rpx;
+ height: 56rpx;
+ border-radius: 50%;
+ background-color: $bg-main;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.2s ease;
+ border: none;
+
+ &:hover {
+ background-color: #e8edf3;
+ }
+
+ .iconfont {
+ font-size: 28rpx;
+ color: $color-text-light;
+ }
+ }
+ }
+
+ .tools-grid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 24rpx;
+
+ .tool-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ 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: 88rpx;
+ height: 88rpx;
+ border-radius: 50%;
+ background-color: $bg-card;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 16rpx;
+ box-shadow: $shadow-sm;
+
+ .iconfont {
+ font-size: 48rpx;
+ color: $color-primary;
+ }
+ }
+
+ .tool-text {
+ font-size: 24rpx;
+ color: $color-text;
+ font-weight: 500;
+ }
+ }
+ }
+ }
+ }
+
+ /* 语音输入面板 */
+ .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;
+ 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;
+ margin-bottom: 32rpx;
+ border-bottom: 2rpx solid #f0f4f8;
+ padding-bottom: 16rpx;
+
+ text {
+ font-size: 34rpx;
+ font-weight: 600;
+ color: $color-text;
+ }
+
+ .close-btn {
+ width: 56rpx;
+ height: 56rpx;
+ border-radius: 50%;
+ background-color: $bg-main;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.2s ease;
+ border: none;
+
+ &:hover {
+ background-color: #e8edf3;
+ }
+
+ .iconfont {
+ font-size: 28rpx;
+ color: $color-text-light;
+ }
+ }
+ }
+
+ .voice-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-bottom: 48rpx;
+
+ .voice-wave {
+ width: 280rpx;
+ height: 160rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 24rpx;
+
+ &.recording .wave-bar {
+ animation: wave 1.2s infinite ease-in-out;
+ }
+
+ .wave-bar {
+ width: 8rpx;
+ height: 40rpx;
+ margin: 0 4rpx;
+ background-color: $color-primary;
+ border-radius: 4rpx;
+ animation: none;
+
+ &: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-light;
+ }
+ }
+
+ .voice-actions {
+ display: flex;
+ justify-content: center;
+
+ .voice-btn {
+ width: 120rpx;
+ height: 120rpx;
+ border-radius: 50%;
+ background-color: $color-primary;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ 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: #5a7cb0;
+ }
+
+ .iconfont {
+ font-size: 56rpx;
+ color: white;
+ }
+ }
+ }
+ }
+ }
+
+ /* 头像选择弹窗 */
+ .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%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background-color: $bg-card;
+ border-radius: $radius-lg;
+ padding: 32rpx;
+ 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: 24rpx;
+ border-bottom: 2rpx solid #f0f4f8;
+ padding-bottom: 16rpx;
+
+ text {
+ font-size: 34rpx;
+ font-weight: 600;
+ color: $color-text;
+ }
+
+ .close-btn {
+ width: 56rpx;
+ height: 56rpx;
+ border-radius: 50%;
+ background-color: $bg-main;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.2s ease;
+ border: none;
+
+ &:hover {
+ background-color: #e8edf3;
+ }
+
+ .iconfont {
+ font-size: 28rpx;
+ color: $color-text-light;
+ }
+ }
+ }
+
+ .avatar-selector-content {
+ .current-avatar-preview {
+ width: 180rpx;
+ height: 180rpx;
+ border-radius: 50%;
+ overflow: hidden;
+ margin: 0 auto 32rpx;
+ box-shadow: $shadow-md;
+ border: 4rpx solid #f0f4f8;
+
+ image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ }
+
+ .avatar-selector-actions {
+ display: flex;
+ flex-direction: column;
+ gap: 16rpx;
+
+ .avatar-select-action {
+ padding: 24rpx;
+ border-radius: $radius-lg;
+ font-size: 28rpx;
+ display: flex;
+ align-items: 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: #f8fafc;
+ border-color: #e9edf2;
+
+ &:hover {
+ background-color: #f0f4f8;
+ }
+ }
+
+ .iconfont {
+ font-size: 36rpx;
+ color: $color-primary;
+ }
+ }
+ }
+ }
+ }
+ }
+}
+
+/* 动画定义 */
+@keyframes dotPulse {
+ 0%, 100% {
+ 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: scaleY(1);
+ opacity: 1;
+ }
+}
+
+@keyframes shine {
+ 0% {
+ left: -100%;
+ }
+ 100% {
+ left: 200%;
+ }
+}
+
+@keyframes gradient-flow {
+ 0% {
+ background-position: 0% 50%;
+ }
+ 50% {
+ background-position: 100% 50%;
+ }
+ 100% {
+ background-position: 0% 50%;
+ }
+}
+
+/* 滚动条样式优化 */
+::-webkit-scrollbar {
+ width: 8rpx;
+ height: 8rpx;
+}
+
+::-webkit-scrollbar-track {
+ background: $bg-main;
+ border-radius: 4rpx;
+}
+
+::-webkit-scrollbar-thumb {
+ background: $color-primary-light;
+ border-radius: 4rpx;
+ opacity: 0.7;
+
+ &:hover {
+ background: $color-primary;
+ opacity: 1;
+ }
+}
+
+/* 响应式适配 */
+@media (max-width: 750rpx) {
+ .ai-chat-container {
+ .chat-messages {
+ padding: 16rpx 24rpx;
+
+ .message-item {
+ margin-bottom: 24rpx;
+
+ .user-message, .ai-message {
+ .avatar {
+ width: 72rpx;
+ height: 72rpx;
+ }
+
+ .message-content {
+ margin-left: 16rpx;
+ max-width: calc(100% - 88rpx);
+
+ .message-bubble {
+ padding: 16rpx 24rpx;
+
+ .message-text {
+ font-size: 26rpx;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .input-area {
+ padding: 16rpx 24rpx;
+
+ .input-container {
+ .message-input {
+ min-height: 72rpx;
+ padding: 16rpx 24rpx;
+ font-size: 26rpx;
+ }
+
+ .send-btn {
+ width: 96rpx;
+ height: 68rpx;
+ font-size: 26rpx;
+ }
+ }
+ }
+ }
+}
+