首页会话功能修改

src/layouts/default/sider/bottomSideder2.vue → src/layouts/default/sider/bottomSider2.vue

@@ -13,7 +13,6 @@
             backgroundColor: isFold ? '' : '#2cb6ff',
             width: isFold ? '20px' : 'auto',
           }"
-          @click="fold"
         >
           <span
             class="btn-text-bg"
@@ -21,7 +20,7 @@
               backgroundImage: `url(${!isFold ? '/src/assets/images/vent/home/addB.svg' : ''})`,
             }"
           ></span>
-          <span v-if="!isFold" class="btn-text">添加新对话</span>
+          <span v-if="!isFold" class="btn-text" @click="addNew">添加新对话</span>
         </div>
         <div class="divider0"></div>
         <div
@@ -61,17 +60,28 @@
         <div class="input-content">
           <!-- 对话区域 -->
           <div class="dialog-area">
-            <div class="ask-message">
-              <span>提问提问提问</span>
-            </div>
-            <div class="answer" style="margin-top: 65px">
-              <div class="answerIcon"></div>
-              <div class="answer-message">
-                <span>回答回答回答回答回答</span>
+            <div v-for="message in sortedMessages" :key="message.id" :class="['message-item', message.type]">
+              <!-- 用户提问样式 -->
+              <div v-if="message.type === 'user'" class="ask-message">
+                <span>{{ message.content }}</span>
+              </div>
+
+              <!-- 系统回答样式 -->
+              <div v-else class="system-message">
+                <div class="answerIcon"></div>
+                <div class="answer-message">
+                  <div>
+                    <span>{{ message.content }}</span>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
           <!-- 文本输入区域 -->
+          <div v-if="spinning" class="thinking-area">
+            <span style="color: #fff">思考中···</span>
+            <a-spin :spinning="spinning"></a-spin>
+          </div>
           <div class="input-area">
             <textarea v-model="inputText" placeholder="请输入你的问题"> </textarea>
             <!-- 底部操作栏 -->
@@ -83,7 +93,7 @@
                 <div class="send-img" />
               </label>
               <!-- 发送按钮 -->
-              <div class="send-btn" @keydown.enter.prevent="handleSend"></div>
+              <div class="send-btn" @click="handleSend"></div>
             </div>
           </div>
         </div>
@@ -93,29 +103,115 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, nextTick } from 'vue';
-
+import { ref, onMounted, nextTick, computed } from 'vue';
 // 响应式变量声明
 const dialogVisible = ref(false);
 const isFold = ref(false); // 是否折叠
 const inputText = ref(''); // 输入框内容
-const messages = ref([]); // 消息列表
+// const messages = ref([]); // 消息列表
+const spinning = ref(false); // 加载状态
+const systemMessage = ref(''); // 系统返回信息
+const session_id = ref(''); // 会话id
+const hasCreated = ref(false); // 标志位，防止重复调用create接口
+
+type MessageItem = {
+  id: string; // 唯一标识（可用时间戳生成）
+  type: 'user' | 'system';
+  content: string;
+  timestamp: number; // 排序依据
+};
+
+const messageList = ref<MessageItem[]>([]);
+const sortedMessages = computed(() => {
+  return messageList.value.sort((a, b) => a.timestamp - b.timestamp);
+});
+// const scrollToBottom = () => {
+//   nextTick(() => {
+//     const container = document.querySelector('.dialog-area');
+//     container.scrollTop = container.scrollHeight;
+//   });
+// };
 const openMenu = () => {
   dialogVisible.value = !dialogVisible.value;
+  if (dialogVisible.value) {
+    hasCreated.value = true;
+    addNew();
+  }
 };
 const fold = () => {
   isFold.value = !isFold.value;
 };
