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
Split 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. 61
      src/layouts/MainLayout.vue
  5. 39
      src/pages/Index.vue
  6. 7
      src/utils/date_utils.js
  7. 96
      src/utils/request.js

3
package-lock.json generated
Unescape View File

@ -8197,8 +8197,7 @@ @@ -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",

1
package.json
Unescape View File

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

4
quasar.conf.js
Unescape View File

@ -92,7 +92,7 @@ module.exports = function (/* ctx */) { @@ -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 */) { @@ -107,7 +107,7 @@ module.exports = function (/* ctx */) {
// directives: [],
// Quasar plugins
plugins: []
plugins: ['Notify','Loading']
},
// animations: 'all', // --- includes all animations

61
src/layouts/MainLayout.vue
Unescape View File

@ -16,7 +16,6 @@ @@ -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 @@ @@ -26,6 +25,7 @@
counter
rounded
outlined
@keyup.enter.native="sendMsg"
>
<template v-slot:after>
<q-btn
@ -35,7 +35,23 @@ @@ -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 @@ @@ -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 { @@ -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>

39
src/pages/Index.vue
Unescape View File

@ -1,5 +1,5 @@ @@ -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 @@ @@ -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 @@ @@ -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"
}
},
data() {
return {};
},
mounted() {
this.$refs.scrollArea.setScrollPosition("vertical", 9999999, 300);
},
methods: {},
methods: {
fromNow(date) {
return fromNow(date, dta);
}
}
};
</script>

7
src/utils/date_utils.js
Unescape View File

@ -0,0 +1,7 @@ @@ -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();
}

96
src/utils/request.js
Unescape View File

@ -1,5 +1,5 @@ @@ -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( @@ -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)
}
)

Write Preview
Loading…
Cancel
Save