wip: 通过 json 文件生成部分 tabBar 页面目录

pages/tabBar/API.uvue

 <template>
   <!-- #ifdef APP -->
-  <scroll-view style="flex: 1;background-color: #f8f8f8;" enable-back-to-top="true">
+  <scroll-view style="flex: 1; background-color: #f8f8f8" enable-back-to-top="true">
   <!-- #endif -->
     <view class="uni-container">
       <view class="uni-header-logo">
@@ -24,6 +24,32 @@
           </uni-collapse-item>
         </template>
       </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>
     </view>
   <!-- #ifdef APP -->
   </scroll-view>
@@ -36,6 +62,61 @@
 </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)
+        }
+        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)
+    }
+  })
+  console.log('menu', menu)
   type Page = {
     name : string
     url : string
@@ -52,6 +133,7 @@
   export default {
     data() {
       return {
+        menu: menu as MenuItem[],
         list: [
           {
             id: 'global',
@@ -206,13 +288,13 @@
                 name: 'showToast轻提示框',
                 url: 'toast',
                 api: ["showToast"]
-              }
-              // #ifdef APP
-              ,{
-                name: '主题切换',
-                url: 'theme-change',
-                api: ["setAppTheme","onOsThemeChange","offOsThemeChange","onAppThemeChange","offAppThemeChange"]
-              }
+              }
+              // #ifdef APP
+              , {
+                name: '主题切换',
+                url: 'theme-change',
+                api: ["setAppTheme", "onOsThemeChange", "offOsThemeChange", "onAppThemeChange", "offAppThemeChange"]
+              }
               // #endif
             ] as Page[],
           },
@@ -292,14 +374,14 @@
               {
                 name: "打电话",
                 url: "make-phone-call",
-              },
-              {
-                name: "剪贴板",
-                url: "clipboard",
-              },
-              {
-                name: "监听罗盘数据",
-                url: "on-compass-change",
+              },
+              {
+                name: "剪贴板",
+                url: "clipboard",
+              },
+              {
+                name: "监听罗盘数据",
+                url: "on-compass-change",
               },
               // #endif
               /*
@@ -423,18 +505,18 @@
               {
                 name: '获取当前位置',
                 url: 'get-location',
-              },
-              // #ifdef WEB
-              {
-                name: "使用地图查看位置",
-                url: "open-location",
-              },
-              {
-                name: "使用地图选择位置",
-                url: "choose-location",
-              },
+              },
+              // #ifdef WEB
+              {
+                name: "使用地图查看位置",
+                url: "open-location",
+              },
+              {
+                name: "使用地图选择位置",
+                url: "choose-location",
+              },
               // #endif
-              /*
+              /*
               {
                 name: "地图搜索",
                 url: "map-search",
@@ -500,24 +582,24 @@
                 url: 'facial-recognition-verify',
               }
             ] as Page[],
-          },
-          {
-            id: 'ad',
-            name: '广告',
-            pages: [
-              {
-                name: '激励视频广告',
-                url: 'rewarded-video-ad',
-              }
-              /* {
-                id: "full-screen-video-ad",
-                url: "full-screen-video-ad",
-                name: "全屏视频广告",
-                enable: false,
-                pages: [] as Page[]
-              }, */
-            ] as Page[],
-          },
+          },
+          {
+            id: 'ad',
+            name: '广告',
+            pages: [
+              {
+                name: '激励视频广告',
+                url: 'rewarded-video-ad',
+              }
+              /* {
+                id: "full-screen-video-ad",
+                url: "full-screen-video-ad",
+                name: "全屏视频广告",
+                enable: false,
+                pages: [] as Page[]
+              }, */
+            ] as Page[],
+          },
           // #endif
           {
             id: "payment",
@@ -534,7 +616,7 @@
                 url: "request-payment-uni-pay",
               }
             ] as Page[],
-          },
+          },
           // #ifdef APP-ANDROID
           {
             id: 'permission-listener',
@@ -593,6 +675,9 @@
           url,
         })
       },
