<<<<<<< HEAD
<template>
  <view class="ai-chat-page" :style="wrapperPageStyle">
    <!--自定义导航头部 -->
    <view class="custom-navbar" ref="pageHeader" v-if="showCustomNavbar">
      <view class="header-left">
        <button class="back-btn" v-show="showBackButton" @click="goBack">
          <text class="iconfont icon-back"></text>
        </button>
        <!-- 占位元素，确保布局平衡 -->
        <view v-show="!showBackButton" class="placeholder"></view>
      </view>
      <view class="header-center">
        <text class="header-subtitle">在线为您服务</text>
      </view>
      <view class="header-right">
        <button class="menu-btn" v-show="showMenuButton" @click="showMenu">
          <text class="iconfont icon-ellipsis"></text>
        </button>
        <!-- 占位元素，确保布局平衡 -->
        <view v-show="!showMenuButton" class="placeholder"></view>
      </view>
    </view>

    <!-- 聊天内容区域 -->
    <view class="chat-content" 
      :style="wrapperChatContentStyle"
      >
      <!-- AI聊天组件 -->
      <ai-chat-message 
        ref="chat"
        :initial-messages="initialMessages"
        :user-avatar="userAvatar"
        :ai-avatar="aiAvatar"
        @message-sent="onMessageSent"
        @ai-response="onAIResponse"
        @action-click="onActionClick"
        @history-loaded="onHistoryLoaded"
        @file-preview="onFilePreview"
        @audio-play="onAudioPlay"
        @audio-pause="onAudioPause"
        @video-play="onVideoPlay"
        @video-pause="onVideoPause"
        @link-open="onLinkOpen"
        @product-view="onProductView"
        @input-change="onInputChange" />
    </view>
  </view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import navigationHelper from '@/common/js/navigation';
import { EventSafety } from '@/common/js/event-safety';

