fix: 系统名称横向滚动衔接动画

src/layouts/BasicLayout.vue

@@ -176,6 +176,7 @@ function fnCheckAppNameOverflow() {
   if (!text) return;
   if (text.offsetWidth > container.offsetWidth) {
     text.classList.add('app-name_scrollable');
+    text.setAttribute('data-content', text.innerText);
   } else {
     text.classList.remove('app-name_scrollable');
   }
@@ -382,20 +383,26 @@ onUnmounted(() => {
   // text-overflow: ellipsis;
   white-space: nowrap;
   width: 148px;
-
-  &_scrollable {
-    // padding-left: 100%;
+  > .app-name_scrollable {
+    padding-right: 12px;
     display: inline-block;
     animation: scrollable-animation linear 6s infinite both;
-  }
-
-  @keyframes scrollable-animation {
-    0% {
-      transform: translate3d(0, 0, 0);
+    &::after {
+      content: attr(data-content);
+      position: absolute;
+      top: 0;
+      right: -100%;
+      transition: right 0.3s ease;
     }
 
-    100% {
-      transform: translate3d(-100%, 0, 0);
+    @keyframes scrollable-animation {
+      0% {
+        transform: translateX(0);
+      }
+
+      100% {
+        transform: translateX(calc(-100% - 12px));
+      }
     }
   }
 }