From 7da168e1b2d56e46804e2437d6c2db30efba6ff2 Mon Sep 17 00:00:00 2001
From: jinhhanhan <1683105490@qq.com>
Date: Wed, 10 Dec 2025 10:10:18 +0800
Subject: [PATCH] =?UTF-8?q?chore=EF=BC=9A=E8=AE=A9=E6=99=BA=E8=83=BD?=
 =?UTF-8?q?=E5=AE=A2=E6=9C=8D=E5=88=B0AI=E6=B0=94=E6=B3=A1=E4=B8=8A?=
 =?UTF-8?q?=E6=96=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ai-chat-message/ai-chat-message.vue       | 1389 ++++++++---------
 1 file changed, 643 insertions(+), 746 deletions(-)

diff --git a/components/ai-chat-message/ai-chat-message.vue b/components/ai-chat-message/ai-chat-message.vue
index 13a8bab..2f9679f 100644
--- a/components/ai-chat-message/ai-chat-message.vue
+++ b/components/ai-chat-message/ai-chat-message.vue
@@ -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,766 +1968,648 @@ $radius-lg: 36rpx;
     }
   }
   
-  
-  
-  
-  
-// 昵称编辑弹窗样式（修复右侧溢出问题）
-.nickname-editor-popup {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1001;
-}
+  // 昵称编辑弹窗样式（修复右侧溢出问题）
+  .nickname-editor-popup {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1001;
+  }
 
-.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-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-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;
+    .nickname-editor-header {
       display: flex;
+      justify-content: space-between;
       align-items: center;
-      justify-content: center;
-      transition: all 0.2s ease;
-      border: none;
+      margin-bottom: 24rpx;
+      border-bottom: 2rpx solid #f0f4f8;
+      padding-bottom: 16rpx;
 
-      &:hover {
-        background-color: #e8edf3;
+      text {
+        font-size: 34rpx;
+        font-weight: 600;
+        color: $color-text;
       }
 
-      .iconfont {
-        font-size: 28rpx;
+      .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);
+            }
+          }
+        }
       }
     }
   }
 
-  .nickname-editor-content {
-    .nickname-input-container {
-      margin-bottom: 24rpx;
-      width: 100%; // 输入框容器占满弹窗宽度
-      box-sizing: border-box;
+  /* 工具面板 */
+  .tools-popup {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 999;
 
-      .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; // 确保输入框不超出容器
+    .tools-mask {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: rgba(0, 0, 0, 0.4);
+      backdrop-filter: blur(6rpx);
+    }
 
-        &:focus {
-          border-color: $color-primary;
-          box-shadow: 0 0 0 4rpx rgba(108, 142, 191, 0.1);
+    .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;
         }
 
-        &::placeholder {
-          color: $color-text-light;
-          opacity: 0.8;
+        .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;
+          }
         }
       }
     }
+  }
 
-    .nickname-tip {
-      font-size: 24rpx;
-      color: $color-text-light;
-      margin-bottom: 32rpx;
-      text-align: center;
-      width: 100%;
-      box-sizing: border-box;
+  /* 语音输入面板 */
+  .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);
     }
 
