From 943cee36ec0b4add146bda6463831561cf72d0f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8B=BF=E5=A6=84?= <3124832605@qq.com> Date: Wed, 28 May 2025 19:44:13 +0800 Subject: [PATCH] =?UTF-8?q?ai=E7=95=8C=E9=9D=A2=E5=8F=AF=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Front/vue-unilife/src/views/AiManager.vue | 245 ++++++++++++++++++++-- 1 file changed, 225 insertions(+), 20 deletions(-) diff --git a/Front/vue-unilife/src/views/AiManager.vue b/Front/vue-unilife/src/views/AiManager.vue index 96979da..d0976de 100644 --- a/Front/vue-unilife/src/views/AiManager.vue +++ b/Front/vue-unilife/src/views/AiManager.vue @@ -9,32 +9,57 @@
+
-
机器人头像
我可以回答各种问题，欢迎提问
+ + +
@@ -58,6 +83,21 @@ id: number; // 唯一标识符 text: string; // 对话内容 } + +// 定义消息类型 +interface Message { + id: number; + text: string; + isUser: boolean; // true 表示用户消息，false 表示机器人消息 +} + +// 定义对话类型 +interface Conversation { + id: number; + title: string; // 对话的标题，可以是第一条用户消息的前20个字符 + messages: Message[]; // 存储对话中的所有消息 + timestamp: number; // 对话创建时间 +} // 历史对话列表 const historyItems = ref([ @@ -67,31 +107,116 @@ const historyItems = ref([ // 当前输入的消息 const message = ref(''); + +// 聊天内容列表 +const chatMessages = ref([]); // 发送消息 -const sendMessage = () => { +const sendMessage = async () => { const msg = message.value.trim(); - if (msg) { - const newItem: HistoryItem = { - id: Date.now(), // 使用时间戳作为唯一标识符 - text: msg, + if (!msg) return; + + // 如果没有当前对话，创建新对话 + if (!currentConversation.value) { + currentConversation.value = { + id: Date.now(), + title: msg.slice(0, 20) + (msg.length > 20 ? '...' : ''), + messages: [], + timestamp: Date.now() + }; + conversations.value.push(currentConversation.value); + } + + // 添加用户消息 + const userMessage: Message = { + id: Date.now(), + text: msg, + isUser: true + }; + currentConversation.value.messages.push(userMessage); + + // 清空输入框 + message.value = ''; + + // 模拟机器人回复 + try { + // TODO: 这里替换为实际的 AI 接口调用 + const botResponse = await mockBotResponse(msg); + const botMessage: Message = { + id: Date.now(), + text: botResponse, + isUser: false }; - historyItems.value.push(newItem); // 添加到历史对话列表 - message.value = ''; // 清空输入框 + currentConversation.value.messages.push(botMessage); + } catch (error) { + console.error('发送消息失败:', error); } }; - // 编辑历史对话 - const editItem = (item: HistoryItem) => { +// 编辑历史对话 +const editItem = (item: HistoryItem) => { const newText = prompt('编辑对话内容：', item.text); if (newText !== null) { item.text = newText.trim(); + const chatItem = chatMessages.value.find((chat) => chat.id === item.id); + if (chatItem) { + chatItem.text = newText.trim(); // 同步更新聊天内容 + } } }; // 删除历史对话 const deleteItem = (item: HistoryItem) => { historyItems.value = historyItems.value.filter((history) => history.id !== item.id); + chatMessages.value = chatMessages.value.filter((chat) => chat.id !== item.id); // 同步删除聊天内容 +}; + +// 定义对话列表 +const conversations = ref([]); + +// 当前选中的对话 +const currentConversation = ref(null); + +// 选择对话 +const selectConversation = (conversation: Conversation) => { + currentConversation.value = conversation; +}; + +// 删除对话 +const deleteConversation = (conversation: Conversation) => { + conversations.value = conversations.value.filter(c => c.id !== conversation.id); + if (currentConversation.value?.id === conversation.id) { + currentConversation.value = null; + } +}; + +// 创建新对话 +const createNewChat = () => { + const newConversation: Conversation = { + id: Date.now(), + title: '新对话', + messages: [], + timestamp: Date.now() + }; + conversations.value.push(newConversation); + currentConversation.value = newConversation; +}; + +// 编辑对话标题 +const editConversationTitle = (conversation: Conversation) => { + const newTitle = prompt('编辑对话标题：', conversation.title); + if (newTitle !== null && newTitle.trim() !== '') { + conversation.title = newTitle.trim(); + } +}; + +// 模拟机器人回复 +const mockBotResponse = async (msg: string): Promise => { + return new Promise(resolve => { + setTimeout(() => { + resolve(`这是对 "${msg}" 的回复`); + }, 1000); + }); }; @@ -194,6 +319,29 @@ const deleteItem = (item: HistoryItem) => { .action-btn:hover { color: #9c88ff; } + + .new-chat-btn { + width: 100%; + padding: 12px 16px; + background: linear-gradient(45deg, #9c88ff, #ff6b9d); + color: white; + border: none; + border-radius: 8px; + font-size: 18px; + cursor: pointer; + transition: transform 0.2s, box-shadow 0.2s; + text-align: center; + margin-top: 20px; + } + + .new-chat-btn:hover { + transform: translateY(-2px); + box-shadow: 0 4px 15px rgba(156, 136, 255, 0.3); + } + + .new-chat-btn:active { + transform: translateY(0); + } /* 聊天区域 */ .chat-area { @@ -214,10 +362,9 @@ const deleteItem = (item: HistoryItem) => { overflow-y: auto; display: flex; flex-direction: column; - justify-content: flex-start; /* 垂直方向上靠上 */ - align-items: flex-start; /* 水平方向上靠左 */ + gap: 16px; } - + .welcome-message { display: flex; align-items: center; @@ -226,6 +373,8 @@ const deleteItem = (item: HistoryItem) => { border-radius: 20px; padding: 16px 24px; box-shadow: 0 4px 20px rgba(156, 136, 255, 0.1); + max-width: 60%; + margin-bottom: 16px; } .bot-avatar { @@ -238,6 +387,7 @@ const deleteItem = (item: HistoryItem) => { justify-content: center; font-size: 18px; color: white; + margin-right: 16px; } .bot-avatar img { @@ -250,6 +400,62 @@ const deleteItem = (item: HistoryItem) => { font-size: 20px; color: #333; } + + .user-message { + display: flex; + align-items: center; + justify-content: flex-end; + background: rgba(255, 255, 255, 0.9); + border: 1px solid rgba(200, 180, 255, 0.3); + border-radius: 20px; + padding: 16px 24px; + box-shadow: 0 4px 20px rgba(156, 136, 255, 0.1); + max-width: 60%; + margin-bottom: 16px; + align-self: flex-end; + } + + .user-text { + font-size: 16px; + color: #333; + margin-right: 16px; + } + + .user-avatar { + width: 40px; + height: 40px; + background: transparent; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .user-avatar img { + width: 100%; + height: 100%; + object-fit: cover; + } + + .bot-message { + display: flex; + align-items: center; + background: rgba(255, 255, 255, 0.9); + border: 1px solid rgba(200, 180, 255, 0.3); + border-radius: 20px; + padding: 16px 24px; + box-shadow: 0 4px 20px rgba(156, 136, 255, 0.1); + max-width: 60%; + margin-bottom: 16px; + align-self: flex-start; + } + + .message-text { + font-size: 16px; + color: #333; + margin: 0 16px; + } /* 输入区域 */ .input-area { @@ -370,4 +576,3 @@ const deleteItem = (item: HistoryItem) => { background: rgba(156, 136, 255, 0.5); } - \ No newline at end of file