From 5a85f245b090a6ba1c04109c940778544f6a6f21 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Sat, 15 Jun 2024 10:37:55 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E7=B3=BB=E7=BB=9F=E5=90=8D=E7=A7=B0?=
 =?UTF-8?q?=E8=B6=85=E5=87=BA=E8=8C=83=E5=9B=B4=E8=BF=9B=E8=A1=8C=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/BasicLayout.vue                   | 56 ++++++++++++++++--
 .../quick-start/components/SystemConfig.vue   | 57 ++++++++++++++++---
 .../system/setting/components/change-logo.vue | 52 ++++++++++++++---
 3 files changed, 145 insertions(+), 20 deletions(-)

diff --git a/src/layouts/BasicLayout.vue b/src/layouts/BasicLayout.vue
index f6226867..f8c8f72a 100644
--- a/src/layouts/BasicLayout.vue
+++ b/src/layouts/BasicLayout.vue
@@ -10,7 +10,14 @@ import RightContent from './components/RightContent.vue';
 import Tabs from './components/Tabs.vue';
 import GlobalMask from '@/components/GlobalMask/index.vue';
 import { scriptUrl } from '@/assets/js/icon_font_8d5l8fzk5b87iudi';
-import { computed, reactive, watch, onMounted, onUnmounted } from 'vue';
+import {
+  computed,
+  reactive,
+  watch,
+  onMounted,
+  onUnmounted,
+  nextTick,
+} from 'vue';
 import useLayoutStore from '@/store/modules/layout';
 import useRouterStore from '@/store/modules/router';
 import useTabsStore from '@/store/modules/tabs';
@@ -161,8 +168,27 @@ function fnLocale(m: MenuDataItem) {
   return title;
 }
 
+/**检查系统名称是否超出范围进行滚动 */
+function fnCheckAppNameOverflow() {
+  const container: HTMLDivElement | null = document.querySelector('.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');
+  } else {
+    text.classList.remove('app-name_scrollable');
+  }
+}
+
+watch(
+  () => appStore.appName,
+  () => nextTick(fnCheckAppNameOverflow)
+);
+
 //
 onMounted(() => {
+  fnCheckAppNameOverflow();
   fnGetServerTime();
   useAlarmStore().fnGetActiveAlarmInfo();
 });
