fix: 侧边栏添加文字说明

src/components/SideBar.vue

@@ -1,8 +1,21 @@
 <template>
   <el-menu :default-active="active" class="side-bar" :collapse="true" :router="true">
-    <el-menu-item v-for="tab in sidebar" :index="tab.name" :key="tab.name" v-show="!tab.hide">
+    <el-menu-item v-for="tab in sidebar" :index="tab.name" :key="tab.name" v-show="!tab.hide" style="height: 70px;">
       <el-tooltip placement="right" :content="tab.description">
-        <i class="icon" :target="tab.name"></i>
+        <i class="icon" :target="tab.name">
+          <div v-if="calculateLength(tab.description) === 1" class="title" style="margin-left: 2px;">
+            {{tab.description}}
+          </div>
+          <div v-else-if="calculateLength(tab.description) === 2" class="title" style="margin-left: -3px;">
+            {{tab.description}}
+          </div>
+          <div v-else-if="calculateLength(tab.description) === 3" class="title" style="margin-left: -8px;">
+            {{tab.description}}
+          </div>
+          <div v-else class="title" style="margin-left: -3px;">
+            {{tab.description.slice(0, 3)}}
+          </div>
+        </i>
       </el-tooltip>
     </el-menu-item>
   </el-menu>
@@ -13,10 +26,9 @@ const sidebar = [
   { name: 'schedule', description: '项目规划', hide: false },
   { name: 'taskList', description: '任务列表', hide: false },
   { name: 'bugList', description: '缺陷列表', hide: false },
-  { name: 'pipeline', description: '流水线与产物', hide: false },
+  { name: 'pipeline', description: '流水线及产物', hide: false },
   { name: 'database', description: '数据库', hide: false },
   { name: 'apitest', description: '测试', hide: false },
-  { name: 'statistics', description: '详细数据', hide: true },
   { name: 'invite', description: '项目关联', hide: false },
 ];
 
@@ -33,6 +45,20 @@ export default {
       return li[li.length - 1];
     },
   },
+  methods: {
+    calculateLength(name) {
+      if (name.length === 2) {
+        return 1;
+      }
+      if (name.length === 3) {
+        return 2;
+      }
+      if (name.length === 4) {
+        return 3;
+      }
+      return 0;
+    },
+  },
 };
 </script>
 
@@ -60,27 +86,33 @@ export default {
   background-image: url("../assets/icon_new/schedule.svg");
   .el-menu-item:hover & {
     background-image: url("../assets/icon_new/schedule-hover.svg");
+    color: #2c2c2c;
   }
   .el-menu-item.is-active & {
     background-image: url("../assets/icon_new/schedule-using.svg");
+    color: #1296db;
   }
 }
 .icon[target=taskList]{
   background-image: url("../assets/icon_new/task.svg");
   .el-menu-item:hover & {
     background-image: url("../assets/icon_new/task-hover.svg");
+    color: #2c2c2c;
   }
   .el-menu-item.is-active & {
     background-image: url("../assets/icon_new/task-using.svg");
+    color: #1296db;
   }
 }
 .icon[target=bugList]{
   background-image: url("../assets/icon_new/bug.svg");
   .el-menu-item:hover & {
     background-image: url("../assets/icon_new/bug-hover.svg");
+    color: #2c2c2c;
   }
   .el-menu-item.is-active & {
     background-image: url("../assets/icon_new/bug-using.svg");
+    color: #1296db;
   }
 }
 .icon[target=statistics]{
@@ -96,36 +128,50 @@ export default {
   background-image: url("../assets/icon_new/pipeline.svg");
   .el-menu-item:hover & {
     background-image: url("../assets/icon_new/pipeline-hover.svg");
+    color: #2c2c2c;
   }
   .el-menu-item.is-active & {
     background-image: url("../assets/icon_new/pipeline-using.svg");
+    color: #1296db;
   }
 }
 .icon[target=database]{
   background-image: url("../assets/icon_new/database.svg");
   .el-menu-item:hover & {
     background-image: url("../assets/icon_new/database-hover.svg");
+    color: #2c2c2c;
   }
   .el-menu-item.is-active & {
     background-image: url("../assets/icon_new/database-using.svg");
+    color: #1296db;
   }
 }
 .icon[target=apitest]{
    background-image: url("../assets/icon_new/test.svg");
   .el-menu-item:hover & {
     background-image: url("../assets/icon_new/test-hover.svg");
+    color: #2c2c2c;
   }
   .el-menu-item.is-active & {
     background-image: url("../assets/icon_new/test-using.svg");
+    color: #1296db;
   }
 }
 .icon[target=invite]{
    background-image: url("../assets/icon_new/link.svg");
   .el-menu-item:hover & {
     background-image: url("../assets/icon_new/link-hover.svg");
+    color: #2c2c2c;
   }
   .el-menu-item.is-active & {
     background-image: url("../assets/icon_new/link-using.svg");
+    color: #1296db;
   }
 }
+.title{
+  font-size: 9px;
+  margin-top: 12px;
+  font-style: normal;
+}
+
 </style>