export default {
  data() {
    return {
      initialMessages: [
        {
          id: 1,
          role: 'ai',
          type: 'text',
          content: '您好！我是AI智能客服，很高兴为您服务！\n\n我可以帮您：\n• 解答产品相关问题\n• 处理订单问题\n• 提供技术支持\n• 推荐相关商品\n\n请告诉我您需要什么帮助？',
          timestamp: Date.now() - 60000,
          actions: [
            { type: 'like', icon: 'icon-dianzan1', text: '喜欢', count: 0 },
            { type: 'dislike', icon: 'icon-dianzan1', text: '不喜欢', count: 0 }
          ]
        }
      ],

      // --- 系统导航栏/状态栏相关 ---
      navBarHeight: 44,   // uni-page-head 系统导航栏，默认高度为44px
      statusBarHeight: 0, // 状态栏高度，默认0

      // --- 自定义导航栏 ---
      showCustomNavbar: true,    // 是否显示自定义导航栏
      showBackButton: false,      // 是否显示返回按钮
      showMenuButton: true,      // 是否显示设置菜单按钮

      // --- 聊天内容区域 ---  
      scrollViewHeight: '0px',


      // 事件处理器引用（用于清理）
      safeEventHandlers: new Map()
    }
  },
  
  computed: {
    ...mapGetters([
      'globalAIKefuConfig'
    ]),    

    /// ---- 关于AI客服的配置，支持远程配置 ----
    userAvatar() {
      return this.globalAIKefuConfig?.userAvatar || '/static/images/user-avatar.png'
    },
    aiAvatar() {
      return this.globalAIKefuConfig?.aiAvatar || '/static/images/ai-avatar.png'
    },
    /// ---- others ----
    containerHeight() {
      return `calc(100vh - ${this.navBarHeight + this.statusBarHeight}px)`
    },
    wrapperPageStyle() {
      // #ifdef H5
      return `top: ${this.navBarHeight + 'px'};`
      // #endif

      // #ifdef MP-WEIXIN
      return `top: -1px;` // 微信小程序需要上移1px, 否则与系统导航栏出现1px的空隙
      // #endif

      return ``
    },
    wrapperChatContentStyle() {
      return { 
        height: this.containerHeight,
        paddingTop: this.showCustomNavbar ? '0' : (this.navHeight + 'px')
      }
    }
  },

  async onLoad(options) {
    await this.initPage(options)
  },
  
  async onReady() {
    await this.initNavigation()
  },

  onShow() {
    
  },

  onHide() {

  },
  
  onUnload() {
    this.cleanup()
  },


  

  methods: {
    // ========== 安全事件处理 ==========
    setupSafeEventListeners() {
      // 使用 EventSafety 包装事件处理器
      const safeHandlers = {
        serviceRequest: EventSafety.wrapEventHandler(
          this.handleServiceRequest.bind(this),
          { onError: this.handleEventError.bind(this) }
        ),
        navigationRequest: EventSafety.wrapEventHandler(
          this.handleNavigationRequest.bind(this),
          { onError: this.handleEventError.bind(this) }
        ),
        componentInteraction: EventSafety.wrapEventHandler(
          this.handleComponentInteraction.bind(this),
          { onError: this.handleEventError.bind(this) }
        )
      }
      
      // 注册事件监听
      this.$on('service.requestComponentInfo', safeHandlers.serviceRequest)
      this.$on('navigation.requestInfo', safeHandlers.navigationRequest)
      this.$on('component.interaction', safeHandlers.componentInteraction)
      
      // 保存处理器引用用于清理
      this.safeEventHandlers.set('serviceRequest', safeHandlers.serviceRequest)
      this.safeEventHandlers.set('navigationRequest', safeHandlers.navigationRequest)
      this.safeEventHandlers.set('componentInteraction', safeHandlers.componentInteraction)
    },

    setupNavigationEvents() {
      // 监听窗口大小变化
      uni.onWindowResize((res) => {
        console.log('窗口大小变化:', res.size)
        this.calculateScrollViewHeight()
      })
    },   

    // ========== 事件处理方法 ========== 

    async handleServiceRequest(event) {
      console.log('处理服务请求:', EventSafety.extractEventData(event))
      
      // 安全地检查事件目标
      if (event.matches('.service-component') || 
          event.detail?.componentType === 'service') {
        await this.processServiceRequest(event)
      }
    },

    async handleNavigationRequest(event) {
      console.log('处理导航请求:', event.type)
      
      // 提供导航信息
      this.emitNavigationInfo(event)
    },

    handleComponentInteraction(event) {
      console.log('处理组件交互:', event.detail)
      
      // 安全地处理组件交互
      this.processComponentInteraction(event)
    },

    handleEventError(error, event) {
      console.error('事件处理错误:', {
        error: error.message,
        eventType: event?.type,
        component: this.$options.name
      })
      
      this.showError('操作失败，请重试')
    },

    // ========== 初始化页面 ==========
    async initPage(options = {}) {
      this.$langConfig.title('AI智能客服');
      this.initChat()
    },
    

    // 初始化导航栏相关配置
    async initNavigation() {
      try {
        // 获取导航栏高度
        this.navBarHeight = await navigationHelper.getNavigationHeight(this, {forceRefresh: false})
        
        // 获取状态栏高度
        this.statusBarHeight = navigationHelper.getStatusBarHeight()
        
        // 计算滚动视图高度
        this.calculateScrollViewHeight()

        // 注册导航相关事件
        this.setupNavigationEvents()
        
      } catch (error) {
        console.error('初始化导航栏失败:', error)
        this.setFallbackNavigationValues()
      }
    },

    // 计算滚动视图高度
    calculateScrollViewHeight() {
      const safeArea = navigationHelper.getSafeAreaInsets()
      const bottomInset = safeArea.bottom || 0
      const inputHeight = 120 // 输入区域高度
      
      this.scrollViewHeight = `calc(100vh - ${this.navBarHeight + this.statusBarHeight + inputHeight + bottomInset}px)`
    },    

    // 备用高度设置
    setFallbackNavigationValues() {
      // #ifdef MP-WEIXIN
      this.navBarHeight = 44
      this.statusBarHeight = 20
      // #endif
      
      // #ifdef H5
      this.navBarHeight = 44
      this.statusBarHeight = 0
      // #endif
      
      // #ifdef APP-PLUS
      this.navBarHeight = 88
      this.statusBarHeight = 44
      // #endif
    },    

    cleanup() {
      // 清理事件监听器
      this.safeEventHandlers.forEach((handler, eventType) => {
        this.$off(eventType, handler)
      })
      this.safeEventHandlers.clear()
      
      console.log('组件清理完成')
    },

    showError(message) {
      uni.showToast({
        title: message,
        icon: 'none',
        duration: 2000
      })
    },    


    // 初始化聊天
    initChat() {
      // 可以在这里加载历史消息
      console.log('AI聊天页面初始化')
    },

    // 返回上一页
    goBack() {
      uni.navigateBack()
    },

    // 显示菜单
    showMenu() {
      uni.showActionSheet({
        itemList: ['清空聊天', '导出记录', '设置', '帮助'],
        success: (res) => {
          switch (res.tapIndex) {
            case 0:
              this.clearChat()
              break
            case 1:
              this.exportChat()
              break
            case 2:
              this.showSettings()
              break
            case 3:
              this.showHelp()
              break
          }
        }
      })
    },

    // 清空聊天
    clearChat() {
      uni.showModal({
        title: '提示',
        content: '确定要清空聊天记录吗？',
        success: (res) => {
          if (res.confirm) {
            this.$refs.chat.clearMessages()
            // 重新添加欢迎消息
            this.$refs.chat.addMessage({
              id: Date.now(),
              role: 'ai',
              type: 'text',
              content: '聊天记录已清空，有什么可以帮助您的吗？',
              timestamp: Date.now()
            })
          }
        }
      })
    },

    // 导出聊天记录
    exportChat() {
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      })
    },

    // 显示设置
    showSettings() {
      uni.navigateTo({
        url: '/pages/settings/index'
      })
    },

    // 显示帮助
    showHelp() {
      const helpMessage = {
        id: Date.now(),
        role: 'ai',
        type: 'markdown',
        content: `# 使用帮助

## 基本功能
- **发送消息**: 在输入框中输入文字后发送
- **语音输入**: 点击麦克风图标进行语音输入
- **附件发送**: 点击+号可以发送图片、文件、位置

## 消息类型
- **文本消息**: 普通文字对话
- **Markdown**: 支持格式化的文档内容
- **文件**: 支持各种文件格式预览
- **音频**: 支持语音消息播放
- **视频**: 支持视频播放
- **链接**: 支持网页链接跳转
- **商品**: 支持商品卡片展示

## 操作功能
- **点赞/踩**: 对AI回复进行评价
- **复制**: 长按消息可复制内容
- **转发**: 支持消息转发功能`,
        timestamp: Date.now()
      }
      this.$refs.chat.addMessage(helpMessage)
    },

    // 用户发送消息
    onMessageSent(message) {
      console.log('用户发送消息:', message)
      
      // 使用AI服务获取回复
      // AI聊天组件内部已经集成了AI服务，这里只需要监听事件
    },

    // AI回复消息
    onAIResponse(message) {
      console.log('AI回复消息:', message)
      
      // 可以在这里处理AI回复后的逻辑
      // 比如记录对话、更新状态等
    },

    // 生成AI回复
    generateAIResponse(userMessage) {
      const responses = [
        '我理解您的需求，让我为您详细解答。',
        '感谢您的提问，这是一个很好的问题。',
        '根据您的问题，我建议您可以考虑以下几个方面：',
        '这个问题很常见，让我为您提供一些解决方案。',
        '我明白您的困惑，让我帮您分析一下。'
      ]
      
      const randomResponse = responses[Math.floor(Math.random() * responses.length)]
      
      const aiMessage = {
        id: Date.now(),
        role: 'ai',
        type: 'text',
        content: `${randomResponse}\n\n您的问题"${userMessage.content}"我已经收到，正在为您处理中...`,
        timestamp: Date.now(),
        actions: [
          { type: 'like', count: 0 },
          { type: 'dislike', count: 0 }
        ]
      }
      
      this.$refs.chat.addMessage(aiMessage)
      this.$emit('ai-response', aiMessage)
    },

    // 操作按钮点击
    onActionClick({ action, message }) {
      console.log('操作点击:', action, message)
      
      switch (action.type) {
        case 'like':
          uni.showToast({
            title: '感谢您的反馈！',
            icon: 'success'
          })
          break
        case 'dislike':
          uni.showToast({
            title: '我们会改进服务',
            icon: 'none'
          })
          break
      }
    },

    // 历史消息加载完成
    onHistoryLoaded(messages) {
      console.log('历史消息加载完成:', messages.length)
    },

    // 文件预览
    onFilePreview(message) {
      console.log('文件预览:', message)
      uni.showToast({
        title: '打开文件: ' + message.fileName,
        icon: 'none'
      })
    },

    // 音频播放
    onAudioPlay(message) {
      console.log('音频播放:', message)
    },

    // 音频暂停
    onAudioPause(message) {
      console.log('音频暂停:', message)
    },

    // 视频播放
    onVideoPlay(message) {
      console.log('视频播放:', message)
    },

    // 视频暂停
    onVideoPause(message) {
      console.log('视频暂停:', message)
    },

    // 链接打开
    onLinkOpen(message) {
      console.log('链接打开:', message)
      uni.showModal({
        title: '打开链接',
        content: `确定要打开链接：${message.url} 吗？`,
        success: (res) => {
          if (res.confirm) {
            // #ifdef H5
            window.open(message.url, '_blank')
            // #endif
            // #ifdef APP-PLUS
            plus.runtime.openURL(message.url)
            // #endif
          }
        }
      })
    },

    // 商品查看
    onProductView(message) {
      console.log('商品查看:', message)
      uni.showToast({
        title: '查看商品: ' + message.title,
        icon: 'none'
      })
    },

    // 输入内容变化
    onInputChange(value) {
      console.log('输入内容:', value)
    }
  }
}
</script>

<style lang="scss">

/* 引入图标字体 */
@import url('/common/css/iconfont.css');

/* 页面样式 */
.ai-chat-page {
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* 自定义导航头部 */
.custom-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: white;
  border-bottom: 2rpx solid #eeeeee;
  
  .header-left {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    
    .back-btn {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      background-color: #f8f8f8;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .iconfont {
        font-size: 32rpx;
        color: #666;
      }
    }
    
    .placeholder {
      width: 120rpx;
      height: 60rpx;
    }
  }
  
  .header-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20rpx;
    
    .header-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
    
    .header-subtitle {
      font-size: 24rpx;
      color: #999;
    }
  }
  
  .header-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    
    .menu-btn {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      background-color: #f8f8f8;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .iconfont {
        font-size: 32rpx;
        color: #666;
      }
    }
    
    .placeholder {
      width: 120rpx;
      height: 60rpx;
    }
  }
}

/* 聊天内容区域 */
.chat-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}



