From a7c12d93d3bb594e520192c79a5fec689e139440 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Fri, 15 Oct 2021 13:19:12 +0800
Subject: [PATCH] types: optimizate layout

---
 src/layout/components/setting/index.vue       | 28 +++----------------
 src/layout/components/sidebar/horizontal.vue  |  3 +-
 src/layout/components/sidebar/sidebarItem.vue | 23 ++++-----------
 src/layout/components/sidebar/vertical.vue    |  3 +-
 src/layout/components/tag/index.vue           |  4 +--
 src/layout/types.ts                           | 27 ++++++++++++------
 6 files changed, 34 insertions(+), 54 deletions(-)

diff --git a/src/layout/components/setting/index.vue b/src/layout/components/setting/index.vue
index 3c0ad7122..834b5b804 100644
--- a/src/layout/components/setting/index.vue
+++ b/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
-        class="item"
-        effect="dark"
-        content="左侧菜单暗色模式"
-        placement="bottom"
-      >
+      <el-tooltip class="item" 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
-        class="item"
-        effect="dark"
-        content="左侧菜单亮色模式"
-        placement="bottom"
-      >
+      <el-tooltip class="item" 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
-        class="item"
-        effect="dark"
-        content="顶部菜单暗色模式"
-        placement="bottom"
-      >
+      <el-tooltip class="item" 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
-        class="item"
-        effect="dark"
-        content="顶部菜单亮色模式"
-        placement="bottom"
-      >
+      <el-tooltip class="item" content="顶部菜单亮色模式" placement="bottom">
         <li
           :class="
             dataTheme.layout === 'horizontal-light' ? $style.isSelect : ''
diff --git a/src/layout/components/sidebar/horizontal.vue b/src/layout/components/sidebar/horizontal.vue
index 6df01d2da..4d03b122d 100644
--- a/src/layout/components/sidebar/horizontal.vue
+++ b/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;
diff --git a/src/layout/components/sidebar/sidebarItem.vue b/src/layout/components/sidebar/sidebarItem.vue
index 5c2bb3e37..ee2eb568d 100644
--- a/src/layout/components/sidebar/sidebarItem.vue
+++ b/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 = {
-  path?: string;
-  noShowingChildren?: boolean;
-  children?: RouteRecordRaw[];
-  meta?: {
-    icon?: string;
-    title?: string;
-  };
-};
-
-const onlyOneChild = ref<RouteRecordRaw | childrenType>({} as any);
+const onlyOneChild: childrenType = ref(null);
 
 function hasOneShowingChild(
-  children: RouteRecordRaw[] = [],
-  parent: RouteRecordRaw
+  children: childrenType[] = [],
+  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) &&
-      !props.item.alwaysShow
+      (!onlyOneChild.children || onlyOneChild.noShowingChildren)
     "
   >
     <el-menu-item
diff --git a/src/layout/components/sidebar/vertical.vue b/src/layout/components/sidebar/vertical.vue
index db93a12ec..fda664dde 100644
--- a/src/layout/components/sidebar/vertical.vue
+++ b/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;
diff --git a/src/layout/components/tag/index.vue b/src/layout/components/tag/index.vue
index 99d967e6b..66a549b04 100644
--- a/src/layout/components/tag/index.vue
+++ b/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;
   });
diff --git a/src/layout/types.ts b/src/layout/types.ts
index b0d63c7d5..3036a4610 100644
--- a/src/layout/types.ts
+++ b/src/layout/types.ts
@@ -16,15 +16,9 @@ export type relativeStorageType = {
 export type tagsViewsType = {
   icon: string;
   text: string;
-  divided: {
-    valueOf: () => boolean;
-  };
-  disabled: {
-    valueOf: () => boolean;
-  };
-  show: {
-    valueOf: () => boolean;
-  };
+  divided: boolean;
+  disabled: boolean;
+  show: 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;
+    };
+  };
+};