style: 系统名称超出范围进行滚动

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">
+            <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 {

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">
+            <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);
+        }
+      }
     }
   }
 

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">
+              <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);
+        }
+      }
     }
   }