Merge branch 'main' of github.com:apache/skywalking-booster-ui into feat/dashboard

src/assets/img/icons.js

@@ -14,14 +14,17 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const requireComponent = require.context('../../assets', false, /\.png$/);
+const requireComponent = require.context("../../assets", false, /\.png$/);
 
 const result = {};
 function capitalizeFirstLetter(str) {
   return str.toUpperCase();
 }
 function validateFileName(str) {
-  return /^\S+\.png$/.test(str) && str.replace(/^\S+\/(\w+)\.png$/, (rs, $1) => capitalizeFirstLetter($1));
+  return (
+    /^\S+\.png$/.test(str) &&
+    str.replace(/^\S+\/(\w+)\.png$/, (rs, $1) => capitalizeFirstLetter($1))
+  );
 }
 requireComponent.keys().forEach((filePath) => {
   const componentConfig = requireComponent(filePath);

src/layout/components/SideBar.vue

@@ -24,14 +24,14 @@ limitations under the License. -->
       active-text-color="#448dfe"
       background-color="#252a2f"
       class="el-menu-vertical"
-      default-active="0"
+      :default-active="name"
       text-color="#efefef"
       :unique-opened="true"
       :collapse="isCollapse"
       :style="{ border: 'none' }"
     >
       <template v-for="(menu, index) in routes" :key="index">
-        <el-sub-menu :index="String(index)" v-if="menu.meta.hasGroup">
+        <el-sub-menu :index="String(menu.name)" v-if="menu.meta.hasGroup">
           <template #title>
             <router-link :to="menu.path" :exact="menu.meta.exact || false">
               <el-icon class="menu-icons" :style="{ marginRight: '12px' }">
@@ -43,7 +43,7 @@ limitations under the License. -->
           <el-menu-item-group>
             <el-menu-item
               v-for="(m, idx) in filterMenus(menu.children)"
-              :index="`${index}-${idx}`"
+              :index="m.name"
               :key="idx"
             >
               <router-link :to="m.path" :exact="m.meta.exact || false">
@@ -52,7 +52,11 @@ limitations under the License. -->
             </el-menu-item>
           </el-menu-item-group>
         </el-sub-menu>
-        <el-menu-item :index="String(index)" @click="changePage(menu)" v-else>
+        <el-menu-item
+          :index="String(menu.name)"
+          @click="changePage(menu)"
+          v-else
+        >
           <el-icon class="menu-icons" :style="{ margin: '-10px 12px 0 0' }">
             <router-link :to="menu.children[0].path" :exact="menu.meta.exact">
               <Icon size="lg" :iconName="menu.meta.icon" />

src/styles/lib.scss

@@ -18,85 +18,111 @@
   display: flex;
   flex-direction: column;
 }
+
 .flex-h {
   display: flex;
   flex-direction: row;
 }
+
 .ell {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 }
+
 .cp {
   cursor: pointer;
 }
+
 .cm {
   cursor: move;
 }
+
 .auto {
   margin-right: auto;
   margin-left: auto;
 }
+
 .green {
   color: #4caf50;
 }
+
 .red {
   color: #e54c17;
 }
+
 .blue {
   color: #448dfe;
 }
+
 .purple {
   color: #6e40aa;
 }
+
 .yellow {
   color: #fbb03b;
 }
+
 .grey {
   color: #a7aebb;
 }
+
 .white {
   color: #fff;
 }
+
 .bg-green {
   background-color: #4caf50;
 }
+
 .bg-red {
   background-color: #e54c17;
 }
+
 .bg-blue {
   background-color: #448dfe;
 }
+
 .bg-purple {
   background-color: #6e40aa;
 }
+
 .bg-yellow {
   background-color: #fbb03b;
 }
+
 .bg-grey {
   background-color: #a7aebb;
 }
+
 .ml-5 {
   margin-left: 5px;
 }
+
 .ml-10 {
   margin-left: 10px;
 }
+
 .ml-15 {
   margin-left: 15px;
 }
+
 .ml-20 {
   margin-left: 20px;
 }
+
 .mr-5 {
   margin-right: 5px;
 }
+
 .mr-10 {
   margin-right: 10px;
 }
+
 .mr-15 {
   margin-right: 15px;
 }
+
 .mr-20 {
   margin-right: 20px;
-}
+}