[Feat 0000] AI聊天所有示例共享同一状态库

src/components/AIChat/MiniChat.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-v-html -->
 <template>
   <div class="mini-chat">
     <!-- 左侧折叠区域 -->
@@ -13,30 +14,38 @@
     <!-- 右侧对话框 -->
     <div class="right-side">
       <!-- 对话区域 -->
-      <div class="dialog-area">
+      <div ref="dialogRef" class="dialog-area">
         <div
-          v-for="message in sortedMessages"
+          v-for="message in store.getMessageHistory"
           :key="message.id"
-          class="flex items-center"
+          class="flex items-center w-100%"
           :style="{ alignSelf: message.type === 'user' ? 'flex-end' : 'flex-start' }"
         >
-          <SvgIcon v-if="message.type !== 'user'" size="30" class="ml-2px mr-2px" name="ai-logo" />
-          <div v-if="message.type !== 'user'" class="answer-message" v-html="formatMessage(message.content)"></div>
-          <div v-if="message.type === 'user'" class="ask-message">{{ message.content }}</div>
+          <template v-if="message.type === 'user'">
+            <div class="flex-grow-1"></div>
+            <div class="ask-message">{{ message.content }}</div>
+          </template>
+          <template v-else>
+            <SvgIcon size="30" class="ml-2px mr-2px" name="ai-logo" />
+            <div class="answer-message">
+              <div v-if="message.contentR1" class="color-gray font-size-12px" v-html="formatMessage(message.contentR1)"> </div>
+              <div v-html="formatMessage(message.content)"> </div>
+            </div>
+          </template>
         </div>
       </div>
       <!-- 底部操作栏 -->
       <div class="input-area">
-        <TextArea v-model="inputText" placeholder="请输入你的问题" />
+        <TextArea v-model:value="inputText" placeholder="请输入你的问题" />
         <div class="action-bar">
           <!-- 左侧深度思考按钮 -->
-          <div class="think-btn" :class="{ active: isThinking }" @click="toggleThinking"> <span>深度思考</span> </div>
+          <div class="think-btn" :class="{ active: store.deepseekR1Enable }" @click="toggleThinking"> <span>深度思考</span> </div>
 
           <!-- 右侧操作按钮 -->
           <Space>
             <SvgIcon name="send-image" />
             <SvgIcon name="send-file" />
-            <Button type="primary" shape="circle" size="small" :loading="spinning" @click="handleSend">
+            <Button type="primary" shape="circle" size="small" :loading="store.streaming" @click="handleSend">
               <template #icon>
                 <SvgIcon name="send" />
               </template>
@@ -49,334 +58,38 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, onMounted, unref, computed, defineComponent } from 'vue';
-  import { useUserStore } from '/@/store/modules/user';
+  import { ref, onMounted } from 'vue';
   import { SvgIcon } from '../Icon';
   import { Space, Button, Popover, Input } from 'ant-design-vue';
   import AIChat from './index.vue';
+  import { useAIChat } from '/@/store/modules/AIChat';
   const TextArea = Input.TextArea; // 直接导入TextArea组件使用时打包报错
-  // 响应式变量声明
+  const dialogRef = ref<HTMLElement | null>(null);
   const dialogVisible = ref(true);
-  const isFold = ref(true); // 是否折叠
   const inputText = ref(''); // 输入框内容
-  const historySessions = ref([]); // 消会话历史
-  const spinning = ref(false); // 加载状态
-  const systemMessage = ref(''); // 系统返回信息
-  const session_id = ref(''); // 会话id
-  const hasCreated = ref(false); // 标志位，防止重复调用create接口
-  const hasAdd = ref(false); // 标志位，防止重复调用create接口
-  const userStore = useUserStore(); //获取用户信息
-  const editingId = ref<number | null>(null);
-  const editText = ref('');
-  const isThinking = ref(false);
-  interface ListItem {
-    id: number;
-    title?: string;
-  }
-  let userId = unref(userStore.getUserInfo).id;
-  // const userId = ref(0);
-  type MessageItem = {
-    id: string; // 唯一标识（可用时间戳生成）
-    type: 'user' | 'system';
-    content: string;
-    timestamp: number; // 排序依据
-  };
-  const messageList = ref<MessageItem[]>([]);
-  const sortedMessages = computed(() => {
-    const list = messageList.value;
-    return list.sort((a, b) => a.timestamp - b.timestamp);
-  });
-  const vFocus = {
-    mounted: (el: HTMLElement) => el.querySelector('input')?.focus(),
-  };
-  const scrollToBottom = () => {
-    const dialogArea = document.querySelector('.dialog-area');
-    if (dialogArea) {
-      dialogArea.scrollTop = dialogArea.scrollHeight;
-    }
-  };
+  const store = useAIChat(); //获取用户信息
 
   const openDialog = () => {
     dialogVisible.value = !dialogVisible.value;
   };