@@ -246,8 +272,10 @@ onUnmounted(() => {
               :alt="appStore.appName"
               :title="appStore.appName"
             />
-            <h1 class="title" :title="appStore.appName">
-              {{ appStore.appName }}
+            <h1 class="app-name" :title="appStore.appName">
+              <span class="marquee app-name_scrollable">
+                {{ appStore.appName }}
+              </span>
             </h1>
           </template>
           <template v-if="appStore.logoType === 'brand'">
@@ -349,11 +377,27 @@ onUnmounted(() => {
   margin-right: 16px;
 }
 
-.title {
+.app-name {
   overflow: hidden;
-  text-overflow: ellipsis;
+  // text-overflow: ellipsis;
   white-space: nowrap;
-  width: 130px;
+  width: 148px;
+
+  &_scrollable {
+    // padding-left: 100%;
+    display: inline-block;
+    animation: scrollable-animation linear 6s infinite both;
+  }
+
+  @keyframes scrollable-animation {
+    0% {
+      transform: translate3d(0, 0, 0);
+    }
+
+    100% {
+      transform: translate3d(-100%, 0, 0);
+    }
+  }
 }
 
 .footer {
diff --git a/src/views/system/quick-start/components/SystemConfig.vue b/src/views/system/quick-start/components/SystemConfig.vue
index c4151cb9..88766b63 100644
--- a/src/views/system/quick-start/components/SystemConfig.vue
+++ b/src/views/system/quick-start/components/SystemConfig.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { fnToStepName, stepState } from '../hooks/useStep';
 import useI18n from '@/hooks/useI18n';
-import { reactive } from 'vue';
+import { nextTick, onMounted, reactive, watch } from 'vue';
 import useAppStore from '@/store/modules/app';
 import { parseUrlPath } from '@/plugins/file-static-url';
 import { Modal, message } from 'ant-design-vue/lib';
@@ -197,6 +197,31 @@ function fnStepNext(stepName: 'NeInfoConfig' | 'Done') {
     });
   }
 }
+
+/**检查系统名称是否超出范围进行滚动 */
+function fnCheckAppNameOverflow() {
+  const container: HTMLDivElement | null = document.querySelector(
+    '.header-icon > .app-name'
+  );
+  if (!container) return;
+  const text: HTMLDivElement | null = container.querySelector('.marquee');
+  if (!text) return;
+  console.log(text.offsetWidth, container.offsetWidth);
+  if (text.offsetWidth > container.offsetWidth) {
+    text.classList.add('app-name_scrollable');
+  } else {
+    text.classList.remove('app-name_scrollable');
+  }
+}
+
+watch(
+  () => state.title,
+  () => nextTick(fnCheckAppNameOverflow)
+);
+
+onMounted(() => {
+  fnCheckAppNameOverflow();
+});
 </script>
 
 <template>
@@ -273,8 +298,10 @@ function fnStepNext(stepName: 'NeInfoConfig' | 'Done') {
           </div>
           <div class="header-icon" v-show="state.type === 'icon'">
             <img :src="state.icon" />
-            <h1 :title="state.title">
-              {{ state.title }}
+            <h1 class="app-name" :title="state.title">
+              <span class="marquee app-name_scrollable">
+                {{ state.title }}
+              </span>
             </h1>
           </div>
           <div class="header-menu">
@@ -363,15 +390,31 @@ function fnStepNext(stepName: 'NeInfoConfig' | 'Done') {
       border-style: none;
       border-radius: 6.66px;
     }
-    & > h1 {
+    & > .app-name {
       overflow: hidden;
-      text-overflow: ellipsis;
+      /* text-overflow: ellipsis; */
       white-space: nowrap;
-      width: 130px;
+      width: 148px;
       color: #fff;
       margin: 0 0 0 12px;
       font-weight: 600;
-      font-size: 16px;
+      font-size: 18px;
+
+      > .app-name_scrollable {
+        // padding-left: 100%;
+        display: inline-block;
+        animation: scrollable-animation linear 6s infinite both;
+      }
+
+      @keyframes scrollable-animation {
+        0% {
+          transform: translate3d(0, 0, 0);
+        }
+
+        100% {
+          transform: translate3d(-100%, 0, 0);
+        }
+      }
     }
   }
 
diff --git a/src/views/system/setting/components/change-logo.vue b/src/views/system/setting/components/change-logo.vue
index 2adf955f..4257b9b2 100644
--- a/src/views/system/setting/components/change-logo.vue
+++ b/src/views/system/setting/components/change-logo.vue
@@ -3,7 +3,7 @@ import { Modal, message } from 'ant-design-vue/lib';
 import { FileType } from 'ant-design-vue/lib/upload/interface';
 import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
 import IconFont from '@/components/IconFont/index.vue';
-import { onMounted, reactive, watch, computed } from 'vue';
+import { onMounted, reactive, watch, computed, nextTick } from 'vue';
 import useAppStore from '@/store/modules/app';
 import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
@@ -182,7 +182,26 @@ watch(
   }
 );
 
+/**检查系统名称是否超出范围进行滚动 */
+function fnCheckAppNameOverflow() {
+  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');
+  } else {
+    text.classList.remove('app-name_scrollable');
+  }
+}
+
+watch(
+  () => appStore.appName,
+  () => nextTick(fnCheckAppNameOverflow)
+);
+
 onMounted(() => {
+  fnCheckAppNameOverflow()
   Object.assign(state, {
     language: currentLocale.value,
     filePath: '',
@@ -205,8 +224,10 @@ onMounted(() => {
             </div>
             <div class="header-icon" v-show="state.type === 'icon'">
               <img :src="state.icon" />
-              <h1 :title="appStore.appName">
-                {{ appStore.appName }}
+              <h1 class="app-name" :title="appStore.appName">
+                <span class="marquee app-name_scrollable">
+                  {{ appStore.appName }}
+                </span>
               </h1>
             </div>
             <div class="header-menu">
@@ -329,15 +350,32 @@ onMounted(() => {
       border-style: none;
       border-radius: 6.66px;
     }
-    & > h1 {
+
+    & > .app-name {
       overflow: hidden;
-      text-overflow: ellipsis;
+      /* text-overflow: ellipsis; */
       white-space: nowrap;
-      width: 130px;
+      width: 148px;
       color: #fff;
       margin: 0 0 0 12px;
       font-weight: 600;
-      font-size: 16px;
+      font-size: 18px;
+
+      > .app-name_scrollable {
+        // padding-left: 100%;
+        display: inline-block;
+        animation: scrollable-animation linear 6s infinite both;
+      }
+
+      @keyframes scrollable-animation {
+        0% {
+          transform: translate3d(0, 0, 0);
+        }
+
+        100% {
+          transform: translate3d(-100%, 0, 0);
+        }
+      }
     }
   }