From 658b1a48d7fc05d4823aa29878c7a1d6b6cd7ab7 Mon Sep 17 00:00:00 2001
From: dashan <dashanblog@163.com>
Date: Sun, 12 Feb 2023 22:31:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=AE=9E=E7=8E=B0=E5=AF=B9markdown?=
 =?UTF-8?q?=E6=96=87=E6=9C=AC=E6=B8=B2=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                        |  22 ++---
 package-lock.json                |  10 +++
 package.json                     |   2 +
 quasar.conf.js                   |   2 +-
 src/api/chatbot/chatbot.js       |   7 +-
 src/components/EssentialLink.vue |  49 -----------
 src/layouts/MainLayout.vue       | 145 ++++++++++++++++++++++---------
 src/pages/Index.vue              |  61 +++++++++++--
 src/utils/request.js             |   2 +-
 9 files changed, 186 insertions(+), 114 deletions(-)
 delete mode 100644 src/components/EssentialLink.vue

diff --git a/README.md b/README.md
index 1e720c2..71d5cca 100644
--- a/README.md
+++ b/README.md
@@ -2,27 +2,27 @@
 
 chatbot web 
 
-## Install the dependencies
+## 效果展示
+### PC端效果展示
+![](https://raw.githubusercontent.com/DaiShuaishuai/pic/main/picgo/pc1.jpg)
+![](https://raw.githubusercontent.com/DaiShuaishuai/pic/main/picgo/pc2.jpg)
+### 移动端效果展示
+![](https://raw.githubusercontent.com/DaiShuaishuai/pic/main/picgo/yd1.jpg)
+![](https://raw.githubusercontent.com/DaiShuaishuai/pic/main/picgo/yd2.jpg)
+
+## 下载依赖
 ```bash
 yarn
 # or
 npm install
 ```
 
-### Start the app in development mode (hot-code reloading, error reporting, etc.)
+### 启动项目
 ```bash
 quasar dev
 ```
 
-
-### Lint the files
-```bash
-yarn lint
-# or
-npm run lint
-```
-
-### Build the app for production
+### 打包
 ```bash
 quasar build
 ```
diff --git a/package-lock.json b/package-lock.json
index 1af24d3..d3b22bd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6186,6 +6186,11 @@
       "integrity": "sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA==",
       "dev": true
     },
+    "github-markdown-css": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/github-markdown-css/-/github-markdown-css-5.2.0.tgz",
+      "integrity": "sha512-hq5RaCInSUZ48bImOZpkppW2/MT44StRgsbsZ8YA4vJFwLKB/Vo3k7R2t+pUGqO+ThG0QDMi96TewV/B3vyItg=="
+    },
     "glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -7825,6 +7830,11 @@
         "object-visit": "^1.0.0"
       }
     },
+    "marked": {
+      "version": "4.2.12",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-4.2.12.tgz",
+      "integrity": "sha512-yr8hSKa3Fv4D3jdZmtMMPghgVt6TWbk86WQaWhDloQjRSQhMMYCAro7jP7VDJrjjdV8pxVxMssXS8B8Y5DZ5aw=="
+    },
     "matcher": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/matcher/-/matcher-3.0.0.tgz",
diff --git a/package.json b/package.json
index ac74acf..a79b51f 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,8 @@
   "dependencies": {
     "@quasar/extras": "^1.0.0",
     "core-js": "^3.6.5",
+    "github-markdown-css": "^5.2.0",
+    "marked": "^4.2.12",
     "moment": "^2.29.4",
     "quasar": "^1.0.0"
   },
