From 075c2040d5c4c27286b683102fc5ceaa9613008f Mon Sep 17 00:00:00 2001
From: chenyuepan <3158614516@qq.com>
Date: Fri, 4 Jul 2025 01:00:22 +0800
Subject: [PATCH] 0704

---
 src/utils/request.js           |    4 +-
 src/views/ai/AnsweringPage.vue | 1134 +++++++++++---------------------
 2 files changed, 394 insertions(+), 744 deletions(-)

diff --git a/src/utils/request.js b/src/utils/request.js
index 51098e4..9bbd988 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -3,9 +3,9 @@ import { useUserStore } from '@/stores'
 import { ElMessage } from 'element-plus'
 // import router from '@/router'
 // const baseURL = 'https://cgyy.ecjtu.edu.cn/api'
-const baseURL = 'https://www.ruanjiansc.cn/api'
+// const baseURL = 'https://www.ruanjiansc.cn/api'
 // const baseURL = 'http://172.16.6.53:9020'
-// const baseURL = 'http://localhost:9020/api'
+const baseURL = 'http://localhost:9020/api'
 
 const instance = axios.create({
   // TODO 1. 基础地址，超时时间
diff --git a/src/views/ai/AnsweringPage.vue b/src/views/ai/AnsweringPage.vue
index 37330be..d2dfd77 100644
--- a/src/views/ai/AnsweringPage.vue
+++ b/src/views/ai/AnsweringPage.vue
@@ -1,867 +1,517 @@
-<script setup>
-import { ref, onMounted, nextTick } from 'vue'
-import { Link, Search, Document, Close, Plus } from '@element-plus/icons-vue'
-import MarkdownIt from 'markdown-it'
-import { baseURL } from '@/utils/request'
-
-// 初始化Markdown解析器
-const md = MarkdownIt({
-  html: true,
-  linkify: true,
-  typographer: true
-})
-
-// 会话状态管理
-const showHistory = ref(false)
-const sessionHistory = ref([])
-const currentSessionId = ref(null)
-const isNewSession = ref(true) // 标记是否为全新会话
-
-// 模拟用户ID和IP（实际应用中应从认证系统获取）
-const userId = ref(10)
-const userIp = ref('192.168.1.100')
-
-// 消息模型
-const messages = ref([
-  {
-    id: 1,
-    text: '您好！我是智能AI助手，很高兴为您服务。我可以回答各种问题，例如科技、编程、生活常识等。请问有什么可以帮您的吗？',
-    mdText:
-      '您好！我是智能AI助手，很高兴为您服务。我可以回答各种问题，例如科技、编程、生活常识等。请问有什么可以帮您的吗？',
-    sender: 'ai',
-    time: formatTime(new Date()),
-    avatar: 'AI',
-    isActive: true // 标记当前活跃的AI消息
-  }
-])
-
-// 用户输入
-const userInput = ref('')
-const isThinking = ref(false)
-const chatContainer = ref(null)
-const isLoading = ref(false)
-// 当前正在处理的AI消息ID
-const currentAiMessageId = ref(null)
-// 控制终止按钮显示
-const showStopButton = ref(false)
-// 用于中止流请求
-const abortController = ref(null)
-
-// 加载会话历史
-const loadSessionHistory = async () => {
-  try {
-    // 调用后端API获取会话历史
-    const response = await fetch(
-      `${baseURL}/session/list?userId=${userId.value}`
-    )
+<template>
+  <div class="chat-container">
+    <!-- 聊天历史区域 -->
+    <div class="chat-history" ref="chatHistory">
+      <div
+        v-for="(msg, index) in history"
+        :key="index"
+        :class="['message', msg.sender]"
+      >
+        <!-- 消息头像 -->
+        <div class="avatar">
+          <div v-if="msg.sender === 'user'" class="user-avatar">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+              <path
+                d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-5.523 0-10 4.477-10 10h20c0-5.523-4.477-10-10-10z"
+              />
+            </svg>
+          </div>
+          <div v-else class="ai-avatar">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+              <path d="M20 9V6H4v3h16zm0 5v-2H4v2h16zm-8 5v-2H4v2h8z" />
+            </svg>
+          </div>
+        </div>
 
-    if (!response.ok) {
-      throw new Error(`获取会话历史失败: ${response.status}`)
-    }
+        <!-- 消息内容区域 -->
+        <div class="message-content">
+          <div class="sender">
+            {{ msg.sender === 'user' ? 'You' : 'AI Assistant' }}
+          </div>
+          <div class="content">
+            <div
+              v-if="
+                msg.sender === 'assistant' &&
+                index === history.length - 1 &&
+                loading
+              "
+              class="loading-indicator"
+            >
+              <div class="dot-flashing"></div>
+              <span>Thinking...</span>
+            </div>
+            <div v-else>{{ msg.content }}</div>
+          </div>
+          <div class="timestamp">{{ formatTimestamp(msg.timestamp) }}</div>
+        </div>
+      </div>
+    </div>
 
-    const data = await response.json()
-    sessionHistory.value = data
-  } catch (error) {
-    console.error('加载会话历史失败:', error)
-  }
-}
+    <!-- 输入区域 -->
+    <div class="input-area">
+      <div class="input-wrapper">
+        <input
+          v-model="inputMessage"
+          @keyup.enter="sendMessage"
+          placeholder="Type your message..."
+          :disabled="loading"
+        />
+        <button
+          @click="sendMessage"
+          :disabled="loading || !inputMessage.trim()"
+        >
+          <svg
+            v-if="loading"
+            xmlns="http://www.w3.org/2000/svg"
+            class="spinner"
+            viewBox="0 0 24 24"
+          >
+            <circle
+              cx="12"
+              cy="12"
+              r="10"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="4"
+            ></circle>
+          </svg>
+          <span v-else>Send</span>
+        </button>
+      </div>
+      <div class="hint-text">Press Enter to send</div>
+    </div>
+  </div>
+</template>
 
-// 格式化时间 (HH:MM)
-function formatTime(date) {
-  const hours = date.getHours().toString().padStart(2, '0')
-  const minutes = date.getMinutes().toString().padStart(2, '0')
-  return `${hours}:${minutes}`
-}
+<script setup>
+import { ref, nextTick, onMounted, onUnmounted } from 'vue'
+import { baseURL } from '@/utils/request'
 
-// 格式化日期时间
-function formatDateTime(dateString) {
-  const date = new Date(dateString)
-  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${formatTime(date)}`
+const inputMessage = ref('')
+const sessionToken = ref('')
+const history = ref([])
+const loading = ref(false)
+const chatHistory = ref(null)
+
+// 添加时间戳到消息
+const appendToHistory = (content, sender) => {
+  history.value.push({
+    content,
+    sender,
+    timestamp: new Date()
+  })
+  scrollToBottom()
 }
 
-// 加载单个会话
-const loadSession = async (session) => {
-  try {
-    // 调用后端API获取指定会话的完整消息
-    const response = await fetch(`${baseURL}/session/message/${session.id}`)
-
-    if (!response.ok) {
-      throw new Error(`获取会话消息失败: ${response.status}`)
+// 自动滚动到底部
+const scrollToBottom = () => {
+  nextTick(() => {
+    if (chatHistory.value) {
+      chatHistory.value.scrollTop = chatHistory.value.scrollHeight
     }
-
-    const messagesData = await response.json()
-
-    // 更新当前消息 - 补充头像和时间信息
-    messages.value = messagesData.map((msg) => {
-      const createdAt = new Date(msg.createdAt)
-      return {
-        ...msg,
-        mdText: msg.content,
-        text: msg.sender === 'ai' ? md.render(msg.content) : msg.content,
-        avatar: msg.sender === 'user' ? 'U' : 'AI',
-        time: formatTime(createdAt)
-      }
-    })
-
-    currentSessionId.value = session.id
-    isNewSession.value = false // 标记为已有会话
-    showHistory.value = false
-    scrollToBottom()
-  } catch (error) {
-    console.error('加载会话失败:', error)
-  }
-}
-
-// 创建新会话按钮处理
-const createNewConversation = () => {
-  // 清空当前对话
-  messages.value = []
-  userInput.value = ''
-  currentSessionId.value = null
-  isNewSession.value = true
-
-  // 添加默认的AI欢迎消息
-  const now = new Date()
-  messages.value.push({
-    id: Date.now(),
-    text: '您好！我是智能AI助手，很高兴为您服务。我可以回答各种问题，例如科技、编程、生活常识等。请问有什么可以帮您的吗？',
-    mdText:
-      '您好！我是智能AI助手，很高兴为您服务。我可以回答各种问题，例如科技、编程、生活常识等。请问有什么可以帮您的吗？',
-    sender: 'ai',
-    time: formatTime(now),
-    avatar: 'AI',
-    isActive: true
   })
+}
 
+// 处理窗口大小变化
+const handleResize = () => {
   scrollToBottom()
 }
 
-// 初始化
 onMounted(() => {
-  loadSessionHistory()
+  window.addEventListener('resize', handleResize)
   scrollToBottom()
-
-  // 检查URL参数是否包含会话ID
-  const urlParams = new URLSearchParams(window.location.search)
-  const sessionIdParam = urlParams.get('session')
-  if (sessionIdParam) {
-    // 查找会话
-    const targetSession = sessionHistory.value.find(
-      (s) => s.id === parseInt(sessionIdParam)
-    )
-    if (targetSession) {
-      loadSession(targetSession)
-    }
-  }
 })
 
-// 添加用户消息
-const addUserMessage = async (message) => {
-  if (!message.trim()) return
-
-  const now = new Date()
-  const newMessage = {
-    id: Date.now(),
-    text: message.trim(),
-    mdText: message.trim(),
-    sender: 'user',
-    time: formatTime(now),
-    avatar: 'U'
-  }
-
-  // 如果是第一次消息（全新会话）
-  if (isNewSession.value) {
-    // 移除默认的AI欢迎消息
-    if (messages.value.length === 1 && messages.value[0].sender === 'ai') {
-      messages.value = []
-    }
-
-    // 保存用户消息并创建新会话
-    messages.value.push(newMessage)
-    await saveMessageToBackend(newMessage, true)
-    isNewSession.value = false
-  } else {
-    // 普通消息
-    messages.value.push(newMessage)
-    await saveMessageToBackend(newMessage)
-  }
-
-  userInput.value = ''
-  isThinking.value = true
-  scrollToBottom()
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+})
 
-  // 调用API获取AI回复
-  callBackendAPI(message)
+// 格式化时间戳
+const formatTimestamp = (date) => {
+  return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
 }
 
-// 保存消息到后端
-const saveMessageToBackend = async (message, createSession = false) => {
-  try {
-    // 创建新会话（如果需要）
-    if (createSession) {
-      const sessionData = {
-        userId: userId.value,
-        userIp: userIp.value,
-        sessionToken: `sess_${Date.now()}`,
-        title: message.text.substring(0, 20) + '...'
-      }
-
-      // 创建新会话
-      const sessionResponse = await fetch(`${baseURL}/session/create`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(sessionData)
-      })
-
-      if (!sessionResponse.ok) {
-        throw new Error(`创建会话失败: ${sessionResponse.status}`)
-      }
-
-      const sessionDataResult = await sessionResponse.json()
-      currentSessionId.value = sessionDataResult.id
-
-      // 设置消息的会话ID
-      message.sessionId = currentSessionId.value
-    }
+const sendMessage = async () => {
+  if (!inputMessage.value.trim() || loading.value) return
 
-    // 准备消息数据
-    const messageData = {
-      sessionId: currentSessionId.value,
-      content: message.mdText,
-      sender: message.sender
-    }
+  const userMessage = inputMessage.value
+  appendToHistory(userMessage, 'user')
+  inputMessage.value = ''
+  loading.value = true
 
-    // 保存消息
-    const response = await fetch(`${baseURL}/session/message/create`, {
+  try {
+    const response = await fetch(baseURL + '/chat/ask', {
       method: 'POST',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(messageData)
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        content: userMessage,
+        sessionToken: sessionToken.value
+      })
     })
 
-    if (!response.ok) {
-      throw new Error(`保存消息失败: ${response.status}`)
-    }
-
-    // 更新消息ID
-    const data = await response.json()
-    message.id = data.id
+    if (!response.body) throw new Error('No response body')
 
-    // 更新会话历史
-    if (createSession) {
-      loadSessionHistory()
-    }
-  } catch (error) {
-    console.error('保存消息失败:', error)
-  }
-}
-
-// 调用后端API - 使用fetch API
-// 调用后端API - 使用fetch API
-const callBackendAPI = async (userMessage) => {
-  isLoading.value = true
-  showStopButton.value = true
-  abortController.value = new AbortController()
-
-  try {
-    // 创建初始AI消息
-    createAiMessage()
-
-    // 替换为你的实际API密钥（此处保留示例密钥，实际需替换为有效令牌）
-    const apiKey =
-      'eyJ0eXBlIjoiSldUIiwiYWxnIjoiSFM1MTIifQ.eyJqdGkiOiI4NjMwNjcyNyIsInJvbCI6IlJPTEVfUkVHSVNURVIiLCJpc3MiOiJPcGVuWExhYiIsImlhdCI6MTc1MTUzOTEzNCwiY2xpZW50SWQiOiJlYm1ydm9kNnlvMG5semFlazF5cCIsInBob25lIjoiMTc4NzAzNDI2ODUiLCJvcGVuSWQiOm51bGwsInV1aWQiOiIzNDg5ZTJkOC04ZGI4LTQyNDUtOTFiZC03YmRkN2Y3MTI0ZDEiLCJlbWFpbCI6IiIsImV4cCI6MTc2NzA5MTEzNH0.-Bfg41q0v4RDjN6mgfLmga1isL02KF5DdoA1LoiNmUQg8I19FjEMz2w9dOJsql3-MavE6UB5QlECQiDvk4t6XQ' // 请替换为实际的Bearer Token
-
-    // 构造完整的messages数组（包含历史对话）
-    const formattedMessages = [
-      // 系统提示（可选，根据需求保留或移除）
-      // { role: 'system', content: 'You are a helpful assistant.' },
-
-      // 转换历史消息为API所需格式
-      ...messages.value.map((msg) => ({
-        role: msg.sender === 'user' ? 'user' : 'assistant',
-        content: msg.mdText
-      })),
-
-      // 当前用户消息
-      { role: 'user', content: userMessage }
-    ]
-
-    // 使用fetch API调用API（格式与curl一致）
-    const response = await fetch(
-      'https://chat.intern-ai.org.cn/api/v1/chat/completions',
-      {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${apiKey}`
-        },
-        body: JSON.stringify({
-          model: 'internlm3-latest',
-          messages: formattedMessages,
-          temperature: 0.8,
-          top_p: 0.9,
-          stream: true
-        }),
-        signal: abortController.value.signal
-      }
-    )
-
-    if (!response.ok) {
-      throw new Error(`请求失败: ${response.status}`)
-    }
-
-    // 处理流式响应（与原逻辑一致）
     const reader = response.body.getReader()