/* 底部tabBar占位样式 */
.page-bottom {
  width: 100%;
  background-color: transparent;
}

</style>
=======
<template>
<view class="ai-chat-page">
  <!-- 导航栏 -->
  <view class="navbar">
     <!-- 新增：语言切换按钮（左侧） -->
      <button class="lang-switch-btn" @click="toggleLanguage">
        {{ currentLang === 'zh' ? 'English' : '中文' }}
      </button>
	   <!-- 中间标题：居中显示 -->
	    <view class="navbar-title">{{ langConfig.navbarTitle }}</view>

    
    <!-- 新增：编辑昵称按钮 -->
    <button class="edit-nickname-btn" @click="editNickname" aria-label="编辑昵称">
      <text class="iconfont">✏️</text>
    </button>
  </view>

  <!-- 快捷功能入口 -->
  <view class="quick-functions">
    <button class="quick-btn expression-btn" @click="toggleExpressionPanel">
      <text class="iconfont icon-expression">😊</text>
    </button>
    <button class="quick-btn" @click="openShoppingBag">
      <text class="iconfont icon-bag">🛒</text>
      
    </button>
    <!-- 新增更换头像按钮 -->
    <button class="quick-btn" @click="chooseUserAvatar">
      <text class="iconfont icon-avatar">👤</text>
    </button>
  </view>

  <!-- 更换头像弹窗 -->
  <view class="avatar-modal" v-if="showAvatarModal">
    <view class="avatar-modal-mask" @click="showAvatarModal = false"></view>
    <view class="avatar-modal-content">
      <view class="avatar-modal-header">
        <text class="avatar-modal-title">{{ langConfig.changeAvatarTitle }}</text>
        <button class="avatar-modal-close" @click="showAvatarModal = false">×</button>
      </view>
      <view class="avatar-modal-body">
        <!-- 预览当前头像 -->
        <view class="avatar-preview">
          <image :src="userAvatarUrl || defaultAvatar" mode="aspectFill" class="preview-img"/>
        </view>
        <!-- 选择头像按钮 -->
        <button class="avatar-select-btn" @click="pickAvatar">{{ langConfig.chooseFromAlbum }}</button>
        <button class="avatar-select-btn camera-btn" @click="captureAvatar">{{ langConfig.takePhoto }}</button>
        <button class="avatar-reset-btn" @click="resetAvatar" v-if="userAvatarUrl">{{ langConfig.resetAvatar }}</button>
      </view>
    </view>
  </view>

  <!-- 购物车面板（点击购物袋显示） -->
  <view class="cart-panel" v-if="showCartPanel">
    <view class="cart-header">
      <text class="cart-title">{{ langConfig.myCart }}</text>
      
    </view>
    <view class="cart-list">
      <view
        class="cart-item"
        v-for="(product, idx) in cartProducts"
        :key="idx"
        @click="consultCartProduct(product)"
      >
        <image :src="product.imageUrl" mode="widthFix" class="cart-product-img"/>
        <view class="cart-product-info">
          <text class="cart-product-name">{{ product.name }}</text>
          <text class="cart-product-spec">{{ product.spec }}</text>
          <text class="cart-product-price">{{ langConfig.currency }}{{ product.price }}</text>
          <text class="cart-product-count">×{{ product.count }}</text>
        </view>
        <text class="consult-icon">{{ langConfig.consult }}</text>
      </view>
    </view>
    <view class="cart-footer">
      <button class="cart-btn clear-cart" @click="clearCart">{{ langConfig.clearCart }}</button>
      <button class="cart-btn checkout-cart" @click="checkoutCart">{{ langConfig.checkout }}</button>
    </view>
  </view>

  <!-- 聊天内容区域 -->
  <view class="chat-container">
    <scroll-view
      class="chat-scroll"
      scroll-y
      :scroll-top="scrollTop"
      @scroll="onScroll"
      scroll-with-animation
    >
      <view class="chat-messages">
        <!-- AI消息项 -->
        <view
          class="message-item ai-message"
          v-for="(msg, idx) in chatMessages"
          :key="msg.id"
        >
          <!-- AI头像 -->
          <view class="avatar ai-avatar">
            <svg width="72" height="72" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
              <circle cx="50" cy="50" r="48" fill="#007aff" stroke="#e8f4ff" stroke-width="2"/>
              <circle cx="50" cy="45" r="25" fill="#ffffff"/>
              <circle cx="40" cy="40" r="4" fill="#007aff"/>
              <circle cx="60" cy="40" r="4" fill="#007aff"/>
              <path d="M35,55 Q50,60 65,55" fill="none" stroke="#007aff" stroke-width="2"/>
              <path d="M50,55 L50,65" fill="none" stroke="#007aff" stroke-width="2"/>
            </svg>
          </view>
          <!-- 聊天气泡 -->
          <view class="message-bubble ai-bubble">
            <text class="message-content">{{ msg.content }}</text>
            <!-- 操作按钮 -->
            <view class="message-actions" v-if="msg.showActions">
              <button
                class="action-btn"
                @click="handleLike(msg)"
                :class="{ active: msg.isLiked }"
              >
                <text class="iconfont">👍</text> {{ langConfig.useful }}
              </button>
              <button
                class="action-btn"
                @click="handleDislike(msg)"
                :class="{ active: msg.isDisliked }"
              >
                <text class="iconfont">👎</text> {{ langConfig.useless }}
              </button>
            </view>
            <text class="message-time">{{ formatTime(msg.timestamp) }}</text>
          </view>
        </view>

        <!-- 用户消息项（头像在气泡右侧） -->
        <view
          class="message-item user-message"
          v-for="(msg, idx) in userMessages"
          :key="msg.id"
        >
          <!-- 用户头像（在右） -->
          <view class="avatar user-avatar">
            <image
              :src="userAvatarUrl || defaultAvatar"
              mode="aspectFill"
              class="user-avatar-img"
            />
          </view>
          <!-- 聊天气泡（在左） -->
          <view class="message-bubble user-bubble">
            <!-- 新增：用户昵称 -->
            <text class="user-nickname">{{ userNickname }}</text>
            <text class="message-content">{{ msg.content }}</text>
            <text class="message-time">{{ formatTime(msg.timestamp) }}</text>
          </view>
        </view>

        <!-- AI加载中 -->
        <view class="message-item ai-message" v-if="isLoading">
          <view class="avatar ai-avatar">
            <svg width="72" height="72" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
              <circle cx="50" cy="50" r="48" fill="#007aff" stroke="#e8f4ff" stroke-width="2"/>
              <circle cx="50" cy="45" r="25" fill="#ffffff"/>
              <circle cx="40" cy="40" r="4" fill="#007aff"/>
              <circle cx="60" cy="40" r="4" fill="#007aff"/>
              <path d="M35,55 Q50,60 65,55" fill="none" stroke="#007aff" stroke-width="2"/>
              <path d="M50,55 L50,65" fill="none" stroke="#007aff" stroke-width="2"/>
            </svg>
          </view>
          <view class="message-bubble ai-bubble loading">
            <view class="loading-dots">
              <view class="dot"></view>
              <view class="dot"></view>
              <view class="dot"></view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>

  <!-- 表情面板（点击表情按钮显示） -->
  <view class="expression-panel" v-if="showExpressionPanel">
    <view class="expression-grid">
      <text class="expression-item" @click="addExpression('😊')">😊</text>
      <text class="expression-item" @click="addExpression('😂')">😂</text>
      <text class="expression-item" @click="addExpression('👍')">👍</text>
      <text class="expression-item" @click="addExpression(langConfig.thanks)">{{ langConfig.thanks }}</text>
      <text class="expression-item" @click="addExpression('？')">？</text>
      <text class="expression-item" @click="addExpression(langConfig.ok)">{{ langConfig.ok }}</text>
      <text class="expression-item" @click="addExpression('👌')">👌</text>
      <text class="expression-item" @click="addExpression(langConfig.trouble)">{{ langConfig.trouble }}</text>
      <text class="expression-item" @click="addExpression('🙏')">🙏</text>
    </view>
  </view>

  <!-- 底部输入区域 -->
  <view class="input-area">
    <textarea
      class="input-box"
      v-model="inputContent"
      :placeholder="langConfig.inputPlaceholder"
      @confirm="sendMessage"
      :disabled="isLoading"
    />
    <button
      class="send-btn"
      @click="sendMessage"
      :disabled="!inputContent.trim() || isLoading"
    >
      <text class="iconfont icon-send">↑</text>
    </button>
  </view>
