cfc/cfc-frontend/pages/ai/chat.vue

<template>
  <view class="chat-container">
    <!-- 导航栏 -->
    <view class="chat-nav">
      <view class="nav-back" @click="goBack">
        <text class="nav-back-icon">‹</text>
      </view>
      <text class="nav-title">AI 家庭助手</text>
      <view class="nav-actions">
        <text class="nav-action" @click="showConversations = !showConversations">☰</text>
      </view>
    </view>

    <!-- 会话列表（侧拉） -->
    <view class="conv-overlay" v-if="showConversations" @click="showConversations = false"></view>
    <view class="conv-sidebar" :class="{ 'conv-sidebar-open': showConversations }">
      <view class="conv-header">
        <text class="conv-header-title">会话列表</text>
        <text class="conv-header-new" @click="newConversation">+ 新会话</text>
      </view>
      <scroll-view class="conv-list" scroll-y>
        <view class="conv-item" v-for="conv in conversations" :key="conv.id"
          :class="{ 'conv-item-active': conv.id === currentConversationId }"
          @click="switchConversation(conv.id)">
          <text class="conv-item-name">{{ conv.name || '新会话' }}</text>
          <text class="conv-item-time">{{ formatTime(conv.updated_at) }}</text>
        </view>
        <BaseEmpty v-if="conversations.length === 0" text="暂无会话" icon="💬" />
      </scroll-view>
    </view>

    <!-- 消息列表 -->
    <scroll-view class="message-list" scroll-y :scroll-into-view="scrollToId" scroll-with-animation
      @scrolltoupper="loadMoreMessages" id="messageList">
      <view class="message-list-inner">
        <view class="welcome-card" v-if="messages.length === 0 && !sending">
          <view class="welcome-icon">🤖</view>
          <text class="welcome-title">你好！我是你的家庭助手</text>
          <text class="welcome-desc">我可以帮你了解孩子的成长情况，比如：</text>
          <view class="welcome-suggestions">
            <view class="welcome-suggestion" @click="quickQuestion('小明最近任务完成怎么样？')">
              <text class="suggestion-icon">📋</text>
              <text class="suggestion-text">小明最近任务完成怎么样？</text>
            </view>
            <view class="welcome-suggestion" @click="quickQuestion('我家孩子的能量评分怎么样？')">
              <text class="suggestion-icon">⚡</text>
              <text class="suggestion-text">孩子的能量评分怎么样？</text>
            </view>
            <view class="welcome-suggestion" @click="quickQuestion('今天有什么需要我做的事情？')">
              <text class="suggestion-icon">✅</text>
              <text class="suggestion-text">今天有什么需要我做的事情？</text>
            </view>
          </view>
        </view>

        <view class="message-group" v-for="(msg, idx) in messages" :key="msg.id || idx">
          <!-- 用户消息 -->
          <view class="message message-user" v-if="msg.query">
            <view class="message-bubble user-bubble">{{ msg.query }}</view>
          </view>
          <!-- AI 回复 -->
          <view class="message message-ai" v-if="msg.answer">
            <view class="message-avatar">🤖</view>
            <view class="message-bubble ai-bubble">{{ msg.answer }}</view>
          </view>
        </view>

        <!-- 加载中 -->
        <view class="message message-ai" v-if="sending">
          <view class="message-avatar">🤖</view>
          <view class="message-bubble ai-bubble typing">
            <text class="typing-dot">.</text>
            <text class="typing-dot">.</text>
            <text class="typing-dot">.</text>
          </view>
        </view>

        <view id="scrollBottom"></view>
      </view>
    </scroll-view>

    <!-- 输入区 -->
    <view class="chat-input-area">
      <view class="chat-input-wrap">
        <input class="chat-input" v-model="inputText" placeholder="问我关于家庭和孩子的问题..."
          :disabled="sending" @confirm="sendMessage" confirm-type="send" />
      </view>
      <view class="chat-send-btn" :class="{ 'chat-send-active': inputText.trim() }"
        @click="sendMessage">
        <text class="send-icon">➤</text>
      </view>
    </view>
  </view>
</template>

