From 3b34931858d76f9d983d16b2b3e23510e0ec39ab Mon Sep 17 00:00:00 2001
From: dashan <dashanblog@163.com>
Date: Fri, 10 Feb 2023 00:14:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E9=A1=B5=E9=9D=A2=E7=BB=86=E8=8A=82?=
 =?UTF-8?q?=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json          |  3 +-
 package.json               |  1 +
 quasar.conf.js             |  4 +-
 src/layouts/MainLayout.vue | 63 +++++++++++++++++++-----
 src/pages/Index.vue        | 41 +++++++++++-----
 src/utils/date_utils.js    |  7 +++
 src/utils/request.js       | 98 +++++++++++++++++++-------------------
 7 files changed, 140 insertions(+), 77 deletions(-)
 create mode 100644 src/utils/date_utils.js

diff --git a/package-lock.json b/package-lock.json
index d25eb41..1af24d3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8197,8 +8197,7 @@
     "moment": {
       "version": "2.29.4",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
-      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
-      "dev": true
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
     },
     "move-concurrently": {
       "version": "1.0.1",
diff --git a/package.json b/package.json
index c189456..ac74acf 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@quasar/extras": "^1.0.0",
     "core-js": "^3.6.5",
+    "moment": "^2.29.4",
     "quasar": "^1.0.0"
   },
   "devDependencies": {
diff --git a/quasar.conf.js b/quasar.conf.js
index 68ce85f..9f00b62 100644
--- a/quasar.conf.js
+++ b/quasar.conf.js
@@ -92,7 +92,7 @@ module.exports = function (/* ctx */) {
     framework: {
       iconSet: 'material-icons', // Quasar icon set
       lang: 'en-us', // Quasar language pack
-      config: {},
+      config: {notify:{}},
 
       // Possible values for "importStrategy":
       // * 'auto' - (DEFAULT) Auto-import needed Quasar components & directives
@@ -107,7 +107,7 @@ module.exports = function (/* ctx */) {
       // directives: [],
 
       // Quasar plugins
-      plugins: []
+      plugins: ['Notify','Loading']
     },
 
     // animations: 'all', // --- includes all animations
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index dd6adb2..b9cd963 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -16,7 +16,6 @@
         class="bg-grey-3 text-black no-shadow row justify-center q-pt-md q-pb-sm"
       >
         <q-input
-          :disable="disable"
           class="WAL__field col-grow q-mr-sm"
           style="max-width: 1000px"
           bg-color="white"
@@ -26,6 +25,7 @@
           counter
           rounded
           outlined
+          @keyup.enter.native="sendMsg"
         >
           <template v-slot:after>
             <q-btn
@@ -35,7 +35,23 @@
               flat
               icon="send"
               @click="sendMsg"
-            />
+            >
+            <q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">
+              发送问题给机器人
+            </q-tooltip>
+            </q-btn>
+            <q-btn
+              :disable="disable"
+              round
+              dense
+              flat
+              icon="close"
+              @click="clearMsgs"
+            >
+            <q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">
+              清空聊天记录
+            </q-tooltip>
+            </q-btn>
           </template>
         </q-input>
       </q-toolbar>
@@ -45,6 +61,9 @@
 
 <script>
 import { sendQuestion } from "../api/chatbot/chatbot";
+import moment from "moment";
+import {dta} from "../utils/date_utils";
+const bot_message_records="bot_message_records"
 export default {
   name: "MainLayout",
   data() {
@@ -56,36 +75,56 @@ export default {
           name: "bot",
           text: ["请告诉我你的问题"],
           sent: false,
+          datetime: moment().format(dta)
         },
       ],
     };
   },
+  created(){
+    let records = localStorage.getItem(bot_message_records)
+    if(records&&records!="[]"){
+      this.messages=JSON.parse(records)
+      localStorage.removeItem(bot_message_records)
+    }
+    window.addEventListener("beforeunload",()=>{
+      localStorage.setItem(bot_message_records,JSON.stringify(this.messages))
+    })
+  },
   methods: {
     //发送问题
     async sendMsg() {
-      if (!this.search_text) {
+      if (!this.search_text||this.disable) {
         return;
       }
       this.disable = true;
       //讲自己的问题加入到msg集合中
-
-      this.addMessage("me", true, this.search_text);
-      await sendQuestion(this.search_text).then((res) => {
+      
+      let text = this.search_text
+      this.search_text = ""
+      this.addMessage("me", true, text,moment().format(dta));
+      await sendQuestion(text).then((res) => {
         //发送问题给机器人
-        this.addMessage("bot", true, res.data);
-
+        this.addMessage("bot", false, res.data,moment().format(dta));
         //清空输入框
-        this.search_text = "";
-        this.disable = false;
-      });
+      }).catch(()=>{
+        this.addMessage("bot", false, "出错了！！！",moment().format(dta));
+      })
+      
+      
+      this.disable = false;
     },
-    addMessage(name, sent, text) {
+    addMessage(name, sent, text,datetime) {
       this.messages.push({
         name: name,
         text: [text],
         sent: sent,
+        datetime
       });
     },
+    clearMsgs(){
+      this.messages=[];
+      localStorage.removeItem(bot_message_records)
+    }
   },
 };
 </script>
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index 49eedac..3c58fae 100644
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-page class="q-pa-md row box">
+  <q-page class="row box">
     <q-scroll-area
       ref="scrollArea"
       class="row justify-center"
@@ -7,19 +7,29 @@
     >
       <div class="justify-center row">
         <div
-          style="width: 100%; max-width: 51%"
+          class="col-xs-11 col-sm-10 col-md-9 col-lg-8 col-xl-7"
           v-for="(message, index) in messages"
           :key="index"
         >
           <q-chat-message
-            style="white-space: pre-wrap;"
+            style="white-space: pre-wrap"
             :text="message.text"
             :name="message.name"
             :sent="message.sent"
+            :stamp="fromNow(message.datetime)"
           />
         </div>
-        <div style="width: 100%; max-width: 51%" v-show="disable">
-          <q-chat-message :text='text' :name="name"/>
+        <div class="col-xs-11 col-sm-10 col-md-9 col-lg-8 col-xl-7" v-show="disable">
+          <q-chat-message name="bot">
+            <q-spinner-dots size="2rem" />
+          </q-chat-message>
+          <q-tooltip
+            anchor="top middle"
+            self="bottom middle"
+            :offset="[10, -10]"
+          >
+            机器人真在努力思考
+          </q-tooltip>
         </div>
       </div>
     </q-scroll-area>
@@ -27,21 +37,26 @@
 </template>
 
 <script>
+import { dta, fromNow } from "../utils/date_utils";
 export default {
   props: ["messages", "disable"],
   watch: {
     messages: function (val) {
       //当消息集合变动时 滚动到容器底部
       this.$refs.scrollArea.setScrollPosition("vertical", 9999999, 300);
-    },
-  },
-  data(){
-    return{
-      text:['请稍等...'],
-      name:"bot"
     }
   },
-  
-  methods: {},
+  data() {
+    return {};
+  },
+  mounted() {
+    this.$refs.scrollArea.setScrollPosition("vertical", 9999999, 300);
+  },
+
+  methods: {
+    fromNow(date) {
+      return fromNow(date, dta);
+    }
+  }
 };
 </script>
diff --git a/src/utils/date_utils.js b/src/utils/date_utils.js
new file mode 100644
index 0000000..7bf7244
--- /dev/null
+++ b/src/utils/date_utils.js
@@ -0,0 +1,7 @@
+import moment from "moment";
+//datetime all 20221231015930
+export const dta="YYYYMMDDHHmmss"
+//输入一个时间和当前时间做对比
+export const fromNow = (date,formate)=>{
+    return moment(date,formate).fromNow();
+}
\ No newline at end of file
diff --git a/src/utils/request.js b/src/utils/request.js
index 03ecb79..251b16f 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -1,5 +1,5 @@
 import axios from 'axios'
-
+import { Notify } from 'quasar'
 //1. 创建新的axios实例，
 const service = axios.create({
   // 公共接口
@@ -30,53 +30,55 @@ service.interceptors.response.use(
     return response
   },
   (error) => {
-    // if (error && error.response) {
-    //   switch (error.response.status) {
-    //     case 400:
-    //       error.message = '请求错误(400)'
-    //       break
-    //     case 401:
-    //       error.message = '未授权，请重新登录(401)'
-    //       router.push('/login')
-    //       break
-    //     case 403:
-    //       error.message = '拒绝访问(403)'
-    //       break
-    //     case 404:
-    //       error.message = '请求出错(404)'
-    //       break
-    //     case 408:
-    //       error.message = '请求超时(408)'
-    //       break
-    //     case 500:
-    //       error.message = '服务器错误(500)'
-    //       break
-    //     case 501:
-    //       error.message = '服务未实现(501)'
-    //       break
-    //     case 502:
-    //       error.message = '网络错误(502)'
-    //       break
-    //     case 503:
-    //       error.message = '服务不可用(503)'
-    //       break
-    //     case 504:
-    //       error.message = '网络超时(504)'
-    //       break
-    //     case 505:
-    //       error.message = 'HTTP版本不受支持(505)'
-    //       break
-    //     default:
-    //       error.message = '连接出错'
-    //   }
-    // } else {
-    //   error.message = '连接服务器失败!'
-    // }
-    // ElMessage({
-    //   message: error.message,
-    //   type: 'error'
-    // })
-
+    if (error && error.response) {
+      switch (error.response.status) {
+        case 400:
+          error.message = '请求错误(400)'
+          break
+        case 401:
+          error.message = '未授权，请重新登录(401)'
+          router.push('/login')
+          break
+        case 403:
+          error.message = '拒绝访问(403)'
+          break
+        case 404:
+          error.message = '请求出错(404)'
+          break
+        case 408:
+          error.message = '请求超时(408)'
+          break
+        case 500:
+          error.message = '服务器错误(500)'
+          break
+        case 501:
+          error.message = '服务未实现(501)'
+          break
+        case 502:
+          error.message = '网络错误(502)'
+          break
+        case 503:
+          error.message = '服务不可用(503)'
+          break
+        case 504:
+          error.message = '网络超时(504)'
+          break
+        case 505:
+          error.message = 'HTTP版本不受支持(505)'
+          break
+        default:
+          error.message = '连接出错'
+      }
+    } else {
+      error.message = '连接服务器失败!'
+    }
+    
+    Notify.create({
+      color:"red",
+      message:error.message,
+      position:"top",
+      timeout: 3000
+    })
     return Promise.reject(error)
   }
 )