pbl-student-table/src/components/components/cocoFlowDia.vue

<template>
    <div>
        <el-dialog
            :visible.sync="FlowVisible"
            width="90%"
            class="dialog_diy"
            :close-on-click-modal="false"
            :fullscreen="markfullscreen"
            :style="{ '--dialog-height': markfullscreen ? '100%' : '95%' }"
            :before-close="handleClose">
            <div slot="title">
                <div class="markScore_diyTit">
                    <div>{{ lang.ssViewWork }}</div>
                    <img  @click="markFullScreenBtn" style="cursor: pointer;height: 16px;" src="../../assets/icon/svgImg/nrk_fullscreen.svg" alt="" />
                </div>
            </div>
           
            <div class="markDialog">
                <template v-if="listData.length && showListData(listData)">
                    <div v-for="(item,index) in listData" :key="index">
                        <div class="BodyCon" v-if="item.imageUrls && item.imageUrls.length">
                            <div class="BodyConTit">{{ lang.ssNodeLabel.replace(/\*/g, index + 1) }}</div>
                            <div style="display: flex;flex-wrap: wrap;gap: 10px;">
                                <img 
                                    style="max-width: 360px;object-fit: cover;cursor: pointer;" 
                                    v-for="(image,imgIndex) in item.imageUrls" 
                                    :key="index+'-image-'+imgIndex" 
                                    :src="image" 
                                    alt="" 
                                    @click="previewImage(image)"
                                />
                            </div>
                        </div>
                        <div class="BodyCon" v-if="item.messages && item.messages.length" >
                            <div class="BodyConTit">{{ lang.ssNodeLabel.replace(/\*/g, index + 1) }}</div>
                            <div class="BodyConChat" v-for="(po, index2) in item.messages" :key="index+'-'+index2">
                                <div class="left" v-if="po.role == 'assistant'">
                                        <div class="TName" style="background-color: #0560FD;">{{ lang.ssXiaoKeAIAssistant }}</div>
                                        <div class="con" v-html="MarkdownT(po.content)"></div>
                                </div>

                                <div class="left" v-if="po.role == 'user'">
                                        <div class="TName" style="background-color: #9747FF;">{{ username }}</div>
                                        <div class="con" v-html="po.content"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
                <div v-else style="text-align: center;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 100%;
                    min-height: 500px;">
                    {{ lang.ssWorkOnlyShowsDialog }}
                </div>
            </div>
            

        </el-dialog>

        <!-- 图片预览对话框 -->
        <el-dialog
            :visible.sync="imagePreviewVisible"
            width="90%"
            :close-on-click-modal="true"
            :show-close="true"
            class="image-preview-dialog"
            @close="imagePreviewVisible = false">
            <div style="text-align: center;">
                <img 
                    :src="previewImageUrl" 
                    :alt="lang.ssPreviewImage" 
                    style="max-width: 100%; max-height: 80vh; object-fit: contain;"
                />
            </div>
        </el-dialog>
    </div>
</template>

<script>
import MarkdownIt from "markdown-it";
const getFile = url => {
  return new Promise((resolve, reject) => {
    var credentials = {
      accessKeyId: "AKIATLPEDU37QV5CHLMH",
      secretAccessKey: "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"
    }; //秘钥形式的登录上传
    window.AWS.config.update(credentials);
    window.AWS.config.region = "cn-northwest-1"; //设置区域
    let url2 = url;
    let _url2 = "";
    if (
      url2.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
    ) {
      _url2 = url2.split(
        "https://view.officeapps.live.com/op/view.aspx?src="
      )[1];
    } else {
      _url2 = url2;
    }
    var s3 = new window.AWS.S3({ params: { Bucket: "ccrb" } });
    let name = decodeURIComponent(
      _url2.split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1]
    );
    var params = {
      Bucket: "ccrb",
      Key: name
    };
    s3.getObject(params, function(err, data) {
      if (err) {
        console.log(err, err.stack);
        resolve({ data: 1 });
      } else {
        const fileContent = data.Body.toString("utf-8");
        resolve({ data: fileContent });
      } // sxuccessful response
    });
    // axios({
  });
};
import { myMixin } from "@/mixins/mixin.js"

    export default {
        mixins: [ myMixin ],
        data() {
            return {
                username:'',
                FlowVisible:false,
                listData:[],
                markfullscreen:false,
                imagePreviewVisible: false,
                previewImageUrl: ''
            }
        },
        computed: {
            showListData(){
                return function (val) {
                   let kk = val.map(e=> e.messages).flat()
                   console.log('kk',kk);
                   if (!kk.length || kk.every(v => v == null || v === 'undefined' || v === '')) {
                     return false
                    }
                   return true
                };
            },
            MarkdownT() {
                return function (c) {
                    
                    let md = new MarkdownIt({
                        html: true, // 允许渲染 HTML
                        linkify: true, // 自动将URL链接转化为可点击链接 
                        typographer: true, // 启用排版规则（如替换 `"` 为 “）
                    });
                    const renderedContent = c ? md.render(c) : "";

                    // 使用正则表达式替换链接
                    const result = renderedContent.replace(/<a href="([^"]+)">([^<]*)<\/a>/g, (match, url, text) => {
                        // 判断链接是否为图片格式
                        if (/\.(png|jpg|jpeg|gif|bmp|svg)$/i.test(url)) {
                            // 返回<img>标签
                            return `<img src="${url}" alt="${text}" />`;
                        } else {
                            // 返回原来的<a>标签
                            return match;
                        }
                    });

                    return result;
                }
            }
        },
        methods: {
            // 评分弹框全屏
            markFullScreenBtn() {
                this.markfullscreen = !this.markfullscreen;
            },
            async openAppWork(val){
                console.log(val);
                // val.works = 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/pptData1764063222122.json'
                
                // let kk = 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/pptData1764063222122.json'

                // console.log('this.isValidURL(val.works)',this.isValidURL(val.works));
                
                if (this.isValidURL(val.works)) {
                    await getFile(val.works).then((res) => {
                       val.works = res.data;
                    });
                }

                this.username = val.sName
                try {
                    this.listData = JSON.parse(val.works)
                } catch (error) {
                    this.listData = []
                }
                this.FlowVisible = true;
            },
            isValidURL(str){
                try {
                        const url = new URL(str);
                        return ['http:', 'https:', 'ftp:'].includes(url.protocol) && !!url.hostname;
                } catch (e) {
                    return false;
                }
            },
            handleClose(){
                this.listData = []
                this.FlowVisible = false;
            },
            // 预览图片
            previewImage(imageUrl) {
                this.previewImageUrl = imageUrl;
                this.imagePreviewVisible = true;
            },
        },
    }
