xiaoshu/src/views/Home.vue

<template>
    <div id="app">
        <Slider @select-nav="selectNav" :agent_list="agentList" :navId="navId" v-show="!closeOthers"></Slider>

        <div class="main">
            <div :class="{ 'history-wrap': true, 'history-wrap-open': !closeOthers && navId > -1 }">
                <History :list="historyList" :selectId="selectId" @handle-click="selectHistory"
                    @set-new="handelSetNewChat" />
            </div>

            <div class="wrap">
                <Index v-if="navId === -1" :number="swiperNumber" @select-nav="selectNav" />

                <div :class="{ 'border-wrap': true, 'border-no-wrap': navId === -2 }" v-else>
                    <div :key="dialog_uniq_key">
                        <!-- 项目与功能特色介绍 -->
                        <ProjectIntro v-if="!showDialog" :navId="navId" />

                        <section :class="{ 'section-padding': showDialog }">
                            <!-- 报告生成 -->
                            <DocumentCombine v-if="navId == 0 && !showDialog" />
                            <!-- 报表合并 -->
                            <Document v-if="navId === 1 && !showDialog" />
                            <!-- 知识问答 -->
                            <DocumentInterlocution v-if="navId === 2 && !showDialog" />
                            <!-- 文档智能 -->
                            <DocumentAnswer v-if="navId === 3 && !showDialog" :agentId="selectId" />
                            <!-- 智能问答 -->
                            <Answer v-if="navId === 4 && !showDialog" />
                            <!-- 智能数据 -->
                            <DocumentsmartData v-if="navId === 5 && !showDialog" :agentId="selectId" />
                            <!-- 小数绘图 -->
                            <PicArticle v-if="navId === 6 && !showDialog" :agentId="selectId" />
                            <!-- 文档出卷 -->
                            <DocumentQuestion v-if="navId === 7 && !showDialog" :agentId="selectId" />

                            <!-- 出题组卷 -->
                            <DocumentQuestion2 v-if="navId === 8 && !showDialog" :agentId="selectId" />

                            <!-- 文库详情 -->
                            <DocumentDetail v-if="navId === -2" :targetDocument="targetDocument"
                                :dialogList="dialogList" @go-back="goBack" />

                            <dialog-wrap v-if="showDialog && initDialog" v-show="!hideDialog" :type="dialogType[navId]"
                                :isSetting="false" :readonly="readonly" :agentId="selectId" :dialogId="dialogId"
                                :list="dialogList" @setReadonly="setReadonly" @changeParse="changeParse"
                                @goDocument="goDocument" />
                        </section>

                        <footer
                            v-if="navId !== -2 && navId !== 0 && navId !== 3 && navId !== 6 && navId !== 1 && navId !== 9 && !historyMode">
                            <BtnIframeChujuan v-if="navId == 7" />
                            <message-input :readonly="readonly" eventName="open-dialog" />
                        </footer>

                        <footer v-if="navId === 0 && !showDialog" class="upload-footer baogaoshengcheng">
                            <BtnMangeDoc />

                            <section v-for="(item, key) in variables" :key="key">
                                <div>
                                    <p>
                                        <span>{{ item.variable_name }}</span>
                                    </p>
                                </div>

                                <div>
                                    <a-input :style="{ flex: '1' }" :placeholder="`请输入${item.variable_name}`"
                                        allow-clear @change="(event) => {
                                            customChange(event, item.node_id, item.variable_name);
                                        }" v-if="item.value_type === 1" />
                                    <a-upload v-else :style="{ width: '300px' }" :multiple="false" :limit="1"
                                        :custom-request="(option) => {
                                            customRequest(option, item.node_id, item.variable_name);
                                        }" :show-upload-button="{ showOnExceedLimit: true }"
                                        accept=".pdf,.doc,.docx,.txt,.md,.ppt.pptx" />
                                </div>
                            </section>

                            <a-textarea :max-length="maxLength" v-model="textValue"
                                :show-word-limit="textValue.length > maxLength / 2" :auto-size="{ maxRows: 6 }"
                                placeholder="输入您想了解的内容，Shift+Enter换行" :style="text_area_style">
                            </a-textarea>

                            <a-button :style="{ width: '500px' }" type="primary" @click="beginCombine">开始</a-button>
                        </footer>

                        <template v-if="navId === 3">
                            <footer v-if="!showDialog" class="upload-footer wendangzhinengformarea-footer">
                                <a-upload :file-list="wendangzhineng_file_list" :multiple="true"
                                    :limit="MAX_ACCEPT_FILE" :auto-upload="false"
                                    :show-upload-button="{ showOnExceedLimit: false }"
                                    accept=".pdf,.doc,.docx,.txt,.md,.ppt.pptx" @change="handleFileChange">
                                    <template #upload-button>
                                        <a-tooltip :content="upload_warning_text">
                                            <a-button class="upload-button">
                                                <template #icon>
                                                    <icon-upload />
                                                </template>

                                                <template #default>点击上传</template>
                                            </a-button>
                                        </a-tooltip>
                                    </template>

                                    <template #file-name="{ fileItem }">
                                        <a-tooltip :content="fileItem.name">
                                            <span>{{ fileItem.name }}</span>
                                        </a-tooltip>
                                    </template>
                                </a-upload>

                                <a-textarea :max-length="maxLength" v-model="wendangzhineng_text_input"
                                    :disabled="parseStatus"
                                    :show-word-limit="wendangzhineng_text_input.length > maxLength / 2"
                                    :auto-size="{ maxRows: 6 }" placeholder="输入您想了解的内容，Shift+Enter换行"
                                    :style="text_area_style" @keyup="handleTextKeyUp">
                                </a-textarea>

                                <a-button :style="{ width: '500px' }" type="primary"
                                    @click="beginWendangzhinengCombine">开始</a-button>
                            </footer>

                            <footer v-if="showDialog && !historyMode" class="upload-footer">
                                <a-textarea :max-length="maxLength" v-model="wendangzhineng_text_input"
                                    :disabled="parseStatus"
                                    :show-word-limit="wendangzhineng_text_input.length > maxLength / 2"
                                    :auto-size="{ maxRows: 6 }" placeholder="输入您想了解的内容，Shift+Enter换行"
                                    :style="text_area_style" @keyup="handleTextKeyUp">
                                </a-textarea>

                                <a-button :style="{ width: '500px' }" type="primary"
                                    @click="beginWendangzhinengCombine">开始</a-button>
                            </footer>
                        </template>


                        <!-- 小数绘图底部输入栏 -->
                        <PictureFooter v-if="navId === 6 && !historyMode" :agentId="selectId" />

                        <!-- 文档报告 -->
                        <DocumentReportFooter v-if="navId === 9 && !historyMode" :agentId="selectId" />

                        <!-- 侧边栏切换按钮 -->
                        <ToggleBtn v-if="navId !== -2" :closeOthers="closeOthers" @toggle="openAll" />
                    </div>
                </div>
            </div>
            <!-- <right v-if="navId === 0 || navId === 2" /> -->
        </div>
    </div>