</view>
</template>

<script>
export default {
data() {
  return {
    // 新增：语言配置
    currentLang: 'zh', // 默认中文：zh / 英文：en
    langConfigs: {
      zh: {
        // 导航/功能按钮
        navbarTitle: 'AI智能客服',
       
        // 头像弹窗
        changeAvatarTitle: '更换头像',
        chooseFromAlbum: '从相册选择',
        takePhoto: '拍照上传',
        resetAvatar: '重置默认头像',
        // 购物车
        myCart: '我的购物车',
        currency: '¥',
        consult: '💬 咨询',
        clearCart: '清空购物车',
        checkout: '结算',
        // 聊天相关
        useful: '有用',
        useless: '无用',
        inputPlaceholder: '请输入您的问题...',
        sendBtn: '发送',
        // 表情/通用文本
        thanks: '谢谢',
        ok: '好的',
        trouble: '麻烦了',
        // 系统提示/回复模板
        systemTips: {
          evaluateOpen: '打开了【评价客服】功能，您可以对服务进行打分和评价',
          selfServiceOpen: '打开了【自助服务】功能，包含常见问题解答和自助办理入口',
          cartOpen: '打开了【购物车】，您可以点击任意产品进行咨询',
          cartClear: '购物车已清空',
          cartCheckout: '发起购物车结算',
          chatClear: '聊天记录已清空，有什么可以帮助您的吗？',
          avatarSuccess: '头像更换成功',
          avatarReset: '已重置为默认头像',
          likeSuccess: '感谢您的认可！',
          dislikeSuccess: '我们会继续改进！'
        },
        // AI回复模板
        aiReplies: {
          welcome: '您好！我是智能客服，很高兴为您服务~ 您可以咨询产品相关问题，也可以点击购物袋查看已选产品进行咨询。',
          evaluateGood: '感谢您的认可！我们会继续努力提供更好的产品咨询服务~',
          evaluateBad: '非常抱歉给您带来不好的体验，您可以告诉我具体问题，我会尽力解答！',
          selfService: (item) => `您选择了【${item}】，正在为您提供相关服务...`,
          cartProductReply: {
            dryer: (p) => `您咨询的【${p.name}】相关信息：✨ 产品特点：• 鼓风再生技术，节能30%• 露点稳定在-40℃以下• 全自动运行，无需人工值守💰 价格：¥${p.price}（含13%增值税）📅 货期：现货，下单后48小时发货🔧 质保：2年免费保修，终身维护您想了解安装、参数还是报价详情？`,
            filter: (p) => `您咨询的【${p.name}】相关信息：✨ 产品特点：• 过滤精度可达0.01μm• 压差小，能耗低• 可更换滤芯，维护成本低💰 价格：¥${p.price}（含运费）📅 货期：3-5个工作日🔧 适用介质：压缩空气、氮气、氧气您想了解滤芯寿命、安装方式还是批量采购折扣？`,
            valve: (p) => `您咨询的【${p.name}】相关信息：✨ 产品特点：• 三偏心设计，密封性能好• 耐温范围：-20℃~450℃• 操作扭矩小，启闭轻便💰 价格：¥${p.price}（含安装配件）📅 货期：7-10个工作日🔧 适用场景：化工、冶金、电力行业您想了解压力等级、材质还是定制服务？`
          },
          dryerReply: `关于干燥机的常见问题解答：1. 干燥机露点不稳定？→ 检查再生风机是否正常，吸附剂是否需要更换2. 能耗过高？→ 可调整再生周期，或升级为变频控制3. 维护成本？→ 每年更换一次吸附剂，成本约1200元您想了解具体哪方面的问题？`,
          filterReply: `关于过滤器的常见问题解答：1. 滤芯更换周期？→ 一般6-8个月，根据使用工况调整2. 压差过大？→ 及时更换滤芯，检查进气杂质含量3. 过滤精度选择？→ 气动设备选0.01μm，一般用气选1μm您想了解具体哪方面的问题？`,
          valveReply: `关于阀门的常见问题解答：1. 密封泄漏？→ 检查阀座磨损情况，及时更换密封件2. 操作卡顿？→ 加注专用润滑油，检查阀杆是否变形3. 耐高温范围？→ 最高可达450℃，特殊定制可到600℃您想了解具体哪方面的问题？`,
          generalReply: (content) => `您咨询的"${content}"我已收到！如果是产品相关问题，您可以：1. 告诉我具体产品名称/型号2. 打开购物车点击对应产品咨询3. 描述您遇到的具体问题我会尽力为您解答~`,
          cartCheckoutReply: (products) => `您购物车中有以下产品待结算：` +
            products.map(p => `• ${p.name} ×${p.count} ¥${p.price}`).join('') +
            `总计：¥${products.reduce((sum, p) => sum + p.price * p.count, 0)}您可以选择：1. 在线支付2. 线下转账3. 申请报价单请告诉我您的选择~`,
          aboutUs: '智能客服系统 v1.0专注于工业流体设备咨询服务~'
        }
      },
      en: {
       
        // 头像弹窗
        changeAvatarTitle: 'Change Avatar',
        chooseFromAlbum: 'Select from Album',
        takePhoto: 'Take Photo',
        resetAvatar: 'Reset to Default',
        // 购物车
        myCart: 'My Cart',
        currency: '$',
        consult: '💬 Consult',
        clearCart: 'Clear Cart',
        checkout: 'Checkout',
        // 聊天相关
        useful: 'Useful',
        useless: 'Useless',
        inputPlaceholder: 'Please enter your question...',
        sendBtn: 'Send',
        // 表情/通用文本
        thanks: 'Thanks',
        ok: 'OK',
        trouble: 'Sorry to trouble you',
        // 系统提示/回复模板
        systemTips: {
          evaluateOpen: 'Opened [Rate Service] function, you can rate and comment on the service',
          selfServiceOpen: 'Opened [Self Service] function, including FAQ and self-service entry',
          cartOpen: 'Opened [Shopping Cart], you can click any product to consult',
          cartClear: 'Cart cleared',
          cartCheckout: 'Initiated cart checkout',
          chatClear: 'Chat history cleared, how can I help you?',
          avatarSuccess: 'Avatar changed successfully',
          avatarReset: 'Reset to default avatar',
          likeSuccess: 'Thank you for your recognition!',
          dislikeSuccess: 'We will continue to improve!'
        },
        // AI回复模板
        aiReplies: {
          welcome: 'Hello! I am an intelligent customer service, glad to serve you~ You can consult product-related questions, or click the shopping bag to view selected products for consultation.',
          evaluateGood: 'Thank you for your recognition! We will continue to strive to provide better product consulting services~',
          evaluateBad: 'We are very sorry for the bad experience. You can tell me the specific problem and I will try my best to answer it!',
          selfService: (item) => `You selected [${item}], we are providing relevant services for you...`,
          cartProductReply: {
            dryer: (p) => `Information about [${p.name}] you consulted:✨ Product Features:• Blast regeneration technology, 30% energy saving• Dew point stable below -40℃• Fully automatic operation, no manual on duty💰 Price: $${p.price} (including 13% VAT)📅 Delivery: In stock, shipped within 48 hours after order🔧 Warranty: 2 years free warranty, lifetime maintenanceDo you want to know about installation, parameters or quotation details?`,
            filter: (p) => `Information about [${p.name}] you consulted:✨ Product Features:• Filtration accuracy up to 0.01μm• Low pressure difference and energy consumption• Replaceable filter element, low maintenance cost💰 Price: $${p.price} (including shipping)📅 Delivery: 3-5 working days🔧 Applicable media: Compressed air, nitrogen, oxygenDo you want to know about filter element life, installation method or bulk purchase discount?`,
            valve: (p) => `Information about [${p.name}] you consulted:✨ Product Features:• Triple eccentric design, good sealing performance• Temperature resistance range: -20℃~450℃• Small operating torque, easy to open and close💰 Price: $${p.price} (including installation accessories)📅 Delivery: 7-10 working days🔧 Applicable scenarios: Chemical, metallurgical, power industryDo you want to know about pressure rating, material or customization service?`
          },
          dryerReply: `FAQ about dryers:1. Unstable dryer dew point? → Check if the regeneration fan is normal and if the adsorbent needs replacement2. High energy consumption? → Adjust regeneration cycle or upgrade to frequency conversion control3. Maintenance cost? → Replace adsorbent once a year, cost about $1200Which specific aspect do you want to know about?`,
          filterReply: `FAQ about filters:1. Filter element replacement cycle? → Generally 6-8 months, adjusted according to working conditions2. Excessive pressure difference? → Replace filter element in time and check inlet impurity content3. Filtration accuracy selection? → 0.01μm for pneumatic equipment, 1μm for general gas useWhich specific aspect do you want to know about?`,
          valveReply: `FAQ about valves:1. Seal leakage? → Check valve seat wear and replace seal in time2. Operation jamming? → Add special lubricating oil and check if valve stem is deformed3. High temperature resistance range? → Up to 450℃, special customization up to 600℃Which specific aspect do you want to know about?`,
          generalReply: (content) => `I have received your inquiry about "${content}"!If it is a product-related question, you can:1. Tell me the specific product name/model2. Open the shopping cart and click the corresponding product to consult3. Describe the specific problem you encounteredI will try my best to answer you~`,
          cartCheckoutReply: (products) => `You have the following products to checkout in your cart:` +
            products.map(p => `• ${p.name} ×${p.count} $${p.price}`).join('') +
            `Total: $${products.reduce((sum, p) => sum + p.price * p.count, 0)}You can choose:1. Online payment2. Offline transfer3. Apply for quotationPlease tell me your choice~`,
          aboutUs: 'Smart Customer Service System v1.0Focus on industrial fluid equipment consulting services~'
        }
      }
    },

    // 聊天数据
    chatMessages: [],
    userMessages: [],
    inputContent: '',
    isLoading: false,
    scrollTop: 0,

    // 功能面板控制
    showExpressionPanel: false,
    showCartPanel: false,

    // 头像相关
    showAvatarModal: false,
    userAvatarUrl: '',
    defaultAvatar: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNDgiIGZpbGw9IiNmNWY3ZmEiIHN0cm9rZT0iI2UwZTBlMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PGNpcmNsZSBjeD0iNTAiIGN5PSIzNSIgcj0iMTUiIGZpbGw9IiNkOWUzZjAiLz48cGF0aCBkPSJNMjAsODAgUTUwLDYwIDgwLDgwIiBmaWxsPSIjZDllM2YwIi8+PC9zdmc+',

    // 购物车产品数据
    cartProducts: [
      {id: 1,name: 'PFW无热再生压缩空气干燥机 / PFW Heatless Regeneration Compressed Air Dryer',spec: '型号：PFW-06 压力：1.6MPa / Model: PFW-06 Pressure: 1.6MPa',price: 3580,count: 1,imageUrl: 'https://p3-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/d2554fd9ddbb40a990951499a4c1fabe.png~tplv-a9rns2rl98-resize-jpeg-v1.png',type: 'dryer'},
      {id: 2,name: 'PFG鼓风再生压缩空气干燥机 / PFG Blast Regeneration Compressed Air Dryer',spec: '型号：PFG-100 处理量：10m³/min / Model: PFG-100 Capacity: 10m³/min',price: 12800,count: 1,imageUrl: 'https://p11-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/d4dc4adb45464911b21764d4585d3602.png~tplv-a9rns2rl98-resize-jpeg-v1.png',type: 'dryer'},
      {id: 3,name: 'PFY压缩热再生压缩空气干燥机 / PFY Compression Heat Regeneration Dryer',spec: '型号：PFY-200 处理量：20m³/min / Model: PFY-200 Capacity: 20m³/min',price: 18600,count: 1,imageUrl: 'https://p11-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/d1b86bda771d464fadb6bcc087c1ac4d.png~tplv-a9rns2rl98-resize-jpeg-v1.png',type: 'dryer'},
      {id: 4,name: 'PFA组合式低露点干燥机 / PFA Combined Low Dew Point Dryer',spec: '型号：PFA-300 露点：-70℃ / Model: PFA-300 Dew Point: -70℃',price: 28900,count: 1,imageUrl: 'https://p11-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/e419a257befb4209953dabc636ffb276.png~tplv-a9rns2rl98-resize-jpeg-v1.png',type: 'dryer'},
      {id: 5,name: 'PFB微热再生压缩空气干燥机 / PFB Micro Heat Regeneration Dryer',spec: '型号：PFB-150 处理量：15m³/min / Model: PFB-150 Capacity: 15m³/min',price: 15600,count: 1,imageUrl: 'https://p26-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/1b0dbc17b2ef4b0bb646af100cff57dc.png~tplv-a9rns2rl98-resize-jpeg-v1.png',type: 'dryer'},
      {id: 6,name: 'PFD冷冻式压缩空气干燥机 / PFD Refrigerated Compressed Air Dryer',spec: '型号：PFD-080 处理量：8m³/min / Model: PFD-080 Capacity: 8m³/min',price: 9800,count: 1,imageUrl: 'https://p26-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/d7d7ddd2ad714c62a61752fcaf5c0847.png~tplv-a9rns2rl98-resize-jpeg-v1.png',type: 'dryer'},
      {id: 7,name: '高性能程控阀 / High Performance Programmed Valve',spec: '型号：V-100 材质：铸铁 / Model: V-100 Material: Cast Iron',price: 2380,count: 1,imageUrl: 'https://p26-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/ac81fe92afee4243b0e1698bab2cbd68.png~tplv-a9rns2rl98-resize-jpeg-v1.png',type: 'valve'},
      {id: 8,name: '三偏心蝶阀 / Triple Eccentric Butterfly Valve',spec: '型号：D373H-16C 口径：DN100 / Model: D373H-16C Caliber: DN100',price: 3580,count: 1,imageUrl: 'https://p26-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/0a4279a4ee034fc0b8f3c192fd3dcb2a.png~tplv-a9rns2rl98-resize-jpeg-v1.png',type: 'valve'},
      {id: 9,name: '制氮专用角座阀 / Nitrogen Making Angle Seat Valve',spec: '型号：JZ-20 材质：不锈钢304 / Model: JZ-20 Material: Stainless Steel 304',price: 1860,count: 1,imageUrl: 'https://p3-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/d4a98659c8b743a59cf84953b4e67ce0.png~tplv-a9rns2rl98-resize-jpeg-v1.png',type: 'valve'},
      {id: 10,name: '智能精控调节阀 / Intelligent Precision Control Valve',spec: '型号：ZDLP-16 调节精度：±1% / Model: ZDLP-16 Adjustment Accuracy: ±1%',price: 5680,count: 1,imageUrl: 'https://p3-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/96622539231f4bd4bacce9a2e62dca96.png~tplv-a9rns2rl98-resize-jpeg-v1.png',type: 'valve'},
      
    ],

    // ====== 新增：昵称相关 ======
    userNickname: '', // 当前昵称
    defaultNicknames: { zh: '顾客', en: 'Customer' } // 默认昵称
  };
},
computed: {
  // 新增：当前语言配置（简化模板调用）
  langConfig() {
    return this.langConfigs[this.currentLang];
  }
},
onLoad() {
  // 初始化欢迎语（根据当前语言）
  this.chatMessages.push({
    id: 1,
    content: this.langConfig.aiReplies.welcome,
    timestamp: Date.now() - 60000,
    showActions: true,
    isLiked: false,
    isDisliked: false
  });
  // 加载本地存储的头像和昵称
  this.loadUserAvatar();
  this.loadUserNickname(); // 👈 新增
  this.scrollToBottom();
},
// 适配PC端挂载
mounted() {
  this.loadUserAvatar();
  this.loadUserNickname(); // 👈 新增
  this.scrollToBottom();
  // 监听窗口大小变化，保持样式一致
  if (typeof window !== 'undefined') {
    window.addEventListener('resize', this.handleResize);
	  }
	},
	beforeDestroy() {
	  if (typeof window !== 'undefined') {
	    window.removeEventListener('resize', this.handleResize);
	  }
	},
	methods: {
	  // ====== 新增：加载用户昵称 ======
	  loadUserNickname() {
	    let saved = null;
	    try {
	      // 兼容 uni-app 和 H5
	      if (typeof uni !== 'undefined' && uni.getStorageSync) {
	        saved = uni.getStorageSync('userNickname');
	      } else if (typeof localStorage !== 'undefined') {
	        saved = localStorage.getItem('userNickname');
	      }
	    } catch (e) {
	      console.warn('Failed to load user nickname:', e);
	    }
	    // 若无保存，则使用当前语言默认值
	    this.userNickname = saved || this.defaultNicknames[this.currentLang];
	  },
	
	  // ====== 新增：保存用户昵称 ======
	  saveUserNickname(nickname) {
	    try {
	      if (typeof uni !== 'undefined' && uni.setStorageSync) {
	        uni.setStorageSync('userNickname', nickname);
	      } else if (typeof localStorage !== 'undefined') {
	        localStorage.setItem('userNickname', nickname);
	      }
	    } catch (e) {
	      console.warn('Failed to save user nickname:', e);
	    }
	  },
	
	  // ====== 新增：编辑昵称弹窗 ======
	 editNickname() {
	   const confirmText = this.currentLang === 'zh' ? '确定' : 'OK';
	   const cancelText = this.currentLang === 'zh' ? '取消' : 'Cancel';
	   const title = this.currentLang === 'zh' ? '修改昵称' : 'Change Nickname';
	 
	   uni.showModal({
	     title,
	     placeholderText: this.userNickname,
	     editable: true,
	     confirmText,
	     cancelText,
	     success: (res) => {
	       if (res.confirm && res.content?.trim()) {
	         const newNick = res.content.trim();
	         this.userNickname = newNick;
	         this.saveUserNickname(newNick);
	       }
	     }
	   });
	 },
	
	  // 原有方法：返回上一页
	  goBack() {
	    uni.navigateBack();
	  },
	
	  // 原有方法：滚动到底部
	  scrollToBottom() {
	    this.$nextTick(() => {
	      this.scrollTop = 999999;
	    });
	  },
	
	  // 原有方法：窗口大小变化处理
	  handleResize() {
	    this.$nextTick(this.scrollToBottom);
	  },
	
	  // 原有方法：滚动事件
	  onScroll(e) {
	    // 可扩展：判断是否在底部等
	  },
	
	  // 原有方法：切换语言
	  toggleLanguage() {
	    this.currentLang = this.currentLang === 'zh' ? 'en' : 'zh';
	    // 切换语言时，若用户未自定义昵称，则更新为对应默认值
	    if (!this.userNickname || 
	        this.userNickname === this.defaultNicknames.zh || 
	        this.userNickname === this.defaultNicknames.en) {
	      this.userNickname = this.defaultNicknames[this.currentLang];
	    }
	    // 保存语言设置
	    if (typeof uni !== 'undefined') {
	      uni.setStorageSync('appLang', this.currentLang);
	    }
	  },
	
	  // 原有方法：发送消息
	  sendMessage() {
	    const content = this.inputContent.trim();
	    if (!content || this.isLoading) return;
	
	    // 添加用户消息
	    const userMsg = {
	      id: Date.now(),
	      content,
	      timestamp: Date.now()
	    };
	    this.userMessages.push(userMsg);
	    this.inputContent = '';
	    this.showExpressionPanel = false;
	
	    // 滚动到底部
	    this.scrollToBottom();
	
	    // 模拟AI回复（简化版，实际可调用API）
	    this.isLoading = true;
	    setTimeout(() => {
	      this.isLoading = false;
	      let aiReply = '';
	
	      // 匹配关键词回复
	      if (content.includes('干燥机') || content.includes('dryer')) {
	        aiReply = this.langConfig.aiReplies.dryerReply;
	      } else if (content.includes('过滤器') || content.includes('filter')) {
	        aiReply = this.langConfig.aiReplies.filterReply;
	      } else if (content.includes('阀门') || content.includes('valve')) {
	        aiReply = this.langConfig.aiReplies.valveReply;
	      } else if (content.includes('关于我们') || content.includes('about us')) {
	        aiReply = this.langConfig.aiReplies.aboutUs;
	      } else {
	        aiReply = this.langConfig.aiReplies.generalReply(content);
	      }
	
	      this.chatMessages.push({
	        id: Date.now() + 1,
	        content: aiReply,
	        timestamp: Date.now(),
	        showActions: true,
	        isLiked: false,
	        isDisliked: false
	      });
	      this.scrollToBottom();
	    }, 800);
	  },
	
	  // 原有方法：表情面板
	  toggleExpressionPanel() {
	    this.showExpressionPanel = !this.showExpressionPanel;
	  },
	  addExpression(text) {
	    this.inputContent += text;
	    this.showExpressionPanel = false;
	  },
	
	  // 原有方法：购物车
	  openShoppingBag() {
	    this.showCartPanel = true;
	  },
	  consultCartProduct(product) {
	    const msg = `我想咨询购物车中的【${product.name}】`;
	    this.inputContent = msg;
	    this.showCartPanel = false;
	  },
	  clearCart() {
	    this.cartProducts = [];
	    uni.showToast({ title: this.langConfig.systemTips.cartClear, icon: 'none' });
	    this.showCartPanel = false;
	  },
	  checkoutCart() {
	    if (this.cartProducts.length === 0) return;
	    const reply = this.langConfig.aiReplies.cartCheckoutReply(this.cartProducts);
	    this.chatMessages.push({
	      id: Date.now(),
	      content: reply,
	      timestamp: Date.now(),
	      showActions: true,
	      isLiked: false,
	      isDisliked: false
	    });
	    this.showCartPanel = false;
	    this.scrollToBottom();
	  },
	
	  // 原有方法：评价与自助服务
	  openEvaluateService() {
	    uni.showToast({ title: this.langConfig.systemTips.evaluateOpen, icon: 'none' });
	  },
	  openSelfService() {
	    uni.showToast({ title: this.langConfig.systemTips.selfServiceOpen, icon: 'none' });
	  },
	
	  // 原有方法：消息反馈
	  handleLike(msg) {
	    if (msg.isDisliked) return;
	    msg.isLiked = !msg.isLiked;
	    msg.isDisliked = false;
	    if (msg.isLiked) {
	      uni.showToast({ title: this.langConfig.systemTips.likeSuccess, icon: 'success' });
	    }
	  },
	  handleDislike(msg) {
	    if (msg.isLiked) return;
	    msg.isDisliked = !msg.isDisliked;
	    msg.isLiked = false;
	    if (msg.isDisliked) {
	      uni.showToast({ title: this.langConfig.systemTips.dislikeSuccess, icon: 'none' });
	    }
	  },
	
	  // 原有方法：头像更换
	  chooseUserAvatar() {
	    this.showAvatarModal = true;
	  },
	  pickAvatar() {
	    uni.chooseImage({
	      count: 1,
	      success: (res) => {
	        this.userAvatarUrl = res.tempFilePaths[0];
	        this.saveUserAvatar(res.tempFilePaths[0]);
	        uni.showToast({ title: this.langConfig.systemTips.avatarSuccess, icon: 'success' });
	      }
	    });
	    this.showAvatarModal = false;
	  },
	  captureAvatar() {
	    uni.chooseImage({
	      count: 1,
	      sourceType: ['camera'],
	      success: (res) => {
	        this.userAvatarUrl = res.tempFilePaths[0];
	        this.saveUserAvatar(res.tempFilePaths[0]);
	        uni.showToast({ title: this.langConfig.systemTips.avatarSuccess, icon: 'success' });
	      }
	    });
	    this.showAvatarModal = false;
	  },
	  resetAvatar() {
	    this.userAvatarUrl = '';
	    this.saveUserAvatar('');
	    uni.showToast({ title: this.langConfig.systemTips.avatarReset, icon: 'none' });
	    this.showAvatarModal = false;
	  },
	  saveUserAvatar(url) {
	    try {
	      if (typeof uni !== 'undefined') {
	        uni.setStorageSync('userAvatar', url);
	      }
	    } catch (e) {
	      console.warn('Save avatar failed:', e);
	    }
	  },
	  loadUserAvatar() {
	    try {
	      if (typeof uni !== 'undefined') {
	        const saved = uni.getStorageSync('userAvatar');
	        if (saved) {
	          this.userAvatarUrl = saved;
	        }
	      }
	    } catch (e) {
	      console.warn('Load avatar failed:', e);
	    }
	  },
	
	  // 原有方法：时间格式化
	  formatTime(timestamp) {
	    const date = new Date(timestamp);
	    const now = new Date();
	    const diff = now - date;
	    const minutes = Math.floor(diff / 60000);
	    if (minutes < 1) return this.currentLang === 'zh' ? '刚刚' : 'Just now';
	    if (minutes < 60) return `${minutes}${this.currentLang === 'zh' ? '分钟前' : 'm ago'}`;
	    const hours = Math.floor(minutes / 60);
	    if (hours < 24) return `${hours}${this.currentLang === 'zh' ? '小时前' : 'h ago'}`;
	    const month = String(date.getMonth() + 1).padStart(2, '0');
	    const day = String(date.getDate()).padStart(2, '0');
	    const hour = String(date.getHours()).padStart(2, '0');
	    const minute = String(date.getMinutes()).padStart(2, '0');
	    return `${month}-${day} ${hour}:${minute}`;
	  }
	}
	};
	</script>
	
	<style scoped>
	/* ========== 新增：用户昵称样式 ========== */
	.user-nickname {
	  font-size: 12px;
	  color: #888;
	  opacity: 0.9;
	  margin-bottom: 4px;
	  display: block;
	  text-align: left;
	}
	
	/* ========== 原有样式保持不变 ========== */
	.ai-chat-page {
	  display: flex;
	  flex-direction: column;
	  height: 100vh;
	  background-color: #f5f7fa;
	  position: relative;
	  overflow: hidden;
	}
	
	.lang-switch-btn {
	  padding: 6px 12px;
	  background: rgba(0, 122, 255, 0.8);
	  color: white;
	  border: none;
	  border-radius: 20px;
	  font-size: 14px;
	  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
	}
	
	.top-function-bar {
	  display: flex;
	  justify-content: center;
	  padding: 12px 0;
	  background: white;
	  border-bottom: 1px solid #eee;
	  gap: 30px;
	}
	.function-btn {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  background: none;
	  border: none;
	  color: #666;
	  font-size: 12px;
	}
	.function-btn .icon {
	  font-size: 20px;
	  margin-bottom: 4px;
	}
	
	.navbar {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  padding: 12px 16px;
	  background-color: #007aff;
	  color: white;
	  font-size: 18px;
	  font-weight: bold;
	  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}
	.navbar-title {
	  flex: 1;
	  text-align: center;
	  margin: 0 10px;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	}
	.edit-nickname-btn {
	  width: 36px;
	  height: 36px;
	  border-radius: 50%;
	  background: rgba(255,255,255,0.2);
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  border: none;
	  color: white;
	  font-size: 16px;
	  margin-left: 10px;
	}
	
	.quick-functions {
	  display: flex;
	  justify-content: center;
	  padding: 12px 0;
	  background: white;
	  border-bottom: 1px solid #eee;
	  gap: 40px;
	  position: relative;
	}
	.quick-btn {
	  position: relative;
	  background: none;
	  border: none;
	  font-size: 24px;
	  color: #666;
	}
	.cart-badge {
	  position: absolute;
	  top: -6px;
	  right: -6px;
	  background: red;
	  color: white;
	  font-size: 10px;
	  padding: 2px 4px;
	  border-radius: 10px;
	  min-width: 14px;
	  text-align: center;
	}
	
	.avatar-modal {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  z-index: 2000;
	}
	.avatar-modal-mask {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background: rgba(0,0,0,0.5);
	}
	.avatar-modal-content {
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  width: 100%;
	  background: white;
	  border-top-left-radius: 20px;
	  border-top-right-radius: 20px;
	  padding: 20px;
	  box-sizing: border-box;
	}
	.avatar-modal-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  margin-bottom: 20px;
	}
	.avatar-modal-title {
	  font-size: 18px;
	  font-weight: bold;
	}
	.avatar-modal-close {
	  background: none;
	  border: none;
	  font-size: 24px;
	  color: #999;
	}
	.avatar-preview {
	  display: flex;
	  justify-content: center;
	  margin-bottom: 20px;
	}
	.preview-img {
	  width: 100px;
	  height: 100px;
	  border-radius: 50%;
	  object-fit: cover;
	  border: 2px solid #eee;
	}
	.avatar-select-btn,
	.avatar-reset-btn {
	  width: 100%;
	  padding: 12px;
	  margin-bottom: 10px;
	  border: none;
	  border-radius: 8px;
	  background: #007aff;
	  color: white;
	  font-size: 16px;
	}
	.camera-btn {
	  background: #34c759;
	}
	.avatar-reset-btn {
	  background: #ff3b30;
	}
	
	.cart-panel {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background: white;
	  z-index: 1500;
	  padding: 20px;
	  box-sizing: border-box;
	  overflow-y: auto;
	}
	.cart-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  margin-bottom: 20px;
	  padding-bottom: 10px;
	  border-bottom: 1px solid #eee;
	}
	.cart-title {
	  font-size: 18px;
	  font-weight: bold;
	}
	.close-cart {
	  background: none;
	  border: none;
	  font-size: 24px;
	  color: #999;
	}
	.cart-list {
	  margin-bottom: 20px;
	}
	.cart-item {
	  display: flex;
	  padding: 12px;
	  border: 1px solid #eee;
	  border-radius: 12px;
	  margin-bottom: 12px;
	  cursor: pointer;
	}
	.cart-product-img {
	  width: 60px;
	  height: 60px;
	  border-radius: 8px;
	  margin-right: 12px;
	  object-fit: cover;
	}
	.cart-product-info {
	  flex: 1;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	}
	.cart-product-name {
	  font-weight: bold;
	  font-size: 14px;
	  margin-bottom: 4px;
	}
	.cart-product-spec {
	  font-size: 12px;
	  color: #666;
	  margin-bottom: 4px;
	}
	.cart-product-price {
	  color: #ff3b30;
	  font-weight: bold;
	}
	.cart-product-count {
	  color: #999;
	  font-size: 12px;
	}
	.consult-icon {
	  color: #007aff;
	  font-size: 18px;
	  margin-left: 10px;
	  align-self: center;
	}
	.cart-footer {
	  display: flex;
	  gap: 12px;
	}
	.cart-btn {
	  flex: 1;
	  padding: 12px;
	  border: none;
	  border-radius: 8px;
	  font-size: 16px;
	  color: white;
	}
	.clear-cart {
	  background: #ff3b30;
	}
	.checkout-cart {
	  background: #34c759;
	}
	
	.chat-container {
	  flex: 1;
	  padding: 12px;
	  overflow: hidden;
	}
	.chat-scroll {
	  height: 100%;
	}
	.chat-messages {
	  display: flex;
	  flex-direction: column;
	}
	.message-item {
	  display: flex;
	  margin-bottom: 16px;
	  max-width: 80%;
	}
	.ai-message {
	  flex-direction: row;
	}
	.user-message {
	  flex-direction: row-reverse;
	  align-self: flex-end;
	}
	.avatar {
	  width: 40px;
	  height: 40px;
	  border-radius: 50%;
	  overflow: hidden;
	  margin: 0 8px;
	  flex-shrink: 0;
	}
	.ai-avatar {
	  margin-right: 8px;
	}
	.user-avatar {
	  margin-left: 8px;
	}
	.avatar svg,
	.avatar image {
	  width: 100%;
	  height: 100%;
	  display: block;
	}
	
	/* ======== 重点：美化 AI 气泡 ======== */
	.message-bubble {
	  padding: 10px 16px;
	  border-radius: 16px;
	  position: relative;
	  max-width: 85%;
	  word-break: break-word;
	  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	  transition: all 0.2s ease;
	  font-size: 15px;
	  line-height: 1.5;
	}
	
	.ai-bubble {
	  background-color: white;
	  border: 1px solid #e0e0e0;
	  color: #333;
	  border-radius: 16px;
	  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
	}
	
	.user-bubble {
	  background-color: #007aff;
	  color: white;
	  border: none;
	  border-radius: 16px;
	  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	}
	
	.message-time {
	  font-size: 10px;
	  opacity: 0.7;
	  margin-top: 6px;
	  display: block;
	  text-align: right;
	}
	
	.message-actions {
	  margin-top: 10px;
	  display: flex;
	  gap: 10px;
	}
	
	.message-actions {
	  margin-top: 12px;
	  display: flex;
	  gap: 12px;
	}
	
	/* ✅ 修改点：让“有用/无用”按钮更扁平 */
	.action-btn {
	  padding: 6px 12px;
	  border: 1px solid #ddd;
	  border-radius: 12px;
	  background: white;
	  color: #666;
	  font-size: 12px;
	  display: flex;
	  align-items: center;
	  gap: 4px;
	  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	  transition: all 0.2s ease;
	  height: 28px;
	}
	
	.action-btn.active {
	  background: #007aff;
	  color: white;
	  border-color: #007aff;
	  transform: scale(0.98);
	}
	
	.loading-dots {
	  display: flex;
	  gap: 4px;
	  justify-content: flex-start;
	}
	.dot {
	  width: 6px;
	  height: 6px;
	  background: #007aff;
	  border-radius: 50%;
	  animation: loading 1.4s infinite ease-in-out both;
	}
	.dot:nth-child(1) { animation-delay: -0.32s; }
	.dot:nth-child(2) { animation-delay: -0.16s; }
	@keyframes loading {
	  0%, 80%, 100% { transform: scale(0); }
	  40% { transform: scale(1); }
	}
	
	.expression-panel {
	  position: fixed;
	  bottom: 80px;
	  left: 50%;
	  transform: translateX(-50%);
	  background: white;
	  border-radius: 12px;
	  padding: 12px;
	  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	  z-index: 100;
	}
	.expression-grid {
	  display: grid;
	  grid-template-columns: repeat(4, 1fr);
	  gap: 12px;
	}
	.expression-item {
	  font-size: 20px;
	  text-align: center;
	  padding: 8px;
	  border-radius: 8px;
	  background: #f5f7fa;
	  cursor: pointer;
	}
	.expression-item:hover {
	  background: #e0e6ed;
	}
	
	.input-area {
	  display: flex;
	  padding: 12px;
	  background: white;
	  border-top: 1px solid #eee;
	  gap: 10px;
	  align-items: center; /* 👈 关键：使子元素垂直居中 */
	}
	.input-box {
	  flex: 1;
	  padding: 12px 16px;
	  border: 1px solid #ddd;
	  border-radius: 24px;
	  font-size: 16px;
	  min-height: 20px;
	  max-height: 100px;
	  resize: none;
	  outline: none;
	   box-shadow: none;
	    /* 新增：防止文字过长撑开 */
	    overflow-y: auto;
	    /* 确保内容不会破坏布局 */
	    height: 44px; /* 👈 固定高度，与 send-btn 一致 */
	}
	.send-btn {
	  width: 44px;
	  height: 44px;
	  border-radius: 50%;
	  background: #007aff;
	  color: white;
	  border: none;
	  font-size: 18px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  cursor: pointer;
	  transition: background 0.2s ease;
	}
	/* 确保图标居中 */
	.send-btn .iconfont {
	  font-size: 20px;
	  line-height: 1;
	  vertical-align: middle;
	}
	
	/* 响应式适配 */
	@media (min-width: 768px) {
	  .ai-chat-page {
	    max-width: 800px;
	    margin: 0 auto;
	    box-shadow: 0 0 20px rgba(0,0,0,0.1);
	    border-radius: 12px;
	    overflow: hidden;
	  }
	  .lang-switch-btn {
	    margin-right: 10px;
	    position: absolute;
	    top: 10px;
	    right: 10px;
	  }
	}
	</style>
>>>>>>> 2416eab34fc318a92df6c2cb10784d90d6977aac