</script>

<style scoped>
    .dialog_diy {
        min-width: 800px;
        display: flex;
    }

    .dialog_diy >>> .el-dialog__header {
        background: #fff !important;
        padding: 15px 20px;
        border-radius: 12px 12px 0 0 !important;
        border-bottom: 1px #E7E7E7 solid;
    }
    .dialog_diy >>> .el-dialog{
        border-radius: 12px;
        overflow: hidden;
        height: var(--dialog-height, 95%) !important;
        margin: auto !important;
        display: flex;
        flex-direction: column;
    }

    .dialog_diy >>> .el-dialog__title{
    color: #fff;
    }

    .dialog_diy >>> .el-dialog__headerbtn {
    top: 19px;
    }

    .dialog_diy >>> .el-dialog__headerbtn .el-dialog__close{
        color: #000;
    }

    .dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
        color: #000;
    }



    .dialog_diy >>> .el-dialog__body{
        background: #FFFFFFCC;
        border-radius: 12px !important;
        overflow: auto;
        box-sizing: border-box;
        flex: 1;
        min-height: 0;
        max-height: none;
        padding: 0 !important;
        margin: 0;
        width: 100%;
    }

    .dialog_diy >>> .el-dialog__body::-webkit-scrollbar-thumb {
        background-color: #0560FD; /* 设置滚动条滑块颜色 */
    }

    .markDialog{
        height: auto;
        min-height: 100%;
        display: flex;
        padding:12px 30px 24px;
        box-sizing: border-box;
        flex-direction: column;
        gap: 30px;
    }
    .markScore_diyTit {
        color: #000000;
        width: calc(100% - 50px);
        display: flex;
        height: 24px;
        justify-content: space-between;
        align-items: center;
        font-family: PingFang SC;
    }
    .TName{
        color: #fff;
        font-weight: 600;
        width: 185px;
        flex-shrink: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        border-radius: 12px 12px 0 0;
        height: 28px;
        padding: 6px 17px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }
    .con{
        color: #000000E5;
        border-radius: 0 0 12px 12px;
        border: 1px solid #E7E7E7;
        padding: 16px;
        box-sizing: border-box;
        box-shadow: 0px 4px 20px 0px #0000001A;
    }
    .left{
        display: flex;
        flex-direction: column;
        font-size: 16px !important;
        justify-content: flex-start;
        line-height: 25px;
    }
    .BodyCon{
        background: #FFFFFF;
        border: 0.5px solid #E7E7E7;
        border-radius: 12px;
        padding: 10px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .BodyConTit{
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        color: #000;
    }
    .BodyConChat{
        display: flex;
        flex-direction: column;
        /* border-radius: 0 0 12px 12px;
        border: 1px solid #E7E7E7;
        padding: 16px;
        box-sizing: border-box; */
    }

    /* 图片预览对话框样式 */
    .image-preview-dialog >>> .el-dialog__body {
        padding: 20px;
        /* background: rgba(0, 0, 0, 0.8); */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .image-preview-dialog >>> .el-dialog {
        background: transparent;
        box-shadow: none;
    }

    .image-preview-dialog >>> .el-dialog__header {
        background: transparent;
        border: none;
    }

    .image-preview-dialog >>> .el-dialog__close {
        color: #fff;
        font-size: 24px;
    }

    .image-preview-dialog >>> .el-dialog__close:hover {
        color: #409EFF;
    }

    
</style>