+      goPage(url : string) {
+        uni.navigateTo({ url })
+      },
       showPop: function () {
         (this.$refs["pop"] as UniElement).style.setProperty("display", "flex")
       },

pages/tabBar/CSS.uvue

 <template>
   <!-- #ifdef APP -->
-  <scroll-view style="flex: 1;background-color: #f8f8f8;" enable-back-to-top="true">
+  <scroll-view style="flex: 1; background-color: #f8f8f8" enable-back-to-top="true">
   <!-- #endif -->
     <view class="uni-container">
       <view class="uni-header-logo">
@@ -14,7 +14,7 @@
       <uni-collapse>
         <template v-for="item in list" :key="item.id">
           <uni-collapse-item :title="item.name" class="item">
-            <view class="uni-navigate-item" :hover-class="page.enable == false?'':'is--active'"
+            <view class="uni-navigate-item" :hover-class="page.enable == false ? '' : 'is--active'"
               v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(page)">
               <text class="uni-navigate-text"
                 :class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text>
@@ -23,6 +23,32 @@
           </uni-collapse-item>
         </template>
       </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>
     </view>
   <!-- #ifdef APP -->
   </scroll-view>
@@ -30,6 +56,62 @@
 </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)
+    }
+  })
+  console.log('menu', menu)
+
   type Page = {
     name : string
     enable ?: boolean
@@ -45,6 +127,7 @@
   export default {
     data() {
       return {
+        menu: menu as MenuItem[],
         list: [
           {
             id: 'background',
@@ -103,10 +186,10 @@
               {
                 name: 'border属性复合示例',
                 url: '/pages/CSS/border/complex-border/complex-border',
-              },
-              {
-                name: 'border动态修改样式',
-                url: '/pages/CSS/border/dynamic-border'
+              },
+              {
+                name: 'border动态修改样式',
+                url: '/pages/CSS/border/dynamic-border'
               },
             ] as Page[],
           },
@@ -277,10 +360,10 @@
               {
                 name: 'overflow',
                 url: '/pages/CSS/overflow/overflow',
-              },
-              {
-                name: 'overflow-visible-event',
-                url: '/pages/CSS/overflow/overflow-visible-event'
+              },
+              {
+                name: 'overflow-visible-event',
+                url: '/pages/CSS/overflow/overflow-visible-event'
               }
             ] as Page[],
           },
@@ -357,16 +440,16 @@
                 url: '/pages/CSS/transition/transition',
               },
             ] as Page[],
-          },
-          {
-            id: 'pointer-events',
-            name: 'pointer-events',
-            pages: [
-              {
-                name: 'pointer-events',
-                url: '/pages/CSS/pointer-events/pointer-events',
-              },
-            ] as Page[],
+          },
+          {
+            id: 'pointer-events',
+            name: 'pointer-events',
+            pages: [
+              {
+                name: 'pointer-events',
+                url: '/pages/CSS/pointer-events/pointer-events',
+              },
+            ] as Page[],
           },
           {
             id: 'variable',
@@ -398,6 +481,9 @@
           url,
         })
       },
+      goPage(url : string) {
+        uni.navigateTo({ url })
+      },
     },
   }
 </script>

pages/tabBar/component.uvue

 <template>
   <!-- #ifdef APP -->
-  <scroll-view style="flex: 1; background-color: #f8f8f8;" enable-back-to-top="true">
+  <scroll-view style="flex: 1; background-color: #f8f8f8" enable-back-to-top="true">
   <!-- #endif -->
     <view class="uni-container">
       <view class="uni-header-logo">
@@ -22,6 +22,32 @@
             </view>
           </uni-collapse-item>
         </template>
+      </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>
 
       <!-- #ifdef UNI-APP-X && APP -->
@@ -34,6 +60,61 @@
 </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)
+    }
+  })
+  console.log('menu', menu)
   // #ifdef UNI-APP-X && APP
   import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update'
   // #endif
