From 1c180d70f0445fa804b40df106e1fdbb50508c55 Mon Sep 17 00:00:00 2001 From: yinbangzhong <zhongbangyin@126.com> Date: 星期一, 02 九月 2024 09:22:33 +0800 Subject: [PATCH] 单文档 --- src/views/sessionManager/index.vue | 612 ++++++++++++++++++++++++++++++++++++++++++++++--------- 1 files changed, 510 insertions(+), 102 deletions(-) diff --git a/src/views/sessionManager/index.vue b/src/views/sessionManager/index.vue index a7b426d..a7332b5 100644 --- a/src/views/sessionManager/index.vue +++ b/src/views/sessionManager/index.vue @@ -23,14 +23,16 @@ <!-- <span class="title">{{ agentTitle }}</span>--> <a-popover position="bottom" trigger="click"> - <a-button border + <a-button border> + <span + style=" + width: 100px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + " + >{{ from.name }}</span > - <span style=" - width: 100px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - ">{{ from.name }}</span> <icon-down style="margin-left: 4px" /> </a-button> <template #content> @@ -55,12 +57,13 @@ ref="scrollbar" id="home" class="chat-list" - style=" - width: 80%; - overflow: auto; - height: calc(100vh - 380px); - margin: 0px auto 20px; - " + style="width: 80%; overflow: auto; margin: 0px auto 20px" + :style="{ + height: + uploaditemList.length > 0 + ? 'calc(100vh - 480px)' + : 'calc(100vh - 380px)', + }" > <div class="chat-item" @@ -75,39 +78,165 @@ /> </template> <template #content> - <div :class="{ chartUserText: theme === 'light' }" - >{{ sessionDetail.content }} + <div :class="{ chartUserText: theme === 'light' }"> + {{ sessionDetail.content }} + <!-- <a-input + :style="{ width: '100%' }" + v-model="sessionDetail.content" + v-if="isEdit" + /> + + <div v-else> + {{ sessionDetail.content }} + </div> --> </div> + <!-- <div v-if="!isEdit"> + <span + class="action" + v-if="index != 0" + @click="copy(sessionDetail.content)" + > + <icon-copy /> 澶嶅埗 + </span> + <span class="action" @click="edit()"> + <icon-pen /> 缂栬緫 + </span> + </div> + <a-space v-else> + <a-button type="outline" size="mini" @click="cancelEdit(1)" + >鍙栨秷</a-button + > + <a-button type="primary" size="mini" @click="cancelEdit(2)" + >纭畾</a-button + > + </a-space> --> </template> </a-comment> <a-comment v-else-if="sessionDetail.role === 'assistant'"> <template #avatar> <img class="icon-user-jpg" - src="../../assets/images/icon-chart.png" + src="../../assets/images/icon-picture.png" alt="鏈湴鍥剧墖" /> </template> <template #content> - <!-- <a-card :class="{ chatItemAnswer: theme === 'light' }">--> - <!-- <div--> - <!-- :class="{ light: theme === 'light' }"--> - <!-- v-html="sessionDetail.content.replace(/\n/g, '<br/>')"--> - <!-- >--> - <!-- </div>--> - <!-- </a-card>--> - <a-textarea - readonly - auto-size - v-model="sessionDetail.content" - :class="{ chatItemAnswer: theme === 'light' }" - :style="{ - backgroundColor: - theme === 'light' ? '#ffffff' : '#000000', - }" - style="border: none" - > - </a-textarea> + <a-card v-if="isExistTip(sessionDetail.content)"> + <div + :class="{ chatItemAnswer: theme === 'light' }" + :style="{ + backgroundColor: + theme === 'light' ? '#ffffff' : '#000000', + }" + style="border: none" + v-for="(breakContent, breakIndex) in breakLine( + sessionDetail.content + )" + > + <div + :class="{ chatItemAnswer: theme === 'light' }" + :style="{ + backgroundColor: + theme === 'light' ? '#ffffff' : '#000000', + }" + style="border: none" + v-if="isExistTip(breakContent)" + > + <div + :class="{ chatItemAnswer: theme === 'light' }" + :style="{ + backgroundColor: + theme === 'light' ? '#ffffff' : '#000000', + }" + style="border: none" + v-for="(item, tipIndex) in tipMatch(breakContent)" + > + <span v-if="tipIndex == 0"> + {{ breakContent.substring(0, item.index) }} + <a-tooltip + background-color="#3491FA" + :content=" + getTipContent(messagenList.reference, index) + " + > + <img + style="width: 20px; height: 20px" + :src="tipImage" + /> + </a-tooltip> + </span> + <span v-else-if="tipIndex == item.len - 1"> + {{ + breakContent.substring( + item.preIndex + item.item.length, + item.index + ) + }} + <a-tooltip + background-color="#3491FA" + :content=" + getTipContent(messagenList.reference, index) + " + > + <img + style="width: 20px; height: 20px" + :src="tipImage" + /> + </a-tooltip> + {{ breakContent.substring(item.index + 5) }} + </span> + <span v-else> + {{ + breakContent.substring( + item.preIndex + item.item.length, + item.index + ) + }} + <a-tooltip + background-color="#3491FA" + :content=" + getTipContent(messagenList.reference, index) + " + > + <img + style="width: 20px; height: 20px" + :src="tipImage" + /> + </a-tooltip> + </span> + </div> + </div> + <div v-else> + {{ breakContent }} + </div> + </div> + </a-card> + <a-card v-else> + <a-textarea + readonly + auto-size + :default-value="chartText(sessionDetail.content)" + :class="{ chatItemAnswer: theme === 'light' }" + :style="{ + backgroundColor: + theme === 'light' ? '#ffffff' : '#000000', + }" + style="border: none" + > + </a-textarea> + </a-card> + <!-- <div class="prompt"> + <ul> + <li class="prompt-item" @click="copyText('43234')"> + <span> + 344343klsdjkjksdjkjksdjk灏卞紑濮嬪ぇ瀹剁湅鏁版嵁搴撶櫥璁板崱鍙楁墦鍑诲嚡鎾掔櫥璁板崱鍙楁墦鍑诲嚡鎾掔櫥璁板崱鍙楁墦鍑诲嚡鎾掔殑43</span + > + <span style="margin-left: 20px"> + <icon-right /> + </span> + </li> + </ul> + </div> --> </template> <!-- <div>{{ sessionDetail.role === 'assistant' }}</div> --> <template #actions> @@ -150,29 +279,32 @@ > <icon-refresh /> 閲嶆柊鐢熸垚 </span> + <!-- <span class="action"><icon-to-bottom />涓嬭浇 </span> --> </template> </a-comment> <a-comment v-else-if="sessionDetail.role === 'last'"> <template #avatar> <img class="icon-user-jpg" - src="../../assets/images/icon-chart.png" + src="../../assets/images/icon-picture.png" alt="鏈湴鍥剧墖" /> </template> <template #content> - <a-textarea - readonly - auto-size - v-model="displayedText" - :class="{ chatItemAnswer: theme === 'light' }" - :style="{ - backgroundColor: - theme === 'light' ? '#ffffff' : '#000000', - }" - style="border: none" - > - </a-textarea> + <a-spin :loading="chartLoading" dot style="width: 100%"> + <a-textarea + readonly + auto-size + v-model="displayedText" + :class="{ chatItemAnswer: theme === 'light' }" + :style="{ + backgroundColor: + theme === 'light' ? '#ffffff' : '#000000', + }" + style="border: none" + > + </a-textarea> + </a-spin> </template> <template #actions> @@ -219,7 +351,11 @@ v-model="inputMsg" @keydown.shift.enter="handleShiftEnter" @keydown.enter="sendMessage" - placeholder="杈撳叆鎮ㄦ兂浜嗚В鐨勫唴瀹癸紝Shift+Enter鎹㈣锛孍nter鍙戦��" + :placeholder=" + uploaditemList.length > 0 + ? '鏁寸悊杩欎簺鏂囦欢鐨勬牳蹇冨唴瀹�' + : '杈撳叆鎮ㄦ兂浜嗚В鐨勫唴瀹癸紝Shift+Enter鎹㈣锛孍nter鍙戦��' + " allow-clear show-word-limit :disabled="chatDis" @@ -233,8 +369,26 @@ maxRows: 5, }" /> - <div style="width: 100%;display: flex;justify-content: space-between"> - <updataFile ref="fileInput" :sessionId="activeSessionId" @selectFileCallback="selectFileCallback"></updataFile> + <div + style=" + width: 100%; + display: flex; + justify-content: space-between; + " + class="uploadFileDis" + > + <updataFile + ref="fileInput" + :sessionId="activeSessionId" + @selectFileCallback="selectFileCallback" + ></updataFile> + <!-- <uploadFile + ref="fileInput" + :handleRemove="handleRemove" + :typeXLse="false" + @selectFileCallback="selectFileCallback" + ></uploadFile> --> + <a-button :disabled="chatDis" @click="sentClick" @@ -246,12 +400,17 @@ </a-button> </div> </div> - <div class="uploadFileList"> + <div class="uploadFileList" v-if="uploaditemList.length > 0"> <div class="files" v-for="(item, index) in uploaditemList" :key="index" - style="position: relative; width: 200px; margin-top: 10px" + style=" + position: relative; + width: 200px; + margin-top: 10px; + margin-right: 20px; + " > <a-comment :author="item.name" @@ -273,9 +432,10 @@ </template> </a-spin> <!-- <a-button type="text" :loading="onFileSelectedLoading" v-if="onFileSelectedLoading"></a-button>--> - <a-avatar v-if="!onFileSelectedLoading"> - <icon-file style="color: #0960bd" /> - </a-avatar> + <!-- <a-avatar v-if="!onFileSelectedLoading">--> + <!-- <icon-file style="color: #0960bd" />--> + <!-- </a-avatar>--> + <img :src="getIconByExtension(item.name)" alt="" /> </template> </a-comment> <icon-close-circle-fill @@ -316,7 +476,18 @@ ></smartAi> </div> </a-col> + <a-col :span="23" v-show="agentType == '5'"> + <div class="center"> + <seniorAgentSession :modalObj="agentObj"></seniorAgentSession> + </div> + </a-col> </a-row> + <a-modal title=" " v-model:visible="fileVisible" :footer="false" fullscreen> + <!-- <docx previewSrc="http://192.168.20.116:1080/v1/document/get/405c3efa4d8c11ef97560242ac120006"></docx>--> + <docx v-if="documenttype == 'docx'" :previewSrc="previewSrc"></docx> + <excel v-if="documenttype == 'excel'" :previewSrc="previewSrc"></excel> + <txtPdf v-if="documenttype == 'txtPdf'" :previewSrc="previewSrc"></txtPdf> + </a-modal> <a-modal v-model:visible="visible" title="淇敼鍚嶇О" @@ -325,12 +496,7 @@ :footer="false" title-align="start" > - <a-form - ref="formRef" - :rules="rules" - :model="from" - @submit="handleSubmit" - > + <a-form ref="formRef" :rules="rules" :model="from" @submit="handleSubmit"> <a-form-item field="name" label="鍚嶇О"> <a-input v-model="from.name" placeholder="璇疯緭鍏ュ悕绉�" /> </a-form-item> @@ -350,7 +516,7 @@ </div> </template> <script setup lang="ts"> - import { useAppStore, useUserStore } from '@/store'; + import { useAppStore, userModelState, useUserStore } from '@/store'; import { computed, nextTick, @@ -368,9 +534,11 @@ import chatMenu from '@/views/sessionManager/components/chatMenu.vue'; import AddSession from '@/views/sessionManager/components/addSession.vue'; import agentSession from '@/views/sessionManager/components/agentSession.vue'; + import seniorAgentSession from '@/views/sessionManager/components/seniorAgentSession.vue'; import historySession from '@/views/sessionManager/components/historySession.vue'; import smartAi from '@/views/sessionManager/components/smartAi.vue'; import updataFile from '@/views/sessionManager/components/updataFile.vue'; + import EventBus from '@/utils/EventBus'; import { addSessionApi, @@ -379,6 +547,9 @@ getSessionDetailsApi, sessionListApi, uploadWithoutKb, + uploadAndParse, + chatInfos, + chatRm, } from '@/api/session'; import { getAuthorization } from '@/utils/auth'; import { queryCanvasList } from '@/api/Agent'; @@ -389,21 +560,34 @@ import pdfImg3 from '@/assets/session/execl.png'; import pdfImg4 from '@/assets/session/icon-txt.png'; import pdfImg5 from '@/assets/session/txt.png'; + import tipImage from '@/assets/session/tip.png'; + + import docx from '@/views/dmx/knowledgeLib/components/docx.vue'; + import excel from '@/views/dmx/knowledgeLib/components/excel.vue'; + import txtPdf from '@/views/dmx/knowledgeLib/components/txtPdf.vue'; + import { is } from 'immutable'; + import uploadFile from './components/uploadFile.vue'; // const url = ref('../../assets/session/PDF.png'); - const sessionDetailList = ref([]); //鏍规嵁浼氳瘽id鍑烘潵鐨勪細璇濊鎯� + const sessionDetailList = ref([ + { + content: '浣犲ソ锛� 鎴戞槸浣犵殑鍔╃悊锛屾湁浠�涔堝彲浠ュ府鍒颁綘鐨勫悧锛�', + role: 'assistant', + }, + ]); //鏍规嵁浼氳瘽id鍑烘潵鐨勪細璇濊鎯� const messagenList = ref({}); const sessionList = ref([]); //浼氳瘽鍒楄〃 const modalObj = reactive({ add: false }); const dialogId = ref(''); const chatDis = ref(false); + const chartLoading = ref(false); const loading = ref(false); const agentType = ref('1'); const agentTitle = ref('鏈懡鍚嶄細璇�'); let chatObj = reactive({}); let from = reactive({ - name:'鏈懡鍚嶄細璇�', + name: '鏈懡鍚嶄細璇�', }); const isStopChat = ref(false); const currIndex = ref(0); @@ -424,10 +608,16 @@ const uploadRef = ref(); const files = ref([]); const file = ref(''); - const fileInput = ref(null); + const fileInput = ref(); const chatDataMeg = reactive({}); const visible = ref(false); + const fileVisible = ref(false); let toStop = false; + let documenttype = ref('docx'); + let previewSrc = ref(''); + + const modelStore = userModelState(); + const httpUrl = modelStore.hrefUrl; const rules = { name: [ @@ -453,8 +643,47 @@ } }; let dataItem = []; - const getTxt = (data, role, message, index) => { + const isExistTip = (message: string): boolean => { if (/##[0-9]\$\$/.test(message)) { + return true; + } else { + return false; + } + }; + + const breakLine = (message: string): string[] => { + //鎸塡n鍒嗗壊瀛楃涓� + let arr = message.split('\n'); + return arr; + }; + + const chartText = (message: string): string => { + //鍘婚櫎鎵�鏈夌殑#鍜�** + let arr = message.replace(/\*\*|\#\#\#/g, ''); + return arr; + }; + + const tipMatch = (msg: string): any[] => { + //match session.content涓殑##[0-9]$$鐨勭储寮� + + let indexs: any[] = []; + let preTip = 0; + let matches = msg.match(/##([0-9]+)\$\$/g); + matches?.map((item) => { + let i = msg.indexOf(item); + indexs.push({ + index: i, + item: item, + preIndex: preTip, + len: matches.length, + }); + preTip = i; + }); + return indexs; + }; + + const getTxt = (data, role, message, index) => { + if (isExistTip(message)) { if (role == 'assistant' && index) { let i = index / 2 - 1 > 0 ? index / 2 - 1 : 0; dataItem = data[i].doc_aggs; @@ -466,20 +695,30 @@ return dataItem; }; - const clickHref = (item) => { - // return Message.warning('鏆傛棤娉曟煡鐪�'); - // window.open(`/api/v1/document/get/${item.doc_id}`, '_blank'); - downloadFile({ - url: `/api/v1/document/get/${item.doc_id}`, - filename: item.doc_name, + const getTipContent = (data, index): string => { + let maxSimilarityContent = ''; + let i = index / 2 - 1 > 0 ? index / 2 - 1 : 0; + let maxSimilarity = 0; + data[i].chunks.forEach((chunk) => { + if (chunk.similarity > maxSimilarity) { + maxSimilarity = chunk.similarity; + maxSimilarityContent = chunk.content_with_weight; + } }); + return maxSimilarityContent; }; - const downloadFile = ({ - url, - filename, - target, - }: { + const clickHref = async (item) => { + documenttype.value = item.doc_name.split('.').pop(); + previewSrc.value = httpUrl + `/api/v1/document/get/${item.doc_id}`; + fileVisible.value = true; + }; + + const downloadFile = ({ + url, + filename, + target, + }: { url: string; filename?: string; target?: string; @@ -534,16 +773,84 @@ // formRef.value.resetFields(); }; - const selectFileCallback = (data) => { - console.log(data, 'selectFileCallback'); - uploaditemList.value = data; + const selectFileCallback = (data,conversation_id) => { + uploaditemList.value = [...uploaditemList.value, ...data]; + activeSessionId.value = conversation_id; + }; + + //涓婁紶 + // const selectFileCallback = async (resData, file) => { + // console.log(111); + // try { + // const formData = new FormData(); + // uploaditemList.value = resData; + // uploaditemList.value.map((item) => { + // if (item.name == file[0].file.name) { + // item.onFileSelectedLoading = true; + // item.textName = '涓婁紶涓�'; + // } + // return item; + // }); + // debugger; + // if (!activeSessionId.value) { + // await createSession(resData); + // } + + // // onFileSelectedLoading.value = true; + // // textName.value = '涓婁紶涓�'; + + // formData.append('files', file[0].file); + // formData.append('conversation_id', activeSessionId.value); + + // console.log(formData, 'formData'); + // const { data, code } = await uploadAndParse(formData); + // if (code === 200) { + // uploaditemList.value.map((item: any) => { + // item.onFileSelectedLoading = false; + // item.textName = '涓婁紶鎴愬姛'; + // return item; + // }); + // getInfo(data); + // // onFileSelectedLoading.value = false; + // // textName.value = '涓婁紶鎴愬姛'; + // } + // } catch (err) { + // uploaditemList.value.map((item: any) => { + // item.onFileSelectedLoading = false; + // item.textName = '涓婁紶澶辫触'; + // return item; + // }); + // // onFileSelectedLoading.value = false; + // // textName.value = '涓婁紶澶辫触'; + // Message.error('涓婁紶澶辫触'); + // } + // }; + + //涓婁紶鎴愬姛瑙f瀽getinfo + const getInfo = async (id) => { + const { code, data } = await chatInfos({ + doc_ids: activeSessionId.value, + }); + if (code === 200) { + uploaditemList.value = data; + } + }; + //鍒犻櫎涓婁紶鏂囨。 + const deleteUpload = async (id) => { + const { code, data } = await chatRm({ + doc_id: id, + }); + if (code === 200) { + getInfo(); + } }; let onFileSelectedLoading = ref(false); const deleteFile = (item) => { console.log(uploaditemList.value); - uploaditemList.value = []; + uploaditemList.value.splice(item.index, 1); + // EventBus.emit('queryAgent', item); }; const { toClipboard } = useClipboard(); @@ -551,7 +858,18 @@ await toClipboard(text); //鍙傛暟涓鸿澶嶅埗鐨勬枃鏈� }; - + const isEdit = ref(false); + const edit = () => { + isEdit.value = !isEdit.value; + }; + const cancelEdit = (val) => { + if (val == 1) { + isEdit.value = !isEdit.value; + } else { + //缂栬緫淇濆瓨 + isEdit.value = !isEdit.value; + } + }; const DialogList = async () => { const { code, data } = await getDialogListApi(); @@ -602,7 +920,7 @@ console.log(name, '鏂板缓浼氳瘽鍚嶇О'); const res = await addSessionApi({ - dialog_id: id, + dialog_id: '', conversation_desc: name, }); // console.log(res, "res"); @@ -623,6 +941,7 @@ // 鍙戦�� const sentClick = () => { sendMessage('click'); + uploaditemList.value = []; }; // 閲嶆柊鐢熸垚 const reGenerate = () => { @@ -639,21 +958,39 @@ event.preventDefault(); // 闃绘榛樿琛屼负锛屽嵆涓嶆崲琛� } - // if (!activeSessionId.value) { - // Message.warning("璇烽�夋嫨浼氳瘽"); - // chatDis.value = false; - // loading.value = false; - // return; - // } - // if (displayedText.value) { // querySessionList(); // } if (inputMsg.value) { - startChat(inputMsg.value); - - inputMsg.value = ''; + if (!activeSessionId.value) { + //鏂板缓浼氳瘽 + // 濡傛灉鏈変細璇漣d + console.log(inputMsg.value, '鏂板缓浼氳瘽鍚嶇О'); + const res = await addSessionApi({ + dialog_id: '', + conversation_desc: inputMsg.value, + }); + // console.log(res, "res"); + if (res.code == 200) { + // console.log(res.data.conversation_id); + activeSessionId.value = res.data?.conversation_id; + const { code, data } = await getSessionDetailsApi( + res.data?.conversation_id + ); + if (code === 200) { + console.log(data, '鏂板缓浼氳瘽璇︽儏'); + Object.assign(chatObj, data); + startChat(inputMsg.value); + inputMsg.value = ''; + } + } else { + Message.error('鍒涘缓浼氳瘽澶辫触锛岃閲嶈瘯'); + } + } else { + startChat(inputMsg.value); + inputMsg.value = ''; + } } else { Message.warning('娑堟伅涓嶈兘涓虹┖'); } @@ -664,6 +1001,7 @@ const startChat = async (valMsg) => { chatDis.value = true; loading.value = true; + chartLoading.value = true; toStop = false; sessionDetailList.value.push({ content: valMsg, @@ -707,6 +1045,7 @@ if (typeof d !== 'boolean') { // console.info("data:", d); streamStr.value = d.content; + chartLoading.value = false; startDisplayStr(); } } catch (e) { @@ -715,6 +1054,7 @@ if (done) { console.info('done'); displayedText.value = ''; + chartLoading.value = false; if (isStopChat.value) { setChatDataMeg(chatDataMeg); } else { @@ -759,7 +1099,6 @@ sessionDetailList.value = sessionDetailList.value .splice(0, sessionDetailList.value.length - 2) .concat(lastArr); - console.log(sessionDetailList.value, 'sessionDetailList2'); console.log(chatObj, 'chatObj瀵硅薄'); chatObj.message = chatObj.message.concat(lastArr); @@ -855,19 +1194,25 @@ querySessionList(); }; onBeforeMount(() => { - // DialogList(); - //鏂板缓浼氳瘽 - createSession(''); + activeSessionId.value = ''; }); onMounted(() => { + document.getElementsByTagName; let container = document.getElementById('container'); container.addEventListener('click', () => { - fileInput.value.cancel(); - - }) + // fileInput.value.cancel(); + }); EventBus.on('newChat', () => { agentType.value = '1'; - createSession(''); + // createSession(''); + activeSessionId.value = ''; + sessionDetailList.value = [ + { + content: '浣犲ソ锛� 鎴戞槸浣犵殑鍔╃悊锛屾湁浠�涔堝彲浠ュ府鍒颁綘鐨勫悧锛�', + role: 'assistant', + }, + ]; + from.name = '鏈懡鍚嶄細璇�'; }); }); onBeforeUnmount(() => { @@ -958,6 +1303,33 @@ font-size: 12px; padding-left: 10px; } + } + } + } + // .uploadFileDis { + // :deep(.arco-upload-list-type-text) { + // display: none; + // } + // } + .prompt { + ul { + margin: 0; + padding: 0; + display: flex; + } + ul > li { + list-style-type: none; + } + .prompt-item { + display: flex; + justify-content: space-between; + background-color: #fff; + cursor: pointer; + border-radius: 8px; + padding: 10px; + border: #e5e5e5; + &:hover { + background-color: #eee; } } } @@ -1094,6 +1466,11 @@ } } } + .uploadFileDis { + :deep(.arco-upload-list-type-text) { + display: none; + } + } .chat-item { padding: 10px 0; @@ -1103,6 +1480,19 @@ font-size: 14px; color: #333; margin-top: 4px; + } + :deep(.arco-card-body) { + padding: 0; + border-radius: 10px; + } + :deep(.arco-textarea) { + padding-top: 10px !important; + } + :deep(.arco-comment-inner-content) { + border-radius: 10px; + } + :deep(.arco-card-bordered) { + border-radius: 10px; } .icon-user-jpg { @@ -1121,6 +1511,9 @@ .icon-text { margin-left: 10px; } + } + :deep(.arco-spin-loading .arco-spin-mask-icon) { + left: 10%; } } @@ -1226,4 +1619,19 @@ :deep(.arco-upload-list-item-operation) { //display: none; } + .uploadFileList { + width: 100%; + max-height: 140px; + overflow-y: auto; + padding: 10px; + display: flex; + flex-wrap: wrap; + :deep(.arco-comment-author) { + width: 100px; + display: inline-block; + overflow: hidden; /* 闅愯棌瓒呭嚭鐨勫唴瀹� */ + text-overflow: ellipsis; /* 浣跨敤鐪佺暐鍙锋潵浠f浛琚殣钘忕殑鏂囧瓧 */ + white-space: nowrap; /* 涓嶆崲琛岋紝浣垮唴瀹瑰湪涓�琛屽唴鏄剧ず */ + } + } </style> -- Gitblit v1.8.0