1.0最初版本

src/router/index.js

@@ -5,6 +5,7 @@ import BasicInfo from '../views/BasicInfo.vue';
 import HealthBehaviorInfo from '../views/HealthBehaviorInfo.vue';
 import RegularCheckupInfo from "../views/RegularCheckupInfo.vue";
 import Main from "../views/Main.vue";
+import MedicalWisdom from "../views/MedicalWisdom.vue";
 
 const routes = [
     {
@@ -36,6 +37,11 @@ const routes = [
                 path: 'health-behavior-info',
                 name: 'HealthBehaviorInfo',
                 component: HealthBehaviorInfo
+            },
+            {
+                path: 'medical-wisdom',
+                name: 'MedicalWisdom',
+                component: MedicalWisdom
             }
         ]
     }

src/views/Home.vue

@@ -69,9 +69,9 @@
                           <template #title>查看对话记录</template>
                         </el-menu-item>
 
-                        <el-menu-item index="4" disabled>
-                          <el-icon><setting /></el-icon>
-                          <template #title>推荐方案生成</template>
+                        <el-menu-item index="/home/medical-wisdom" >
+                          <el-icon><setting/></el-icon>
+                          <template #title>医慧</template>
                         </el-menu-item>
 
                         <el-menu-item class="toggle-button" @click="toggleCollapse">

src/views/MedicalWisdom.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="chat-dialog">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>对话界面</span>
+      </div>
+      <div class="chat-content">
+        <div v-for="message in messages" :key="message.content" class="message-item" :class="{'user-message': message.sender === 'user', 'ai-message': message.sender === 'ai'}">
+          <strong>{{ message.sender }}:</strong> {{ message.content }}
+        </div>
+      </div>
+      <div class="chat-input">
+        <el-input
+            v-model="inputMessage"
+            placeholder="请输入消息"
+            @keyup.enter="handleSendMessage"
+        />
+        <el-button @click="handleSendMessage">发送</el-button>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import axios from 'axios';
+
+const inputMessage = ref('');
+const messages = ref([]);
+
+const callBackend = async (message) => {
+  try {
+    const response = await axios.post('http://10.138.4.249:8080/ai/main', {
+      message: message
+    });
+    return response.data;
+  } catch (error) {
+    console.error('Error calling backend:', error);
+    if (error.response) {
+      console.error('Backend responded with status:', error.response.status);
+      console.error('Backend responded with data:', error.response.data);
+    } else if (error.request) {
+      console.error('No response received:', error.request);
+    } else {
+      console.error('Error setting up the request:', error.message);
+    }
+    throw error;
+  }
+};
+const handleSendMessage = () => {
+  sendMessage();
+};
+const sendMessage = async () => {
+  if (inputMessage.value.trim() === '') {
+    return;
+  }
+  messages.value.push({ sender: 'user', content: inputMessage.value });
+  inputMessage.value = '';
+
+  try {
+    const response = await callBackend(inputMessage.value);
+    console.log('响应内容:', response); // 打印响应内容
+
+    // 确保后端返回了正确的数据结构
+    if (response.status === 'success' && response.data) {
+      messages.value.push({ sender: 'ai', content: response.data.generation });
+    } else {
+      // 如果后端返回的不是成功状态或者缺少数据，可以添加错误处理
+      messages.value.push({ sender: 'ai', content: '发生错误，请重试' });
+    }
+  } catch (error) {
+    // 捕获网络错误或其他异常
+    console.error('请求失败:', error); // 打印错误信息
+    messages.value.push({ sender: 'ai', content: '网络错误，请检查连接' });
+  }
+};
+
+</script>
+
+<style scoped>
+.chat-dialog {
+  width: 100%;
+  max-width: 600px;
+  margin: 20px auto;
+}
+.chat-content {
+  height: 400px;
+  overflow-y: auto;
+}
+.message-item {
+  margin: 10px 0;
+}
+.user-message {
+  text-align: right;
+  color: blue;
+}
+.ai-message {
+  text-align: left;
+  color: green;
+}
+.chat-input {
+  display: flex;
+  margin-top: 10px;
+}
+</style>