-  const fold = () => {
-    // isFold.value = !isFold.value;
-    // if (!isFold.value) {
-    //   sessionsHistoryList();
-    // }
-  };
   //启用深度思考
   const toggleThinking = () => {
-    isThinking.value = !isThinking.value;
-  };
-  //创建新对话
-  async function addNew() {
-    hasAdd.value = !hasAdd.value;
-    const params = {
-      user_id: userId,
-    };
-    let response = await fetch('http://182.92.126.35:6005/sessions/create', {
-      method: 'post',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(params),
-    });
-    const data = await response.json();
-    session_id.value = data.id;
-    messageList.value = [];
-  }
-  //编辑标题
-  const startEditing = (item: ListItem) => {
-    editingId.value = item.id;
-    editText.value = item.title || '';
+    store.deepseekR1Enable = !store.deepseekR1Enable;
   };
 
-  // 保存修改
-  const handleSave = async (item: ListItem) => {
-    const params = {
-      chat_session_id: item.id,
-      new_title: editText.value,
-    };
-    try {
-      let response = await fetch('http://182.92.126.35:6005/sessions/change_title', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(params),
-      });
-      if (!response.ok) {
-        throw new Error('Network response was not ok');
-      }
-      item.title = editText.value;
-    } catch (error) {
-      console.error('保存失败:', error);
-    }
-    editingId.value = null;
-  };
   //获取消息列表
   async function handleSend() {
-    if (session_id.value === '') {
-      await addNew();
-      createSessionTitle({ session_id: session_id.value, title: inputText.value });
-      sendMessage1();
-    } else {
-      createSessionTitle({ session_id: session_id.value, title: inputText.value });
-      sendMessage1();
-    }
-  }
-  //发送消息
-  async function sendMessage() {
-    spinning.value = true;
-    // 添加用户消息
-    messageList.value.push({
-      id: `user_${Date.now()}`,
-      type: 'user',
-      content: inputText.value,
-      timestamp: Date.now(),
-    });
-    const params = {
-      chat_session_id: session_id.value,
-      prompt: inputText.value,
-      ref_file_ids: [],
-      thinking_enabled: false,
-    };
-    inputText.value = ''; // 清空输入框
-    //将用户输入的内容发送到后端
-    try {
-      // 将用户输入的内容发送到后端
-      let response = await fetch('http://182.92.126.35:6005/chat', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(params),
-      });
-
-      if (!response.ok) {
-        throw new Error('Network response was not ok');
-      }
-
-      const data = await response.json();
-      const assistantReply = data.reply.content; // 获取助手回复
-      // formatMessage(assistantReply);
-      systemMessage.value = assistantReply;
-
-      // 添加系统回答
-      messageList.value.push({
-        id: `system_${Date.now()}`,
-        type: 'system',
-        content: systemMessage.value,
-        timestamp: Date.now(),
-      });
-    } catch (error) {
-      // 请求失败时设置系统消息为"服务器异常"
-      systemMessage.value = '服务器异常';
-      console.error('请求失败:', error);
-    } finally {
-      spinning.value = false; // 无论请求成功与否，都停止加载指示器
-    }
-  }
-  //发送消息  流式响应
-  const sendMessage1 = async () => {
-    spinning.value = true; // 开始加载
-    messageList.value.push({
-      id: `user_${Date.now()}`,
-      type: 'user',
-      content: inputText.value,
-      timestamp: Date.now(),
-    });
-
-    // 构造请求参数
-    const params = {
-      chat_session_id: session_id.value, // 替换为实际的会话 ID
-      prompt: inputText.value,
-      ref_file_ids: [],
-      thinking_enabled: isThinking.value,
-    };
-    inputText.value = ''; // 清空输入框
-    try {
-      // 发送 POST 请求
-      const response = await fetch('http://182.92.126.35:6005/chat_stream', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(params),
-      });
-
-      // 检查响应是否成功
-      if (!response.ok) {
-        throw new Error('Network response was not ok');
-      }
-
-      // 获取可读流
-      const reader = response.body.getReader();
-
-      // 创建一条新的消息对象
-      const newMessage = {
-        id: `response_${Date.now()}`,
-        type: 'response', // 消息类型
-        content: '',
-        timestamp: Date.now(), // 时间戳用来排序
-      };
-
-      // 将新消息添加到消息列表
-      messageList.value.push(newMessage);
-
-      // 读取流式数据
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) {
-          console.log('Stream complete');
-          break;
-        }
-
-        // 将流数据转换为字符串
-        const chunk = new TextDecoder().decode(value);
-        console.log('Received chunk:', chunk);
-
-        // 使用正则表达式匹配完整的 JSON 对象
-        const jsonRegex = /{.*?}/g;
-        const matches = chunk.match(jsonRegex);
-
-        if (matches) {
-          matches.forEach((match) => {
-            try {
-              const data = JSON.parse(match);
-              if (data.type === 'text') {
-                // 找到当前消息对象并更新 content
-                const targetMessage = messageList.value.find((msg) => msg.id === newMessage.id);
-                if (targetMessage) {
-                  targetMessage.content += data.content; // 追加内容
-                  scrollToBottom();
-                }
-              }
-            } catch (error) {
-              console.error('Failed to parse JSON:', error);
-            }
-          });
-        }
-      }
-    } catch (error) {
-      // 请求失败时设置系统消息
-      if (!response || !response.ok) {
-        systemMessage.value = '服务器异常';
-        messageList.value.push({
-          id: `system_${Date.now()}`,
-          type: 'system',
-          content: systemMessage.value,
-          timestamp: Date.now(),
-        });
-        console.error('请求失败:', error);
-      }
-    } finally {
-      spinning.value = false; // 停止加载
-    }
-  };
-  //创建标题
-  async function createSessionTitle({ session_id, title }) {
-    const params = {
-      chat_session_id: session_id,
-      prompt: title,
-    };
-    let response = await fetch('http://182.92.126.35:6005/sessions/title', {
-      method: 'post',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(params),
-    });
-    const data = await response.json();
-  }
-  //获取会话历史
-  async function sessionsHistoryList() {
-    const params = {
-      user_id: userId,
-    };
-    let response = await fetch(`http://182.92.126.35:6005/sessions`, {
-      method: 'post',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(params),
-    });
-    const data = await response.json();
-    historySessions.value = data.chat_sessions;
-  }
-  //获取具体会话记录
-  async function sessionsHistory(id: string) {
-    let response = await fetch(`http://182.92.126.35:6005/sessions/history_chat/?chat_session_id=${id}`, {
-      method: 'get',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
-    const data = await response.json();
-    if (data.chat_messages.length > 0) {
-      messageList.value = [];
-      data.chat_messages.forEach((item: any) => {
-        // role== user 用户提问
-        if (item.role === 'user') {
-          messageList.value.push({
-            id: `user_${Date.now()}`,
-            type: 'user',
-            content: item.content,
-            timestamp: Date.now(),
-          });
-        } else {
-          // role== assistant 机器回答
-          messageList.value.push({
-            id: `system_${Date.now()}`,
-            type: 'system',
-            content: item.content,
-            timestamp: Date.now(),
-          });
+    store
+      .sendQuestion(inputText.value, () => {
+        if (dialogRef.value) {
+          dialogRef.value.scrollTop = dialogRef.value.scrollHeight;
         }
+      })
+      .then(() => {
+        inputText.value = '';
       });
-    }
   }
+
   //格式化消息
   function formatMessage(text: string) {
     let formatted = text
@@ -393,9 +106,10 @@
       .replace(/`([^`]+)`/g, '<code>$1</code>');
     return formatted;
   }
+
   // 初始化按钮定位
   onMounted(() => {
-    sessionsHistoryList();
+    // store.getSessionHistory();
   });
 </script>
 
@@ -433,11 +147,13 @@
         padding: 10px;
         border-radius: 5px;
         background: #0c2842;
+        max-width: 80%;
       }
       .answer-message {
         padding: 10px;
         border-radius: 5px;
         background: #0c2842;
+        max-width: 90%;
       }
     }
 

src/components/AIChat/index.vue

@@ -1,3 +1,5 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<!-- eslint-disable vue/no-v-html -->
 <template>
   <transition name="fade">
     <div v-if="visible" class="dialog-overlay">
@@ -35,7 +37,7 @@
             }"
           ></span>
           <span v-if="!isFold" class="btn-text">历史对话</span>
-          <a-list style="width: 110px" :split="false" :data-source="historySessions" :scroll="200" class="custom-list">
+          <a-list style="width: 110px" :split="false" :data-source="store.sessionHistory" :scroll="200" class="custom-list">
             <template #renderItem="{ item }">
               <a-list-item
                 :style="{
@@ -49,7 +51,7 @@
                 <!-- 新增flex布局容器 -->
                 <div style="display: flex; justify-content: space-between; width: 100%">
                   <div v-if="editingId !== item.id" class="text-container">
-                    <span class="edit-text">{{ item.title || '新会话' }}</span>
+                    <span :class="{ 'color-white': item.id === store.currentSessionID }" class="edit-text">{{ item.title || '新会话' }}</span>
                     <edit-outlined class="edit-icon" @click="startEditing(item)" />
                   </div>
 
@@ -78,8 +80,8 @@
       <div class="right-side">
         <div class="input-content">
           <!-- 对话区域 -->
-          <div class="dialog-area">
-            <div v-for="message in sortedMessages" :key="message.id" :class="['message-item', message.type]">
+          <div ref="dialogRef" class="dialog-area">
+            <div v-for="message in store.getMessageHistory" :key="message.id" :class="['message-item', message.type]">
               <!-- 用户提问样式 -->
               <div v-if="message.type === 'user'" class="ask-message">
                 <span>{{ message.content }}</span>
@@ -89,27 +91,23 @@
               <div v-else class="system-message">
                 <div class="answerIcon"></div>
                 <div class="answer-message">
-                  <div v-if="message.Origintype === 'thinking'">
-                    <span :id="'thinking-' + message.id" class="thinking-text" v-html="formatMessage(message.content)"></span>
-                  </div>
-                  <div v-if="message.Origintype1 === 'text'">
-                    <span :id="'text-' + message.id" class="answer-text" v-html="formatMessage(message.content1)"></span>
-                  </div>
+                  <div v-if="message.contentR1" class="thinking-text" v-html="formatMessage(message.contentR1)"> </div>
+                  <div class="answer-text" v-html="formatMessage(message.content)"> </div>
                 </div>
               </div>
             </div>
           </div>
           <!-- 文本输入区域 -->
-          <div v-if="spinning" class="thinking-area">
+          <div v-if="store.streaming" class="thinking-area">
             <span style="color: #fff">思考中···</span>
-            <a-spin :spinning="spinning"></a-spin>
+            <a-spin :spinning="store.streaming" />
           </div>
           <div class="input-area">
             <textarea v-model="inputText" placeholder="请输入你的问题"> </textarea>
             <!-- 底部操作栏 -->
             <div class="action-bar">
               <!-- 左侧深度思考按钮 -->
-              <div class="think-btn" :class="{ active: isThinking }" @click="toggleThinking"> <span>深度思考</span> </div>
+              <div class="think-btn" :class="{ active: store.deepseekR1Enable }" @click="toggleThinking"> <span>深度思考</span> </div>
 
               <!-- 右侧操作按钮 -->
               <div class="right-actions">
@@ -129,367 +127,80 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, onMounted, unref, nextTick, computed } from 'vue';
-  import { useUserStore } from '/@/store/modules/user';
+  import { ref, onMounted } from 'vue';
   import { EditOutlined } from '@ant-design/icons-vue';
+  import { useAIChat } from '/@/store/modules/AIChat';
   // 响应式变量声明
-  const dialogVisible = ref(false);
+  const store = useAIChat(); //获取用户信息
+  const dialogRef = ref<HTMLElement | null>(null);
   const isFold = ref(false); // 是否折叠
   const inputText = ref(''); // 输入框内容
-  const historySessions = ref([]); // 消会话历史
-  const spinning = ref(false); // 加载状态
-  const systemMessage = ref(''); // 系统返回信息
-  const session_id = ref(''); // 会话id
   const hasCreated = ref(false); // 标志位，防止重复调用create接口
-  const hasAdd = ref(false); // 标志位，防止重复调用create接口
-  const userStore = useUserStore(); //获取用户信息
   const editingId = ref<number | null>(null);
   const editText = ref('');
-  const isThinking = ref(false);
-  interface ListItem {
-    id: number;
-    title?: string;
-  }
+
   const props = defineProps({
     visible: {
       type: Boolean,
       required: true,
     },
   });
-  let userId = unref(userStore.getUserInfo).id;
-  // const userId = ref(0);
-  type MessageItem = {
-    id: string; // 唯一标识时间戳
-    type: 'user' | 'system';
-    content?: string;
-    content1?: string;
-    Origintype?: string;
-    Origintype1?: string;
-    timestamp: number; // 排序依据
-  };
-  const messageList = ref<MessageItem[]>([]);
-  const sortedMessages = computed(() => {
-    return messageList.value.sort((a, b) => a.timestamp - b.timestamp);
-  });
+
   const vFocus = {
     mounted: (el: HTMLElement) => el.querySelector('input')?.focus(),
   };
-  const scrollToBottom = () => {
-    const dialogArea = document.querySelector('.dialog-area');
-    if (dialogArea) {
-      dialogArea.scrollTop = dialogArea.scrollHeight;
-    }
-  };
 
   const openMenu = () => {
     if (props.visible) {
-      addNew();
       hasCreated.value = true;
     }
   };
   const fold = () => {
     isFold.value = !isFold.value;
     if (!isFold.value) {
-      sessionsHistoryList();
+      store.getSessionHistory();
     }
   };
-  //启用深度思考
-  const toggleThinking = () => {
-    isThinking.value = !isThinking.value;
+
+  const addNew = () => {
+    store.createSession();
   };
-  //创建新对话
-  async function addNew() {
-    hasAdd.value = !hasAdd.value;
-    const params = {
-      user_id: userId,
-    };
-    let response = await fetch('http://182.92.126.35:6005/sessions/create', {
-      method: 'post',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(params),
-    });
-    const data = await response.json();
-    session_id.value = data.id;
-    messageList.value = [];
-  }
+
   //编辑标题
-  const startEditing = (item: ListItem) => {
+  const startEditing = (item) => {
     editingId.value = item.id;
     editText.value = item.title || '';
   };
 
   // 保存修改
-  const handleSave = async (item: ListItem) => {
-    const params = {
-      chat_session_id: item.id,
-      new_title: editText.value,
-    };
-    try {
-      let response = await fetch('http://182.92.126.35:6005/sessions/change_title', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(params),
-      });
-      if (!response.ok) {
-        throw new Error('Network response was not ok');
-      }
-      item.title = editText.value;
-    } catch (error) {
-      console.error('保存失败:', error);
-    }
-    editingId.value = null;
-  };
-  //获取消息列表
-  async function handleSend() {
-    if (session_id.value === '') {
-      await addNew();
-      createSessionTitle({ session_id: session_id.value, title: inputText.value });
-      sendMessage1();
-    } else {
-      createSessionTitle({ session_id: session_id.value, title: inputText.value });
-      sendMessage1();
-    }
-  }
-  //发送消息
-  async function sendMessage() {
-    spinning.value = true;
-    // 添加用户消息
-    messageList.value.push({
-      id: `user_${Date.now()}`,
-      type: 'user',
-      content: inputText.value,
-      timestamp: Date.now(),
+  const handleSave = (item) => {
+    store.changeSessionTitle(editText.value, item.id).then(() => {
+      editingId.value = null;
+      store.getSessionHistory();
     });
-    const params = {
-      chat_session_id: session_id.value,
-      prompt: inputText.value,
-      ref_file_ids: [],
-      thinking_enabled: false,
-    };
-    inputText.value = ''; // 清空输入框
-    //将用户输入的内容发送到后端
-    try {
-      // 将用户输入的内容发送到后端
-      let response = await fetch('http://182.92.126.35:6005/chat', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(params),
-      });
-
-      if (!response.ok) {
-        throw new Error('Network response was not ok');
-      }
+  };
 
-      const data = await response.json();
-      const assistantReply = data.reply.content; // 获取助手回复
-      // formatMessage(assistantReply);
-      systemMessage.value = assistantReply;
+  //启用深度思考
+  const toggleThinking = () => {
+    store.deepseekR1Enable = !store.deepseekR1Enable;
+  };
 
-      // 添加系统回答
-      messageList.value.push({
-        id: `system_${Date.now()}`,
-        type: 'system',
-        content: systemMessage.value,
-        timestamp: Date.now(),
+  //获取消息列表
+  async function handleSend() {
+    store
+      .sendQuestion(inputText.value, () => {
+        if (dialogRef.value) {
+          dialogRef.value.scrollTop = dialogRef.value.scrollHeight;
+        }
+      })
+      .then(() => {
+        inputText.value = '';
       });
-    } catch (error) {
-      // 请求失败时设置系统消息为"服务器异常"
-      systemMessage.value = '服务器异常';
-      console.error('请求失败:', error);
-    } finally {
-      spinning.value = false; // 无论请求成功与否，都停止加载指示器
-    }
   }
-  //发送消息  流式响应
-  const sendMessage1 = async () => {
-    spinning.value = true; // 开始加载
-    messageList.value.push({
-      id: `user_${Date.now()}`,
-      type: 'user',
-      content: inputText.value,
-      timestamp: Date.now(),
-    });
-    // 构造请求参数
-    const params = {
-      chat_session_id: session_id.value, // 替换为实际的会话 ID
-      prompt: inputText.value,
-      ref_file_ids: [],
-      thinking_enabled: isThinking.value,
-    };
-    inputText.value = ''; // 清空输入框
-    try {
-      // 发送 POST 请求
-      const response = await fetch('http://182.92.126.35:6005/chat_stream', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(params),
-      });
-
-      // 检查响应是否成功
-      if (!response.ok) {
-        throw new Error('Network response was not ok');
-      }
-
-      // 获取可读流
-      const reader = response.body.getReader();
-
-      // 创建一条新的消息对象
-      const newMessage = {
-        id: `response_${Date.now()}`,
-        type: 'response', // 消息类型
-        content: '',
-        content1: '',
-        Origintype: '',
-        timestamp: Date.now(), // 时间戳用来排序
-      };
-
-      // 将新消息添加到消息列表
-      messageList.value.push(newMessage);
-
-      // 读取流式数据
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) {
-          break;
-        }
 
-        // 将流数据转换为字符串
-        const chunk = new TextDecoder().decode(value);
-
-        // 使用正则表达式匹配完整的 JSON 对象
-        const jsonRegex = /{.*?}/g;
-        const matches = chunk.match(jsonRegex);
-        if (matches) {
-          matches.forEach((match) => {
-            try {
-              const data = JSON.parse(match);
-              if (data.type === 'thinking') {
-                // 找到当前消息对象并更新 content
-                const targetMessage = messageList.value.find((msg) => msg.id === newMessage.id);
-                if (targetMessage) {
-                  targetMessage.content += data.content; // 追加内容
-                  targetMessage.Origintype = data.type;
-                  scrollToBottom();
-                }
-              }
-              if (data.type === 'text') {
-                // 找到当前消息对象并更新 content
-                const targetMessage = messageList.value.find((msg) => msg.id === newMessage.id);
-                if (targetMessage) {
-                  targetMessage.content1 += data.content; // 追加内容
-                  targetMessage.Origintype1 = data.type;
-                  scrollToBottom();
-                }
-              }
-            } catch (error) {
-              console.error('Failed to parse JSON:', error);
-            }
-          });
-        }
-      }
-    } catch (error) {
-      // 请求失败时设置系统消息
-      if (!response || !response.ok) {
-        systemMessage.value = '服务器异常';
-        messageList.value.push({
-          id: `system_${Date.now()}`,
-          type: 'system',
-          content: systemMessage.value,
-          Origintype: 'text',
-          timestamp: Date.now(),
-        });
-        console.error('请求失败:', error);
-      }
-    } finally {
-      spinning.value = false; // 停止加载
-    }
-  };
-  //创建标题
-  async function createSessionTitle({ session_id, title }) {
-    const params = {
-      chat_session_id: session_id,
-      prompt: title,
-    };
-    let response = await fetch('http://182.92.126.35:6005/sessions/title', {
-      method: 'post',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(params),
-    });
-    const data = await response.json();
-  }
-  //获取会话历史
-  async function sessionsHistoryList() {
-    const params = {
-      user_id: userId,
-    };
-    let response = await fetch(`http://182.92.126.35:6005/sessions`, {
-      method: 'post',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(params),
-    });
-    const data = await response.json();
-    historySessions.value = data.chat_sessions;
-  }
   //获取具体会话记录
-  async function sessionsHistory(id: string) {
-    let response = await fetch(`http://182.92.126.35:6005/sessions/history_chat/?chat_session_id=${id}`, {
-      method: 'get',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
-    const data = await response.json();
-    if (data.chat_messages.length > 0) {
-      messageList.value = [];
-      data.chat_messages.forEach((item: any) => {
-        // role== user 用户提问
-        if (item.role === 'user') {
-          messageList.value.push({
-            id: `user_${Date.now()}`,
-            type: 'user',
-            content: item.content,
-            timestamp: Date.now(),
-          });
-        } else if (item.role === 'assistant') {
-          // role== assistant 机器回答
-          if (item.thinking_enabled) {
-            messageList.value.push({
-              id: `system_${Date.now()}_thinking`,
-              type: 'system',
-              content: item.thinking_content,
-              Origintype: 'thinking',
-              timestamp: Date.now(),
-            });
-            messageList.value.push({
-              id: `system_${Date.now()}_text`,
-              type: 'system',
-              content1: item.content,
-              Origintype1: 'text',
-              timestamp: Date.now(),
-            });
-          } else {
-            messageList.value.push({
-              id: `system_${Date.now()}`,
-              type: 'system',
-              content: item.content,
-              timestamp: Date.now(),
-            });
-          }
-        }
-      });
-    }
+  function sessionsHistory(id: string) {
+    store.getSessionHistoryByID(id);
   }
   //格式化消息
   function formatMessage(text: string) {
@@ -507,15 +218,10 @@
       .replace(/`([^`]+)`/g, '<code>$1</code>');
     return formatted;
   }
-  const emit = defineEmits(['update:modelValue']);
-
-  const close = () => {
-    emit('update:modelValue', false);
-  };
 
   // 初始化按钮定位
   onMounted(() => {
-    sessionsHistoryList();
+    store.getSessionHistory();
     openMenu();
   });
 </script>

src/store/modules/AIChat.ts

@@ -0,0 +1,255 @@
+import { defineStore } from 'pinia';
+import { useUserStore } from './user';
+
+export const useAIChat = defineStore({
+  id: 'ai-chat',
+  state: (): {
+    /** 会话历史 */
+    sessionHistory: {
+      id: string;
+      user_id: string;
+      agent: string;
+      title: string;
+      title_type: string;
+      version: number;
+      current_message_id: number;
+      inserted_at: string;
+      updated_at: string;
+    }[];
+    /** 消息历史 */
+    messageHistory: {
+      id: string; // 唯一标识（可用时间戳生成）
+      type: 'user' | 'system' | 'response';
+      content: string;
+      /** 深度思考时的文本 */
+      contentR1: string;
+      timestamp: number; // 排序依据
+    }[];
+    /** 当前会话ID */
+    currentSessionID: string;
+    /** 当前会话是否有流正在传输 */
+    streaming: boolean;
+    /** 当前会话是否启用 deepseekR1 模型 */
+    deepseekR1Enable: boolean;
+    /** 当前用户ID */
+    userID: string;
+  } => {
+    const userid = useUserStore().getUserInfo.id as string;
+    return {
+      sessionHistory: [],
+      messageHistory: [],
+      currentSessionID: '',
+      streaming: false,
+      deepseekR1Enable: false,
+      userID: userid,
+    };
+  },
+  getters: {
+    getMessageHistory: (state) => {
+      return state.messageHistory.sort((a, b) => a.timestamp - b.timestamp);
+    },
+  },
+  actions: {
+    /** 创建新会话 */
+    async createSession() {
+      const response = await fetch('http://182.92.126.35:6005/sessions/create', {
+        method: 'post',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          user_id: this.userID,
+        }),
+      });
+      const data = await response.json();
+      this.currentSessionID = data.id;
+      this.messageHistory = [];
+    },
+    /** 根据当前会话，创建聊天流，流里的数据将会更新到消息历史中 */
+    async createStream(question: string, onUpdate?: any) {
+      this.streaming = true;
+      this.messageHistory.push({
+        id: `user_${Date.now()}`,
+        type: 'user',
+        content: question,
+        contentR1: '',
+        timestamp: Date.now(),
+      });
+
+      try {
+        // 发送 POST 请求
+        const response = await fetch('http://182.92.126.35:6005/chat_stream', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            chat_session_id: this.currentSessionID,
+            prompt: question,
+            ref_file_ids: [],
+            thinking_enabled: this.deepseekR1Enable,
+          }),
+        });
+
+        // 检查响应是否成功
+        if (!response.ok || !response.body) {
+          throw new Error('Network response was not ok');
+        }
+
+        // 获取可读流
+        const reader = response.body.getReader();
+
+        // 创建一条新的消息对象
+        const newMessage = {
+          id: `response_${Date.now()}`,
+          type: 'response' as any,
+          content: '',
+          contentR1: '',
+          timestamp: Date.now(),
+        };
+
+        // 将新消息添加到消息列表
+        this.messageHistory.push(newMessage);
+
+        // 读取流式数据
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) {
+            break;
+          }
+
+          // 将流数据转换为字符串
+          const chunk = new TextDecoder().decode(value);
+
+          // 使用正则表达式匹配完整的 JSON 对象
+          const jsonRegex = /{.*?}/g;
+          const matches = chunk.match(jsonRegex);
+
+          if (!matches) continue;
+          matches.forEach((match) => {
+            const data = JSON.parse(match);
+            // 找到当前消息对象并更新 content
+            const targetMessage = this.messageHistory.find((msg) => msg.id === newMessage.id);
+            if (!targetMessage) return;
+            if (data.type === 'text') {
+              targetMessage.content += data.content; // 追加内容
+            }
+            if (data.type === 'thinking') {
+              targetMessage.contentR1 += data.content;
+            }
+            if (typeof onUpdate === 'function') {
+              onUpdate(value);
+            }
+          });
+        }
+      } catch (error) {
+        // 请求失败时设置系统消息
+        this.messageHistory.push({
+          id: `system_${Date.now()}`,
+          type: 'system',
+          content: '系统异常，请稍后再试',
+          contentR1: '',
+          timestamp: Date.now(),
+        });
+      } finally {
+        this.streaming = false;
+      }
+    },
+    /** 创建会话的标题 */
+    async createSessionTitle(title: string) {
+      await fetch('http://182.92.126.35:6005/sessions/title', {
+        method: 'post',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          chat_session_id: this.currentSessionID,
+          prompt: title,
+        }),
+      });
+    },
+    /** 修改会话的标题 */
+    async changeSessionTitle(title: string, id: string) {
+      try {
+        const response = await fetch('http://182.92.126.35:6005/sessions/change_title', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            chat_session_id: id,
+            new_title: title,
+          }),
+        });
+        if (!response.ok) {
+          throw new Error('Network response was not ok');
+        }
+        this.sessionHistory.forEach((session) => {
+          if (session.id === id) {
+            session.title = title;
+          }
+        });
+      } catch (error) {
+        console.error('保存失败:', error);
+      }
+    },
+    /** 获取会话历史 */
+    async getSessionHistory() {
+      const response = await fetch(`http://182.92.126.35:6005/sessions`, {
+        method: 'post',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          user_id: this.userID,
+        }),
+      });
+      const data = await response.json();
+      this.sessionHistory = data.chat_sessions;
+    },
+    /** 获取会话历史 */
+    async getSessionHistoryByID(id: string) {
+      const response = await fetch(`http://182.92.126.35:6005/sessions/history_chat/?chat_session_id=${id}`, {
+        method: 'get',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+      const data = await response.json();
+      if (data.chat_messages.length === 0) return;
+      this.currentSessionID = id;
+      this.messageHistory = data.chat_messages.map((item: any) => {
+        if (item.role === 'user') {
+          // role== user 用户提问
+          return {
+            id: `user_${Date.now()}`,
+            type: 'user',
+            content: item.content,
+            contentR1: '',
+            timestamp: Date.now(),
+          };
+        } else {
+          // role== assistant 机器回答
+          return {
+            id: `system_${Date.now()}`,
+            type: 'system',
+            content: item.content,
+            contentR1: item.thinking_content,
+            timestamp: Date.now(),
+          };
+        }
+      });
+    },
+    /** 发出问题 */
+    async sendQuestion(question: string, onUpdate?: any) {
+      if (this.currentSessionID === '') {
+        await this.createSession();
+        this.createSessionTitle(question);
+        this.createStream(question, onUpdate);
+      } else {
+        this.createSessionTitle(question);
+        this.createStream(question, onUpdate);
+      }
+    },
+  },
+});