</template>
<script setup>
import { Message } from '@arco-design/web-vue';


import Right from "../components/Right.vue";
import DialogWrap from "../components/DialogWrap.vue";
import Slider from "../components/Slider.vue";
import ProjectIntro from '../components/ProjectIntro.vue';
import History from "../components/History.vue";
import MessageInput from "../components/MessageInput.vue";
import PictureFooter from '../components/PictureFooter.vue';
import DocumentDetail from "./DocumentDetail.vue";
import DocumentCombine from "./DocumentCombine.vue";
import Index from "./Index.vue";
import Answer from "./Answer.vue";
import Document from "./Document.vue";
import PicArticle from "./PicArticle.vue";
import DocumentAnswer from "./DocumentAnswer.vue";
import DocumentsmartData from "./DocumentsmartData.vue";
import DocumentInterlocution from './DocumentInterlocution.vue';
import DocumentQuestion from "./DocumentQuestion.vue";
import DocumentQuestion2 from "./DocumentQuestion2.vue";
import Analysis from "./Analysis.vue";

import ToggleBtn from '../components/ToggleBtn.vue';

import BtnMangeDoc from '../components/btn-manage-doc/BtnMangeDoc.vue';

import DocumentReportFooter from '../components/DocumentReportFooter.vue'

import BtnIframeChujuan from '../components/btn-iframe-chujuan/BtnIframeChujuan.vue'

