From 396315f8f36b8d01c0e7ae8fdbc873a4cd93f415 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Mon, 28 Mar 2022 15:26:38 +0800
Subject: [PATCH] update version

---
 src/assets/icons/version.svg      |  15 ---
 src/layout/components/NavBar.vue  |  22 ++++
 src/layout/components/SideBar.vue | 207 ++++++++++++++----------------
 3 files changed, 116 insertions(+), 128 deletions(-)
 delete mode 100644 src/assets/icons/version.svg

diff --git a/src/assets/icons/version.svg b/src/assets/icons/version.svg
deleted file mode 100644
index fba69678..00000000
--- a/src/assets/icons/version.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<!-- Licensed to the Apache Software Foundation (ASF) under one or more
-contributor license agreements.  See the NOTICE file distributed with
-this work for additional information regarding copyright ownership.
-The ASF licenses this file to You under the Apache License, Version 2.0
-(the "License"); you may not use this file except in compliance with
-the License.  You may obtain a copy of the License at
-
-     http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License. -->
-<svg t="1648440420715" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3665" width="32" height="32"><path d="M914.894958 0 109.105042 0c-21.501383 0-38.907264 14.078286-38.907264 31.740136L70.197778 990.855388c0 25.340915 34.811763 40.443077 60.664616 26.108822l350.677314-194.280351c13.054411-7.167128 29.948355-7.423096 43.002765-0.255969l368.851102 196.328102c25.852853 13.822317 60.152678-1.279844 60.152678-26.62076L953.546253 31.740136C953.802222 14.334255 936.39634 0 914.894958 0zM562.681831 746.661113l-101.363662 0-196.328102-547.773322 90.61297 0 155.885025 454.344695 2.30372 0 155.117118-454.344695 90.61297 0L562.681831 746.661113z" p-id="3666" fill="#e6e6e6"></path></svg>
\ No newline at end of file
diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue
index 000a36c3..8a006237 100644
--- a/src/layout/components/NavBar.vue
+++ b/src/layout/components/NavBar.vue
@@ -30,6 +30,20 @@ limitations under the License. -->
       <span title="refresh" class="ghost ml-5 cp" @click="handleReload">
         <Icon iconName="retry" :loading="appStore.autoRefresh" class="middle" />
       </span>
+      <span class="version ml-5 cp">
+        <el-popover
+          trigger="hover"
+          width="250"
+          placement="left-end"
+          :content="appStore.version"
+        >
+          <template #reference>
+            <span>
+              <Icon iconName="info_outline" size="middle" />
+            </span>
+          </template>
+        </el-popover>
+      </span>
     </div>
   </div>
 </template>
@@ -39,6 +53,7 @@ import { useRoute } from "vue-router";
 import { useI18n } from "vue-i18n";
 import timeFormat from "@/utils/timeFormat";
 import { useAppStoreWithOut } from "@/store/modules/app";
+import { ElMessage } from "element-plus";
 
 const { t } = useI18n();
 const appStore = useAppStoreWithOut();
@@ -47,6 +62,7 @@ const pageName = ref<string>("");
 const timeRange = ref<number>(0);
 const theme = ref<string>("light");
 
+getVersion();
 const setConfig = (value: string) => {
   pageName.value = value || "";
   theme.value = route.path.includes("/infrastructure/") ? "dark" : "light";
@@ -76,6 +92,12 @@ watch(
     setConfig(String(title));
   }
 );
