修复星标不能查看，附件等多个bug，优化样式

2025-06-05 23:09:05 +08:00
parent cdcd22962f
commit 1c40dc8338
13 changed files with 74 additions and 42 deletions
--- a/mail-vue/src/components/email-scroll/index.vue
+++ b/mail-vue/src/components/email-scroll/index.vue
@@ -25,7 +25,7 @@
    </div>

    <div ref="scroll" class="scroll">
-      <el-scrollbar ref="scrollbarRef" @scroll="handleScroll" >
+      <el-scrollbar ref="scrollbarRef" @scroll="handleScroll">
        <div class="scroll-box" :infinite-scroll-immediate="false" v-infinite-scroll="loadData"
             infinite-scroll-distance="600">
          <div v-for="item in emailList" :key="item.emailId">
@@ -274,18 +274,26 @@ function htmlToText(email) {
    tempDiv.innerHTML = email.content;
    const scriptsAndStyles = tempDiv.querySelectorAll('script, style, title');
    scriptsAndStyles.forEach(el => el.remove());
-    const text = tempDiv.textContent || tempDiv.innerText || '';
-    return text.replace(/\s+/g, ' ').trim();
+    let text = tempDiv.textContent || tempDiv.innerText || '';
+    text = text.replace(/\s+/g, ' ').trim();
+    return cleanSpace(text)
  }

  if (email.text) {
-    return email.text
+    return cleanSpace(email.text)
  } else {
    return ''
  }

 }

+function cleanSpace(text) {
+  return text
+      .replace(/[\u200B-\u200F\uFEFF]/g, '')  // 移除零宽空格、ZWNJ、ZWJ、LRM、RLM、BOM
+      .replace(/\s+/g, ' ')                   // 多空白合并成一个空格
+      .trim();
+}
+

 function starChange(email) {

--- a/mail-vue/src/components/shadow-html/index.vue
+++ b/mail-vue/src/components/shadow-html/index.vue
@@ -32,8 +32,17 @@ function loadFontInShadow() {
 }

 function updateContent() {
-  if (!shadowRoot) return
+  if (!shadowRoot) return;

+  // 1. 提取 <body> 的 style 属性（如果存在）
+  const bodyStyleRegex = /<body[^>]*style="([^"]*)"[^>]*>/i;
+  const bodyStyleMatch = props.html.match(bodyStyleRegex);
+  const bodyStyle = bodyStyleMatch ? bodyStyleMatch[1] : '';
+
+  // 2. 移除 <body> 标签（保留内容）
+  const cleanedHtml = props.html.replace(/<\/?body[^>]*>/gi, '');
+
+  // 3. 将 body 的 style 应用到 .shadow-content
  shadowRoot.innerHTML = `
    <style>
      :host {
@@ -53,6 +62,7 @@ function updateContent() {
        width: fit-content;
        height: fit-content;
        min-width: 100%;
+        ${bodyStyle ? bodyStyle : ''} /* 注入 body 的 style */
      }

      img {
@@ -72,12 +82,11 @@ function updateContent() {
      a {
        color: #409EFF !important;
      }
-
    </style>
    <div class="shadow-content">
-      ${props.html}
+      ${cleanedHtml}
    </div>
-  `
+  `;
 }

 function autoScale() {
@@ -109,6 +118,7 @@ onMounted(() => {
  shadowRoot = container.value.attachShadow({ mode: 'open' })
  updateContent()
  autoScale()
+  console.log(props.html)
 })

 watch(() => props.html, () => {