1

src/entrypoints/sidepanel/Chat.vue

@@ -6,7 +6,7 @@
       <div class="messages">
         <div v-for="(message, index) in messages" :key="index"
              :class="['message-item', message.isSelf ? 'self' : 'other']">
-          <el-avatar :size="32" :src="message.avatar"/>
+          <el-avatar :size="32" :src="message.avatar" />
           <div class="message-content">
             <div class="content" v-if="!message.isSelf" :class="{ 'loading-content': message.content === '' }">
               <span v-html="message.content"></span>
@@ -29,23 +29,27 @@
            @upload-file="handleUpload"
            @handle-capture="handleCapture"
            @his-records="hisRecords"
-           @add-new-dialogue="addNewDialogue"/>
+           @add-new-dialogue="addNewDialogue" />
 
     <div>
+
       <!-- 输入区域 -->
       <div class="input-area">
         <div v-show="isShowPage" style="border-bottom: 1px solid #F0F0F0;">
-          <div class="card-content">
-            <img :src="pageInfo?.favIconUrl" style="width: 24px;" />
-            <div class="title-wrapper">
-              <div class="title-scroller" :class="{ 'scroll': isHoveringTitle && titleScroll }">
-                {{ pageInfo?.title }}
+          <div class="card_list">
+            <div v-for="(v,i) in pageInfoList" :key="i"
+                 :class="`card-content ${pageInfoList.length > 1 ? 'card_width' : ''}`">
+              <img :src="v?.favIconUrl" style="width: 24px;display: block" />
+              <div class="title-wrapper">
+                <span class="els title-scroller">{{ v?.title }}</span>
+                <span class="els url-scroller">{{ v?.url }}</span>
               </div>
+              <el-icon class="closeIcon" size="16px" color="#909399" @click="deletePageInfo(i)">
+                <CircleClose />
+              </el-icon>
             </div>
-            <el-icon size="16px" @click="isShowPage = false; taklToHtml = false">
-              <CircleClose />
-            </el-icon>
           </div>
+
           <div class="card-btn">
             <el-tooltip content="总结当前页面" placement="top">
               <el-button round @click="handleCardButtonClick" :disabled="!taklToHtml">总结</el-button>
@@ -58,11 +62,11 @@
         </div>
 
         <el-input ref="textareaRef" v-model="inputMessage" type="textarea" :rows="3" placeholder="输入消息..."
-                  @keyup.enter="handleAsk"/>
+                  @keyup.enter="handleAsk" />
         <div class="chat_area_op">
           <el-button type="primary" link @click="handleAsk" :disabled="!inputMessage.trim() || sendLoading">
             <el-icon size="18" :color="inputMessage.trim() ? 'black' : 'gray'">
-              <Promotion/>
+              <Promotion />
             </el-icon>
           </el-button>
         </div>
@@ -72,7 +76,7 @@
 
 
     <!--  历史记录  -->
-    <historyComponent :msgUuid="msgUuid" ref="historyComponentRef" @currentData="(e)=>handleCurrentData(e)"/>
+    <historyComponent :msgUuid="msgUuid" ref="historyComponentRef" @currentData="(e)=>handleCurrentData(e)" />
   </div>
 </template>
 
@@ -114,7 +118,7 @@ const {
   handleInput,
   getFileValue
 } = useMsg(scrollbar, xlsxData, fetchDataAndProcess);
