ai对话

src/components/AIDialog/index.vue

@@ -11,7 +11,7 @@
 
     <!-- 悬浮对话框：固定在右下角，可关闭 -->
     <transition name="fade">
-      <div v-if="showPanel" class="ai-dialog-panel">
+      <div v-if="showPanel" class="ai-dialog-panel" :style="fullStyle">
         <div class="ai-dialog-header">
           <h3 style="margin: 0;display: flex;align-items: center;gap: 8px;">
             <img src="./icons/jqr.svg" style="width: 30px; height: 30px;" />
@@ -19,8 +19,8 @@
           </h3>
           <div class="header-icons" style="display:flex;gap:20px;align-items:center;">
             <img src="./icons/lsjl.svg" />
-            <img src="./icons/xf.svg" />
-            <img src="./icons/qp.svg" />
+            <img src="./icons/xf.svg" @click="togglePanel" />
+            <img src="./icons/qp.svg" @click="toggleFullscreen" />
             <img src="./icons/sz.svg" />
             <img src="./icons/grxx.svg" />
           </div>
@@ -48,12 +48,12 @@
               <p>服务</p>
             </div>
           </div>
-          <el-card :body-style="{ padding: '12px' }" :style="{ height: '100%', borderRadius:'0', boxShadow:'none' }" shadow="never">
+          <el-card :body-style="{ padding: '12px' }" :style="{ height: '100%',width:'100%', borderRadius:'0', boxShadow:'none' }" shadow="never">
             <div class="message-area" ref="messageArea">
               <div v-if="messages.length === 0" class="welcome-msg">
                 <div>
-                  <img src="./icons/jqr.svg" style="width: 40px; height: 40px;margin-bottom:10px;" />
-                  <h3>你好！我是你的<span style="color: #108ee9;">AI助手小班</span></h3>
+                  <img src="./icons/jqr.svg" style="width: 50px; height: 50px;margin-bottom:10px;" />
+                  <h1>你好！我是你的<span style="color: #108ee9;">AI助手小班</span></h1>
                 </div>
               </div>
               <div v-else v-for="(msg, idx) in messages" :key="idx" :class="['msg-item', msg.role]">
@@ -72,7 +72,7 @@
                     :data="msg.table.dataSource"
                     size="mini"
                     border
-                    style="background-color: #fff;border-radius:0;width:600px"
+                    style="background-color: #fff;border-radius:0;"
                   >
                     <el-table-column
                       v-for="(col, cIdx) in (msg.table.columns || [])"
@@ -138,7 +138,8 @@ export default {
       scenarios: demoScenarios,
       messages: sampleMessages.slice(),
       inputValue: '',
-      sending: false
+      sending: false,
+      fullStyle:{}
     }
   },
   methods: {
@@ -238,6 +239,16 @@ export default {
         this.scrollToBottom()
       })
     },
+    toggleFullscreen () {
+      if (this.fullStyle.width === '90vw') {
+        this.fullStyle = {}
+      } else {
+        this.fullStyle = {
+          width: '90vw',
+          height: '100vh'
+        } 
+      }
+    },
     scrollToBottom () {
       const wrap = this.$refs && this.$refs.messageArea
       if (wrap && wrap.scrollHeight != null) {
@@ -258,13 +269,12 @@ export default {
 .ai-dialog-panel {
   font-size:12px;
   position: fixed;
-  right: 24px;
-  bottom: 54px;
+  right: 0px;
+  top: 0;
   width: 780px;
-  height: 90vh;
+  height: 100vh;
   z-index: 999999;
   background: #F0F4FA;
-  border-radius: 8px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   overflow: hidden;
 }
@@ -304,7 +314,7 @@ export default {
   background: #EEF3F9;
   padding: 8px 10px;
   border-radius: 8px;
-  
+  max-width: 80%;
 }
 .bubble-ai{
   position: relative;
@@ -389,7 +399,7 @@ export default {
   align-items: center;
   justify-content: center;
   position: fixed;
-  right: 24px;
+  right: 84px;
   bottom: 124px;
   border-radius: 50%;
   z-index: 99999;