-const addNew = () => {
-  console.log('addNew');
-};
-const handleSend = () => {
-  if (inputText.value) {
-    messages.value.push({ text: inputText.value });
-    inputText.value = '';
-  }
-};
-
+async function addNew() {
+  let response = await fetch('http://182.92.126.35:6005/sessions/create', {
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  const data = await response.json();
+  session_id.value = data.session_id;
+}
+//获取消息列表
+async function handleSend() {
+  spinning.value = true;
+  // 添加用户消息
+  messageList.value.push({
+    id: `user_${Date.now()}`,
+    type: 'user',
+    content: inputText.value,
+    timestamp: Date.now(),
+  });
+  // 调用接口获取答案
+  // const answer = await fetchAnswerFromAPI(question);
+  const params = {
+    chat_session_id: session_id.value,
+    prompt: inputText.value,
+    ref_file_ids: [],
+    thinking_enabled: false,
+  };
+  inputText.value = ''; // 清空输入框
+  //将用户输入的内容发送到后端
+  let response = await fetch('http://182.92.126.35:6005/chat', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(params),
+  });
+  const data = await response.json();
+  const assistantReply = data.reply; // 获取助手回复
+  systemMessage.value = assistantReply;
+  // 添加系统回答
+  messageList.value.push({
+    id: `system_${Date.now()}`,
+    type: 'system',
+    content: systemMessage.value,
+    timestamp: Date.now(),
+  });
+  spinning.value = false;
+}
+// async function handleSend() {
+//   spinning.value = true;
+//   userMessage.value.push({
+//     msg: inputText.value, // 消息内容
+//   });
+//   inputText.value = ''; // 清空输入框
+//   const params = {
+//     messages: [{ role: 'user', content: inputText.value }],
+//   };
+//   //将用户输入的内容发送到后端
+//   let response = await fetch('http://182.92.126.35:6005/chat', {
+//     method: 'POST',
+//     headers: {
+//       'Content-Type': 'application/json',
+//     },
+//     body: JSON.stringify(params),
+//   });
+//   const data = await response.json();
+//   spinning.value = false;
+//   const assistantReply = data.reply; // 获取助手回复
+//   systemMessage.value = assistantReply;
+// }
 // 初始化按钮定位
 onMounted(() => {});
 </script>
@@ -177,6 +273,7 @@ onMounted(() => {});
   left: 10px;
   align-items: center;
   border-radius: 3px;
+  cursor: pointer;
 }
 .btn-text-bg {
   width: 14px;
@@ -232,6 +329,7 @@ onMounted(() => {});
   padding: 2px;
   right: 10px;
   bottom: 10px;
+  cursor: pointer;
 }
 
 .right-side {
@@ -247,6 +345,7 @@ onMounted(() => {});
   padding: 20px; /* 统一内边距 */
 }
 .ask-message {
+  align-self: flex-end;
   float: right;
   max-width: 70%;
   padding: 10px;
@@ -254,6 +353,7 @@ onMounted(() => {});
   border-radius: 5px;
   color: #fff;
   background: #0c2842;
+  align-self: flex-end; /* 右侧对齐‌:ml-citation{ref="2" data="citationList"} */
 }
 .answer {
   display: flex;
@@ -275,12 +375,45 @@ onMounted(() => {});
   color: #fff;
   background: #0c2842;
 }
+
+/** 系统返回信息**/
+.system-message {
+  display: flex;
+  flex-direction: row;
+  align-self: flex-start;
+  max-width: 90%;
+  padding: 12px;
+  display: flex;
+}
+.answerIcon {
+  margin-top: 10px;
+  width: 35px;
+  height: 35px;
+  background-image: url('/@/assets/images/vent/home/answerIcon.svg');
+  background-size: 100% 100%;
+}
+.answer-message {
+  float: left;
+  max-width: 80%;
+  padding: 10px;
+  margin: 10px;
+  border-radius: 5px;
+  color: #fff;
+  background: #0c2842;
+}
 .dialog-area {
   flex: 1; /* 占据剩余空间 */
-  gap: 10px;
+  gap: 50px; /* 消息块间隔统一控制 */
   overflow-y: auto; /* 垂直滚动条 */
   margin-bottom: 10px;
 }
+.loading-wrapper,
+.content-wrapper {
+  min-height: 40px; /* 避免高度塌陷 */
+}
+.message-item.user {
+  margin-bottom: 30px;
+}
 .input-area {
   background-color: #043256 !important;
   display: flex;

src/layouts/default/sider/index.vue

@@ -14,7 +14,7 @@
   <BottomSider v-else-if="getIsBottomMenu" />
   <Sider v-else /> -->
   <BottomSider v-if="!noSiderLink.includes(routePath)" />
-  <BottomSider2 v-if="!noSiderLink.includes(routePath)" />
+  <bottomSider2 v-if="!noSiderLink.includes(routePath)" />
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
@@ -22,7 +22,7 @@ import { defineComponent } from 'vue';
 import Sider from './LayoutSider.vue';
 import MixSider from './MixSider.vue';
 import BottomSider from './bottomSideder.vue';
-import BottomSider2 from './bottomSideder2.vue';
+import bottomSider2 from './bottomSider2.vue';
 import { Drawer } from 'ant-design-vue';
 
 import { useAppInject } from '/@/hooks/web/useAppInject';
@@ -32,7 +32,7 @@ import { useRoute } from 'vue-router';
 import { noSiderLink } from '../layout.data';
 export default defineComponent({
   name: 'SiderWrapper',
-  components: { Sider, Drawer, MixSider, BottomSider, BottomSider2 },
+  components: { Sider, Drawer, MixSider, BottomSider, bottomSider2 },
   setup() {
     const route = useRoute();
     const { prefixCls } = useDesign('layout-sider-wrapper');