优化对话

src/views/dataChart/privateChart/privateChartEditParams.vue

@@ -12,18 +12,26 @@
           <div class="box-msg" ref="container">
             <div v-for="(item, i) in items" :key="i" :class="{ active: item.type === 1 }" class="box-msg-items d-flex mb-3">
               <div class="box-msg-items-header py-3" :class="item.type === 1 ? 'ml-3' : 'mr-3'">
-                <el-image style="width: 30px; height: 30px;" :src="require(`@/assets/image/${item.type === 1 ? 'robot' : 'robot'}.jpg`)" fit="cover"></el-image>
+                <el-image
+                  style="width: 30px; height: 30px;"
+                  :src="require(`@/assets/image/${item.type === 1 ? 'robot' : 'robot'}.jpg`)"
+                  fit="cover"
+                >
+                </el-image>
               </div>
               <div class="box-msg-items-item">
                 <div class="box-msg-items-item-title">
                   {{ item.type === 1 ? '我' : '图表助手' }}
                 </div>
-                <div v-if="item.type === 1" class="box-msg-items-item-content">
+                <!-- <div v-if="item.type === 1" class="box-msg-items-item-content">
                   {{ item.content }}
-                </div>
-                <div v-if="item.type === 2" class="box-msg-items-item-content">
-                  <template v-if="Object.keys(item.content).length === 0">
-                    <div style="white-space: nowrap;">
+                </div> -->
+                <div class="box-msg-items-item-content">
+                  <template v-if="typeof item.content === 'string'">
+                    {{ item.content }}
+                  </template>
+                  <template v-else-if="Object.keys(item.content).length === 0">
+                    <div>
                       正在思考中...
                     </div>
                   </template>
@@ -58,7 +66,7 @@
           </div>
           <div class="box-input">
             <el-input placeholder="请输入内容" v-model="inputTxt" @keydown.enter.native="onSubmit">
-              <m-button slot="append" icon="el-icon-s-promotion" @click="onSubmit"></m-button>
+              <m-button slot="append" icon="el-icon-s-promotion" @click="onSubmit" :loading="!isAlready"></m-button>
             </el-input>
           </div>
         </div>
@@ -83,8 +91,12 @@ export default {
   data () {
     return {
       activeName: 'third',
+      isAlready: true,
       inputTxt: '',
-      items: []
+      items: [{
+        type: 2,
+        content: '我是您的AI取数助手，请问有什么可以帮到您'
+      }]
     }
   },
   methods: {
@@ -113,9 +125,10 @@ export default {
       ]
     },
     async onSubmit () {
-      if (!this.inputTxt) {
+      if (!this.inputTxt || !this.isAlready) {
         return
       }
+      this.isAlready = false
       this.items.push({
         type: 1,
         content: this.inputTxt
@@ -147,6 +160,7 @@ export default {
         this.$message.error(error)
       } finally {
         this.inputTxt = null
+        this.isAlready = true
       }
     },
     // 数据读取
@@ -193,17 +207,23 @@ export default {
         .box-msg-items-item {
           order: 1;
           max-width: calc(100% - 150px);
+          display: flex;
+          flex-direction: column;
+          align-items: flex-end;
           &-title {
             text-align: right;
           }
           &-content {
-            background-color: lighten($theme-color, 42%);
-            border-radius: 10px;
             padding: 5px 10px;
+            background-color: lighten($theme-color, 42%); // #e6f7ff;
+            border-radius: 10px;
           }
         }
       }
       &-item {
+        // flex: 1;
+        min-width: 0;
+        flex: 1;
         &-title {
           font-size: 14px;
           font-weight: bold;
@@ -213,6 +233,7 @@ export default {
           font-size: 14px;
           color: #999;
           max-width: 90%;
+          // display: inline-block;
         }
       }
     }