[feat][ai问答][ai聊天界面]

src/views/xjc-integratedmachine/common/ai/chat.vue

@@ -15,12 +15,17 @@
         <div class="main-content">
             <div class="chat-container">
                 <div class="message-list">
-                    <div v-for="item in chatRecordList" :key="item.id" :class="item.isUser? 'every-message user-message' : 'message bot-message' ">
+                    <div v-for="item in chatRecordList" :key="item.id">
                         <!-- 会话图标 -->
-                        <div :class="item.isUser == 1? 'user-image' : 'system-image' "></div>
-                        <span style="display: flex">
-                            <el-text v-html="item.content"></el-text>
-                        </span>
+                        <!--<div :class="item.isUser == 1? 'user-image' : 'system-image' "></div>-->
+                        <div v-if="item.isUser == 1" class="user-message">
+                            <img src="@/assets/images/common/ai/user.png" alt="icon"/>
+                            <span class="user-message-content">{{item.content}}</span>
+                        </div>
+                        <div v-else class="message bot-message">
+                            <img src="@/assets/images/common/ai/system.png" alt="icon"/>
+                            <div class="bot-message-content" v-html="item.content"></div>
+                        </div>
                     </div>
                 </div>
                 <div class="message-box">
@@ -262,21 +267,36 @@
         padding: 10px;
         border-radius: 4px;
         display: flex;
+        align-items: center;
         width: 40vw;
         /* align-items: center; */
     }
 
     .user-message {
-        max-width: 70%;
-        background-color: #e1f5fe;
+        display: flex;
         align-self: flex-end;
         flex-direction: row-reverse;
+        align-items: center;
+        margin: 4px;
+    }
+    .user-message-content {
+        background-color: #e1f5fe;
+        padding: 10px;
+        border-radius: 4px;
     }
 
     .bot-message {
-        max-width: 100%;
-        background-color: #f1f8e9;
+        max-width: 70%;
+        display: flex;
         align-self: flex-start;
+        align-items: flex-start;
+        margin: 4px;
+    }
+
+    .bot-message-content {
+        background-color: #f1f8e9;
+        padding: 10px;
+        border-radius: 4px;
     }
 
     .system-image {

vite.config.js

@@ -46,8 +46,8 @@ export default defineConfig(({ mode, command }) => {
       proxy: {
         // https://cn.vitejs.dev/config/#server-proxy
         '/dev-api': {
-          // target: 'http://localhost:8080',
-          target: 'http://192.168.3.100:8080',
+          target: 'http://localhost:8080',
+          // target: 'http://192.168.3.100:8080',//临时11
           changeOrigin: true,
           rewrite: (p) => p.replace(/^\/dev-api/, '')
         }