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

2024-06-15 10:37:55 +08:00
parent ff600c49f6
commit 5a85f245b0
3 changed files with 145 additions and 20 deletions
--- 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">
+            <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 {
--- 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">
+            <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);
+        }
+      }
    }
  }

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