-    .nickname-editor-actions {
-      display: flex;
-           gap: 24rpx;
-           width: 100%;
-           box-sizing: border-box;
-           justify-content: center;
-           padding: 0 20rpx;
-     
-           .nickname-action-btn {
-             flex: none;
-             width: 160rpx;
-             height: 96rpx;
-             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;
-             }
-     
-             &.cancel {
-               background-color: $bg-card;
-               border: 2rpx solid #f0f4f8;
-               color: $color-text-light;
-     
-               // 修复：替换未定义的 $f8fafc 为已定义的 $bg-main
-               &:hover {
-                 background-color: $bg-main; 
-               }
-             }
-     
-             &.confirm {
-               background-color: $color-primary;
-               color: white;
-               box-shadow: 0 4rpx 12rpx rgba(108, 142, 191, 0.2);
-     
-               &: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 {
-               position: fixed;
-               top: 0;
-               left: 0;
-               right: 0;
-               bottom: 0;
-               z-index: 999;
-             }
-         
-             .tools-mask, .voice-mask, .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);
-             }
-         
-             /* 工具面板样式 */
-             .tools-panel {
-               position: absolute;
-               bottom: 0;
-               left: 0;
-               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);
-               
-               .tools-header {
-                 display: flex;
-                 justify-content: space-between;
-                 align-items: center;
-                 padding: 32rpx;
-                 border-bottom: 2rpx solid #f0f4f8;
-                 
-                 text {
-                   font-size: 34rpx;
-                   font-weight: 600;
-                   color: $color-text;
-                 }
-                 
-                 .close-btn {
-                   width: 64rpx;
-                   height: 64rpx;
-                   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: 34rpx;
-                     color: $color-text-light;
-                   }
-                 }
-               }
-               
-               .tools-grid {
-                 display: grid;
-                 grid-template-columns: repeat(4, 1fr);
-                 padding: 32rpx;
-                 gap: 32rpx;
-               
-                 .tool-item {
-                   display: flex;
-                   flex-direction: column;
-                   align-items: center;
-                   transition: all 0.3s ease;
-               
-                   &:hover {
-                     transform: translateY(-4rpx);
-                   }
-               
-                   .tool-icon {
-                     width: 96rpx;
-                     height: 96rpx;
-                     border-radius: 50%;
-                     background-color: $bg-main;
-                     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: 26rpx;
-                     color: $color-text;
-                   }
-                 }
-               }
-             }
-           
-             /* 语音输入面板样式 */
-             .voice-input-panel {
-               position: absolute;
-               bottom: 0;
-               left: 0;
-               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);
-           
-               .voice-header {
-                 display: flex;
-                 justify-content: space-between;
-                 align-items: center;
-                 padding: 32rpx;
-                 border-bottom: 2rpx solid #f0f4f8;
-           
-                 text {
-                   font-size: 34rpx;
-                   font-weight: 600;
-                   color: $color-text;
-                 }
-           
-                 .close-btn {
-                   width: 64rpx;
-                   height: 64rpx;
-                   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: 34rpx;
-                     color: $color-text-light;
-                   }
-                 }
-               }
-           
-               .voice-content {
-                 padding: 64rpx 32rpx;
-                 display: flex;
-                 flex-direction: column;
-                 align-items: center;
-           
-                 .voice-wave {
-                   width: 240rpx;
-                   height: 240rpx;
-                   border-radius: 50%;
-                   background-color: $bg-main;
-                   display: flex;
-                   align-items: center;
-                   justify-content: center;
-                   margin-bottom: 48rpx;
-                   box-shadow: $shadow-md;
-           
-                   .wave-bar {
-                     width: 12rpx;
-                     height: 40rpx;
-                     background-color: $color-primary-light;
-                     border-radius: 6rpx;
-                     margin: 0 8rpx;
-                     transition: height 0.3s ease;
-                   }
-           
-                   &.recording {
-                     .wave-bar {
-                       animation: waveAnimation 1.2s infinite ease-in-out;
-                     }
-                   }
-                 }
-           
-                 .voice-tip {
-                   font-size: 28rpx;
-                   color: $color-text;
-                 }
-               }
-           
-               .voice-actions {
-                 padding: 32rpx;
-                 display: flex;
-                 justify-content: center;
-           
-                 .voice-btn {
-                   width: 120rpx;
-                   height: 120rpx;
-                   border-radius: 50%;
-                   background-color: $color-user;
-                   display: flex;
-                   align-items: center;
-                   justify-content: center;
-                   box-shadow: 0 8rpx 24rpx rgba(134, 117, 169, 0.3);
-                   transition: all 0.3s ease;
-           
-                   &:hover {
-                     transform: scale(1.05);
-                     background-color: #756298;
-                   }
-           
-                   .iconfont {
-                     font-size: 56rpx;
-                     color: white;
-                   }
-                 }
-               }
-             }
-           
-             /* 头像选择弹窗样式 */
-             .avatar-selector-panel {
-               position: absolute;
-               top: 50%;
-               left: 50%;
-               transform: translate(-50%, -50%);
-               background-color: $bg-card;
-               border-radius: $radius-lg;
-               padding: 32rpx;
-               width: 580rpx;
-               box-shadow: 0 8rpx 36rpx rgba(0, 0, 0, 0.15);
-           
-               .avatar-selector-header {
-                 display: flex;
-                 justify-content: space-between;
-                 align-items: center;
-                 margin-bottom: 32rpx;
-                 border-bottom: 2rpx solid #f0f4f8;
-                 padding-bottom: 24rpx;
-           
-                 text {
-                   font-size: 34rpx;
-                   font-weight: 600;
-                   color: $color-text;
-                 }
-           
-                 .close-btn {
-                   width: 64rpx;
-                   height: 64rpx;
-                   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: 34rpx;
-                     color: $color-text-light;
-                   }
-                 }
-               }
-           
-               .avatar-selector-content {
-                 .current-avatar-preview {
-                   width: 200rpx;
-                   height: 200rpx;
-                   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;
-           
-                   image {
-                     width: 100%;
-                     height: 100%;
-                     object-fit: cover;
-                   }
-                 }
-           
-                 .avatar-selector-actions {
-                   display: flex;
-                   flex-direction: column;
-                   gap: 24rpx;
-           
-                   .avatar-select-action {
-                     height: 96rpx;
-                     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;
-           
-                     &:hover {
-                       background-color: #e8edf3;
-                     }
-           
-                     &.cancel {
-                       background-color: $bg-card;
-                       color: $color-text-light;
-           
-                       &:hover {
-                         background-color: #f8fafc;
-                       }
-                     }
-           
-                     .iconfont {
-                       font-size: 36rpx;
-                       color: $color-primary;
-                     }
-                   }
-                 }
-               }
-             }
-           
-             /* 动画定义 */
-             @keyframes dotPulse {
-               0%, 100% {
-                 transform: scale(1);
-                 opacity: 0.7;
-               }
-               50% {
-                 transform: scale(1.3);
-                 opacity: 1;
-               }
-             }
-           
-             @keyframes shine {
-               0% {
-                 left: -100%;
-               }
-               100% {
-                 left: 200%;
-               }
-             }
-           
-             @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%;
-               }
-               50% {
-                 background-position: 100% 50%;
-               }
-               100% {
-                 background-position: 0% 50%;
-               }
-             }
-           
-             /* 富文本样式补充 */
-             rich-text {
-               line-height: 1.8;
-               font-size: 26rpx;
-               color: $color-text;
-               display: block;
-           
-               strong {
-                 font-weight: 600;
-                 color: $color-text;
-               }
-           
-               em {
-                 font-style: italic;
-                 color: $color-text-light;
-               }
-           
-               code {
-                 background-color: #f0f4f8;
-                 padding: 4rpx 8rpx;
-                 border-radius: $radius-sm;
-                 font-family: monospace;
-                 font-size: 24rpx;
-                 color: $color-primary;
-               }
-           
-               a {
-                 color: $color-primary;
-                 text-decoration: underline;
-                 text-underline-offset: 4rpx;
-               }
-           
-               br {
-                 display: block;
-                 height: 24rpx;
-               }
-             }
-           
-             /* 适配小程序和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) {
-               .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 {
-                   width: 72rpx;
-                   height: 72rpx;
-                 }
-           
-                 .message-content {
-                   margin-left: 16rpx;
-                   max-width: calc(100% - 88rpx);
-                 }
-           
-                 .user-message .message-content {
-                   margin-right: 16rpx;
-                 }
-               }
-           
-               .message-bubble {
-                 padding: 20rpx 24rpx !important;
-               }
-           
-               .message-text {
-                 font-size: 26rpx !important;
-               }
-           
-               .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;
-                 font-size: 26rpx;
-               }
-           
-               .send-btn {
-                 width: 96rpx;
-                 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;
-               }
-             }
-           }
-         </style>
\ No newline at end of file
+    .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;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file