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

5027b56c · DCloud-WZF · 994a8f77 · 5027b56c · 5027b56c · 5027b56c
5 changed file
--- a/pages/tabBar/API.uvue
+++ b/pages/tabBar/API.uvue
@@ -26,30 +26,29 @@
      </uni-collapse>

      <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"
-              @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"
-                  :key="childPage.path" @click="goPage(`/${childPage.path}`)">
-                  <text class="uni-navigate-text">{{
-                    childPage.style["navigationBarTitleText"]
-                  }}</text>
-                  <image :src="arrowRightIcon" class="uni-icon-size"></image>
-                </view>
-              </uni-collapse-item>
-            </uni-collapse>
-          </uni-collapse-item>
-        </template>
-      </uni-collapse>
+     <uni-collapse>
+       <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"
+               :key="childPage.path" @click="goPage(`/${childPage.path}`)">
+               <text class="uni-navigate-text">{{
+                   childPage.style["navigationBarTitleText"]
+                 }}</text>
+               <image :src="arrowRightIcon" class="uni-icon-size"></image>
+             </view>
+           </uni-collapse-item>
+         </uni-collapse>
+       </uni-collapse-item>
+     </uni-collapse>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
@@ -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',

--- a/pages/tabBar/CSS.uvue
+++ b/pages/tabBar/CSS.uvue
@@ -25,29 +25,28 @@
      </uni-collapse>

      <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"
-              @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"
-                  :key="childPage.path" @click="goPage(`/${childPage.path}`)">
-                  <text class="uni-navigate-text">{{
-                    childPage.style["navigationBarTitleText"]
-                  }}</text>
-                  <image :src="arrowRightIcon" class="uni-icon-size"></image>
-                </view>
-              </uni-collapse-item>
-            </uni-collapse>
-          </uni-collapse-item>
-        </template>
+      <uni-collapse>
+        <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"
+                :key="childPage.path" @click="goPage(`/${childPage.path}`)">
+                <text class="uni-navigate-text">{{
+                    childPage.style["navigationBarTitleText"]
+                  }}</text>
+                <image :src="arrowRightIcon" class="uni-icon-size"></image>
+              </view>
+            </uni-collapse-item>
+          </uni-collapse>
+        </uni-collapse-item>
      </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',

--- a/pages/tabBar/component.uvue
+++ b/pages/tabBar/component.uvue
@@ -26,28 +26,27 @@

      <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"
-              @click="goPage(`/${page.path}`)">
-              <text class="uni-navigate-text">{{
+        <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"
-                  :key="childPage.path" @click="goPage(`/${childPage.path}`)">
-                  <text class="uni-navigate-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"
+                :key="childPage.path" @click="goPage(`/${childPage.path}`)">
+                <text class="uni-navigate-text">{{
                    childPage.style["navigationBarTitleText"]
                  }}</text>
-                  <image :src="arrowRightIcon" class="uni-icon-size"></image>
-                </view>
-              </uni-collapse-item>
-            </uni-collapse>
-          </uni-collapse-item>
-        </template>
+                <image :src="arrowRightIcon" class="uni-icon-size"></image>
+              </view>
+            </uni-collapse-item>
+          </uni-collapse>
+        </uni-collapse-item>
      </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',

--- a/pages/tabBar/generateMenu.uts
+++ b/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)
+  }
+}
--- a/target-pages.json
+++ b/target-pages.json