+async function getVersion() {
+  const res = await appStore.fetchVersion();
+  if (res.errors) {
+    ElMessage.error(res.errors);
+  }
+}
 </script>
 <style lang="scss" scoped>
 .nav-bar {
diff --git a/src/layout/components/SideBar.vue b/src/layout/components/SideBar.vue
index 6649c744..b5eb1be8 100644
--- a/src/layout/components/SideBar.vue
+++ b/src/layout/components/SideBar.vue
@@ -13,110 +13,95 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <div class="side-bar flex-v">
-    <div>
-      <div :class="isCollapse ? 'logo-icon-collapse' : 'logo-icon'">
-        <Icon
-          :size="isCollapse ? 'xl' : 'logo'"
-          :iconName="isCollapse ? 'logo' : 'logo-sw'"
-        />
-      </div>
-      <el-menu
-        active-text-color="#448dfe"
-        background-color="#252a2f"
-        class="el-menu-vertical"
-        :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(menu.name)" v-if="menu.meta.hasGroup">
-            <template #title>
-              <router-link
-                class="items"
-                :to="menu.path"
-                :exact="menu.meta.exact || false"
-              >
-                <el-icon class="menu-icons" :style="{ marginRight: '12px' }">
-                  <Icon size="lg" :iconName="menu.meta.icon" />
-                </el-icon>
-                <span :class="isCollapse ? 'collapse' : ''">
-                  {{ t(menu.meta.title) }}
-                </span>
-              </router-link>
-            </template>
-            <el-menu-item-group>
-              <el-menu-item
-                v-for="(m, idx) in filterMenus(menu.children)"
-                :index="m.name"
-                :key="idx"
-              >
-                <router-link
-                  class="items"
-                  :to="m.path"
-                  :exact="m.meta.exact || false"
-                >
-                  <span>{{ t(m.meta.title) }}</span>
-                </router-link>
-              </el-menu-item>
-            </el-menu-item-group>
-          </el-sub-menu>
-          <el-menu-item
-            :index="String(menu.name)"
-            @click="changePage(menu)"
-            v-else
-          >
-            <el-icon class="menu-icons" :style="{ marginRight: '12px' }">
-              <router-link
-                class="items"
-                :to="menu.children[0].path"
-                :exact="menu.meta.exact"
-              >
+  <div class="side-bar">
+    <div :class="isCollapse ? 'logo-icon-collapse' : 'logo-icon'">
+      <Icon
+        :size="isCollapse ? 'xl' : 'logo'"
+        :iconName="isCollapse ? 'logo' : 'logo-sw'"
+      />
+    </div>
+    <el-menu
+      active-text-color="#448dfe"
+      background-color="#252a2f"
+      class="el-menu-vertical"
+      :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(menu.name)" v-if="menu.meta.hasGroup">
+          <template #title>
+            <router-link
+              class="items"
+              :to="menu.path"
+              :exact="menu.meta.exact || false"
+            >
+              <el-icon class="menu-icons" :style="{ marginRight: '12px' }">
                 <Icon size="lg" :iconName="menu.meta.icon" />
-              </router-link>
-            </el-icon>
-            <template #title>
+              </el-icon>
+              <span :class="isCollapse ? 'collapse' : ''">
+                {{ t(menu.meta.title) }}
+              </span>
+            </router-link>
+          </template>
+          <el-menu-item-group>
+            <el-menu-item
+              v-for="(m, idx) in filterMenus(menu.children)"
+              :index="m.name"
+              :key="idx"
+            >
               <router-link
                 class="items"
-                :to="menu.children[0].path"
-                :exact="menu.meta.exact"
+                :to="m.path"
+                :exact="m.meta.exact || false"
               >
-                <span>{{ t(menu.meta.title) }}</span>
+                <span>{{ t(m.meta.title) }}</span>
               </router-link>
-            </template>
-          </el-menu-item>
-        </template>
-      </el-menu>
-      <div
-        class="menu-control"
-        :class="isCollapse ? 'collapse' : ''"
-        :style="{
-          color: theme === 'light' ? '#eee' : '#252a2f',
-        }"
-      >
-        <Icon
-          size="middle"
-          iconName="format_indent_decrease"
-          @click="controlMenu"
-        />
-      </div>
-    </div>
-    <div class="version">
-      <el-popover
-        trigger="hover"
-        width="250"
-        placement="right"
-        :content="appStore.version"
-      >
-        <template #reference>
-          <span>
-            <Icon iconName="version" size="middle" />
-          </span>
-        </template>
-      </el-popover>
+            </el-menu-item>
+          </el-menu-item-group>
+        </el-sub-menu>
+        <el-menu-item
+          :index="String(menu.name)"
+          @click="changePage(menu)"
+          v-else
+        >
+          <el-icon class="menu-icons" :style="{ marginRight: '12px' }">
+            <router-link
+              class="items"
+              :to="menu.children[0].path"
+              :exact="menu.meta.exact"
+            >
+              <Icon size="lg" :iconName="menu.meta.icon" />
+            </router-link>
+          </el-icon>
+          <template #title>
+            <router-link
+              class="items"
+              :to="menu.children[0].path"
+              :exact="menu.meta.exact"
+            >
+              <span>{{ t(menu.meta.title) }}</span>
+            </router-link>
+          </template>
+        </el-menu-item>
+      </template>
+    </el-menu>
+    <div
+      class="menu-control"
+      :class="isCollapse ? 'collapse' : ''"
+      :style="{
+        color: theme === 'light' ? '#eee' : '#252a2f',
+      }"
+    >
+      <Icon
+        size="middle"
+        iconName="format_indent_decrease"
+        @click="controlMenu"
+      />
     </div>
+    <!-- <div class="empty"></div> -->
   </div>
 </template>
 
@@ -124,11 +109,8 @@ limitations under the License. -->
 import { ref } from "vue";
 import { useRouter, RouteRecordRaw } from "vue-router";
 import { useI18n } from "vue-i18n";
-import { useAppStoreWithOut } from "@/store/modules/app";
-import { ElMessage } from "element-plus";
 import Icon from "@/components/Icon.vue";
 
-const appStore = useAppStoreWithOut();
 const { t } = useI18n();
 const name = ref<any>(String(useRouter().currentRoute.value.name));
 const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "")
@@ -139,7 +121,6 @@ const isCollapse = ref(false);
 const controlMenu = () => {
   isCollapse.value = !isCollapse.value;
 };
-getVersion();
 const changePage = (menu: RouteRecordRaw) => {
   theme.value = ["VirtualMachine", "Kubernetes"].includes(String(menu.name))
     ? "light"
@@ -148,23 +129,15 @@ const changePage = (menu: RouteRecordRaw) => {
 const filterMenus = (menus: any[]) => {
   return menus.filter((d) => d.meta && !d.meta.notShow);
 };
-async function getVersion() {
-  const res = await appStore.fetchVersion();
-  if (res.errors) {
-    ElMessage.error(res.errors);
-  }
-}
 </script>
 
 <style lang="scss" scoped>
 .side-bar {
-  position: relative;
   background: #252a2f;
   height: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
   min-height: 700px;
-  justify-content: space-between;
+  position: relative;
+  margin-bottom: 100px;
 }
 
 .el-menu-vertical:not(.el-menu--collapse) {
@@ -192,7 +165,7 @@ span.collapse {
 }
 
 .menu-control {
-  position: fixed;
+  position: absolute;
   top: 8px;
   left: 200px;
   cursor: pointer;
@@ -220,5 +193,13 @@ span.collapse {
   cursor: pointer;
   padding-left: 23px;
   margin-bottom: 10px;
+  position: absolute;
+  bottom: 0;
+  left: 10px;
+}
+
+.empty {
+  width: 100%;
+  height: 60px;
 }
 </style>