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

src/views/system/quick-start/components/SystemConfig.vue

@@ -206,6 +206,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');
   }
@@ -398,18 +399,25 @@ onMounted(() => {
       font-size: 18px;
 
       > .app-name_scrollable {
-        // padding-left: 100%;
+        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));
+          }
         }
       }
     }