import { defineComponent, ref, onMounted, inject, onBeforeUnmount, computed } from "vue";

import { wendangzhinengSetTempDocFile, wendangzhinengClearDocFile } from '../components/dialog-wrap/temp-wendangzhineng-docs';


// NOTE： 先把4文库问答的类型改成report类型，后续再改回来
const dialogType = [
    "report",
    "excel",
    "knowledgeQuiz",
    // "report",
    "wendangzhineng",
    "normal",
    "smartData",
    "huitu",  // 小数绘图
    "question",

    "question",
    'document_report', // 文档报告生成
];

const { config, helper, ajax } = inject("$global");

const SYSTEM_NAME = config.defaultTitle

const closeOthers = ref(false);
const swiperNumber = ref(5);
const navId = ref(-1);

const readonly = ref(false);

const showDialog = ref(false); // 是否显示对话内容 v-if
const initDialog = ref(false); // 对话是否初始化
const hideDialog = ref(false); // 是否隐藏对话 v-show

const historyMode = ref(false);
const dialogList = ref([]);

const selectId = ref(""); // 当前选择的 agent_id 或者 历史记录的 ID
const real_agent_id = ref(""); // 实际的agent_id，此值仅在 点击侧边栏具体功能时更改，例如点击 知识问答、文档智能按钮时更改
const agentIds = ref([]); // agent ID的列表
const agentList = ref([]);

const dialogId = ref("");
const historyList = ref([]);
const variables = ref([]);
const textValue = ref("");
const parseStatus = ref(false);
const maxLength = ref(6000); // 允许输入的最大长度
const targetDocument = ref(null); // 当前查看详情的文档
const transNavId = ref() //查看详情时记录之前的navId

/**
 * 记录各按钮点击时的次数
 * 侧边栏，菜单点击
 * 历史记录每一项被点击
 * 新建对话按钮被点击
 * 对应按钮，每点击一下，此处对应数据新增1
 * 以此可以维护一个唯一的key
 */
const count_menu_nav_click = ref(0);
const count_his_item_click = ref(0);
const count_btn_create_click = ref(0);
/**
 * 会话区域唯一的key
 */
const dialog_uniq_key = computed(() => {
    return count_menu_nav_click.value + count_his_item_click.value + count_btn_create_click.value;
});
/**
 * 更新按钮点击的次数
 * @param {String} type - menu/create/history
 */
const updateClickCount = (type) => {
    if (type === 'ct_menu') {
        count_menu_nav_click.value = count_menu_nav_click.value + 1;
    }

    if (type === 'ct_create') {
        count_btn_create_click.value = count_btn_create_click.value + 1;
    }

    if (type === 'ct_history') {
        count_his_item_click.value = count_his_item_click.value + 1;
    }
}



let reportData = {};
let agents = {}

const openAll = () => {
    closeOthers.value = !closeOthers.value;
};

const setReadonly = (status) => {
    readonly.value = status;
};
const changeParse = (status) => {
    parseStatus.value = status;
}
const goDocument = (targetDoc) => {
    transNavId.value = navId.value
    navId.value = -2;
    hideDialog.value = true;
    targetDocument.value = {...targetDoc };
};
const goBack = () => {
    navId.value = transNavId.value;
    hideDialog.value = false;
};

/**
 * 当点击某个导航时触发的方法
 * 例如：点击 知识问答 文档智能 智能问答 智能数据 等
 * @params {object} node
 * @params {number} node.id - 例如 3 4 5
 * @params {string} node.title - 例如：文档智能 小数绘图
 */