-const {handleCardButtonClick} = useSummary(addMessage, sendRequese);
+const { handleCardButtonClick } = useSummary(addMessage, sendRequese);
 
 function handelIntelligentFillingClick() {
   inputMessage.value = '/智能填表 '
@@ -140,7 +144,16 @@ function handleCurrentData(e) {
 async function readClick() {
   isShowPage.value = true;
   taklToHtml.value = true;
-  await getPageInfo()
+  const tempPageInfo = await getPageInfo();
+  pageInfoList.value.push(tempPageInfo);
+}
+
+function deletePageInfo(i) {
+  pageInfoList.value.splice(i, 1);
+  if (pageInfoList.value.length === 0) {
+    isShowPage.value = false;
+    taklToHtml.value = false;
+  }
 }
 
 function addNewDialogue() {
@@ -172,75 +185,70 @@ function hisRecords() {
   drawerRef.value.drawer = true;
 }
 
-// 计算标题是否需要滚动
-const titleScroll = computed(() => {
-  return pageInfo.value?.title?.length > 20 // 当标题超过20个字符时触发滚动
-})
-
 // let formMap = []
 let formInfo = []
 const flag = ref(false)  //true调用算法接口
 
 const handleUpload = (file) => {
   if (type.value === '2') {
-      chrome.runtime.sendMessage({
+    chrome.runtime.sendMessage({
     type: 'FROM_SIDE_PANEL_TO_GET_PAGE_FORM',
-  }, async (response) => {
-    if (chrome.runtime.lastError) {
-      console.error("消息发送错误:", chrome.runtime.lastError);
-    } else {
+    }, async (response) => {
+      if (chrome.runtime.lastError) {
+        console.error("消息发送错误:", chrome.runtime.lastError);
+      } else {
       addMessage(`已上传文件：${file.name}`, false)
       const fileExtension = file.name.split('.').pop().toLowerCase();
       if (response.status === 'error') return ElMessage({message:response.message,type: 'error', duration: 4 * 1000, grouping: true})
       formInfo = response.data
       if (fileExtension === 'xlsx') {
-        const reader = new FileReader();
-        reader.readAsArrayBuffer(file);
-        reader.onload = async (e) => {
-          const data = new Uint8Array(e.target.result);
-          const workbook = XLSX.read(data, {
-            type: "array",
-            cellDates: false,
-            cellNF: true,
-            cellText: true,
+          const reader = new FileReader();
+          reader.readAsArrayBuffer(file);
+          reader.onload = async (e) => {
+            const data = new Uint8Array(e.target.result);
+            const workbook = XLSX.read(data, {
+              type: "array",
+              cellDates: false,
+              cellNF: true,
+              cellText: true,
             dateNF: 'yyyy-mm-dd'
-          });
+            });
 
-          // 修复日期处理
-          const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
+            // 修复日期处理
+            const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
 
-          // 转换为JSON数据
-          const readData = XLSX.utils.sheet_to_json(firstSheet, {
-            header: 1,
-            raw: false,
-            defval: "",
+            // 转换为JSON数据
+            const readData = XLSX.utils.sheet_to_json(firstSheet, {
+              header: 1,
+              raw: false,
+              defval: "",
             dateNF: 'yyyy-mm-dd'
-          });
-          console.log(readData, 58);
+            });
+            console.log(readData, 58);
 
-          readData[0].forEach((header, i) => {
-            // if (!xlsxData.value[header]) xlsxData.value[header] = []
+            readData[0].forEach((header, i) => {
+              // if (!xlsxData.value[header]) xlsxData.value[header] = []
             xlsxData.value[header] = readData[1][i]
           })
           if (type.value === '2') {
             await streamRes(buildExcelUnderstandingPrompt(readData, file?.name, response), false)
-          }
-        };
-      } else {
+            }
+          };
+        } else {
         await getFileValue(file, response.data)
 
-        // const keys = Object.keys(res)
-        // const values = Object.values(res)
-        // readData[0].forEach((header, i) => {
-        //   if (!xlsxData.value[header]) xlsxData.value[header] = []
-        //   xlsxData.value[header].push(readData[1][i])
-        // })
-        // console.log(res);
-      }
+          // const keys = Object.keys(res)
+          // const values = Object.values(res)
+          // readData[0].forEach((header, i) => {
+          //   if (!xlsxData.value[header]) xlsxData.value[header] = []
+          //   xlsxData.value[header].push(readData[1][i])
+          // })
+          // console.log(res);
+        }
 
-    }
+      }
     return true
-  });
+    });
 
   }
   if (type.value === '') {
@@ -303,8 +311,8 @@ async function handleClick(res, msgObj) {
         fetchDataAndProcess(str, msgObj)
       } else {
         if (type.value === '2') {
-           await new Promise((resolve, reject) => {
-    setTimeout(() => {
+          await new Promise((resolve, reject) => {
+            setTimeout(() => {
       resolve()
     }, 2000)
   })
@@ -342,10 +350,6 @@ onMounted(() => {
     }
   });
 
-  nextTick(() => {
-    scrollbar.value?.setScrollTop(99999)
-  })
-
   // 添加标题悬停事件监听
   nextTick(() => {
     const titleWrapper = document.querySelector('.title-wrapper')
@@ -372,14 +376,20 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+.els {
+  white-space: nowrap; /* 强制文本不换行 */
+  overflow: hidden; /* 隐藏溢出内容 */
+  text-overflow: ellipsis; /* 显示省略号 */
+}
+
 .chat-container {
-  height: 100vh;
+  border-radius: 14px;
+  height: 100%;
   display: flex;
   flex-direction: column;
   border: 1px solid #dcdfe6;
-  border-radius: 4px;
   background-color: #F0F0F0;
-  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
+  //background-color: #ffffff;
 }
 
 .message-list {
@@ -496,31 +506,10 @@ onMounted(() => {
   margin: 10px;
 }
 
-/* .card-content:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
-} */
-
 .card-icon {
   color: #409eff;
 }
 
-.title-wrapper {
-  flex: 1;
-  overflow: hidden;
-  position: relative;
-}
-
-.title-scroller {
-  display: inline-block;
-  white-space: nowrap;
-  color: #333;
-  font-weight: 500;
-}
-
-.title-scroller.scroll {
-  animation: scrollTitle 10s linear infinite;
-}
 
 @keyframes scrollTitle {
   0% {
@@ -605,18 +594,74 @@ onMounted(() => {
   border-radius: 16px;
   margin: 0 12px 12px;
 
+  .card_list {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    padding: 4px 0;
+
+    .card_width {
+      width: 124px !important;
+    }
+  }
+
   .card-content {
+    flex-shrink: 0;
+    width: fit-content;
+    max-width: 260px;
+    height: 50px;
     display: flex;
     align-items: center;
-    gap: 12px;
-    padding: 14px 12px;
-    margin: 0 0 6px;
+    gap: 6px;
+    padding: 8px 6px;
+    margin: 0 8px 6px 0;
     background: #fff;
     border-radius: 10px;
-    border: 1px solid rgba(0, 0, 0, 0.08);
+    border: 1px solid rgba(0, 0, 0, 0.2);
     font-size: 14px;
-    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);*/
-    transition: transform 0.4s;
+    position: relative;
+
+    .title-wrapper {
+      display: flex;
+      //width: fit-content;
+      width: calc(100% - 30px);
+      flex-direction: column;
+    }
+
+
+    .title-scroller {
+      display: inline-block;
+      white-space: nowrap;
+      color: #000000;
+      font-size: 14px;
+      font-weight: 900;
+    }
+
+    .url-scroller {
+      font-size: 12px;
+      color: #909399;
+    }
+
+    .title-scroller.scroll {
+      animation: scrollTitle 10s linear infinite;
+    }
+
+    .closeIcon {
+      display: none;
+      position: absolute;
+      right: -5px;
+      top: -5px;
+      background-color: #ffffff;
+      border-radius: 50%;
+      z-index: 1;
+    }
+
+  }
+
+  .card-content:hover {
+    .closeIcon {
+      display: block;
+    }
   }
 
   .card-btn {