diff --git a/quasar.conf.js b/quasar.conf.js
index 9f00b62..7d53a89 100644
--- a/quasar.conf.js
+++ b/quasar.conf.js
@@ -81,7 +81,7 @@ module.exports = function (/* ctx */) {
       proxy: {
         // 接口地址代理
         '/': {
-          target: 'http://localhost:8090', // 接口的域名
+          target: 'http://localhost:8092', // 接口的域名
           secure: false, // 如果是https接口，需要配置这个参数
           changeOrigin: true // 如果接口跨域，需要进行这个参数配置
         }
diff --git a/src/api/chatbot/chatbot.js b/src/api/chatbot/chatbot.js
index 72fd2a8..aa7bfaf 100644
--- a/src/api/chatbot/chatbot.js
+++ b/src/api/chatbot/chatbot.js
@@ -1,7 +1,8 @@
 import service from "../../utils/request";
-export const sendQuestion= (param)=>{
+export const sendQuestion= (params)=>{
     return service({//获取新闻列表
-        url:'/bot?question='+param,
-        method:'get'
+        url:'/bot',
+        method:'get',
+        params
     })
 }
\ No newline at end of file
diff --git a/src/components/EssentialLink.vue b/src/components/EssentialLink.vue
deleted file mode 100644
index 62582d1..0000000
--- a/src/components/EssentialLink.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-  <q-item
-    clickable
-    tag="a"
-    target="_blank"
-    :href="link"
-  >
-    <q-item-section
-      v-if="icon"
-      avatar
-    >
-      <q-icon :name="icon" />
-    </q-item-section>
-
-    <q-item-section>
-      <q-item-label>{{ title }}</q-item-label>
-      <q-item-label caption>
-        {{ caption }}
-      </q-item-label>
-    </q-item-section>
-  </q-item>
-</template>
-
-<script>
-export default {
-  name: 'EssentialLink',
-  props: {
-    title: {
-      type: String,
-      required: true
-    },
-
-    caption: {
-      type: String,
-      default: ''
-    },
-
-    link: {
-      type: String,
-      default: '#'
-    },
-
-    icon: {
-      type: String,
-      default: ''
-    }
-  }
-}
-</script>
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 24ede73..f652510 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -15,14 +15,37 @@
       <q-toolbar
         class="bg-grey-3 text-black no-shadow row justify-center q-pt-md q-pb-sm"
       >
+        <q-select
+          bg-color="white"
+          rounded
+          outlined
+          v-model="select_model"
+          :options="options"
+          option-value="value"
+          emit-value
+          map-options
+          ><q-tooltip>机器人型号</q-tooltip>
+           <template v-slot:option="{ itemProps, itemEvents, opt }">
+          <q-item
+            v-bind="itemProps"
+            v-on="itemEvents"
+          >
+            <q-item-section>
+              <q-item-label >{{opt.label}}
+                <q-tooltip >{{opt.value}}</q-tooltip>
+              </q-item-label>
+              
+            </q-item-section>
+          </q-item>
+        </template>
+          </q-select
+        >
         <q-input
           class="WAL__field col-grow q-mr-sm"
           style="max-width: 1000px"
           bg-color="white"
-          bottom-slots
           v-model="search_text"
           label="请输入你的问题"
-          counter
           rounded
           outlined
           @keyup.enter.native="sendMsg"
@@ -36,9 +59,13 @@
               icon="send"
               @click="sendMsg"
             >
-            <q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">
-              发送问题给机器人
-            </q-tooltip>
+              <q-tooltip
+                anchor="top middle"
+                self="bottom middle"
+                :offset="[10, 10]"
+              >
+                发送问题给机器人
+              </q-tooltip>
             </q-btn>
             <q-btn
               :disable="disable"
@@ -48,9 +75,13 @@
               icon="close"
               @click="clearMsgs"
             >
-            <q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">
-              清空聊天记录
-            </q-tooltip>
+              <q-tooltip
+                anchor="top middle"
+                self="bottom middle"
+                :offset="[10, 10]"
+              >
+                清空聊天记录
+              </q-tooltip>
             </q-btn>
           </template>
         </q-input>
@@ -62,70 +93,100 @@
 <script>
 import { sendQuestion } from "../api/chatbot/chatbot";
 import moment from "moment";
-import {dta} from "../utils/date_utils";
-const bot_message_records="bot_message_records"
+import { dta } from "../utils/date_utils";
+const bot_message_records = "bot_message_records";
 export default {
   name: "MainLayout",
   data() {
     return {
+      select_model: "TEXT_DEVINCI_003",
+      options: [
+        {
+          value: "TEXT_DEVINCI_003",
+          label: "聪明"
+        },
+        {
+          value: "TEXT_CURIE_001",
+          label: "还行"
+        },
+        {
+          value: "TEXT_BABBAGE_001",
+          label: "有点呆"
+        },
+        {
+          value: "TEXT_ADA_001",
+          label: "憨批"
+        }
+      ],
       search_text: "",
       disable: false,
       messages: [
         {
           name: "bot",
-          text: ["请告诉我你的问题"],
+          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)
+  created() {
+    //查询localStorage中是否存在聊天记录 存在则加载到页面
+    let records = localStorage.getItem(bot_message_records);
+    if (records && records != "[]") {
+      this.messages = JSON.parse(records);
+      localStorage.removeItem(bot_message_records);
     }
-    window.addEventListener("pagehide",()=>{
-      localStorage.setItem(bot_message_records,JSON.stringify(this.messages))
-    })
+    //监听pagehide事件 页面关闭时保存聊天记录到localStorage中
+    window.addEventListener("pagehide", () => {
+      localStorage.setItem(bot_message_records, JSON.stringify(this.messages));
+    });
   },
   methods: {
-    //发送问题
+    //请求机器人接口
     async sendMsg() {
-      if (!this.search_text||this.disable) {
+      if (!this.search_text || this.disable) {
         return;
       }
       this.disable = true;
       //讲自己的问题加入到msg集合中
-      
-      let text = this.search_text
-      this.search_text = ""
-      this.addMessage("me", true, text,moment().format(dta));
-      await sendQuestion(text).then((res) => {
-        //发送问题给机器人
-        this.addMessage("bot", false, res.data,moment().format(dta));
-        //清空输入框
-      }).catch(()=>{
-        this.addMessage("bot", false, "出错了！！！",moment().format(dta));
-      })
-      
-      
+
+      let text = this.search_text;
+      this.search_text = "";
+      this.addMessage("me", true, text, moment().format(dta));
+      await sendQuestion({question:text,model:this.select_model})
+        .then((res) => {
+          if(res.code==1){
+            this.addMessage("bot", false, res.data, moment().format(dta));
+          }else{
+            this.$q.notify({
+              color:"red",
+              message:"请求服务器错误",
+              position:"top",
+              timeout: 3000
+            })
+            this.addMessage("bot", false,"出错了！！！", moment().format(dta));
+          }
+        })
+        .catch(() => {
+          this.addMessage("bot", false, "出错了！！！", moment().format(dta));
+        });
+
       this.disable = false;
     },
-    addMessage(name, sent, text,datetime) {
+    addMessage(name, sent, text, datetime) {
       this.messages.push({
         name: name,
-        text: [text],
+        text: text,
         sent: sent,
         datetime
       });
     },
-    clearMsgs(){
-      this.messages=[];
-      localStorage.removeItem(bot_message_records)
+    clearMsgs() {
+      this.messages = [];
+      localStorage.removeItem(bot_message_records);
     }
-  },
+  }
 };
 </script>
 <style lang="css">
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index 3c58fae..9dabddb 100644
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -12,15 +12,30 @@
           :key="index"
         >
           <q-chat-message
-            style="white-space: pre-wrap"
-            :text="message.text"
             :name="message.name"
             :sent="message.sent"
             :stamp="fromNow(message.datetime)"
-          />
+            :bg-color="message.sent ? 'green-7' : 'white'"
+          >
+            <div
+              v-if="message.sent"
+              :style="{ 'max-width': width * 0.8 + 'px' }"
+            >
+              {{ message.text }}
+            </div>
+            <div
+              v-else
+              class="markdown-body"
+              :style="{ 'max-width': width * 0.8 + 'px' }"
+              v-html="markdownToHtml(message.text)"
+            ></div>
+          </q-chat-message>
         </div>
-        <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">
+        <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" bg-color="white">
             <q-spinner-dots size="2rem" />
           </q-chat-message>
           <q-tooltip
@@ -38,22 +53,54 @@
 
 <script>
 import { dta, fromNow } from "../utils/date_utils";
+import { marked } from "marked"; //解析markdown
+import "github-markdown-css";
 export default {
   props: ["messages", "disable"],
   watch: {
     messages: function (val) {
       //当消息集合变动时 滚动到容器底部
       this.$refs.scrollArea.setScrollPosition("vertical", 9999999, 300);
+    },
+    width(val) {
+      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
+      if (!this.timer) {
+        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
+        this.width = val;
+        this.timer = true;
+        const that = this;
+        setTimeout(function () {
+          that.timer = false;
+        }, 10);
+      }
     }
   },
   data() {
-    return {};
+    return { width: document.body.clientWidth };
   },
   mounted() {
     this.$refs.scrollArea.setScrollPosition("vertical", 9999999, 300);
+    //设置机器人消息最大宽度
+    window.onresize = () =>
+      (() => {
+        window.screenWidth = document.body.clientWidth;
+        this.width = window.screenWidth;
+      })();
   },
-
   methods: {
+    markdownToHtml(text) {
+      marked.setOptions({
+        renderer: new marked.Renderer(),
+        gfm: true, //默认为true。 允许 Git Hub标准的markdown.
+        tables: true, //默认为true。 允许支持表格语法。该选项要求 gfm 为true。
+        breaks: false, //默认为false。 允许回车换行。该选项要求 gfm 为true。
+        pedantic: false, //默认为false。 尽可能地兼容 markdown.pl的晦涩部分。不纠正原始模型任何的不良行为和错误。
+        sanitize: false, //对输出进行过滤（清理）
+        smartLists: true,
+        smartypants: false //使用更为时髦的标点，比如在引用语法中加入破折号。
+      });
+      return marked(text);
+    },
     fromNow(date) {
       return fromNow(date, dta);
     }
diff --git a/src/utils/request.js b/src/utils/request.js
index 251b16f..c165e27 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -27,7 +27,7 @@ service.interceptors.request.use(
 // response拦截器
 service.interceptors.response.use(
   (response) => {
-    return response
+    return response.data
   },
   (error) => {
     if (error && error.response) {