<script>
import { aiSendMessage, aiGetConversations, aiGetMessages, aiDeleteConversation } from '../../utils/api.js'
import BaseEmpty from '../../components/BaseEmpty.vue'

export default {
  components: { BaseEmpty },
  data() {
    return {
      inputText: '',
      messages: [],
      conversations: [],
      currentConversationId: '',
      sending: false,
      showConversations: false,
      scrollToId: '',
      pageLoaded: false
    }
  },
  onLoad() {
    this.loadConversations()
  },
  onShow() {
    if (this.pageLoaded) {
      this.loadConversations()
    }
    this.pageLoaded = true
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },

    async loadConversations() {
      try {
        const res = await aiGetConversations()
        this.conversations = res.data || []
      } catch (e) {
        console.log('加载会话列表失败', e)
      }
    },

    async switchConversation(convId) {
      this.currentConversationId = convId
      this.showConversations = false
      this.messages = []
      this.$nextTick(() => {
        this.scrollToBottom()
      })
      try {
        const res = await aiGetMessages({ conversationId: convId })
        this.messages = res.data || []
        this.$nextTick(() => {
          this.scrollToBottom()
        })
      } catch (e) {
        console.log('加载消息失败', e)
      }
    },

    newConversation() {
      this.currentConversationId = ''
      this.showConversations = false
      this.messages = []
      this.inputText = ''
      this.$nextTick(() => {
        this.scrollToBottom()
      })
    },

    async sendMessage() {
      const text = this.inputText.trim()
      if (!text || this.sending) return

      // 立即显示用户消息
      const tempMsg = { id: 'temp_' + Date.now(), query: text, answer: '' }
      this.messages.push(tempMsg)
      this.inputText = ''
      this.sending = true

      this.$nextTick(() => {
        this.scrollToBottom()
      })

      try {
        const res = await aiSendMessage({
          query: text,
          conversationId: this.currentConversationId
        })
        const data = res.data || {}

        // 更新最后一条消息的回复
        const lastMsg = this.messages[this.messages.length - 1]
        if (lastMsg) {
          lastMsg.answer = data.answer || ''
        }

        // 更新 conversationId（新建会话时 Dify 返回）
        if (data.conversationId && !this.currentConversationId) {
          this.currentConversationId = data.conversationId
          // 刷新会话列表
          this.loadConversations()
        }
      } catch (e) {
        // 显示错误
        const lastMsg = this.messages[this.messages.length - 1]
        if (lastMsg) {
          lastMsg.answer = '抱歉，我暂时无法回答，请稍后再试。'
        }
      } finally {
        this.sending = false
        this.$nextTick(() => {
          this.scrollToBottom()
        })
      }
    },

    quickQuestion(text) {
      this.inputText = text
      this.sendMessage()
    },

    loadMoreMessages() {
      // 分页加载历史（当前简化）
    },

    scrollToBottom() {
      this.scrollToId = 'scrollBottom'
    },

    formatTime(timestamp) {
      if (!timestamp) return ''
      const d = new Date(timestamp * 1000)
      const now = new Date()
      const diff = now - d
      if (diff < 86400000) {
        return d.getHours().toString().padStart(2, '0') + ':' + d.getMinutes().toString().padStart(2, '0')
      }
      return (d.getMonth() + 1) + '/' + d.getDate()
    }
  }
}
</script>

<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--bg, #FFF7ED);
  position: relative;
}

/* 导航栏 */
.chat-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 88rpx 24rpx 16rpx;
  background: #fff;
  border-bottom: 1rpx solid var(--border-light, #E2E8F0);
  position: relative;
  z-index: 100;
}