const selectNav = async (node) => {
    navId.value = node.id;
    textValue.value = [];
    // 关闭历史模式
    historyMode.value = false;
    readonly.value = false;

    if (node.index === -1) {
        swiperNumber.value = 5;
    } else {
        swiperNumber.value = 4;
    }

    helper.$bus.emit("stop-writing");
    showDialog.value = false;

    // 获取当前选定的agent对应的ID
    selectId.value = (agents.find(agent => agent.name === node.title) || {}).id || null;
    real_agent_id.value = selectId.value; // 记录agent_id值

    /**
     * 导航切换
     * 清空文档智能的数据
     */
    wendangzhineng_file_uploaded.value = false;
    wendangzhineng_text_input.value = '';
    wendangzhineng_file_list.value = [];
    wendangzhinengClearDocFile();

    // 获取历史记录
    const data = await ajax.message.getDialogs(selectId.value);


    // if (navId.value === 0 || navId.value === 3) {
    //     const result = await ajax.agent.getVariables(selectId.value);
    //     variables.value = result;
    //     reportData = {};
    // }

    if (data && Array.isArray(data)) {
        historyList.value = data.map((value) => {
            return {
                content: value.name,
                id: value.id,
                time: value.update_date,
                workflow: value.workflow
            };
        });
    }

    // 每次切换功能板块时，清空sendData数据
    // helper.write('sendData', {});
    clearLocalStorageSendData();

    updateClickCount('ct_menu');
};

/**
 * 选择某个历史记录
 * @params {string} id - 历史记录对应的ID
 */
const selectHistory = async (id) => {
    showDialog.value = true;
    // 历史记录对话模式，不调用对话ID接口
    historyMode.value = true;
    readonly.value = true;

    selectId.value = id;
    helper.$bus.emit("set-loading", true);
    helper.$bus.emit("stop-writing");
    initDialog.value = false;

    // 历史记录 通过当前name取id
    const name = config.slider.find(item => item.id === navId.value).title
    const agentsId = agents.find(agent => agent.name === name).id;
    const data = await ajax.message.getHistoryLogs(agentsId, id);

    if (data && Array.isArray(data) && data.length > 0) {
        dialogList.value = data
    } else {
        dialogList.value = []
    }

    initDialog.value = true;
    helper.$bus.emit("set-loading", false);

    updateClickCount('ct_history');
};

const beginCombine = async () => {
    let report_name = "";
    let inputData = [];
    for (let key in reportData) {
        /**
         * 此部分代码于 2024/11/25日上午做了简单优化
         * 优化时，仅调整了循环体内的代码
         * 由于此功能暂时禁用，无法测试优化后的效果是否正常
         * 如果后续测试时发现代码异常，可copy此时间之前的原代码
         */
        const cur_report = reportData[key];
        const report_key = cur_report.key;
        const report_value = cur_report.value;

        const item = {
            id: key,
            name: report_key,
        };

        if (typeof report_value === "string") {
            report_name += `${report_key}：${report_value}\n`;

            item.file_path = '';
            item.value = report_value;
        } else {
            report_name += `${report_key}：${report_value.name}\n`;

            item.file_path = report_value.url;
            item.value = '';
        }

        inputData.push(item);
    }

    // 如果不是历史记录对话模式，则创建对话
    if (!historyMode.value) {
        const data = await ajax.message.createDialog(selectId.value);

        if (data) {
            dialogId.value = data.chat_id;
        }
    }

    dialogList.value = [];
    showDialog.value = true;
    initDialog.value = true;

    const sendData = {
        chatHistory: [],
        message: textValue.value,
        name: "报告生成",
        description: "报告生成",
        inputs: {
            report_name,
            id: "Report-PRcYL",
            data: inputData
        }
    };

    setTimeout(() => {
        helper.$bus.emit("send-message", sendData);
    }, 500);
};


const continueCombine = async () => {
    const sendData = {
        chatHistory: [],
        name: "报告生成",
        description: "报告生成",
        inputs: {
            report_name: textValue.value,
            id: "Report-PRcYL",
            query: textValue.value,
        }
    };

    setTimeout(() => {
        helper.$bus.emit("send-message", sendData);
        textValue.value = "";
    }, 500);
};

const customChange = (event, key, value) => {
    reportData[key] = {
        key: value,
        value: event
    };
};

/**
 * 文档智能上传文件
 * @param option
 * @param key
 * @param value
 */
const customRequest = async (option, key, value) => {
    const { onSuccess, fileItem } = option;
    const { file, uid, name } = fileItem;
    const fileList = [];

    fileList.push({
        id: uid,
        file
    });

    onSuccess();
    const formData = new FormData();

    fileList.forEach((item) => {
        formData.append("file", item.file);
    });

    const data = await ajax.file.uploadFiles(selectId.value, formData);

    reportData[key] = {
        key: value,
        value: {
            name,
            url: data.file_path
        }
    };
};

