fix: update style

src/layout/components/SideBar.vue

@@ -37,7 +37,9 @@ limitations under the License. -->
               <el-icon class="menu-icons" :style="{ marginRight: '12px' }">
                 <Icon size="lg" :iconName="menu.meta.icon" />
               </el-icon>
-              <span>{{ t(menu.meta.title) }}</span>
+              <span :class="isCollapse ? 'collapse' : ''">{{
+                t(menu.meta.title)
+              }}</span>
             </router-link>
           </template>
           <el-menu-item-group>
@@ -88,24 +90,16 @@ limitations under the License. -->
 
 <script lang="ts" setup>
 import { ref } from "vue";
-import { useRouter, RouteRecordRaw, RouteRecordName } from "vue-router";
+import { useRouter, RouteRecordRaw } from "vue-router";
 import { useI18n } from "vue-i18n";
-import {
-  ElMenu,
-  ElMenuItem,
-  ElSubMenu,
-  ElMenuItemGroup,
-  ElIcon,
-} from "element-plus";
+
 const { t } = useI18n();
-const name: RouteRecordName | null | undefined = String(
-  useRouter().currentRoute.value.name
-);
-const theme = ["VirtualMachine", "Kubernetes"].includes(name || "")
+const name = ref<any>(String(useRouter().currentRoute.value.name));
+const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "")
   ? ref("light")
   : ref("black");
-const routes = useRouter().options.routes;
-const isCollapse = ref(false);
+const routes = ref<any>(useRouter().options.routes);
+const isCollapse = ref(true);
 const controlMenu = () => {
   isCollapse.value = !isCollapse.value;
 };
@@ -125,7 +119,6 @@ const filterMenus = (menus: any[]) => {
   height: 100%;
   background: #252a2f;
   font-weight: bold;
-  // box-shadow: 1px 5px 3px #888;
 }
 
 .el-menu-vertical:not(.el-menu--collapse) {
@@ -136,6 +129,15 @@ const filterMenus = (menus: any[]) => {
 .logo-icon-collapse {
   width: 65px;
   margin: 15px 0 30px 0;
+  text-align: center;
+}
+
+span.collapse {
+  height: 0;
+  width: 0;
+  overflow: hidden;
+  visibility: hidden;
+  display: inline-block;
 }
 
 .logo-icon {

src/main.ts

@@ -20,14 +20,14 @@ import router from "./router";
 import { store } from "./store";
 import components from "@/components";
 import i18n from "./locales";
-import "element-plus/dist/index.css";
 import "./styles/lib.scss";
 import "./styles/reset.scss";
 import ElementPlus from "element-plus";
+import "element-plus/dist/index.css";
 
 const app = createApp(App);
 
-app.use(ElementPlus);
+app.use(ElementPlus, { size: "small", zIndex: 3000 });
 app.use(components);
 app.use(i18n);
 app.use(store);

src/views/dashboard/Edit.vue

@@ -28,7 +28,6 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { ElDialog } from "element-plus";
 import GridLayout from "./panel/Layout.vue";
 // import { LayoutConfig } from "@/types/dashboard";
 import Tool from "./panel/Tool.vue";

src/views/dashboard/graphs/index.ts

@@ -18,7 +18,7 @@
 import Area from "./Area.vue";
 import Line from "./Line.vue";
 import Bar from "./Bar.vue";
-import Heatmap from "./Heatmap.vue";
+import Heatmap from "./HeatMap.vue";
 import TopList from "./TopList.vue";
 import Table from "./Table.vue";
 import Pie from "./Pie.vue";

src/views/dashboard/panel/Tool.vue

@@ -22,9 +22,9 @@ limitations under the License. -->
           :options="Options"
           size="mini"
           placeholder="Select a service"
-          :borderRadius="0"
           @change="changeService"
           class="selectors"
+          :borderRadius="4"
         />
       </div>
       <div class="selectors-item" v-if="states.key === 3 || states.key === 4">
@@ -141,9 +141,6 @@ function clickIcons(t: { id: string; content: string; name: string }) {
   font-size: 12px;
   display: inline-block;
   padding: 4px 2px;
-  border: var(--el-input-border, var(--el-border-base));
-  border-right: none;
-  border-radius: 2px;
 }
 
 .icon-btn {