AI

src/views/dataChart/dataChartEdit.vue

@@ -10,37 +10,19 @@
         </div>
       </div>
     </div>
-    <div class="chart-content d-flex heightFull">
-      <div class="chart-content-show heightFull mr-3"></div>
-      <div class="chart-content-chat heightFull d-flex flex-column">
-        <div class="chart-content-chat-title mb-3">
-          <v-tabs>
-            <v-tab>AI 取数</v-tab>
-          </v-tabs>
-        </div>
-        <div class="chart-content-chat-box overflow-y-auto">
-          <div class="pa-3">
-            <p v-for="i in 100" :key="i">The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through.</p>
-          </div>
-        </div>
-        <div class="pa-3">
-          <v-textarea
-            outlined
-            rows="3"
-            hide-details
-            value="The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through."
-          ></v-textarea>
-        </div>
-      </div>
-    </div>
+    <DataChartEditChat></DataChartEditChat>
   </div>
 </template>
 
 <script>
 // 属性模块
 import * as Charts from './utils/options.js'
+import DataChartEditChat from './dataChartEditChat.vue'
 export default {
   name: 'dataChartEdit',
+  components: {
+    DataChartEditChat
+  },
   data () {
     return {
       Charts
@@ -79,22 +61,5 @@ export default {
       }
     }
   }
-  &-content {
-    width: 0;
-    flex: 1;
-    &-show {
-      width: 50%;
-      border: 1px solid #ccc;
-    }
-    &-chat {
-      width: 50%;
-      border: 1px solid #ccc;
-      &-box {
-        height: 0;
-        flex: 1;
-      }
-    }
-
-  }
 }
 </style>

src/views/dataChart/dataChartEditChat.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="chart-content d-flex heightFull">
+    <div class="chart-content-show heightFull mr-3"></div>
+    <div class="chart-content-chat heightFull d-flex flex-column">
+      <div class="chart-content-chat-title mb-3">
+        <v-tabs>
+          <v-tab>AI 取数</v-tab>
+        </v-tabs>
+      </div>
+      <div class="chart-content-chat-box overflow-y-auto">
+        <div class="pa-3">
+          <div
+            v-for="(item, index) in items"
+            :key="index"
+            :class="['d-flex', 'mb-3', item.type === 1 ? 'flex-row' : 'flex-row-reverse' ]"
+          >
+            <v-avatar color="indigo" size="36">
+              <span class="white--text">{{ item.type === 1 ? 'AI' : 'T' }}</span>
+            </v-avatar>
+            <div :class="[item.type === 1 ? 'ml-3' : 'mr-3 box-length-70']">
+              <div :class="`text-${item.type === 1 ? 'left' : 'right'}`">{{ item.user }}</div>
+              <div class="mt-2" :class="{ 'indigo lighten-5 pa-3 rounded': item.type !== 1 }">
+                {{ item.content }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="pa-3">
+        <div class="send d-flex align-center justify-center">
+          <div class="send-box">
+            <v-textarea
+              v-model="question"
+              class="send-box-area"
+              auto-grow
+              placeholder="请输入您想问的内容，按 Ctrl+Enter 换行"
+              outlined
+              hide-details
+              no-resize
+              rows="1"
+              @keydown.enter="handleKeyCode($event)"
+            >
+            </v-textarea>
+            <v-btn icon color="primary" class="btn" :disabled="!question" @click="handleSendMsg">
+              <v-icon>mdi-send</v-icon>
+            </v-btn>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'dataChartEditChat',
+  data () {
+    return {
+      question: '',
+      items: [
+        {
+          type: 1,
+          user: 'AI助手',
+          content: '您好，我是AI助手，请问有什么可以帮助您的吗？'
+        },
+        {
+          type: 2,
+          user: '游客',
+          content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed deserunt explicabo corrupti iure nesciunt autem quaerat unde, fugit, ipsa magni consequatur beatae vero ea culpa nisi aliquid aliquam consectetur aut.'
+        }
+      ]
+    }
+  },
+  methods: {
+    handleKeyCode (event) {
+      if (event.keyCode === 13) {
+        if (!event.ctrlKey) {
+          event.preventDefault()
+          this.handleSendMsg()
+        } else {
+          this.question += '\n'
+        }
+      }
+    },
+    handleSendMsg () {
+      if (!this.question) {
+        return
+      }
+      this.items.push({
+        type: 2,
+        user: '游客',
+        content: this.question
+      })
+      this.question = ''
+      this.$nextTick(() => {
+        const box = document.querySelector('.chart-content-chat-box')
+        box.scrollTop = box.scrollHeight
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.heightFull {
+  height: 100%;
+}
+.widthFull {
+  width: 100%;
+}
+.chart-content {
+  width: 0;
+  flex: 1;
+  &-show {
+    width: 50%;
+    border: 1px solid #ccc;
+  }
+  &-chat {
+    width: 50%;
+    border: 1px solid #ccc;
+    &-box {
+      height: 0;
+      flex: 1;
+    }
+  }
+
+}
+.box-length-70 {
+  max-width: 70%;
+}
+.send {
+// height: 130px;
+// margin: 20px 0;
+padding: 20px;
+&-box {
+  width: 100%;
+  // max-width: 800px;
+  position: relative;
+  .btn {
+    position: absolute;
+    right: 20px;
+    bottom: 12px;
+  }
+  &-area {
+    position: relative;
+    bottom: 0;
+    ::v-deep textarea {
+      padding: 15px 70px 15px 0 !important;
+      max-height: 300px;
+      min-height: 60px;
+      overflow: auto;
+      margin: 0 !important;
+    }
+  }
+}
+}
+</style>