@@ -53,6 +134,7 @@
   export default {
     data() {
       return {
+        menu: menu as MenuItem[],
         list: [
           {
             id: 'view',
@@ -66,14 +148,14 @@
               },
               {
                 name: 'swiper',
-              },
-              // #ifdef WEB
-              {
-                name: 'movable-view'
-              },
-              {
-                name: 'cover-view'
-              },
+              },
+              // #ifdef WEB
+              {
+                name: 'movable-view'
+              },
+              {
+                name: 'cover-view'
+              },
               // #endif
               {
                 name: 'list-view',
@@ -83,14 +165,14 @@
               },
               {
                 name: 'sticky-section',
-              },
+              },
               // #ifdef APP
               {
                 name: 'nested-scroll-header',
               },
               {
                 name: 'nested-scroll-body',
-              },
+              },
               // #endif
             ] as Page[],
           },
@@ -125,17 +207,17 @@
               },
               {
                 name: 'input',
-              },
-              // #ifdef WEB
-              {
-                name: 'editor',
-              },
-              {
-                name: 'label',
-              },
-              {
-                name: 'picker',
-              },
+              },
+              // #ifdef WEB
+              {
+                name: 'editor',
+              },
+              {
+                name: 'label',
+              },
+              {
+                name: 'picker',
+              },
               // #endif
               {
                 name: 'picker-view',
@@ -182,8 +264,8 @@
                 enable: false,
               }, */
             ] as Page[],
-          },
-          // #ifdef WEB
+          },
+          // #ifdef WEB
           {
             id: 'map',
             name: '地图',
@@ -193,22 +275,22 @@
               }
             ] as Page[]
           },
-          // #endif
-          // #ifdef APP || WEB
-          {
-            id: 'canvas',
-            name: '画布',
-            pages: [
-              {
-                name: 'canvas',
-                url: '/pages/component/canvas/canvas',
-              },
-              {
-                name: 'ball',
-                url: '/pages/component/canvas/ball',
-              }
-            ] as Page[]
-          },
+          // #endif
+          // #ifdef APP || WEB
+          {
+            id: 'canvas',
+            name: '画布',
+            pages: [
+              {
+                name: 'canvas',
+                url: '/pages/component/canvas/canvas',
+              },
+              {
+                name: 'ball',
+                url: '/pages/component/canvas/ball',
+              }
+            ] as Page[]
+          },
           // #endif
           {
             id: 'web-view',
@@ -257,22 +339,22 @@
             pages: [
               {
                 name: '通用属性',
-                url: '/pages/component/general-attribute/general-attribute',
+                url: '/pages/component/public-properties/public-properties',
                 enable: true,
               },
               {
                 name: '通用事件',
-                url: '/pages/component/general-event/general-event',
+                url: '/pages/component/public-events/public-events',
                 enable: true,
               },
               {
                 name: 'touch事件',
-                url: '/pages/component/general-event/touch-event',
+                url: '/pages/component/public-events/touch-events',
                 enable: true,
               },
               {
                 name: 'Transition事件',
-                url: '/pages/component/general-event/transition-event',
+                url: '/pages/component/public-events/transition-events',
                 enable: true,
               },
             ] as Page[],
@@ -298,9 +380,12 @@
         uni.navigateTo({
           url,
         })
-      }
+      },
+      goPage(url : string) {
+        uni.navigateTo({ url })
+      },
       // #ifdef UNI-APP-X && APP
-      , upgradePopupShow() {
+      upgradePopupShow() {
         console.log('upgradePopup show');
         if (!this.pageHiden) {
           uni.hideTabBar()?.catch(_ => { })
@@ -316,16 +401,16 @@
       // #ifdef UNI-APP-X && APP
       checkUpdate(this.$refs['upgradePopup'] as UniUpgradeCenterAppComponentPublicInstance)
       // #endif
-    },
-    onLoad() {
-      // console.log("component page onLoad")
+    },
+    onLoad() {
+      // console.log("component page onLoad")
     },
     onShow() {
-      // console.log("component page onShow")
+      // console.log("component page onShow")
       this.pageHiden = false
     },
     onHide() {
-      // console.log("component page onHide")
+      // console.log("component page onHide")
       this.pageHiden = true
     },
     beforeUnmount() {