From a2d93ddafe78ae99d8b4ee5e001f09afc474cdfe Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Tue, 16 Jul 2024 11:21:16 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=B3=BB=E7=BB=9F=E5=90=8D=E7=A7=B0?=
 =?UTF-8?q?=E6=A8=AA=E5=90=91=E6=BB=9A=E5=8A=A8=E8=A1=94=E6=8E=A5=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/BasicLayout.vue                   | 27 ++++++++++------
 .../quick-start/components/SystemConfig.vue   | 24 +++++++++-----
 .../system/setting/components/change-logo.vue | 32 ++++++++++++-------
 3 files changed, 54 insertions(+), 29 deletions(-)

diff --git a/src/layouts/BasicLayout.vue b/src/layouts/BasicLayout.vue
index f8c8f72a..a3aaade7 100644
--- a/src/layouts/BasicLayout.vue
+++ b/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));
+      }
     }
   }
 }
diff --git a/src/views/system/quick-start/components/SystemConfig.vue b/src/views/system/quick-start/components/SystemConfig.vue
index 627e04c9..5e06321f 100644
--- a/src/views/system/quick-start/components/SystemConfig.vue
+++ b/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));
+          }
         }
       }
     }
diff --git a/src/views/system/setting/components/change-logo.vue b/src/views/system/setting/components/change-logo.vue
index 4257b9b2..ca9955a7 100644
--- a/src/views/system/setting/components/change-logo.vue
+++ b/src/views/system/setting/components/change-logo.vue
@@ -184,12 +184,15 @@ watch(
 
 /**检查系统名称是否超出范围进行滚动 */
 function fnCheckAppNameOverflow() {
-  const container: HTMLDivElement | null = document.querySelector('.header-icon > .app-name');
+  const container: HTMLDivElement | null = document.querySelector(
+    '.header-icon > .app-name'
+  );
   if (!container) return;
   const text: HTMLDivElement | null = container.querySelector('.marquee');
   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');
   }
@@ -201,7 +204,7 @@ watch(
 );
 
 onMounted(() => {
-  fnCheckAppNameOverflow()
+  fnCheckAppNameOverflow();
   Object.assign(state, {
     language: currentLocale.value,
     filePath: '',
@@ -360,20 +363,27 @@ onMounted(() => {
       margin: 0 0 0 12px;
       font-weight: 600;
       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));
+          }
         }
       }
     }