types: optimizate layout

src/layout/components/setting/index.vue

@@ -185,12 +185,7 @@ function setTheme(layout: string, theme: string) {
   <panel>
     <el-divider>主题风格</el-divider>
     <ul class="theme-stley">
-      <el-tooltip
+      <el-tooltip class="item" content="左侧菜单暗色模式" placement="bottom">
-        class="item"
-        effect="dark"
-        content="左侧菜单暗色模式"
-        placement="bottom"
-      >
         <li
           :class="dataTheme.layout === 'vertical-dark' ? $style.isSelect : ''"
           ref="verticalDarkDom"
@@ -201,12 +196,7 @@ function setTheme(layout: string, theme: string) {
         </li>
       </el-tooltip>
 
-      <el-tooltip
+      <el-tooltip class="item" content="左侧菜单亮色模式" placement="bottom">
-        class="item"
-        effect="dark"
-        content="左侧菜单亮色模式"
-        placement="bottom"
-      >
         <li
           :class="dataTheme.layout === 'vertical-light' ? $style.isSelect : ''"
           ref="verticalLightDom"
@@ -217,12 +207,7 @@ function setTheme(layout: string, theme: string) {
         </li>
       </el-tooltip>
 
-      <el-tooltip
+      <el-tooltip class="item" content="顶部菜单暗色模式" placement="bottom">
-        class="item"
-        effect="dark"
-        content="顶部菜单暗色模式"
-        placement="bottom"
-      >
         <li
           :class="dataTheme.layout === 'horizontal-dark' ? $style.isSelect : ''"
           ref="horizontalDarkDom"
@@ -233,12 +218,7 @@ function setTheme(layout: string, theme: string) {
         </li>
       </el-tooltip>
 
-      <el-tooltip
+      <el-tooltip class="item" content="顶部菜单亮色模式" placement="bottom">
-        class="item"
-        effect="dark"
-        content="顶部菜单亮色模式"
-        placement="bottom"
-      >
         <li
           :class="
             dataTheme.layout === 'horizontal-light' ? $style.isSelect : ''

src/layout/components/sidebar/horizontal.vue

@@ -52,9 +52,10 @@ function onPanel() {
   emitter.emit("openPanel");
 }
 
-const activeMenu = computed(() => {
+const activeMenu = computed((): string => {
   const { meta, path } = route;
   if (meta.activeMenu) {
+    // @ts-ignore
     return meta.activeMenu;
   }
   return path;

src/layout/components/sidebar/sidebarItem.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import path from "path";
 import { PropType, ref } from "vue";
+import { childrenType } from "../../types";
 import Icon from "/@/components/ReIcon/src/Icon.vue";
-import { RouteRecordRaw } from "vue-router";
 
 const props = defineProps({
   item: {
-    type: Object as PropType<RouteRecordRaw>
+    type: Object as PropType<childrenType>
   },
   isNest: {
     type: Boolean,
@@ -18,21 +18,11 @@ const props = defineProps({
   }
 });
 
-type childrenType = {
+const onlyOneChild: childrenType = ref(null);
-  path?: string;
-  noShowingChildren?: boolean;
-  children?: RouteRecordRaw[];
-  meta?: {
-    icon?: string;
-    title?: string;
-  };
-};
-
-const onlyOneChild = ref<RouteRecordRaw | childrenType>({} as any);
 
 function hasOneShowingChild(
-  children: RouteRecordRaw[] = [],
+  children: childrenType[] = [],
-  parent: RouteRecordRaw
+  parent: childrenType
 ) {
   const showingChildren = children.filter((item: any) => {
     onlyOneChild.value = item;
@@ -59,8 +49,7 @@ function resolvePath(routePath) {
   <template
     v-if="
       hasOneShowingChild(props.item.children, props.item) &&
-      (!onlyOneChild.children || onlyOneChild.noShowingChildren) &&
+      (!onlyOneChild.children || onlyOneChild.noShowingChildren)
-      !props.item.alwaysShow
     "
   >
     <el-menu-item

src/layout/components/sidebar/vertical.vue

@@ -17,9 +17,10 @@ const showLogo = ref(storageLocal.getItem("logoVal") || "1");
 const isCollapse = computed(() => {
   return !pureApp.getSidebarStatus;
 });
-const activeMenu = computed(() => {
+const activeMenu = computed((): string => {
   const { meta, path } = route;
   if (meta.activeMenu) {
+    // @ts-ignore
     return meta.activeMenu;
   }
   return path;

src/layout/components/tag/index.vue

@@ -274,13 +274,13 @@ function closeMenu() {
   visible.value = false;
 }
 
-function showMenus(value: Boolean) {
+function showMenus(value: boolean) {
   Array.of(1, 2, 3, 4, 5).forEach(v => {
     tagsViews.value[v].show = value;
   });
 }
 
-function disabledMenus(value: Boolean) {
+function disabledMenus(value: boolean) {
   Array.of(1, 2, 3, 4, 5).forEach(v => {
     tagsViews.value[v].disabled = value;
   });

src/layout/types.ts

@@ -16,15 +16,9 @@ export type relativeStorageType = {
 export type tagsViewsType = {
   icon: string;
   text: string;
-  divided: {
+  divided: boolean;
-    valueOf: () => boolean;
+  disabled: boolean;
-  };
+  show: boolean;
-  disabled: {
-    valueOf: () => boolean;
-  };
-  show: {
-    valueOf: () => boolean;
-  };
 };
 
 export interface setType {
@@ -53,3 +47,18 @@ export const routerArrays: Array<RouteConfigs> = [
     }
   }
 ];
+
+export type childrenType = {
+  path?: string;
+  noShowingChildren?: boolean;
+  children?: childrenType[];
+  value: unknown;
+  meta?: {
+    icon?: string;
+    title?: string;
+    extraIcon?: {
+      svg?: boolean;
+      name?: string;
+    };
+  };
+};