onMounted(async () => {
    agents = await ajax.agent.getAgents();
    agentList.value = agents;

    agentIds.value = agents && Array.isArray(agents) && agents.map((data) => data.id) || [];

    helper.$bus.on("open-dialog", async (value) => {
        // 如果不是历史记录对话模式，则创建对话
        if (!historyMode.value) {
            const data = await ajax.message.createDialog(selectId.value);
            dialogId.value = data.chat_id;
        }

        dialogList.value = [];
        showDialog.value = true;
        initDialog.value = true;

        // TODO
        setTimeout(() => {
            helper.$bus.emit("send-message", value);
        }, 200);
    });
});

onBeforeUnmount(() => {
    helper.$bus.off("open-dialog");
});

/**
 * 点击新建对话按钮
 */
const handelSetNewChat = () => {
    selectId.value = real_agent_id.value;

    showDialog.value = false;

    historyMode.value = false;
    setReadonly(false);

    // 清空文档智能相关的数据
    wendangzhineng_file_uploaded.value = false;
    wendangzhineng_text_input.value = '';
    wendangzhineng_file_list.value = [];
    wendangzhinengClearDocFile();

    // 每次新建对话时，清空sendData数据
    clearLocalStorageSendData();

    updateClickCount('ct_create');
};

function clearLocalStorageSendData() {
    // helper.write('sendData', {});
}

const text_area_style = {
    flex: 1,
    borderRadius: '12px',
    marginTop: '20px',
    padding: '0px 30px 0 16px',
    background: 'transparent',
    border: '1px solid #e3e3e3',
    minHeight: '120px',
    paddingBottom: `${textValue.value.length > maxLength.value / 2 ? '20px' : ''}`
};

/**
 * 文档智能相关内容处理
 */
/**
 * 文件上传操作
 */
const MAX_ACCEPT_FILE = 5;
const upload_warning_text = `支持上传文件pdf、docx文档(最多${MAX_ACCEPT_FILE}个，每个大小不超过10MB)`;
const wendangzhineng_file_list = ref([]);
const wendangzhineng_text_input = ref('');
const wendangzhineng_file_uploaded = ref(false);
const wendangzhineng_is_loading = ref(false);
/**
 * 文件数据变化
 * @param fileList
 */
const handleFileChange = (fileList) => {
    wendangzhineng_file_list.value = fileList;
}
const getFIleParams = () => {
    const formData = new FormData();

    const f_list = wendangzhineng_file_list.value;

    f_list.forEach((item) => {
        const file = item.file;

        formData.append("file", file);
    });

    return formData;
}
const showMsg = (msg) => {
    Message.error({ content: msg, position: 'bottom' });
}
const beginWendangzhinengCombine = async () => {
    if (wendangzhineng_is_loading.value) {
        return;
    }

    wendangzhineng_is_loading.value = true;

    // 文档智能
    const title = wendangzhineng_text_input.value; // 标题
    const f_list = wendangzhineng_file_list.value;

    let sendData = null;

    if (!wendangzhineng_file_uploaded.value) {
        // 文件未上传
        if (f_list.length === 0) {
            showMsg('请选择文件');
            return;
        }

        if (!title) {
            showMsg('请输入内容');
            return;
        }

        showDialog.value = true;

        // 创建会话
        const data = await ajax.message.createDialog(selectId.value);
        if (data) {
            dialogId.value = data.chat_id;
        }

        // 上传文件
        const fm_data = getFIleParams();
        const uploadResult1 = await ajax.file.uploadFiles(real_agent_id.value, fm_data);
        const files_info = uploadResult1.files; // 数组
        const file_id_list = files_info.map(item => item.id);

        sendData = {
            message: title,
            upload_file_id: file_id_list
        }

        /**
         * 在内存中保存上传的文件
         * 供对话时界面上显示
         */
        wendangzhinengSetTempDocFile({
            client_files: f_list,
            server_files: files_info
        });

    } else {
        // 已上传，无需再上传
        // 再次提问
        if (!title) {
            showMsg('请输入内容');
            return;
        }

        showDialog.value = true;

        // 创建会话
        const data = await ajax.message.createDialog(selectId.value);
        if (data) {
            dialogId.value = data.chat_id;
        }

        sendData = {
            message: title,
        }
    }

    wendangzhineng_file_uploaded.value = true;
    // wendangzhineng_text_input.value = '';
    // wendangzhineng_file_list.value = [];

    dialogList.value = [];
    // showDialog.value = true;
    initDialog.value = true;

    setTimeout(() => {
        helper.$bus.emit("send-message", sendData);
        wendangzhineng_text_input.value = '';
        wendangzhineng_is_loading.value = false;
    }, 500);
};
/**
 * 移除文本中的换行符
 */
