首页会话-编辑标题功能实现

src/layouts/default/sider/bottomSider2.vue

@@ -39,11 +39,11 @@
               }"
             ></span>
             <span v-if="!isFold" class="btn-text">历史对话</span>
-            <a-list style="width: 110px" :split="false" :data-source="historySessions" class="custom-list">
+            <!-- <a-list style="width: 90px" :split="false" :data-source="historySessions" class="custom-list">
               <template #renderItem="{ item }">
                 <a-list-item
                   :style="{
-                    padding: '5px 0 0 10px',
+                    padding: '8px 10px 0 8px',
                     color: '#5e7081',
                     fontSize: '12px',
                   }"
@@ -52,6 +52,30 @@
                   {{ item.title ? item.title : '新会话' }}
                 </a-list-item>
               </template>
+            </a-list> -->
+            <a-list style="width: 110px" :split="false" :data-source="historySessions" :scroll="200" class="custom-list">
+              <template #renderItem="{ item }">
+                <a-list-item
+                  :style="{
+                    padding: '8px 10px 0 8px',
+                    color: '#5e7081',
+                    fontSize: '12px',
+                    position: 'relative', // 新增定位
+                  }"
+                  @click="sessionsHistory(item.id)"
+                >
+                  <!-- 新增flex布局容器 -->
+                  <div style="display: flex; justify-content: space-between; width: 100%">
+                    <div v-if="editingId !== item.id" class="text-container">
+                      {{ item.title || '新会话' }}
+                      <edit-outlined class="edit-icon" @click="startEditing(item)" />
+                    </div>
+
+                    <!-- 输入框 -->
+                    <a-input v-else v-model:value="editText" v-focus @blur="handleSave(item)" @keyup.enter="handleSave(item)" class="edit-input" />
+                  </div>
+                </a-list-item>
+              </template>
             </a-list>
           </div>
           <div
@@ -110,6 +134,7 @@
 <script lang="ts" setup>
 import { ref, onMounted, unref, nextTick, computed } from 'vue';
 import { useUserStore } from '/@/store/modules/user';
+import { EditOutlined } from '@ant-design/icons-vue';
 // 响应式变量声明
 const dialogVisible = ref(false);
 const isFold = ref(false); // 是否折叠
@@ -121,6 +146,12 @@ 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('');
+interface ListItem {
+  id: number;
+  title?: string;
+}
 let userId = unref(userStore.getUserInfo).id;
 // const userId = ref(0);
 type MessageItem = {
@@ -133,7 +164,9 @@ 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 openMenu = () => {
   dialogVisible.value = !dialogVisible.value;
   if (dialogVisible.value) {
@@ -164,6 +197,35 @@ async function addNew() {
   session_id.value = data.id;
   messageList.value = [];
 }
+//编辑标题
+const startEditing = (item: ListItem) => {
+  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 === '') {
@@ -250,27 +312,22 @@ async function sendMessage1() {
     let response = await fetch('http://182.92.126.35:6005/chat_stream', {
       method: 'POST',
       headers: {
-        'Content-Type': 'text/event-stream; charset=utf-8',
+        '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; // 获取助手回复
-    systemMessage.value = assistantReply;
-    // 添加系统回答
+  } catch (error) {
+    // 请求失败时设置系统消息为"服务器异常"
+    systemMessage.value = '服务器异常';
     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; // 无论请求成功与否，都停止加载指示器
@@ -293,11 +350,15 @@ async function createSessionTitle({ session_id, title }) {
 }
 //获取会话历史
 async function sessionsHistoryList() {
-  let response = await fetch(`http://182.92.126.35:6005/sessions/?user_id=${userId}`, {
-    method: 'get',
+  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;