appTitle支持可配置化修改

src/layout/components/Logo/index.vue

@@ -11,6 +11,14 @@
       alt=""
       :class="{ 'mr-2': !isCollapsed }"
     />
+    <div v-else class="openWrapper">
+      <div>
+        <img src="~@/assets/images/skyeye-logo-img.png" alt="" class="logoOpen" />
+      </div>
+      <div class="titleWrapper">
+        {{ title }}
+      </div>
+    </div>
     <!-- <img
       v-show="!isCollapsed || navMode === 'horizontal' || (navMode === 'horizontal-mix' && mixMenu)"
       class="mt-0 title"
@@ -18,7 +26,6 @@
       alt=""
       :class="{ 'mr-2': !isCollapsed }"
     /> -->
-    <img v-else src="@/assets/images/skyeye-Yubei-logo.png" alt="" />
   </div>
 </template>
 
@@ -26,6 +33,7 @@
   import { inject, computed, unref } from 'vue';
   import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
   import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
+  import { useGlobSetting } from '@/hooks/setting';
 
   // NavMode的设置按钮已禁用 这里用不上 之后有需要再放开
   const { getNavTheme, getMenuWidth, getMenuMinWidth, getNavMode, getMenuSetting } =
@@ -33,6 +41,7 @@
   const { getDarkTheme } = useDesignSetting();
 
   const isCollapsed = inject('collapsed');
+  const { title } = useGlobSetting();
   const navMode = getNavMode;
 
   const getBgColor = computed(() => {
@@ -63,9 +72,11 @@
     width: v-bind(menuWidth);
     display: flex;
     align-items: center;
-    justify-content: center;
+    // justify-content: center;
     height: 64px;
-    line-height: 64px;
+    // line-height: 64px;
+    // padding-left: 20px;
+    // padding-right: 20px;
     overflow: hidden;
     white-space: nowrap;
     background: v-bind(getBgColor);
@@ -77,6 +88,7 @@
     img {
       width: 157px;
       height: auto;
+      margin: auto;
     }
 
     .title {
@@ -86,5 +98,27 @@
 
   .collapsed-login {
     width: v-bind(minMenuWidth);
+    padding-left: 2px;
+    padding-right: 2px;
+  }
+
+  .logo .logoOpen {
+    width: 50px;
+  }
+  .titleWrapper {
+    line-height: 30px;
+    font-weight: bold;
+  }
+
+  .openWrapper {
+    width: v-bind(menuWidth);
+    overflow: hidden;
+  }
+
+  .titleWrapper {
+    justify-content: left;
+    margin-left: 20px;
+    margin-right: 12px;
+    overflow: hidden;
   }
 </style>