优化

public/static/editor.html

@@ -97,8 +97,8 @@
   }
 
   function insert({ code, name }) {
-    tinymce.activeEditor.insertContent(`<a class="unbreakable-span" data-element-box>
-      <span data-element-code="${code}">${name}</span>
+    tinymce.activeEditor.insertContent(`<a class="unbreakable-span" ${name} data-element-code="${code}" data-element-box>
+      ${name}
     </a>`);
   }
 

src/components/nursing-dashboard/RenderTable.vue

@@ -60,19 +60,31 @@ async function replace(query = true) {
       return;
     }
     if (!(td.className as string).includes("td-text_hidden")) {
-      td.className += " td-text_hidden " + td.className;
+      td.className += " td-text_hidden  " + td.className;
     }
 
+    const emptyWidth = 80;
+
     if (td.clientWidth !== td.scrollWidth) {
       const marqueeDiv = document.createElement("div");
       marqueeDiv.className = "marquee";
       marqueeDiv.style.setProperty(
         "--translate-scroll-px",
-        `-${td.scrollWidth}px`
+        `-${td.scrollWidth + emptyWidth}px`
       );
-      marqueeDiv.innerHTML = td.innerHTML;
+
+      marqueeDiv.innerHTML =
+        td.innerHTML +
+        `<div style="width: ${emptyWidth}px;display: inline-block"></div>` +
+        td.innerHTML;
       td.innerHTML = "";
       td.appendChild(marqueeDiv);
+
+      const timePerCharacter = 0.2;
+      const totalCharacters = td.textContent.length;
+      const totalDuration = totalCharacters * timePerCharacter;
+
+      marqueeDiv.style.setProperty("--translate-second", `${totalDuration}s`);
     }
   });
 }
@@ -101,7 +113,7 @@ async function renderTable(query = true) {
   trs.forEach(tr => {
     const tds = tr.querySelectorAll("td");
     tds.forEach(td => {
-      const business = td.querySelectorAll("span[data-element-code]");
+      const business = td.querySelectorAll("[data-element-code]");
       if (business.length > 0) {
         // @ts-ignore
         getBusiness(business);
@@ -158,7 +170,7 @@ defineExpose({
 
   .marquee {
     white-space: nowrap; /* 不换行 */
-    animation: marquee 10s linear infinite; /* 动画效果 */
+    animation: marquee var(--translate-second) linear infinite; /* 动画效果 */
     line-height: 100%;
     text-align: center;
   }