前端对接 seb实体库，rag基本服务

suerprisePlus

2024-06-25 c93d4b3af5739f786cfdf20b16b28ec60403f709

 src/components/Chat/chatList.vue

@@ -2,12 +2,9 @@
  <div class="body">

    <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-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" />

@@ -15,61 +12,64 @@
            <div class="web__main_Date">

              <div>

                <cite>

                  <div>

                  <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 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 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 class="web__main-user">



           
          </div> -->

          <!--  -->

        </div>

      </div>

    </div>

    <el-dialog

      :visible.sync="show"

      width="40%"

      append-to-body

      :before-close="handleClose"

      class="web__dialog"

    >

    <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>

      <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>

@@ -77,13 +77,24 @@
<script>

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",

  arr: [],

  components: {

    VueMarkdown

  },

  filters: {

    setWidth(value) {

      let width = value;

      if (`${value}`.match(/^\d+$/)) {

        width = value + "px";

        width = value - 30 + "px";

      }

      if (width == "100vh") {

        return "99vh"

      }

      return width;

    }

@@ -106,7 +117,8 @@
      show: false,

      imgSrc: "",

      videoSrc: "",

      audioSrc: ""

      audioSrc: "",

      isDisabled: true,

    };

  },

  watch: {

@@ -120,6 +132,26 @@
    }

  },

  methods: {

    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) {

@@ -228,6 +260,7 @@
  cursor: pointer;

  display: block;

}



.web__msg--img[data-class="iconBox"] {

  max-width: 24px;

  min-width: unset;

@@ -254,6 +287,11 @@
    @css { * }zoom: 1; */

  vertical-align: top;

  font-size: 20px;

  background: #555555;

  padding: 10px !important;

  border-radius: 10px !important;

  margin-top: 10px;



}



.web__main-user {

@@ -288,11 +326,13 @@
  padding-left: 0px;

  font-style: normal;

}



.citeTitle {

  width: 100%;

  display: flex;

  justify-content: space-between;

}



.web__main-text {

  /* max-width: 40%; */

  width: 100%;

@@ -308,15 +348,18 @@
  font-size: 16px;

  word-break: break-all;

}



.web__main_content {

  width: 100%;

  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;

@@ -328,6 +371,7 @@
  display: flex;

  justify-content: space-between;

}



.web__main-arrow {

  top: 6px;

  left: -8px;

@@ -418,8 +462,19 @@
  font-size: 16px;

  color: #f2f2f2;

}



.web__main-text img {

  max-width: 200px;

}



.setRagMore {

  margin-left: 10px;



}



.setRagMore:hover {

  color: #409EFF;



}

</style>

<style>

@@ -428,6 +483,7 @@
  /* background: rgb(31, 31, 31); */

  padding: 20px;

}



.loadBox .loaderContantBox {

  color: white;

  font-size: 40px;

@@ -479,11 +535,51 @@


@keyframes round {

  0% {

    transform: rotate(0deg); /* 开始旋转 div 元素 */

    transform: rotate(0deg);

    /* 开始旋转 div 元素 */

  }



  100% {

    transform: rotate(360deg); /* 结束旋转 div 元素 */

    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>