From c93d4b3af5739f786cfdf20b16b28ec60403f709 Mon Sep 17 00:00:00 2001
From: suerprisePlus <15810472099@163.com>
Date: 星期二, 25 六月 2024 19:53:54 +0800
Subject: [PATCH] 前端对接 seb实体库，rag基本服务
---
src/components/Chat/chatList.vue | 481 +++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 351 insertions(+), 130 deletions(-)
diff --git a/src/components/Chat/chatList.vue b/src/components/Chat/chatList.vue
index ed7eda0..cd22876 100644
--- a/src/components/Chat/chatList.vue
+++ b/src/components/Chat/chatList.vue
@@ -1,70 +1,102 @@
<template>
<div class="body">
- <div :style="pageConfig.width|setWidth">
+ <div :style="pageConfig.width | setWidth">
<div class="web__main" ref="main">
- <div
- class="web__main-item"
- v-for="(item,index) in list"
- :key="loding(index)"
- :class="{'web__main-item--mine':item.mine}"
- >
- <div class="web__main-user">
- <img :src="item.img" />
- <cite>
- {{item.name}}
- <i>{{item.date}}</i>
- </cite>
- </div>
- <div class="web__main-text">
- <div class="web__main-arrow"></div>
- <span v-html="handleDetail(item.text.text)" ref="content"></span>
- <ul class="web__main-list" v-if="item.text.list">
- <li
- @click="handleItemMsg(citem)"
- v-for="(citem,cindex) in item.text.list"
- :key="cindex"
- >{{citem.text}}</li>
- </ul>
+ <div class="web__main-item" v-for="(item, index) in list" :key="loding(index)"
+ :class="{ 'web__main-item--mine': item.mine }">
+
+ <div class="web__main_content">
+ <div>
+ <img :src="item.img" />
+ </div>
+ <div class="web__main_Date">
+ <div>
+ <cite>
+ <div style="display: flex">
+ {{ item.name }}
+
+ <!-- <div style="margin-left: 10px" v-show="item.file">
+ <el-select
+ @change="(val) => setFileChange(val)"
+ v-model="item.file"
+ size="mini"
+ >
+ <el-option
+ v-for="(res, key) in item.fileList"
+ :key="key"
+ :label="res.name"
+ :value="res.url"
+ >
+ </el-option>
+ </el-select>
+ </div> -->
+ </div>
+
+ <div>
+ {{ item.date }}
+ </div>
+ </cite>
+ </div>
+ <div class="web__main-text">
+ <div v-for="(res, key) in item.list" :key="key">
+ <div v-if="res.type === 'text'">
+ {{ res.val }}
+ </div>
+ <div v-else-if="res.type == 'loader'">
+ <span v-html="handleDetail(res.val)" ref="content"></span>
+ </div>
+ <div style="margin-bottom:10px" v-else-if="res.type == 'rag'">
+ <div v-show="res.acction">
+ {{ res.acction }}
+ </div>
+ <div> {{ res.question }} </div>
+ <div style="display: flex;">
+ 鏉ユ簮: {{ res.source }}
+ <div @click.stop="setRagMoreList(res.msg)" class="setRagMore" v-show="res.more">
+ ...鏇村
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+ </div>
</div>
</div>
</div>
</div>
- <el-dialog
- :visible.sync="show"
- width="40%"
- append-to-body
- :before-close="handleClose"
- class="web__dialog"
- >
- <img :src="imgSrc" v-if="imgSrc" style="width:100%;object-fit: cover;" />
- <video
- :src="videoSrc"
- v-if="videoSrc"
- style="width:100%;object-fit: cover;"
- controls="controls"
- ></video>
- <audio
- :src="audioSrc"
- v-if="audioSrc"
- style="width:100%;object-fit: cover;"
- controls="controls"
- ></audio>
+ <el-dialog :visible.sync="show" width="40%" append-to-body :before-close="handleClose" class="web__dialog">
+ <img :src="imgSrc" v-if="imgSrc" style="width: 100%; object-fit: cover" />
+ <video :src="videoSrc" v-if="videoSrc" style="width: 100%; object-fit: cover" controls="controls"></video>
+ <audio :src="audioSrc" v-if="audioSrc" style="width: 100%; object-fit: cover" controls="controls"></audio>
</el-dialog>
</div>
</template>
<script>
-import emojiParser from 'wechat-emoji-parser'
+import emojiParser from "wechat-emoji-parser";
+import VueMarkdown from "vue-markdown";
+
+import axios from "axios";
+import bus from "../../assets/js/bus";
export default {
- name: 'JwChat_list',
+ name: "JwChat_list",
+ arr: [],
+ components: {
+ VueMarkdown
+ },
filters: {
- setWidth (value) {
- let width = value
+ setWidth(value) {
+ let width = value;
if (`${value}`.match(/^\d+$/)) {
- width = value + 'px'
+ width = value - 30 + "px";
}
- return width
+ if (width == "100vh") {
+ return "99vh"
+ }
+ return width;
}
},
props: {
@@ -76,114 +108,144 @@
},
list: {
type: Array,
- default: () => ([])
+ default: () => []
}
},
- data () {
+ data() {
return {
load: false,
show: false,
- imgSrc: '',
- videoSrc: '',
- audioSrc: ''
- }
+ imgSrc: "",
+ videoSrc: "",
+ audioSrc: "",
+ isDisabled: true,
+ };
},
watch: {
- load (newval) {
+ load(newval) {
if (newval) {
- this.$emit('load', true)
+ this.$emit("load", true);
this.$nextTick(() => {
- this.load = false
- })
+ this.load = false;
+ });
}
}
},
methods: {
- loding (index) {
- const size = this.list.length
+ setRagMoreList(res) {
+ if (this.isDisabled) {
+ this.isDisabled = false;
+ setTimeout(() => {
+ bus.$emit("setRagMoreListAll", res);
+ }, 500);
+ setTimeout(() => {
+ this.isDisabled = false;
+ }, 3000)
+ }
+
+ },
+ setFileChange(res) {
+ if (res == "testUrl") return;
+ axios.get(res).then((response) => {
+ if (response.status == 200) {
+ bus.$emit("setInsertMarkDown", response.data);
+ }
+ });
+ },
+ loding(index) {
+ const size = this.list.length;
if (index == size - 1) {
setTimeout(() => {
- this.load = true
+ this.load = true;
}, 200);
}
- return index
+ return index;
},
//澶勭悊鎺掔増
- handleDetail (html = '') {
+ handleDetail(html = "") {
// console.log(html)
let result = html;
- result = emojiParser(result).replace(/(<img src)/g, '<img data-class="iconBox" data-src')
+ result = emojiParser(result).replace(
+ /(<img src)/g,
+ '<img data-class="iconBox" data-src'
+ );
setTimeout(() => {
const list = this.$refs.content;
- list.forEach(ele => {
+ list.forEach((ele) => {
for (let i = 0; i < ele.children.length; i++) {
const child = ele.children[i];
- if (child.getAttribute('data-flag') != 0) {
- child.setAttribute('data-flag', 0)
+ if (child.getAttribute("data-flag") != 0) {
+ child.setAttribute("data-flag", 0);
child.onclick = () => {
- this.handleEvent(child)
+ this.handleEvent(child);
};
- if (child.tagName === 'IMG') {
- child.className = 'web__msg--img'
- const icon = child.getAttribute('data-class')
- if (icon !== 'iconBox') child.type = "IMG"
- child.src = child.getAttribute('data-src')
- } else if (child.tagName === 'VIDEO') {
- child.type = "VIDEO"
- child.className = 'web__msg--video'
- child.src = child.getAttribute('data-src')
- } else if (child.tagName === 'AUDIO') {
- child.type = "AUDIO"
- child.className = 'web__msg--audio'
- child.controls = 'controls';
- child.src = child.getAttribute('data-src')
- } else if (child.tagName === 'FILE') {
- child.type = "FILE"
- child.className = 'web__msg--file'
- child.innerHTML = `<h2>File</h2><span>${child.getAttribute('data-name')}</span>`
- } else if (child.tagName === 'MAP') {
- child.type = "MAP"
- child.className = 'web__msg--file web__msg--map'
- child.innerHTML = `<h2>Map</h2><span>${child.getAttribute('data-longitude')} , ${child.getAttribute('data-latitude')}<br />${child.getAttribute('data-address')}</span>`
+ if (child.tagName === "IMG") {
+ child.className = "web__msg--img";
+ const icon = child.getAttribute("data-class");
+ if (icon !== "iconBox") child.type = "IMG";
+ child.src = child.getAttribute("data-src");
+ } else if (child.tagName === "VIDEO") {
+ child.type = "VIDEO";
+ child.className = "web__msg--video";
+ child.src = child.getAttribute("data-src");
+ } else if (child.tagName === "AUDIO") {
+ child.type = "AUDIO";
+ child.className = "web__msg--audio";
+ child.controls = "controls";
+ child.src = child.getAttribute("data-src");
+ } else if (child.tagName === "FILE") {
+ child.type = "FILE";
+ child.className = "web__msg--file";
+ child.innerHTML = `<h2>File</h2><span>${child.getAttribute(
+ "data-name"
+ )}</span>`;
+ } else if (child.tagName === "MAP") {
+ child.type = "MAP";
+ child.className = "web__msg--file web__msg--map";
+ child.innerHTML = `<h2>Map</h2><span>${child.getAttribute(
+ "data-longitude"
+ )} , ${child.getAttribute(
+ "data-latitude"
+ )}<br />${child.getAttribute("data-address")}</span>`;
}
}
}
});
- }, 0)
+ }, 0);
return result;
},
//澶勭悊浜嬩欢
- handleEvent (params) {
+ handleEvent(params) {
const callback = () => {
- if (params.type === 'IMG') {
+ if (params.type === "IMG") {
this.imgSrc = params.src;
this.show = true;
- } else if (params.type === 'VIDEO') {
+ } else if (params.type === "VIDEO") {
this.videoSrc = params.src;
this.show = true;
- } else if (params.type === 'AUDIO') {
+ } else if (params.type === "AUDIO") {
this.audioSrc = params.src;
this.show = true;
- } else if (params.type === 'FILE') {
- window.open(params.src)
+ } else if (params.type === "FILE") {
+ window.open(params.src);
}
- }
- if (typeof this.beforeOpen === 'function') {
- this.beforeOpen(params, callback)
+ };
+ if (typeof this.beforeOpen === "function") {
+ this.beforeOpen(params, callback);
} else {
callback();
}
},
- handleClose (done) {
+ handleClose(done) {
this.imgSrc = undefined;
this.videoSrc = undefined;
this.audioSrc = undefined;
done();
- },
- },
-}
+ }
+ }
+};
</script>
-<style>
+<style scoped>
.web__msg--img,
.web__msg--video,
.web__msg--file {
@@ -198,6 +260,7 @@
cursor: pointer;
display: block;
}
+
.web__msg--img[data-class="iconBox"] {
max-width: 24px;
min-width: unset;
@@ -207,15 +270,14 @@
display: inline-block;
}
</style>
-<style scoped>
+<style scoped>
.web__main-item {
position: relative;
font-size: 0;
- margin-bottom:30px;
- padding-left: 60px;
+ margin-bottom: 30px;
+ /* padding-left: 60px; */
min-height: 68px;
text-align: left;
-
}
.web__main-user,
@@ -225,10 +287,16 @@
@css { * }zoom: 1; */
vertical-align: top;
font-size: 20px;
+ background: #555555;
+ padding: 10px !important;
+ border-radius: 10px !important;
+ margin-top: 10px;
+
}
.web__main-user {
- position: absolute;
+ width: 100%;
+ /* position: absolute; */
left: 3px;
}
@@ -239,16 +307,19 @@
}
.web__main-user cite {
- position: absolute;
- left: 60px;
- top: -2px;
- /* width: 500px; */
+ /* position: absolute; */
+ /* left: 60px;
+ top: -2px; */
line-height: 24px;
font-size: 18px;
white-space: nowrap;
color: #999;
text-align: left;
font-style: normal;
+ width: 100%;
+ font-family: "Arial", sans-serif;
+ display: flex;
+ justify-content: space-between;
}
.web__main-user cite i {
@@ -256,17 +327,49 @@
font-style: normal;
}
+.citeTitle {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+}
+
.web__main-text {
- max-width: 40%;
+ /* max-width: 40%; */
+ width: 100%;
position: relative;
line-height: 22px;
- margin-top: 25px;
- padding: 8px 15px;
- background-color: #f3f3f3;
+ /* margin-top: 25px; */
+ padding: 8px 0px;
+ /* background-color: #f3f3f3; */
border-radius: 3px;
- border: 1px solid #f0f0f0;
- color: #000;
+ /* border: 1px solid #f0f0f0; */
+ color: #f2f2f2;
+ font-family: "Arial", sans-serif;
+ font-size: 16px;
word-break: break-all;
+}
+
+.web__main_content {
+ width: calc(100% - 50px);
+ padding: 10px 0px;
+ display: flex;
+}
+
+.web__main_Date {
+ flex: 1;
+ padding: 0px 15px;
+}
+
+.web__main_Date cite {
+ line-height: 24px;
+ font-size: 14px;
+ white-space: nowrap;
+ color: #f2f2f2;
+ text-align: left;
+ font-style: normal;
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
}
.web__main-arrow {
@@ -280,7 +383,7 @@
border-style: solid;
border-width: 8px;
border-left-width: 0;
- border-right-color: #ebeef5;
+ /* border-right-color: #ebeef5; */
font-family: Microsoft YaHei;
}
@@ -296,7 +399,7 @@
border-style: solid;
border-width: 7px;
border-left-width: 0;
- border-right-color: #ebeef5;
+ /* border-right-color: #ebeef5; */
}
.web__main-item--mine .web__main-text .web__main-arrow {
@@ -306,7 +409,7 @@
border-style: solid;
border-width: 8px;
border-right-width: 0;
- border-left-color: #f3f3f3;
+ /* border-left-color: #f3f3f3; */
}
.web__main-item--mine .web__main-text .web__main-arrow::after {
@@ -316,7 +419,7 @@
border-style: solid;
border-width: 7px;
border-right-width: 0;
- border-left-color: #f3f3f3;
+ /* border-left-color: #f3f3f3; */
}
.web__main-list {
@@ -353,12 +456,130 @@
.web__main-item--mine .web__main-text {
margin-left: 0;
- text-align: left;
- background-color: #f3f3f3;
- font-family: Microsoft YaHei;
- /* color: #fff; */
+ text-align: right;
+ /* background-color: #f3f3f3; */
+ font-family: "Arial", sans-serif;
+ font-size: 16px;
+ color: #f2f2f2;
}
+
.web__main-text img {
max-width: 200px;
}
+
+.setRagMore {
+ margin-left: 10px;
+
+}
+
+.setRagMore:hover {
+ color: #409EFF;
+
+}
+</style>
+<style>
+.parentBox {
+ height: 100%;
+ /* background: rgb(31, 31, 31); */
+ padding: 20px;
+}
+
+.loadBox .loaderContantBox {
+ color: white;
+ font-size: 40px;
+ overflow: hidden;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ transform: translateZ(0);
+ /* animation锛氳瀹氬畬鎴愬姩鐢绘墍鑺辫垂鐨勬椂闂达紝璇ュ睘鎬у繀椤昏瀹氾紝鍚﹀垯鍔ㄧ敾鏃堕暱涓�0锛屾棤娉曟挱鏀� */
+ animation: loadBox 1.7s infinite ease, round 1.7s infinite ease;
+}
+
+@keyframes loadBox {
+ 0% {
+ box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
+ 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
+ }
+
+ 5%,
+ 95% {
+ box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
+ 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
+ }
+
+ 10%,
+ 59% {
+ box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em,
+ -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em,
+ -0.297em -0.775em 0 -0.477em;
+ }
+
+ 20% {
+ box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em,
+ -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em,
+ -0.749em -0.34em 0 -0.477em;
+ }
+
+ 38% {
+ box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em,
+ -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em,
+ -0.82em -0.09em 0 -0.477em;
+ }
+
+ 100% {
+ box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
+ 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
+ }
+}
+
+@keyframes round {
+ 0% {
+ transform: rotate(0deg);
+ /* 寮�濮嬫棆杞� div 鍏冪礌 */
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ /* 缁撴潫鏃嬭浆 div 鍏冪礌 */
+ }
+}
+</style>
+
+
+<style>
+.web_Main_markDown h1 {
+ line-height: 30px !important;
+ font-size: 20px !important;
+}
+
+.web_Main_markDown h2 {
+ line-height: 25px !important;
+ font-size: 18px !important;
+ margin-left: 10px;
+}
+
+.web_Main_markDown h3 {
+ line-height: 25px !important;
+ font-size: 18px !important;
+ margin-left: 10px;
+}
+
+.web_Main_markDown li {
+ line-height: 20px !important;
+ font-size: 16px !important;
+ margin-left: 20px;
+}
+
+.web_Main_markDown p {
+ line-height: 20px !important;
+ font-size: 16px !important;
+ margin-left: 20px;
+}
+
+.web_Main_markDown {
+ background: #555555;
+ padding: 10px;
+ border-radius: 10px;
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.3