types: 优化 generate menu 类型

pages/tabBar/API.uvue

@@ -12,9 +12,9 @@
           :inWhiteList="true"></u-link>
       </view>
       <uni-collapse>
-        <uni-collapse-item ref="category" v-for="menuItem in menu" :key="menuItem!.id" :title="menuItem.name"
+        <uni-collapse-item ref="category" v-for="menuItem in menu" :key="menuItem.id" :title="menuItem.name"
           class="item">
-          <template v-for="childMenuItem in menuItem.items" :key="childMenuItem!.id">
+          <template v-for="childMenuItem in menuItem.items" :key="childMenuItem.id">
             <view v-if="childMenuItem.items.length==0" style="padding-left: 18px;"
               :class="{'uni-navigate-item':childMenuItem.path !== 'set-tab-bar' || windowWidth <= 768}"
               hover-class="is--active"
@@ -62,7 +62,7 @@
   export default {
     data() {
       return {
-        menu: menu as (MenuItem | null)[],
+        menu: menu as MenuItem[],
         arrowRightIcon: '/static/icons/arrow-right.png',
       }
     },

pages/tabBar/CSS.uvue

@@ -12,9 +12,9 @@
           :inWhiteList="true"></u-link>
       </view>
       <uni-collapse>
-        <uni-collapse-item ref="category" v-for="menuItem in menu" :key="menuItem!.id" :title="menuItem.name"
+        <uni-collapse-item ref="category" v-for="menuItem in menu" :key="menuItem.id" :title="menuItem.name"
           class="item">
-          <template v-for="childMenuItem in menuItem.items" :key="childMenuItem!.id">
+          <template v-for="childMenuItem in menuItem.items" :key="childMenuItem.id">
             <view v-if="childMenuItem.items.length==0" style="padding-left: 18px" class="uni-navigate-item"
               hover-class="is--active" @click="goPage(`/${childMenuItem.path}`)">
               <text class="uni-navigate-text" :class="{
@@ -26,7 +26,7 @@
               <uni-collapse-item :title="childMenuItem.name" class="item"
                 style="margin-bottom: 0; padding-left: 5px; padding-right: 5px">
                 <view style="padding-left: 18px" class="uni-navigate-item" hover-class="is--active"
-                  v-for="grandChildMenuItem in childMenuItem.items" :key="grandChildMenuItem!.path"
+                  v-for="grandChildMenuItem in childMenuItem.items" :key="grandChildMenuItem.path"
                   @click="goPage(`/${grandChildMenuItem.path}`)">
                   <text class="uni-navigate-text" :class="{
                       'left-win-active':
@@ -53,7 +53,7 @@
   export default {
     data() {
       return {
-        menu: menu as (MenuItem | null)[],
+        menu: menu as MenuItem[],
         arrowRightIcon: '/static/icons/arrow-right.png',
       }
     },
@@ -66,11 +66,11 @@
       }
     },
     methods: {
-      goPage(url : string) {
+      goPage(url : string) {
         if(this.hasLeftWin) {
-          uni.reLaunch({ url })
-        } else {
-          uni.navigateTo({ url })
+          uni.reLaunch({ url })
+        } else {
+          uni.navigateTo({ url })
         }
       },
     },
@@ -98,4 +98,4 @@
   .item {
     margin-bottom: 12px;
   }
-</style>
+</style>

pages/tabBar/component.uvue

@@ -12,9 +12,9 @@
           :text="'https://uniapp.dcloud.io/uni-app-x/component/'" :inWhiteList="true"></u-link>
       </view>
       <uni-collapse>
-        <uni-collapse-item ref="category" v-for="menuItem in menu" :key="menuItem!.id" :title="menuItem.name"
+        <uni-collapse-item ref="category" v-for="menuItem in menu" :key="menuItem.id" :title="menuItem.name"
           class="item">
-          <template v-for="childMenuItem in menuItem.items" :key="childMenuItem!.id">
+          <template v-for="childMenuItem in menuItem.items" :key="childMenuItem.id">
             <view v-if="childMenuItem.items.length==0" style="padding-left: 18px" class="uni-navigate-item"
               hover-class="is--active" @click="goPage(`/${childMenuItem.path}`)">
               <text class="uni-navigate-text" :class="{
@@ -26,7 +26,7 @@
               <uni-collapse-item :title="childMenuItem.name" class="item"
                 style="margin-bottom: 0; padding-left: 5px; padding-right: 5px">
                 <view style="padding-left: 18px" class="uni-navigate-item" hover-class="is--active"
-                  v-for="grandChildMenuItem in childMenuItem.items" :key="grandChildMenuItem!.path"
+                  v-for="grandChildMenuItem in childMenuItem.items" :key="grandChildMenuItem.path"
                   @click="goPage(`/${grandChildMenuItem.path}`)">
                   <text class="uni-navigate-text" :class="{
                       'left-win-active':
@@ -60,7 +60,7 @@
   export default {
     data() {
       return {
-        menu: menu as (MenuItem | null)[],
+        menu: menu as MenuItem[],
         arrowRightIcon: '/static/icons/arrow-right.png' as string.ImageURIString,
         pageHiden: false
       }
@@ -74,11 +74,11 @@
       }
     },
     methods: {
-      goPage(url : string) {
+      goPage(url : string) {
         if(this.hasLeftWin) {
-          uni.reLaunch({ url })
-        } else {
-          uni.navigateTo({ url })
+          uni.reLaunch({ url })
+        } else {
+          uni.navigateTo({ url })
         }
       },
       // #ifdef UNI-APP-X && APP
@@ -132,4 +132,4 @@
   .item {
     margin-bottom: 12px;
   }
-</style>
+</style>

pages/tabBar/generateMenu.uts

@@ -25,15 +25,15 @@ export type MenuItem = {
   path : string,
   style : UTSJSONObject,
   group ?: string | null,
-  items : (MenuItem | null)[]
+  items: MenuItem[]
 }
 
-export function generateMenu(tabBarType : string) : (MenuItem | null)[] {
-  let res : (MenuItem | null)[] = []
+export function generateMenu(tabBarType: string): MenuItem[] {
+  let res: MenuItem[] = []
   const tabBarPages = JSON.parse<Page[]>(JSON.stringify(pages))!.filter((page : Page) : boolean => page.path.startsWith(tabBarType) && hasPageGroup(page.group))
   const groupTree = JSON.parse<(Group | null)[]>(JSON.stringify(groups))
   tabBarPages.forEach(page => {
-    let menuItemArr : (MenuItem | null)[] = res
+    let menuItemArr: MenuItem[] = res
     let currentMenu : MenuItem | null = null
     const groupIndexList = page.group!.split(',').map((index : string) : number => parseInt(index))
     let currentGroups : (Group | null)[] | null = groupTree
@@ -56,9 +56,9 @@ export function generateMenu(tabBarType : string) : (MenuItem | null)[] {
       const { index, id, name } = group
 
       const validIndex = index
-      fillMenuArrayWithNull(menuItemArr, validIndex)
+      fillMenuArrayWithEmptyMenuItem(menuItemArr, validIndex)
 
-      if (menuItemArr[validIndex] == null) {
+      if (menuItemArr[validIndex].name == 'empty') {
         menuItemArr[validIndex] = {
           id: id.split('.').slice(-1)[0],
           name,
@@ -66,14 +66,14 @@ export function generateMenu(tabBarType : string) : (MenuItem | null)[] {
           path: '',
           style: {},
           group: '',
-          items: [] as (MenuItem | null)[],
+          items: [] as MenuItem[],
         } as MenuItem
       }
 
 
       currentMenu = menuItemArr[validIndex]
       if (groupIndex < groupLength - 1) {
-        menuItemArr = menuItemArr[validIndex]!.items as (MenuItem | null)[]
+        menuItemArr = menuItemArr[validIndex].items
       }
     })
 
@@ -84,12 +84,12 @@ export function generateMenu(tabBarType : string) : (MenuItem | null)[] {
       path: page.path,
       style: page.style,
       group: page.group,
-      items: [] as (MenuItem | null)[],
+      items: [] as MenuItem[],
     }
     if (hasPageGroup) {
       const pageIndex = lastGroup.index
-      fillMenuArrayWithNull(currentMenu!.items, pageIndex)
-      if (currentMenu!.items[pageIndex] == null) {
+      fillMenuArrayWithEmptyMenuItem(currentMenu!.items, pageIndex)
+      if (currentMenu!.items[pageIndex].name == 'empty') {
         currentMenu!.items[pageIndex] = pageMenuItem
       } else {
         currentMenu!.items.push(pageMenuItem)
@@ -99,7 +99,7 @@ export function generateMenu(tabBarType : string) : (MenuItem | null)[] {
     }
   })
 
-  return removeNullItem(res)
+  return removeEmptyItem(res)
 }
 
 function hasPageGroup(value ?: string | null) : boolean {
@@ -124,29 +124,37 @@ function camelToDash(camelStr : string) : string {
   return camelStr.replace(/([A-Z])/g, '-$1').toLowerCase()
 }
 
-function fillMenuArrayWithNull(arr : (MenuItem | null)[], index : number) : void {
+function fillMenuArrayWithEmptyMenuItem(arr: MenuItem[], index: number): void {
   const len = arr.length
   for (let i = 0; i <= index - (len - 1); i++) {
-    arr.push(null)
+    arr.push({
+      id: '',
+      name: 'empty',
+      index: i,
+      path: '',
+      style: {},
+      group: '',
+      items: [] as MenuItem[],
+    })
   }
 }
 
-function removeNullItem(arr : (MenuItem | null)[]) : (MenuItem | null)[] {
-  const res = arr.filter((item : MenuItem | null) : boolean => item !== null)
+function removeEmptyItem(arr: MenuItem[]): MenuItem[] {
+  const res = arr.filter((item: MenuItem): boolean => item.name !== 'empty')
   res.forEach(menuItem => {
-    addSetTabBarPage(menuItem!)
+    addSetTabBarPage(menuItem)
     // #ifdef APP-ANDROID
-    menuItem.items = removeNullItem(menuItem.items)
+    menuItem.items = removeEmptyItem(menuItem.items)
     // #endif
     // #ifndef APP-ANDROID
-    menuItem!.items = removeNullItem(menuItem!.items)
+    menuItem!.items = removeEmptyItem(menuItem!.items)
     // #endif
   })
   return res
 }
 
 function addSetTabBarPage(menuItem : MenuItem) {
-  const { id, name } = menuItem
+  const { id, name } = menuItem
   if (id == 'page' && name == '页面和路由') {
     menuItem.items.push({
       id: 'set-tab-bar',
@@ -160,4 +168,4 @@ function addSetTabBarPage(menuItem : MenuItem) {
       items: []
     } as MenuItem)
   }
-}
+}