-    const decoder = new TextDecoder('utf-8')
-    let partialData = ''
-    let aiMessageContent = ''
-    var trimmedChunk = 'start'
-    while (trimmedChunk !== '[DONE]') {
-      const { value, done } = await reader.read()
-      if (done) break
+    const decoder = new TextDecoder()
 
-      // 解码并处理数据块
-      const chunk = decoder.decode(value, { stream: true })
-      partialData += chunk
-
-      // 处理可能包含多个数据块的情况
-      const dataChunks = partialData.split('data: ')
-      partialData = dataChunks.pop() || '' // 保留未完成的部分
-
-      for (const dataChunk of dataChunks) {
-        if (dataChunk.trim() === '') continue
-        trimmedChunk = dataChunk.trim()
-        if (trimmedChunk === '[DONE]') {
-          // 流结束
-          break
-        }
-
-        try {
-          const dataObj = JSON.parse(trimmedChunk)
-          const content = dataObj.choices?.[0]?.delta?.content || ''
-          if (content) {
-            updateAiMessage(content)
-            aiMessageContent += content
-          }
-        } catch (error) {
-          console.warn('JSON解析错误:', error)
-        }
-      }
-    }
+    // 添加初始空消息用于流式更新
+    appendToHistory('', 'assistant')
 
