wip: 通过 pages.json 文件生成 tabBar 目录

pages/tabBar/API.uvue

@@ -27,18 +27,18 @@
 
       <text>---------------</text>
      <uni-collapse>
-        <template v-for="menuItem in menu" :key="menuItem.id">
-          <uni-collapse-item :title="menuItem.name" class="item">
-            <view v-for="page in menuItem.pages" :key="page.path" class="uni-navigate-item" hover-class="is--active"
+       <uni-collapse-item v-for="menuItem in menu" :key="menuItem!.id" :title="menuItem!.name"
+         class="item">
+         <view v-for="page in menuItem!.pages" :key="page.path" class="uni-navigate-item" hover-class="is--active"
            @click="goPage(`/${page.path}`)">
            <text class="uni-navigate-text">{{
                page.style["navigationBarTitleText"]
              }}</text>
            <image :src="arrowRightIcon" class="uni-icon-size"></image>
          </view>
-            <uni-collapse style="width: 100%" v-for="childMenu in menuItem.children" :key="childMenu.id">
-              <uni-collapse-item :title="childMenu.name" class="item" style="margin-bottom: 0">
-                <view class="uni-navigate-item" hover-class="is--active" v-for="childPage in childMenu.pages"
+         <uni-collapse style="width: 100%" v-for="childMenu in menuItem!.children" :key="childMenu!.id">
+           <uni-collapse-item :title="childMenu!.name" class="item" style="margin-bottom: 0">
+             <view class="uni-navigate-item" hover-class="is--active" v-for="childPage in childMenu!.pages"
                :key="childPage.path" @click="goPage(`/${childPage.path}`)">
                <text class="uni-navigate-text">{{
                    childPage.style["navigationBarTitleText"]
@@ -48,7 +48,6 @@
            </uni-collapse-item>
          </uni-collapse>
        </uni-collapse-item>
-        </template>
      </uni-collapse>
     </view>
   <!-- #ifdef APP -->
@@ -62,68 +61,9 @@
 </template>
 
 <script lang="uts">
-  import { pages } from '@/target-pages.json'
-
-  type PagesJsonPageGroup = {
-    id : string,
-    name : string
-  }
-
-  type PagesJsonPage = {
-    path : string,
-    style : UTSJSONObject,
-    group ?: PagesJsonPageGroup[] | null
-  }
-
-  type MenuItem = {
-    id : string,
-    name : string,
-    children : MenuItem[],
-    pages : PagesJsonPage[]
-  }
-  const menu : MenuItem[] = []
-  const menuKeyMap = new Map<string, number>()
-  // #ifdef APP-ANDROID
-  const apiPages = JSON.parse<PagesJsonPage[]>(JSON.stringify(pages))!.filter((page : PagesJsonPage) : boolean => page.path.startsWith('pages/API') && page.group !== null)
-  // #endif
-  // #ifdef WEB || APP-IOS
-  const apiPages = (pages as unknown as PagesJsonPage[]).filter(page => page.path.startsWith('pages/API') && page.group)
-  // #endif
-  apiPages.forEach(page => {
-    let currentArr : MenuItem[] = menu
-    let currentMenu : MenuItem | null = null
-    if (page.group !== null) {
-      page.group!.forEach((item, index) => {
-        const { id, name } = item
-        const ids = id.split('.')
-        const _id = ids[ids.length - 1]
-        if (!menuKeyMap.has(id)) {
-          menuKeyMap.set(id, currentArr.length)
-          currentArr.push({
-            id: _id,
-            name,
-            children: [] as MenuItem[],
-            pages: [] as PagesJsonPage[]
-          } as MenuItem)
-          if (_id == 'page' && name == '页面和路由') {
-            currentArr[currentArr.length - 1].pages.push({
-              path: 'set-tab-bar',
-              style: {
-                navigationBarTitleText: '设置 TabBar'
-              }
-            } as PagesJsonPage)
-          }
-        }
-        currentMenu = currentArr[menuKeyMap.get(id)!]
-        if (index < page.group!.length - 1) {
-          currentArr = currentArr[menuKeyMap.get(id)!].children as MenuItem[]
-        }
-      })
-    }
-    if (currentMenu !== null) {
-      (currentMenu as MenuItem).pages.push(page)
-    }
-  })
+  import { generateMenu } from './generateMenu.uts'
+  import { MenuItem } from './generateMenu.uts'
+  const menu = generateMenu('pages/API')
   type Page = {
     name : string
     url : string
@@ -140,7 +80,7 @@
   export default {
     data() {
       return {
-        menu: menu as MenuItem[],
+        menu: menu as (MenuItem | null)[],
         list: [
           {
             id: 'global',

pages/tabBar/CSS.uvue

@@ -26,18 +26,18 @@
 
       <text>---------------</text>
       <uni-collapse>
-        <template v-for="menuItem in menu" :key="menuItem.id">
-          <uni-collapse-item :title="menuItem.name" class="item">
-            <view v-for="page in menuItem.pages" :key="page.path" class="uni-navigate-item" hover-class="is--active"
+        <uni-collapse-item v-for="menuItem in menu" :key="menuItem!.id" :title="menuItem!.name"
+          class="item">
+          <view v-for="page in menuItem!.pages" :key="page.path" class="uni-navigate-item" hover-class="is--active"
             @click="goPage(`/${page.path}`)">
             <text class="uni-navigate-text">{{
                 page.style["navigationBarTitleText"]
               }}</text>
             <image :src="arrowRightIcon" class="uni-icon-size"></image>
           </view>
-            <uni-collapse style="width: 100%" v-for="childMenu in menuItem.children" :key="childMenu.id">
-              <uni-collapse-item :title="childMenu.name" class="item" style="margin-bottom: 0">
-                <view class="uni-navigate-item" hover-class="is--active" v-for="childPage in childMenu.pages"
+          <uni-collapse style="width: 100%" v-for="childMenu in menuItem!.children" :key="childMenu!.id">
+            <uni-collapse-item :title="childMenu!.name" class="item" style="margin-bottom: 0">
+              <view class="uni-navigate-item" hover-class="is--active" v-for="childPage in childMenu!.pages"
                 :key="childPage.path" @click="goPage(`/${childPage.path}`)">
                 <text class="uni-navigate-text">{{
                     childPage.style["navigationBarTitleText"]
@@ -47,7 +47,6 @@
             </uni-collapse-item>
           </uni-collapse>
         </uni-collapse-item>
-        </template>
       </uni-collapse>
     </view>
   <!-- #ifdef APP -->
@@ -56,60 +55,9 @@
 </template>
 
 <script lang="uts">
-  import { pages } from '@/target-pages.json'
-
-  type PagesJsonPageGroup = {
-    id : string,
-    name : string
-  }
-
-  type PagesJsonPage = {
-    path : string,
-    style : UTSJSONObject,
-    group ?: PagesJsonPageGroup[] | null
-  }
-
-  type MenuItem = {
-    id : string,
-    name : string,
-    children : MenuItem[],
-    pages : PagesJsonPage[]
-  }
-  const menu : MenuItem[] = []
-  const menuKeyMap = new Map<string, number>()
-  // #ifdef APP-ANDROID
-  const cssPages = JSON.parse<PagesJsonPage[]>(JSON.stringify(pages))!.filter((page : PagesJsonPage) : boolean => page.path.startsWith('pages/CSS') && page.group !== null)
-  // #endif
-  // #ifdef WEB || APP-IOS
-  const cssPages = (pages as unknown as PagesJsonPage[]).filter(page => page.path.startsWith('pages/CSS') && page.group)
-  // #endif
-  cssPages.forEach(page => {
-    let currentArr : MenuItem[] = menu
-    let currentMenu : MenuItem | null = null
-    if (page.group !== null) {
-      page.group!.forEach((item, index) => {
-        const { id, name } = item
-        const ids = id.split('.')
-        const _id = ids[ids.length - 1]
-        if (!menuKeyMap.has(id)) {
-          menuKeyMap.set(id, currentArr.length)
-          currentArr.push({
-            id: _id,
-            name,
-            children: [] as MenuItem[],
-            pages: [] as PagesJsonPage[]
-          } as MenuItem)
-        }
-        currentMenu = currentArr[menuKeyMap.get(id)!]
-        if (index < page.group!.length - 1) {
-          currentArr = currentArr[menuKeyMap.get(id)!].children as MenuItem[]
-        }
-      })
-    }
-    if (currentMenu !== null) {
-      (currentMenu as MenuItem).pages.push(page)
-    }
-  })
+  import { generateMenu } from './generateMenu.uts'
+  import { MenuItem } from './generateMenu.uts'
+  const menu = generateMenu('pages/CSS')
   type Page = {
     name : string
     enable ?: boolean
@@ -125,7 +73,7 @@
   export default {
     data() {
       return {
-        menu: menu as MenuItem[],
+        menu: menu as (MenuItem | null)[],
         list: [
           {
             id: 'background',

pages/tabBar/component.uvue

@@ -26,18 +26,18 @@
 
       <text>---------------</text>
       <uni-collapse>
-        <template v-for="menuItem in menu" :key="menuItem.id">
-          <uni-collapse-item :title="menuItem.name" class="item">
-            <view v-for="page in menuItem.pages" :key="page.path" class="uni-navigate-item" hover-class="is--active"
+        <uni-collapse-item v-for="menuItem in menu" :key="menuItem!.id" :title="menuItem!.name"
+          class="item">
+          <view v-for="page in menuItem!.pages" :key="page.path" class="uni-navigate-item" hover-class="is--active"
             @click="goPage(`/${page.path}`)">
             <text class="uni-navigate-text">{{
                 page.style["navigationBarTitleText"]
               }}</text>
             <image :src="arrowRightIcon" class="uni-icon-size"></image>
           </view>
-            <uni-collapse style="width: 100%" v-for="childMenu in menuItem.children" :key="childMenu.id">
-              <uni-collapse-item :title="childMenu.name" class="item" style="margin-bottom: 0">
-                <view class="uni-navigate-item" hover-class="is--active" v-for="childPage in childMenu.pages"
+          <uni-collapse style="width: 100%" v-for="childMenu in menuItem!.children" :key="childMenu!.id">
+            <uni-collapse-item :title="childMenu!.name" class="item" style="margin-bottom: 0">
+              <view class="uni-navigate-item" hover-class="is--active" v-for="childPage in childMenu!.pages"
                 :key="childPage.path" @click="goPage(`/${childPage.path}`)">
                 <text class="uni-navigate-text">{{
                     childPage.style["navigationBarTitleText"]
@@ -47,7 +47,6 @@
             </uni-collapse-item>
           </uni-collapse>
         </uni-collapse-item>
-        </template>
       </uni-collapse>
 
       <!-- #ifdef UNI-APP-X && APP -->
@@ -60,60 +59,9 @@
 </template>
 
 <script lang="uts">
-  import { pages } from '@/target-pages.json'
-
-  type PagesJsonPageGroup = {
-    id : string,
-    name : string
-  }
-
-  type PagesJsonPage = {
-    path : string,
-    style : UTSJSONObject,
-    group ?: PagesJsonPageGroup[] | null
-  }
-
-  type MenuItem = {
-    id : string,
-    name : string,
-    children : MenuItem[],
-    pages : PagesJsonPage[]
-  }
-  const menu : MenuItem[] = []
-  const menuKeyMap = new Map<string, number>()
-  // #ifdef APP-ANDROID
-  const componentPages = JSON.parse<PagesJsonPage[]>(JSON.stringify(pages))!.filter((page : PagesJsonPage) : boolean => page.path.startsWith('pages/component') && page.group !== null)
-  // #endif
-  // #ifdef WEB || APP-IOS
-  const componentPages = (pages as unknown as PagesJsonPage[]).filter(page => page.path.startsWith('pages/component') && page.group)
-  // #endif
-  componentPages.forEach(page => {
-    let currentArr : MenuItem[] = menu
-    let currentMenu : MenuItem | null = null
-    if (page.group !== null) {
-      page.group!.forEach((item, index) => {
-        const { id, name } = item
-        const ids = id.split('.')
-        const _id = ids[ids.length - 1]
-        if (!menuKeyMap.has(id)) {
-          menuKeyMap.set(id, currentArr.length)
-          currentArr.push({
-            id: _id,
-            name,
-            children: [] as MenuItem[],
-            pages: [] as PagesJsonPage[]
-          } as MenuItem)
-        }
-        currentMenu = currentArr[menuKeyMap.get(id)!]
-        if (index < page.group!.length - 1) {
-          currentArr = currentArr[menuKeyMap.get(id)!].children as MenuItem[]
-        }
-      })
-    }
-    if (currentMenu !== null) {
-      (currentMenu as MenuItem).pages.push(page)
-    }
-  })
+  import { generateMenu } from './generateMenu.uts'
+  import { MenuItem } from './generateMenu.uts'
+  const menu = generateMenu('pages/component')
   // #ifdef UNI-APP-X && APP
   import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update'
   // #endif
@@ -133,7 +81,7 @@
   export default {
     data() {
       return {
-        menu: menu as MenuItem[],
+        menu: menu as (MenuItem | null)[],
         list: [
           {
             id: 'view',

pages/tabBar/generateMenu.uts

+import { pages } from '@/target-pages.json'
+
+type PageGroup = {
+  id: string,
+  name: string,
+  index: number | null
+}
+
+type Page = {
+  path: string,
+  style: UTSJSONObject,
+  group?: PageGroup[] | null
+}
+
+export type MenuItem = {
+  id: string,
+  name: string,
+  index: number,
+  children: (MenuItem | null)[],
+  pages: Page[]
+}
+
+export function generateMenu(tabBarType: string): (MenuItem | null)[] {
+  const res: (MenuItem | null)[] = []
+
+  const tabBarPages = JSON.parse<Page[]>(JSON.stringify(pages))!.filter((page: Page): boolean => page.path.startsWith(tabBarType) && hasPageGroup(page.group))
+  tabBarPages.forEach(page => {
+    let menuItemArr: (MenuItem | null)[] = res
+    let currentMenu: MenuItem | null = null
+    const groupLength = page.group!.length
+    page.group!.forEach((group, groupIndex) => {
+      const { index, id, name } = group
+
+      const validIndex = isNumber(index) ? index! : menuItemArr.length
+      fillArrayWithNull(menuItemArr, validIndex)
+
+      if (menuItemArr[validIndex] == null) {
+        menuItemArr[validIndex] = {
+          id: id.split('.').slice(-1)[0],
+          name,
+          index: validIndex,
+          children: [] as (MenuItem | null)[],
+          pages: [] as Page[]
+        } as MenuItem
+      }
+
+
+      currentMenu = menuItemArr[validIndex]
+      if (groupIndex < groupLength - 1) {
+        menuItemArr = menuItemArr[validIndex]!.children as (MenuItem | null)[]
+      }
+    })
+
+    currentMenu!.pages.push(page)
+  })
+  return removeNullItem(res)
+}
+
+function hasPageGroup(value: PageGroup[] | null): boolean {
+  // #ifdef APP-ANDROID
+  return value !== null
+  // #endif
+  // #ifndef APP-ANDROID
+  return !!value
+  // #endif
+}
+
+function isNumber(value: number | null): boolean {
+  // #ifdef APP-ANDROID
+  return value !== null
+  // #endif
+  // #ifndef APP-ANDROID
+  return typeof value === 'number'
+  // #endif
+}
+
+function fillArrayWithNull(arr: (MenuItem | null)[], index: number): void {
+  const len = arr.length
+  for (let i = 0;i <= index - (len - 1);i++) {
+    arr.push(null)
+  }
+}
+
+function removeNullItem(arr: (MenuItem | null)[]): (MenuItem | null)[] {
+  const res = arr.filter((item: MenuItem | null): boolean => item !== null)
+  res.forEach(menuItem => {
+    addSetTabBarPage(menuItem!)
+    // #ifdef APP-ANDROID
+    menuItem!.children = removeNullItem(menuItem.children)
+    // #endif
+    // #ifndef APP-ANDROID
+    menuItem!.children = removeNullItem(menuItem!.children)
+    // #endif
+  })
+  return res
+}
+
+function addSetTabBarPage(menuItem: MenuItem) {
+  const { id, name } = menuItem
+  if (id == 'page' && name == '页面和路由') {
+    menuItem.pages.push({
+      path: 'set-tab-bar',
+      style: {
+        navigationBarTitleText: '设置 TabBar'
+      }
+    } as Page)
+  }
+}