xiaodou-ai-admin/src/pages/chatv2/index.vue

<template>
  <div class="chat-page">
    <!-- 左侧会话列表 -->
    <div class="conversation-list">
      <div class="list-header">
        <h3>会话列表</h3>
        <button class="new-chat-btn" @click="createNewChat">
          <span>新建会话</span>
        </button>
      </div>
      <div class="conversations">
        <div
          v-for="(chat, index) in chatList"
          :key="index"
          class="conversation-item"
          :class="{ active: currentChatId === chat.id }"
          @click="switchChat(chat.id)"
        >
          <div class="chat-title">{{ chat.title }}</div>
          <div class="chat-time">{{ formatTime(chat.lastTime) }}</div>
        </div>
      </div>
    </div>

    <!-- 聊天区域 -->
    <div class="chat-container" >
      <chat-messages />
      <!-- 输入区域 -->
      <chat-input />
    </div>
  </div>

</template>

<script lang="ts" setup>
import { ref } from 'vue'
import ChatMessages from './components/chat-messages.vue' // 导入 ChatRecord 组件
import ChatInput from './components/chat-input.vue' // 导入 ChatInput 组件

interface Message {
  role: 'user' | 'assistant'
  content: string
}

interface Chat {
  id: string
  title: string
  lastTime: Date
  messages: Message[]
}

// 聊天消息
const messages = ref<Message[]>([])
const inputMessage = ref('')
const userAvatar = '/user-avatar.png' // 替换为实际的用户头像路径
const aiAvatar = '/ai-avatar.png' // 替换为实际的 AI 头像路径

// 会话列表
const chatList = ref<Chat[]>([
  {
    id: '1',
    title: '关于Vue3的讨论',
    lastTime: new Date(),
    messages: []
  },
  {
    id: '2',
    title: 'TypeScript学习',
    lastTime: new Date(Date.now() - 24 * 60 * 60 * 1000),
    messages: []
  }
])
const currentChatId = ref('1')

// 格式化时间
const formatTime = (date: Date) => {
  const now = new Date()
  const diff = now.getTime() - date.getTime()

  // 如果是今天，显示时间
  if (diff < 24 * 60 * 60 * 1000) {
    return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
  } else if (diff < 7 * 24 * 60 * 60 * 1000) {
    const days = ['日', '一', '二', '三', '四', '五', '六']
    return `星期${days[date.getDay()]}`
  }
  // 否则显示日期
  else {
    return date.toLocaleDateString('zh-CN')
  }
}

// 切换会话
const switchChat = (chatId: string) => {
  currentChatId.value = chatId
  const chat = chatList.value.find(c => c.id === chatId)
  if (chat) {
    messages.value = [...chat.messages]
  }
}

// 创建新会话
const createNewChat = () => {
  const newId = Date.now().toString()
  chatList.value.unshift({
    id: newId,
    title: `新会话 ${chatList.value.length + 1}`,
    lastTime: new Date(),
    messages: []
  })
  switchChat(newId)
}

</script>

<style lang="less" scoped>
.chat-page {
  display: flex;
  height: 100vh;
  background-color: #fcfafa;
  position: relative;
  .chat-container {
    width: 100%;
    position: relative;
  }
}

.conversation-list {
  width: 260px;
  border-right: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5; /* 添加灰色背景 */

  .list-header {
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background-color: #f5f5f5; /* 保持标题区域也是灰色背景 */

    h3 {
      margin: 0;
      font-size: 16px;
    }

    .new-chat-btn {
      padding: 8px 12px;
      background-color: #3b82f6;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;

      &:hover {
        background-color: #2563eb;
      }
    }
  }

  .conversations {
    flex: 1;
    overflow-y: auto;

    .conversation-item {
      padding: 12px 16px;
      cursor: pointer;
      border-bottom: 1px solid #e5e7eb;

      &:hover {
        background-color: #eaeaea;
      }

      &.active {
        background-color: #e0e0e0;
      }

      .chat-title {
        font-size: 14px;
        margin-bottom: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .chat-time {
        font-size: 12px;
        color: #6b7280;
      }
    }
  }
}

</style>