Merge pull request #5352 from jumpserver/pr@osm@perf_logo_title

remove font famliy

Author: Aaron3S

src/layout/components/NavHeader/index.vue

@@ -42,7 +42,8 @@
     <ul class="navbar-left">
       <li class="left-item">
         <div class="nav-logo">
-          <Logo v-if="showLogo" :collapse="false" />
+          <!-- TODO 根据 INTERFACE store 的开关动态设置 -->
+          <Logo v-if="showLogo" :collapse="true" />
         </div>
       </li>
       <li v-if="orgsShow" class="left-item" style="margin-left: 20px">

src/layout/components/NavLeft/Logo.vue

@@ -1,9 +1,9 @@
 <template>
-  <!-- TODO title 拼接形式 -->
   <div :class="{ collapse: collapse }" class="sidebar-logo-container">
     <transition name="sidebarLogoFade">
       <a v-if="collapse" key="collapse" class="sidebar-logo-link" @click="handleClick">
         <img :src="logoSrc" alt="logo" class="sidebar-logo" />
+        <span :style="logoTitleStyle" class="sidebar-title">{{ logoTitle }}</span>
       </a>
       <a v-else key="expand" class="sidebar-logo-link" @click="handleClick">
         <img :src="logoTextSrc" alt="logo" class="sidebar-logo-text" />
@@ -37,6 +37,28 @@ export default {
     },
     logoTitle() {
       return this.publicSettings['INTERFACE']['login_title']
+    },
+    logoTitleStyle() {
+      const minFontSize = 10
+      const maxFontSize = 16
+      const titleLength = (this.logoTitle || '').trim().length || 1
+      const sidebarWidth = 200
+      const marginLeft = 10
+      const horizontalPadding = 10
+      const logoWidth = 32
+      const gap = 8
+      const letterSpacing = 1.5
+      const availableWidth = sidebarWidth - marginLeft - horizontalPadding - logoWidth - gap
+      const availableTextWidth = Math.max(
+        minFontSize,
+        availableWidth - Math.max(0, titleLength - 1) * letterSpacing
+      )
+      const fontSize = Math.max(minFontSize, Math.floor(availableTextWidth / titleLength))
+
+      return {
+        fontSize: `${Math.min(maxFontSize, fontSize)}px`,
+        maxWidth: `${availableWidth}px`
+      }
     }
   },
   created() {},
@@ -79,6 +101,7 @@ export default {
   overflow: hidden;
 
   & .sidebar-logo-link {
+    box-sizing: border-box;
     display: flex;
     gap: 8px;
     align-items: center;
@@ -100,19 +123,17 @@ export default {
 
     & .sidebar-title {
       display: inline-block;
+      flex: 1;
+      min-width: 0;
       color: #fff;
       font-weight: 600;
-      margin-top: 5px;
       line-height: $headerHeight;
-      font-size: 20px;
-      font-family:
-        Avenir,
-        Helvetica Neue,
-        Arial,
-        Helvetica,
-        sans-serif;
+      font-size: 16px;
+      text-align: left;
       vertical-align: middle;
       letter-spacing: 1.5px;
+      white-space: nowrap;
+      overflow: hidden;
     }
   }