-    // 保存完整的AI消息到后端
-    if (currentAiMessageId.value) {
-      saveMessageToBackend({
-        id: currentAiMessageId.value,
-        mdText: aiMessageContent,
-        sender: 'ai',
-        time: formatTime(new Date())
-      })
-    }
-  } catch (error) {
-    if (error.name !== 'AbortError') {
-      console.error('API调用失败:', error)
-      // 更新最后一条AI消息显示错误
-      const aiMessageIndex = messages.value.findIndex(
-        (msg) => msg.id === currentAiMessageId.value
-      )
-      if (aiMessageIndex !== -1) {
-        messages.value[aiMessageIndex].mdText =
-          `抱歉，处理请求时出错: ${error.message}`
-        messages.value[aiMessageIndex].text = md.render(
-          messages.value[aiMessageIndex].mdText
-        )
-        scrollToBottom()
+    const readChunk = async () => {
+      const { value, done } = await reader.read()
+      if (done) {
+        sessionToken.value =
+          response.headers.get('X-Session-Token') || sessionToken.value
+        loading.value = false
+        return
       }
-    }
-  } finally {
-    isLoading.value = false
-    isThinking.value = false
-    showStopButton.value = false
-    abortController.value = null
-  }
-}
-// 创建初始AI消息
-const createAiMessage = () => {
-  const now = new Date()
-  const newMessage = {
-    id: Date.now(),
-    text: '',
-    mdText: '',
-    sender: 'ai',
-    time: formatTime(now),
-    avatar: 'AI',
-    isActive: true // 标记当前活跃的AI消息
-  }
-
-  // 重置所有消息为非活跃状态
-  messages.value.forEach((msg) => {
-    msg.isActive = false
-  })
-
-  messages.value.push(newMessage)
-  currentAiMessageId.value = newMessage.id
-  scrollToBottom()
 
-  return newMessage.id
-}
-
-// 更新AI消息内容
-const updateAiMessage = (contentChunk) => {
-  const aiMessageIndex = messages.value.findIndex(
-    (msg) => msg.id === currentAiMessageId.value
-  )
-
-  if (aiMessageIndex !== -1) {
-    // 更新原始Markdown文本
-    messages.value[aiMessageIndex].mdText += contentChunk
-    // 重新解析整个Markdown
-    messages.value[aiMessageIndex].text = md.render(
-      messages.value[aiMessageIndex].mdText
-    )
-
-    // 滚动到底部
-    scrollToBottom()
-  }
-}
-
-// 滚动到底部
-const scrollToBottom = () => {
-  nextTick(() => {
-    if (chatContainer.value) {
-      chatContainer.value.scrollTop = chatContainer.value.scrollHeight
-    }
-  })
-}
-
-// 发送消息
-const sendMessage = () => {
-  if (!userInput.value.trim() || isThinking.value) return
-  addUserMessage(userInput.value)
-}
-
-// 停止当前回答
-const stopResponse = () => {
-  if (abortController.value) {
-    abortController.value.abort()
-    showStopButton.value = false
-    isThinking.value = false
-    isLoading.value = false
+      const chunk = decoder.decode(value, { stream: true })
+      // 更新最后一条消息
+      const lastIndex = history.value.length - 1
+      history.value[lastIndex].content += chunk
 
-    // 在AI消息中添加终止提示
-    const aiMessageIndex = messages.value.findIndex(
-      (msg) => msg.id === currentAiMessageId.value
-    )
-    if (aiMessageIndex !== -1 && messages.value[aiMessageIndex].text === '') {
-      messages.value[aiMessageIndex].mdText = '已终止回答'
-      messages.value[aiMessageIndex].text = md.render('已终止回答')
       scrollToBottom()
+      readChunk()
     }
-  }
-}
 
-// 快捷键发送（Ctrl+Enter）
-const handleKeydown = (e) => {
-  if (e.ctrlKey && e.key === 'Enter' && userInput.value.trim()) {
-    sendMessage()
+    await readChunk()
+  } catch (error) {
+    console.error('Error:', error)
+    const lastIndex = history.value.length - 1
+    if (lastIndex >= 0) {
+      history.value[lastIndex].content = 'Error: ' + error.message
+    }
+    loading.value = false
   }
 }
 </script>
 
-<template>
-  <div class="ai-container">
-    <!-- 头部标题区域 -->
-    <div class="ai-header">
-      <el-page-header icon="" title=" ">
-        <template #title>
-          <div class="ai-title">
-            <el-icon size="30" color="#3498db">
-              <component :is="Search" />
-            </el-icon>
-            <span>AI智能问答助手</span>
-          </div>
-        </template>
-        <template #content>
-          <div class="ai-subtitle">支持Markdown格式的智能问答系统</div>
-        </template>
-        <template #extra>
-          <el-button @click="showHistory = true" style="margin-right: 10px">
-            <el-icon><Document /></el-icon>
-            <span>会话历史</span>
-          </el-button>
-          <el-button type="primary" @click="createNewConversation">
-            <el-icon><Plus /></el-icon>
-            <span>创建新会话</span>
-          </el-button>
-        </template>
-      </el-page-header>
-    </div>
-
-    <!-- 历史记录面板 -->
-    <el-drawer v-model="showHistory" title="会话历史记录" :size="400">
-      <div class="history-panel">
-        <el-scrollbar height="100%">
-          <div
-            v-for="session in sessionHistory"
-            :key="session.id"
-            class="session-item"
-            @click="loadSession(session)"
-          >
-            <div class="session-title">{{ session.title }}</div>
-            <div class="session-date">
-              {{ formatDateTime(session.startTime) }}
-            </div>
-          </div>
-
-          <div v-if="sessionHistory.length === 0" class="empty-history">
-            <el-empty description="暂无历史会话" />
-          </div>
-        </el-scrollbar>
-      </div>
-    </el-drawer>
-
-    <!-- 聊天区域 -->
-    <div class="chat-container" ref="chatContainer">
-      <div
-        v-for="(message, index) in messages"
-        :key="index"
-        :class="['message', message.sender]"
-      >
-        <div class="message-header">
-          <el-avatar :class="message.sender" :size="36">
-            <span>{{ message.avatar }}</span>
-          </el-avatar>
-          <div>
-            <div class="message-sender">
-              {{ message.sender === 'user' ? '用户' : 'AI助手' }}
-            </div>
-            <div class="message-time">{{ message.time }}</div>
-          </div>
-        </div>
-
-        <div
-          class="message-content"
-          :class="[message.sender, { active: message.isActive }]"
-        >
-          <!-- 用户消息直接显示文本，AI消息显示解析后的HTML -->
-          <span v-if="message.sender === 'user'">{{ message.text }}</span>
-          <div v-else class="markdown-content" v-html="message.text"></div>
-        </div>
-      </div>
-
-      <!-- 终止按钮 -->
-      <div v-if="showStopButton" class="stop-response">
-        <el-button type="danger" size="small" @click="stopResponse" round>
-          <el-icon><Close /></el-icon>
-          <span>终止回答</span>
-        </el-button>
-      </div>
-
-      <!-- 加载状态 -->
-      <div v-if="isThinking && !isLoading" class="thinking">
-        <div class="loader">
-          <div></div>
-          <div></div>
-          <div></div>
-        </div>
-        <span>思考中...</span>
-      </div>
-      <div v-if="isLoading" class="thinking">
-        <div class="loader">
-          <div></div>
-          <div></div>
-          <div></div>
-        </div>
-        <span>正在获取回答...</span>
-      </div>
-    </div>
-
-    <!-- 输入区域 -->
-    <div class="input-container">
-      <el-input
-        v-model="userInput"
-        type="textarea"
-        :rows="4"
-        placeholder="输入您的问题（支持普通文本），按 Ctrl+Enter 发送"
-        :disabled="isThinking"
-        @keydown="handleKeydown"
-        resize="none"
-      />
-      <el-button
-        class="send-btn"
-        type="primary"
-        @click="sendMessage"
-        :disabled="isThinking || !userInput.trim()"
-      >
-        <el-icon>
-          <el-link type="primary">
-            <component :is="Link" />
-          </el-link>
-        </el-icon>
-        <span>发送</span>
-      </el-button>
-    </div>
-  </div>
-</template>
 <style scoped>
-/* 新增历史记录面板样式 */
-.history-panel {
-  height: 100%;
-  padding: 15px;
+:root {
+  --primary-color: #4285f4;
+  --user-bg: #e3f2fd;
+  --ai-bg: #f5f5f5;
+  --border-radius: 16px;
+  --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 
-.session-item {
-  padding: 15px;
-  margin-bottom: 10px;
+/* 基础布局 */
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  max-width: 1200px;
+  margin: 0 auto;
+  background: #fff;
+  box-shadow: var(--shadow);
   border-radius: 8px;
-  background-color: #f8f9fa;
-  cursor: pointer;
-  transition: background-color 0.3s;
+  overflow: hidden;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
-.session-item:hover {
-  background-color: #e9ecef;
+.chat-history {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(to bottom, #f9f9ff, #ffffff);
 }
 
-.session-title {
-  font-weight: bold;
-  margin-bottom: 5px;
-  color: #212529;
+/* 消息样式 */
+.message {
+  display: flex;
+  margin-bottom: 24px;
+  max-width: 80%;
 }
 
-.session-date {
-  font-size: 12px;
-  color: #6c757d;
+.message.user {
+  align-self: flex-end;
+  flex-direction: row-reverse;
 }
 
-.empty-history {
-  text-align: center;
-  padding: 20px;
+.message.assistant {
+  align-self: flex-start;
 }
 
-/* 原有样式保持不变 */
-.ai-container {
-  margin: 0 auto;
-  padding: 20px;
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-  height: 80vh;
-  display: flex;
-  flex-direction: column;
-}
-
-.ai-header {
-  margin-bottom: 20px;
-  border-bottom: 1px solid #eee;
-  padding-bottom: 15px;
+.avatar {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
+  padding-top: 5px;
 }
 
-.ai-title {
+.user-avatar,
+.ai-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
   display: flex;
   align-items: center;
-  gap: 10px;
-  font-weight: bold;
-  font-size: 22px;
-  color: #3498db;
+  justify-content: center;
 }
 
-.ai-subtitle {
-  font-size: 14px;
-  color: #7f8c8d;
+.user-avatar {
+  background: var(--primary-color);
 }
 
-.chat-container {
-  flex: 1;
-  overflow-y: auto;
-  padding: 10px;
-  border: 1px solid #eee;
-  border-radius: 10px;
-  margin-bottom: 15px;
-  background: #fafafa;
-  position: relative;
+.user-avatar svg {
+  width: 20px;
+  height: 20px;
+  fill: white;
 }
 
-.message {
-  margin-bottom: 20px;
-  border-radius: 10px;
-  padding: 15px;
-  background: white;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+.ai-avatar {
+  background: #666;
 }
 
-.message-header {
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
+.ai-avatar svg {
+  width: 20px;
+  height: 20px;
+  fill: white;
 }
 
-.message-header > div {
-  margin-left: 12px;
+.message-content {
+  margin: 0 12px;
+  max-width: calc(100% - 60px);
 }
 
-.message-sender {
-  font-weight: bold;
-  font-size: 16px;
-  color: #2c3e50;
+.message.user .message-content {
+  align-items: flex-end;
 }
 
-.message-time {
-  font-size: 12px;
-  color: #95a5a6;
+.sender {
+  font-weight: 600;
+  font-size: 0.85rem;
+  margin-bottom: 6px;
+  color: #555;
 }
 
-.message-content {
-  padding: 10px;
-  border-radius: 8px;
-  font-size: 15px;
-  line-height: 1.6;
+.message.user .sender {
+  text-align: right;
 }
 
-.message-content.user {
-  background-color: #e8f4f8;
-  border-left: 4px solid #3498db;
+.content {
+  padding: 12px 16px;
+  border-radius: var(--border-radius);
+  font-size: 1rem;
+  line-height: 1.5;
+  word-wrap: break-word;
+  box-shadow: var(--shadow);
 }
 
-.message-content.ai {
-  background-color: #f5f7fa;
-  border-left: 4px solid #9b59b6;
+.message.user .content {
+  background: var(--user-bg);
+  border-top-right-radius: 4px;
 }
 
-.message-content.ai.active {
-  background-color: #edf6ff;
-  border-left: 4px solid #3498db;
+.message.assistant .content {
+  background: var(--ai-bg);
+  border-top-left-radius: 4px;
 }
 
-:deep(.markdown-content) h1,
-:deep(.markdown-content) h2,
-:deep(.markdown-content) h3 {
-  margin: 15px 0 10px;
-  color: #2c3e50;
-  font-weight: bold;
+.timestamp {
+  font-size: 0.7rem;
+  color: #999;
+  margin-top: 4px;
 }
 
-:deep(.markdown-content) p {
-  margin-bottom: 10px;
+.message.user .timestamp {
+  text-align: right;
 }
 
-:deep(.markdown-content) ul,
-:deep(.markdown-content) ol {
-  margin-left: 20px;
-  margin-bottom: 15px;
+/* 输入区域 */
+.input-area {
+  padding: 15px 20px;
+  background: #fff;
+  border-top: 1px solid #eee;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
 }
 
-:deep(.markdown-content) li {
-  margin-bottom: 5px;
+.input-wrapper {
+  display: flex;
+  gap: 10px;
 }
 
-:deep(.markdown-content) code {
-  background-color: #f8f8f8;
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-family: Consolas, monospace;
+input {
+  flex: 1;
+  padding: 14px 16px;
+  border: 1px solid #ddd;
+  border-radius: 24px;
+  font-size: 1rem;
+  transition: all 0.3s ease;
+  background: #f9f9f9;
 }
 
-:deep(.markdown-content) pre {
-  background-color: #2c3e50;
-  color: #ecf0f1;
-  padding: 10px;
-  border-radius: 6px;
-  overflow-x: auto;
-  margin: 15px 0;
+input:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
+  background: #fff;
 }
 
-:deep(.markdown-content) pre code {
-  background: none;
-  padding: 0;
-  border-radius: 0;
+button {
+  padding: 0 24px;
+  background: var(--primary-color);
+  color: white;
+  border: none;
+  border-radius: 24px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 100px;
+  transition: all 0.3s ease;
 }
 
-:deep(.markdown-content) a {
-  color: #3498db;
-  text-decoration: none;
+button:disabled {
+  background: #ccc;
+  cursor: not-allowed;
+  opacity: 0.7;
 }
 
-:deep(.markdown-content) a:hover {
-  text-decoration: underline;
+button:not(:disabled):hover {
+  background: #3367d6;
+  transform: translateY(-1px);
 }
 
-.input-container {
-  display: flex;
-  gap: 10px;
+.hint-text {
+  text-align: center;
+  font-size: 0.8rem;
+  color: #999;
+  margin-top: 8px;
 }
 
-.send-btn {
-  height: 90px;
-  width: 100px;
+/* 加载状态 */
+.loading-indicator {
   display: flex;
-  flex-direction: column;
-  justify-content: center;
   align-items: center;
-  padding: 0;
+  gap: 12px;
+  color: #666;
 }
 
-.thinking {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 10px;
-  color: #95a5a6;
+.dot-flashing {
+  position: relative;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #999;
+  color: #999;
+  animation: dotFlashing 1s infinite linear alternate;
+  animation-delay: 0.5s;
 }
 
-.stop-response {
-  display: flex;
-  justify-content: center;
-  margin: 10px 0;
+.dot-flashing::before,
+.dot-flashing::after {
+  content: '';
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #999;
+  color: #999;
 }
 
-.avatar-user {
-  background-color: #3498db;
-  color: white;
+.dot-flashing::before {
+  left: -15px;
+  animation: dotFlashing 1s infinite alternate;
+  animation-delay: 0s;
 }
 
-.avatar-ai {
-  background-color: #9b59b6;
-  color: white;
+.dot-flashing::after {
+  left: 15px;
+  animation: dotFlashing 1s infinite alternate;
+  animation-delay: 1s;
 }
 
-.loader {
-  display: inline-flex;
-  gap: 5px;
-  margin-right: 10px;
+@keyframes dotFlashing {
+  0% {
+    background-color: #999;
+  }
+  50%,
+  100% {
+    background-color: #e0e0e0;
+  }
 }
 
-.loader div {
-  width: 10px;
-  height: 10px;
-  background: #3498db;
-  border-radius: 50%;
-  display: inline-block;
-  animation: bounce 1.4s infinite ease-in-out both;
+.spinner {
+  width: 20px;
+  height: 20px;
+  animation: rotate 1s linear infinite;
 }
 
-.loader div:nth-child(1) {
-  animation-delay: -0.32s;
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
-.loader div:nth-child(2) {
-  animation-delay: -0.16s;
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .chat-container {
+    height: 100vh;
+    border-radius: 0;
+    max-width: 100%;
+  }
+
+  .message {
+    max-width: 90%;
+  }
+
+  .input-wrapper {
+    flex-direction: column;
+  }
+
+  button {
+    min-width: auto;
+    padding: 12px;
+  }
+
+  .avatar {
+    display: none;
+  }
+
+  .message-content {
+    max-width: 100%;
+    margin: 0;
+  }
+
+  .chat-history {
+    padding: 10px;
+  }
+
+  .input-area {
+    padding: 10px;
+  }
+
+  input {
+    padding: 12px;
+  }
 }
 
-@keyframes bounce {
-  0%,
-  80%,
-  100% {
-    transform: scale(0);
+@media (max-width: 480px) {
+  .sender {
+    font-size: 0.8rem;
+  }
+
+  .content {
+    padding: 10px 14px;
+    font-size: 0.95rem;
   }
-  40% {
-    transform: scale(1);
+
+  .timestamp {
+    font-size: 0.65rem;
+  }
+
+  .hint-text {
+    display: none;
   }
 }
 </style>