perf: 优化logo图和文字布局

public/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path fill="#386BF3" d="M410.558.109c0 210.974-300.876 361.752-300.876 633.548 0 174.943 134.704 316.787 300.876 316.787s300.877-141.817 300.877-316.787C711.408 361.752 410.558 210.974 410.558.109z"/><path fill="#C3D2FB" d="M613.469 73.665c0 211.055-300.877 361.914-300.877 633.547C312.592 882.156 447.296 1024 613.47 1024s300.876-141.817 300.876-316.788C914.29 435.58 613.469 284.72 613.469 73.665z"/><path fill="#303F5B" d="M312.592 707.212c0-183.713 137.636-312.171 226.723-441.39 81.702 106.112 172.12 218.74 172.12 367.726A309.755 309.755 0 0 1 420.36 950.064a323.114 323.114 0 0 1-107.769-242.852z"/></svg>

src/layout/components/sidebar/horizontal.vue

@@ -46,12 +46,8 @@ watch(
     class="horizontal-header"
   >
     <div class="horizontal-header-left" @click="backHome">
-      <FontIcon
-        icon="pure-iconfont-logo"
-        svg
-        style="width: 35px; height: 35px"
-      />
-      <h4>{{ title }}</h4>
+      <img src="/logo.svg" alt="logo" />
+      <span>{{ title }}</span>
     </div>
     <el-menu
       router

src/layout/components/sidebar/logo.vue

@@ -18,11 +18,7 @@ const { title } = useNav();
         class="sidebar-logo-link"
         to="/"
       >
-        <FontIcon
-          icon="pure-iconfont-logo"
-          svg
-          style="width: 35px; height: 35px"
-        />
+        <img src="/logo.svg" alt="logo" />
         <span class="sidebar-title">{{ title }}</span>
       </router-link>
       <router-link
@@ -32,11 +28,7 @@ const { title } = useNav();
         class="sidebar-logo-link"
         to="/"
       >
-        <FontIcon
-          icon="pure-iconfont-logo"
-          svg
-          style="width: 35px; height: 35px"
-        />
+        <img src="/logo.svg" alt="logo" />
         <span class="sidebar-title">{{ title }}</span>
       </router-link>
     </transition>
@@ -45,37 +37,33 @@ const { title } = useNav();
 
 <style lang="scss" scoped>
 .sidebar-logo-container {
-  position: relative;
   width: 100%;
   height: 48px;
-  text-align: center;
   overflow: hidden;
+  position: relative;
 
   .sidebar-logo-link {
     height: 100%;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    margin-top: 5px;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+
+    img {
+      height: 32px;
+      display: inline-block;
+    }
 
     .sidebar-title {
-      display: block;
-      width: 160px;
+      height: 32px;
+      line-height: 32px;
+      margin: 2px 0 0 12px;
+      color: $subMenuActiveText;
+      display: inline-block;
       overflow: hidden;
-      text-overflow: ellipsis;
       white-space: nowrap;
-      text-align: left;
-      color: #1890ff;
+      text-overflow: ellipsis;
+      font-size: 18px;
       font-weight: 600;
-      font-size: 20px;
-      margin-top: 10px;
-      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
-    }
-  }
-
-  .collapses {
-    .sidebar-logo {
-      margin-right: 0;
     }
   }
 }

src/style/sidebar.scss

@@ -411,17 +411,22 @@
       cursor: pointer;
       transition: all var(--pure-transition-duration) ease;
 
-      i {
-        font-size: 30px;
-        color: #1890ff;
-        margin-right: 4px;
+      img {
+        height: 32px;
+        display: inline-block;
       }
 
-      h4 {
-        font-size: 16px;
-        font-weight: 700;
+      span {
+        height: 32px;
+        line-height: 32px;
+        margin: 2px 0 0 12px;
         color: $subMenuActiveText;
-        transition: all 0.5s;
+        display: inline-block;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        font-size: 18px;
+        font-weight: 600;
       }
     }