chore：加了用户自定义昵称

components/ai-chat-message/ai-chat-message.vue

@@ -27,6 +27,8 @@
             <image :src="localUserAvatar" mode="aspectFill" />
           </view>
           <view class="message-content">
+            <!-- 新增：显示用户昵称 -->
+            <view class="message-nickname" v-if="localUserNickname">{{ localUserNickname }}</view>
             <view class="message-bubble">
               <text class="message-text">{{ message.content }}</text>
             </view>
@@ -41,6 +43,8 @@
             <image :src="aiAvatar" mode="aspectFill" />
           </view>
           <view class="message-content">
+            <!-- AI昵称固定，不可修改 -->
+            <view class="message-nickname">智能助手</view>
             <view class="message-bubble">
               <!-- 文本消息 -->
               <view v-if="message.type === 'text'" class="text-content">
@@ -189,6 +193,10 @@
         <button class="tool-btn" @click="openAvatarSelector">
           <text class="iconfont icon-user">📷</text>
         </button>
+        <!-- 新增：更换用户昵称按钮 -->
+        <button class="tool-btn" @click="openNicknameEditor">
+          <text class="iconfont icon-edit">✏️</text>
+        </button>
       </view>
       
       <view class="input-container">
@@ -311,6 +319,42 @@
         </view>
       </view>
     </view>
+    
+    <!-- 新增：昵称编辑弹窗 -->
+    <view v-if="showNicknameEditor" class="nickname-editor-popup">
+      <view class="nickname-editor-mask" @click="closeNicknameEditor"></view>
+      <view class="nickname-editor-panel">
+        <view class="nickname-editor-header">
+          <text>修改昵称</text>
+          <button class="close-btn" @click="closeNicknameEditor">
+            <text class="iconfont icon-close"></text>
+          </button>
+        </view>
+        <view class="nickname-editor-content">
+          <view class="nickname-input-container">
+            <input 
+              v-model="tempNickname" 
+              class="nickname-input"
+              placeholder="请输入您的新昵称"
+              :maxlength="12"
+              type="text" />
+          </view>
+          <view class="nickname-tip">昵称长度限制1-12个字符，仅自己可见</view>
+          <view class="nickname-editor-actions">
+            <button class="nickname-action-btn cancel" @click="closeNicknameEditor">
+              <text>取消</text>
+            </button>
+            <button 
+              class="nickname-action-btn confirm" 
+              :class="{ disabled: !tempNickname.trim() }"
+              :disabled="!tempNickname.trim()"
+              @click="saveNickname">
+              <text>保存</text>
+            </button>
+          </view>
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 
@@ -334,6 +378,11 @@ export default {
       type: String,
       default: ''
     },
