From c144c39d9f3f86e1b52ae4247f8322f6396a4320 Mon Sep 17 00:00:00 2001 From: wujingjing <gersonwu@qq.com> Date: 星期二, 11 三月 2025 13:39:25 +0800 Subject: [PATCH] 查看文件内容 --- src/components/chat/components/playBar/PlayBar.vue | 152 ++++++++++++++++++++++++++++++++++++++++++-------- 1 files changed, 128 insertions(+), 24 deletions(-) diff --git a/src/components/chat/components/playBar/PlayBar.vue b/src/components/chat/components/playBar/PlayBar.vue index 260bb8c..58afdeb 100644 --- a/src/components/chat/components/playBar/PlayBar.vue +++ b/src/components/chat/components/playBar/PlayBar.vue @@ -25,12 +25,14 @@ </el-button> </div> - <div class="set-input flex-auto"> + <div class="set-input"> <div v-if="attachList?.length > 0" class="flex gap-3.5 w-full overflow-x-auto px-2 pb-2"> <div v-for="(item, index) in attachList" :key="index" class="flex items-center gap-2 bg-[#f5f5f5] px-2 py-3 rounded-lg w-[220px] relative group" + :class="{ 'cursor-pointer': item.type === 'table' || item.type === 'metric' }" + @click="openAttachPreview(item)" > <template v-if="item.type === 'file'"> <el-image @@ -54,9 +56,16 @@ <div class="text-info text-sm over-ellipsis w-full">{{ `涓氬姟琛ㄦ牸锛�${item.model.values?.length} 鏉¤褰昤 }}</div> </div> </template> + <template v-if="item.type === 'metric'"> + <div class="ywifont !text-[24px] flex-0" :class="[`ywicon-${item.icon}`, item.iconClass]"></div> + <div class="flex flex-col gap-0.5 w-full flex-auto"> + <div class="font-bold over-ellipsis w-full">{{ item.title }}</div> + <div class="text-info text-sm over-ellipsis w-full">{{ `鎸囨爣鏁版嵁锛�${item.model.values?.length} 鏉¤褰昤 }}</div> + </div> + </template> <div class="group-hover:visible invisible absolute right-0.5 top-0.5 bg-red-500 flex-center rounded-full p-0.5 cursor-pointer" - @click="deleteAttachInIndex(index)" + @click.stop="deleteAttachInIndex(index)" > <span class="ywifont ywicon-guanbi text-white !text-[10px] font-bold"></span> </div> @@ -68,7 +77,7 @@ type="textarea" resize="none" maxlength="1024" - :autosize="{ minRows: 1, maxRows: 8 }" + :autosize="{ minRows: 3, maxRows: 8 }" v-elInputFocus show-word-limit @keydown="keydownInput" @@ -94,17 +103,24 @@ > </el-button> <div class="flex-items-center gap-2"> - <el-tooltip placement="top" content="鍏宠仈涓氬姟琛ㄦ牸"> - <div - class="cursor-pointer size-[38px] relative !z-10 rounded flex-center hover:bg-[#f2f2f2]" - @click="openBusinessTable" - > - <span class="ywifont ywicon-biaoge !text-[24px]"></span> + <el-tooltip placement="top" content="鍏宠仈鎸囨爣"> + <div class="cursor-pointer size-[24px] relative !z-10 rounded flex-center hover:bg-[#f2f2f2]" @click="openMetric"> + <span class="ywifont ywicon-zhibiao !text-[19px]"></span> </div> </el-tooltip> + + <el-tooltip placement="top" content="鍏宠仈涓氬姟琛ㄦ牸"> + <div + class="cursor-pointer size-[24px] relative !z-10 rounded flex-center hover:bg-[#f2f2f2]" + @click="openBusinessTable" + > + <span class="ywifont ywicon-biaoge !text-[19px]"></span> + </div> + </el-tooltip> + <el-tooltip placement="top" content="涓婁紶闄勪欢"> - <div class="cursor-pointer size-[38px] relative !z-10 rounded flex-center hover:bg-[#f2f2f2]" @click="openFileClick"> - <span class="ywifont ywicon-fujian !text-[25px] font-bold"></span> + <div class="cursor-pointer size-[24px] relative !z-10 rounded flex-center hover:bg-[#f2f2f2]" @click="openFileClick"> + <span class="ywifont ywicon-fujian !text-[20px] font-bold"></span> </div> </el-tooltip> @@ -142,22 +158,33 @@ @updateInput="updateInputValue" /> <BusinessTable v-model="businessTableIsShow" @submit="submitBusinessTable" /> + <BusinessTablePreview :data="attachPreviewData" v-model="attachPreviewIsShow" /> + <MetricValues v-model="metricIsShow" @submit="submitMetricValues" /> + + <MetricValuesPreview v-model="metricPreviewIsShow" :data="metricPreviewData" /> </div> </div> </template> <script setup lang="ts"> import type { InputInstance } from 'element-plus'; -import { nextTick, ref } from 'vue'; +import { nextTick, onActivated, onDeactivated, ref } from 'vue'; +import BusinessTable from './businessTable/index.vue'; +import BusinessTablePreview from './businessTablePreview/index.vue'; +import type { Attach } from './hook/useAttach'; +import { useAttach } from './hook/useAttach'; import { useInputEvent } from './hook/useInputEvent'; +import { useUploadFile } from './hook/useUploadFile'; import InputTip from './inputTip/index.vue'; import CommonPhrases from './phrase/CommonPhrases.vue'; import SceneSwitch from './SceneSwitch.vue'; import VoicePage from './voicePage/VoicePage.vue'; import { useCompRef } from '/@/utils/types'; -import { useUploadFile } from './hook/useUploadFile'; -import BusinessTable from './businessTable/index.vue'; -import { useAttach } from './hook/useAttach'; +import emitter from '/@/utils/mitt'; +import MetricValues from './metricValues/MetricValues.vue'; + +import MetricValuesPreview from './metricValues/MetricValuesPreview.vue'; + const emits = defineEmits(['sendClick', 'stopGenClick']); const props = defineProps({ isTalking: Boolean, @@ -249,26 +276,103 @@ } removeAttach(index); }; +const checkTableAttachExist = (data: any) => { + const dataStr = JSON.stringify(data); + const exist = attachList.value.find((item) => item.type === 'table' && JSON.stringify(item.model) === dataStr); + if (exist) { + return true; + } + return false; +}; + +const checkMetricAttachExist = (data: any) => { + const dataStr = JSON.stringify(data); + const exist = attachList.value.find((item) => item.type === 'metric' && JSON.stringify(item.model) === dataStr); + if (exist) { + return true; + } + return false; +}; const submitBusinessTable = (data) => { attachList.value.push( - ...data.map((item) => { - return { - title: item.title, - type: 'table', - model: item, - icon: 'biaoge', - iconClass: 'ywicon-biaoge text-[#c5e0ff]', - }; - }) + ...data + .filter((item) => !checkTableAttachExist(item)) + .map((item) => { + return { + title: item.title, + type: 'table', + model: item, + icon: 'biaoge', + iconClass: 'ywicon-biaoge text-[#c5e0ff]', + }; + }) ); }; +const submitMetricValues = (data) => { + attachList.value.push( + ...data + .filter((item) => !checkMetricAttachExist(item)) + .map((item) => { + return { + title: item.title, + type: 'metric', + model: item, + icon: 'zhibiao', + iconClass: 'ywicon-zhibiao text-[#c5e0ff]', + }; + }) + ); +}; //#region ====================== 涓氬姟琛ㄦ牸 ====================== const businessTableIsShow = ref(false); const openBusinessTable = () => { businessTableIsShow.value = true; }; //#endregion + +//#region ====================== 闄勪欢棰勮 ====================== +const attachPreviewIsShow = ref(false); +const attachPreviewData = ref<Attach>(); +const openAttachPreview = (item: Attach) => { + if (item.type === 'file') return; + if (item.type === 'table') { + attachPreviewIsShow.value = true; + attachPreviewData.value = item; + } else if (item.type === 'metric') { + metricPreviewIsShow.value = true; + metricPreviewData.value = item; + } +}; +//#endregion + +//#region ====================== 鎸囨爣闄勪欢 ====================== +const metricIsShow = ref(false); +const openMetric = () => { + metricIsShow.value = true; +}; +//#endregion + +//#region ====================== 鎸囨爣闄勪欢棰勮 ====================== +const metricPreviewIsShow = ref(false); +const metricPreviewData = ref<Attach>(); + +//#endregion + +const quoteAttach = (item: Attach) => { + if (item.type === 'table') { + submitBusinessTable([item.model]); + } else if (item.type === 'metric') { + submitMetricValues([item.model]); + } +}; +onActivated(() => { + emitter.on('quoteAttach', quoteAttach); +}); + +onDeactivated(() => { + emitter.off('quoteAttach', quoteAttach); +}); defineExpose({ addPhrase, showSyncTip, -- Gitblit v1.9.3