dashan
/
chatbot-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat:页面细节完善

master
dashan 2 years ago
parent
50f9ab4191
commit
3b34931858
7 changed files with 140 additions and 77 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      package-lock.json
  2. 1
      package.json
  3. 4
      quasar.conf.js
  4. 63
      src/layouts/MainLayout.vue
  5. 41
      src/pages/Index.vue
  6. 7
      src/utils/date_utils.js
  7. 98
      src/utils/request.js

3
package-lock.json generated
Unescape View File

@ -8197,8 +8197,7 @@
"moment": { "moment": {
"version": "2.29.4", "version": "2.29.4",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz", "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
"integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==", "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
"dev": true
}, },
"move-concurrently": { "move-concurrently": {
"version": "1.0.1", "version": "1.0.1",

1
package.json
Unescape View File

@ -12,6 +12,7 @@
"dependencies": { "dependencies": {
"@quasar/extras": "^1.0.0", "@quasar/extras": "^1.0.0",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"moment": "^2.29.4",
"quasar": "^1.0.0" "quasar": "^1.0.0"
}, },
"devDependencies": { "devDependencies": {

4
quasar.conf.js
Unescape View File

@ -92,7 +92,7 @@ module.exports = function (/* ctx */) {
framework: { framework: {
iconSet: 'material-icons', // Quasar icon set iconSet: 'material-icons', // Quasar icon set
lang: 'en-us', // Quasar language pack lang: 'en-us', // Quasar language pack
config: {}, config: {notify:{}},
// Possible values for "importStrategy": // Possible values for "importStrategy":
// * 'auto' - (DEFAULT) Auto-import needed Quasar components & directives // * 'auto' - (DEFAULT) Auto-import needed Quasar components & directives
@ -107,7 +107,7 @@ module.exports = function (/* ctx */) {
// directives: [], // directives: [],
// Quasar plugins // Quasar plugins
plugins: [] plugins: ['Notify','Loading']
}, },
// animations: 'all', // --- includes all animations // animations: 'all', // --- includes all animations

63
src/layouts/MainLayout.vue
Unescape View File

@ -16,7 +16,6 @@
class="bg-grey-3 text-black no-shadow row justify-center q-pt-md q-pb-sm" class="bg-grey-3 text-black no-shadow row justify-center q-pt-md q-pb-sm"
> >
<q-input <q-input
:disable="disable"
class="WAL__field col-grow q-mr-sm" class="WAL__field col-grow q-mr-sm"
style="max-width: 1000px" style="max-width: 1000px"
bg-color="white" bg-color="white"
@ -26,6 +25,7 @@
counter counter
rounded rounded
outlined outlined
@keyup.enter.native="sendMsg"
> >
<template v-slot:after> <template v-slot:after>
<q-btn <q-btn
@ -35,7 +35,23 @@
flat flat
icon="send" icon="send"
@click="sendMsg" @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> </template>
</q-input> </q-input>
</q-toolbar> </q-toolbar>
@ -45,6 +61,9 @@
<script> <script>
import { sendQuestion } from "../api/chatbot/chatbot"; 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 { export default {
name: "MainLayout", name: "MainLayout",
data() { data() {
@ -56,36 +75,56 @@ export default {
name: "bot", name: "bot",
text: ["请告诉我你的问题"], text: ["请告诉我你的问题"],
sent: false, 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: { methods: {
//发送问题 //发送问题
async sendMsg() { async sendMsg() {
if (!this.search_text) { if (!this.search_text||this.disable) {
return; return;
} }
this.disable = true; this.disable = true;
//讲自己的问题加入到msg集合中 //讲自己的问题加入到msg集合中
this.addMessage("me", true, this.search_text); let text = this.search_text
await sendQuestion(this.search_text).then((res) => { 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 = ""; }).catch(()=>{
this.disable = false; this.addMessage("bot", false, "出错了！！！",moment().format(dta));
}); })
this.disable = false;
}, },
addMessage(name, sent, text) { addMessage(name, sent, text,datetime) {
this.messages.push({ this.messages.push({
name: name, name: name,
text: [text], text: [text],
sent: sent, sent: sent,
datetime
}); });
}, },
clearMsgs(){
this.messages=[];
localStorage.removeItem(bot_message_records)
}
}, },
}; };
</script> </script>

41
src/pages/Index.vue
Unescape View File

@ -1,5 +1,5 @@
<template> <template>
<q-page class="q-pa-md row box"> <q-page class="row box">
<q-scroll-area <q-scroll-area
ref="scrollArea" ref="scrollArea"
class="row justify-center" class="row justify-center"
@ -7,19 +7,29 @@
> >
<div class="justify-center row"> <div class="justify-center row">
<div <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" v-for="(message, index) in messages"
:key="index" :key="index"
> >
<q-chat-message <q-chat-message
style="white-space: pre-wrap;" style="white-space: pre-wrap"
:text="message.text" :text="message.text"
:name="message.name" :name="message.name"
:sent="message.sent" :sent="message.sent"
:stamp="fromNow(message.datetime)"
/> />
</div> </div>
<div style="width: 100%; max-width: 51%" v-show="disable"> <div class="col-xs-11 col-sm-10 col-md-9 col-lg-8 col-xl-7" v-show="disable">
<q-chat-message :text='text' :name="name"/> <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>
</div> </div>
</q-scroll-area> </q-scroll-area>
@ -27,21 +37,26 @@
</template> </template>
<script> <script>
import { dta, fromNow } from "../utils/date_utils";
export default { export default {
props: ["messages", "disable"], props: ["messages", "disable"],
watch: { watch: {
messages: function (val) { messages: function (val) {
//当消息集合变动时 滚动到容器底部 //当消息集合变动时 滚动到容器底部
this.$refs.scrollArea.setScrollPosition("vertical", 9999999, 300); this.$refs.scrollArea.setScrollPosition("vertical", 9999999, 300);
},
},
data(){
return{
text:['请稍等...'],
name:"bot"
} }
}, },
data() {
methods: {}, return {};
},
mounted() {
this.$refs.scrollArea.setScrollPosition("vertical", 9999999, 300);
},
methods: {
fromNow(date) {
return fromNow(date, dta);
}
}
}; };
</script> </script>

7
src/utils/date_utils.js
Unescape View File

@ -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();
}

98
src/utils/request.js
Unescape View File

@ -1,5 +1,5 @@
import axios from 'axios' import axios from 'axios'
import { Notify } from 'quasar'
//1. 创建新的axios实例， //1. 创建新的axios实例，
const service = axios.create({ const service = axios.create({
// 公共接口 // 公共接口
@ -30,53 +30,55 @@ service.interceptors.response.use(
return response return response
}, },
(error) => { (error) => {
// if (error && error.response) { if (error && error.response) {
// switch (error.response.status) { switch (error.response.status) {
// case 400: case 400:
// error.message = '请求错误(400)' error.message = '请求错误(400)'
// break break
// case 401: case 401:
// error.message = '未授权，请重新登录(401)' error.message = '未授权，请重新登录(401)'
// router.push('/login') router.push('/login')
// break break
// case 403: case 403:
// error.message = '拒绝访问(403)' error.message = '拒绝访问(403)'
// break break
// case 404: case 404:
// error.message = '请求出错(404)' error.message = '请求出错(404)'
// break break
// case 408: case 408:
// error.message = '请求超时(408)' error.message = '请求超时(408)'
// break break
// case 500: case 500:
// error.message = '服务器错误(500)' error.message = '服务器错误(500)'
// break break
// case 501: case 501:
// error.message = '服务未实现(501)' error.message = '服务未实现(501)'
// break break
// case 502: case 502:
// error.message = '网络错误(502)' error.message = '网络错误(502)'
// break break
// case 503: case 503:
// error.message = '服务不可用(503)' error.message = '服务不可用(503)'
// break break
// case 504: case 504:
// error.message = '网络超时(504)' error.message = '网络超时(504)'
// break break
// case 505: case 505:
// error.message = 'HTTP版本不受支持(505)' error.message = 'HTTP版本不受支持(505)'
// break break
// default: default:
// error.message = '连接出错' error.message = '连接出错'
// } }
// } else { } else {
// error.message = '连接服务器失败!' error.message = '连接服务器失败!'
// } }
// ElMessage({
// message: error.message, Notify.create({
// type: 'error' color:"red",
// }) message:error.message,
position:"top",
timeout: 3000
})
return Promise.reject(error) return Promise.reject(error)
} }
) )

Write Preview
Loading…
Cancel
Save