+    // 初始用户昵称（外部传入，可选）
+    initUserNickname: {
+      type: String,
+      default: ''
+    },
     // 是否显示加载更多
     showLoadMore: {
       type: Boolean,
@@ -380,6 +429,11 @@ export default {
       defaultAvatar: '/static/images/default-avatar.png',
       // 头像选择弹窗控制
       showAvatarSelector: false,
+      // 新增：用户昵称相关
+      localUserNickname: '', // 当前用户昵称
+      defaultNickname: '我', // 默认昵称
+      showNicknameEditor: false, // 昵称编辑弹窗控制
+      tempNickname: '', // 昵称编辑临时值
       // Dify API相关
       currentConversationId: null,
       isAIServiceAvailable: true,
@@ -392,6 +446,8 @@ export default {
     this.initAudioContext()
     // 初始化用户头像（缓存优先）
     this.initUserAvatarData()
+    // 初始化用户昵称（缓存优先）
+    this.initUserNicknameData()
   },
   mounted() {
     this.scrollToBottom()
@@ -436,6 +492,26 @@ export default {
       }
     },
     
+    // 新增：初始化用户昵称（支持缓存持久化）
+    initUserNicknameData() {
+      // 1. 优先读取本地缓存的昵称
+      const cachedNickname = uni.getStorageSync('user_nickname')
+      
+      if (cachedNickname) {
+        this.localUserNickname = cachedNickname
+      } 
+      // 2. 无缓存时，使用外部传入的初始昵称
+      else if (this.initUserNickname) {
+        this.localUserNickname = this.initUserNickname
+        // 缓存初始昵称
+        uni.setStorageSync('user_nickname', this.initUserNickname)
+      } 
+      // 3. 最后使用默认昵称
+      else {
+        this.localUserNickname = this.defaultNickname
+      }
+    },
+    
     // 打开头像选择弹窗
     openAvatarSelector() {
       this.showAvatarSelector = true
@@ -504,6 +580,44 @@ export default {
       })
     },
     
+    // 新增：打开昵称编辑弹窗
+    openNicknameEditor() {
+      // 初始化临时昵称值为当前昵称
+      this.tempNickname = this.localUserNickname
+      this.showNicknameEditor = true
+    },
+    
+    // 新增：关闭昵称编辑弹窗
+    closeNicknameEditor() {
+      this.showNicknameEditor = false
+      // 清空临时值
+      this.tempNickname = ''
+    },
+    
+    // 新增：保存用户昵称
+    saveNickname() {
+      if (!this.tempNickname.trim()) return
+      
+      // 1. 更新本地昵称
+      this.localUserNickname = this.tempNickname.trim()
+      
+      // 2. 持久化缓存（支持页面刷新后保留）
+      uni.setStorageSync('user_nickname', this.localUserNickname)
+      
+      // 3. 通知父组件（可选，用于同步到服务器等场景）
+      this.$emit('nickname-changed', this.localUserNickname)
+      
+      // 4. 关闭弹窗
+      this.closeNicknameEditor()
+      
+      // 5. 提示成功
+      uni.showToast({
+        title: '昵称修改成功',
+        icon: 'success',
+        duration: 1500
+      })
+    },
+    
     // 发送消息
     async sendMessage() {
       if (!this.inputText.trim()) return
@@ -1194,8 +1308,11 @@ $radius-lg: 36rpx;
             font-size: 24rpx;
             color: $color-text-light;
             margin-bottom: 8rpx;
-            text-align: right; // 与用户消息右对齐
             letter-spacing: 0.5rpx;
+            // 用户昵称右对齐，AI昵称左对齐
+            &:not(.ai-message .message-nickname) {
+              text-align: right;
+            }
           }
 
           .message-bubble {
@@ -1836,7 +1953,11 @@ $radius-lg: 36rpx;
     }
   }
   
-  // 昵称编辑弹窗样式
+  
+  
+  
+  
+// 昵称编辑弹窗样式（修复右侧溢出问题）
 .nickname-editor-popup {
   position: fixed;
   top: 0;
@@ -1863,17 +1984,19 @@ $radius-lg: 36rpx;
   transform: translate(-50%, -50%);
   background-color: $bg-card;
   border-radius: $radius-lg;
-    padding: 32rpx;
+  padding: 24rpx 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; // 确保内边距不影响宽度
 
   .nickname-editor-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;
@@ -1882,8 +2005,8 @@ $radius-lg: 36rpx;
     }
 
     .close-btn {
-        width: 64rpx;
+      width: 56rpx;
-        height: 64rpx;
+      height: 56rpx;
       border-radius: 50%;
       background-color: $bg-main;
       display: flex;
@@ -1897,7 +2020,7 @@ $radius-lg: 36rpx;
       }
 
       .iconfont {
-          font-size: 34rpx;
+        font-size: 28rpx;
         color: $color-text-light;
       }
     }
@@ -1906,6 +2029,8 @@ $radius-lg: 36rpx;
   .nickname-editor-content {
     .nickname-input-container {
       margin-bottom: 24rpx;
+      width: 100%; // 输入框容器占满弹窗宽度
+      box-sizing: border-box;
 
       .nickname-input {
         width: 100%;
@@ -1917,6 +2042,8 @@ $radius-lg: 36rpx;
         color: $color-text;
         background-color: $bg-main;
         transition: all 0.2s ease;
+        box-shadow: none;
+        box-sizing: border-box; // 确保输入框不超出容器
 
         &:focus {
           border-color: $color-primary;
@@ -1935,27 +2062,48 @@ $radius-lg: 36rpx;
       color: $color-text-light;
       margin-bottom: 32rpx;
       text-align: center;
+      width: 100%;
+      box-sizing: border-box;
     }
 
     .nickname-editor-actions {
       display: flex;
            gap: 24rpx;
+           width: 100%;
+           box-sizing: border-box;
+           justify-content: center;
+           padding: 0 20rpx;
      
            .nickname-action-btn {
-          flex: 1;
+             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: #f8fafc;
+                 background-color: $bg-main; 
                }
              }
      
@@ -1980,7 +2128,6 @@ $radius-lg: 36rpx;
          }
        }
      }
-
              /* 弹窗样式基础 */
              .tools-popup, .voice-popup, .avatar-selector-popup {
                position: fixed;