const removeBreakLineFlag = () => {
    wendangzhineng_text_input.value = wendangzhineng_text_input.value.replace(/\n/, '');
};

/**
 * 用户按键事件
 * @param e
 */
const handleTextKeyUp = (e) => {
    if (e.keyCode === 13) {
        if (e.ctrlKey) {
            // 此时也按下Ctrl：换行处理
        } else {
            // 此时没有按下Ctrl
            removeBreakLineFlag();

            beginWendangzhinengCombine();
        }
    }
};
</script>
<style lang="scss" scoped>
.main {
    .upload-footer {
        margin-bottom: 50px;
        padding: 20px;
        width: 540px;
        border: 1px solid #eee;

        >section {
            >div {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 500px;

                >p {
                    width: 150px;
                    margin-right: 10px;
                }
            }

            p {
                span {
                    position: relative;

                    &:after {
                        content: "*";
                        display: block;
                        color: red;
                        position: absolute;
                        right: -10px;
                        top: -5px;
                    }
                }
            }

            >p,
            >div {
                margin: 10px 0;
            }
        }
    }

    flex: 1;
    position: relative;
    display: flex;

    .history-wrap {
        width: 0px;
        opacity: 0;
        overflow: hidden;
        transition-duration: 0.3s;
        transition-property: width;

        &-open {
            opacity: 1;
            width: 260px;
        }
    }

    .wrap {
        flex: 1;
    }

    .border-wrap {
        position: relative;
        padding: 30px 16px 30px 40px;
        flex: 1;
        height: 100%;

        &.border-no-wrap {
            padding: 0;

            >div {
                padding: 0;

                >section.section-padding {
                    padding: 0;
                }
            }
        }

        >div {
            width: 100%;
            height: 100%;
            background: #fff;
            box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.03);
            border-radius: 14px;
            display: flex;
            flex-direction: column;
            padding-left: 32px;
            position: relative;

            >div {
                position: absolute;
                bottom: -10px;
                left: -10px;
                z-index: 10;
                width: 38px;
                height: 38px;
                border-radius: 20px;
                background: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
            }

            // >header {
            //   >div {
            //     display: inline-block;
            //     margin-top: 20px;

            //     >img {
            //       transform: translateX(-12px);
            //     }

            //     >p {
            //       font-size: 36px;
            //       font-weight: bold;
            //       color: #000;

            //       >span {
            //         font-weight: bold;
            //         background: linear-gradient(180deg, #41d98c, #31c4c9);
            //         -webkit-background-clip: text;
            //         -webkit-text-fill-color: transparent;
            //       }
            //     }

            //     >span {
            //       display: block;
            //       color: #000;
            //       font-size: 15px;
            //       margin: 5px 0 32px;
            //     }
            //   }
            // }

            >section {
                flex: 1;
                overflow: hidden;

                &.section-padding {
                    padding-right: 32px;
                    padding-bottom: 50px;
                }
            }

            >footer {}
        }
    }
}

footer.baogaoshengcheng{
    position: relative;
}
</style>


<style>
.wendangzhinengformarea-footer .arco-upload-icon.arco-upload-icon-start {
    display: none;
}

.wendangzhinengformarea-footer .arco-upload-progress {
    display: none;
}

.wendangzhinengformarea-footer .arco-upload-list.arco-upload-list-type-text,
.wendangzhinengformarea-footer .arco-upload-list.arco-upload-list-type-picture {
    width: 100%;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 5px;
}
</style>