.nav-back {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-back-icon {
  font-size: 40rpx;
  color: var(--text, #1E293B);
  font-weight: 600;
}

.nav-title {
  font-size: 32rpx;
  font-weight: 600;
  color: var(--text, #1E293B);
}

.nav-actions {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-action {
  font-size: 36rpx;
  color: var(--text-secondary, #64748B);
}

/* 会话列表侧拉 */
.conv-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.3);
  z-index: 200;
}

.conv-sidebar {
  position: fixed;
  top: 0;
  right: -500rpx;
  width: 460rpx;
  height: 100vh;
  background: #fff;
  z-index: 210;
  transition: right 0.3s ease;
  display: flex;
  flex-direction: column;
}

.conv-sidebar-open {
  right: 0;
}

.conv-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 100rpx 24rpx 16rpx;
  border-bottom: 1rpx solid var(--border-light, #E2E8F0);
}

.conv-header-title {
  font-size: 28rpx;
  font-weight: 600;
  color: var(--text, #1E293B);
}

.conv-header-new {
  font-size: 24rpx;
  color: var(--color-primary, #5B9BD5);
  font-weight: 500;
}

.conv-list {
  flex: 1;
  overflow-y: auto;
}

.conv-item {
  padding: 20rpx 24rpx;
  border-bottom: 1rpx solid var(--border-light, #E2E8F0);
}

.conv-item-active {
  background: rgba(91, 155, 213, 0.06);
}

.conv-item-name {
  font-size: 26rpx;
  color: var(--text, #1E293B);
  display: block;
  margin-bottom: 6rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conv-item-time {
  font-size: 20rpx;
  color: var(--muted, #94A3B8);
}

/* 消息列表 */
.message-list {
  flex: 1;
  overflow-y: auto;
  padding: 20rpx 24rpx;
}

.message-list-inner {
  min-height: 100%;
}

/* 欢迎卡片 */
.welcome-card {
  text-align: center;
  padding: 60rpx 20rpx 40rpx;
}

.welcome-icon {
  font-size: 80rpx;
  margin-bottom: 20rpx;
}

.welcome-title {
  font-size: 32rpx;
  font-weight: 600;
  color: var(--text, #1E293B);
  display: block;
  margin-bottom: 12rpx;
}

.welcome-desc {
  font-size: 24rpx;
  color: var(--text-secondary, #64748B);
  display: block;
  margin-bottom: 32rpx;
}

.welcome-suggestions {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  padding: 0 20rpx;
}

.welcome-suggestion {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 20rpx 24rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}

.suggestion-icon {
  font-size: 28rpx;
  margin-right: 12rpx;
}

.suggestion-text {
  font-size: 24rpx;
  color: var(--text, #1E293B);
}

/* 消息 */
.message {
  margin-bottom: 24rpx;
}

.message-user {
  display: flex;
  justify-content: flex-end;
}

.message-ai {
  display: flex;
  align-items: flex-start;
}

.message-avatar {
  width: 48rpx;
  height: 48rpx;
  font-size: 32rpx;
  margin-right: 12rpx;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.message-bubble {
  max-width: 70%;
  padding: 16rpx 20rpx;
  font-size: 26rpx;
  line-height: 1.6;
  border-radius: 16rpx;
  word-break: break-word;
}

.user-bubble {
  background: var(--color-primary, #5B9BD5);
  color: #fff;
  border-bottom-right-radius: 4rpx;
}

.ai-bubble {
  background: #fff;
  color: var(--text, #1E293B);
  border-bottom-left-radius: 4rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}

/* 输入区 */
.chat-input-area {
  display: flex;
  align-items: center;
  padding: 16rpx 24rpx;
  padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1rpx solid var(--border-light, #E2E8F0);
}

.chat-input-wrap {
  flex: 1;
  background: var(--bg, #FFF7ED);
  border-radius: 40rpx;
  padding: 0 24rpx;
  margin-right: 16rpx;
}

.chat-input {
  height: 72rpx;
  font-size: 26rpx;
  color: var(--text, #1E293B);
}

.chat-send-btn {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  background: var(--border-light, #E2E8F0);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chat-send-active {
  background: var(--color-primary, #5B9BD5);
}

.send-icon {
  font-size: 28rpx;
  color: #fff;
}

/* 打字动画 */
.typing {
  display: flex;
  align-items: center;
  gap: 4rpx;
  min-height: 40rpx;
}

.typing-dot {
  font-size: 40rpx;
  line-height: 1;
  animation: typingBounce 1.4s infinite;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingBounce {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-8rpx); }
}
</style>