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',
@@ -208,10 +290,10 @@
                 api: ["showToast"]
               }
               // #ifdef APP
-              ,{
+              , {
                 name: '主题切换',
                 url: 'theme-change',
-                api: ["setAppTheme","onOsThemeChange","offOsThemeChange","onAppThemeChange","offAppThemeChange"]
+                api: ["setAppTheme", "onOsThemeChange", "offOsThemeChange", "onAppThemeChange", "offAppThemeChange"]
               }
               // #endif
             ] as Page[],
@@ -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',
@@ -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">
@@ -24,6 +24,32 @@
         </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 -->
       <uni-upgrade-center-app ref="upgradePopup" @show="upgradePopupShow" @close="upgradePopupClose" />
       <!-- #endif -->
@@ -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',
@@ -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(_ => { })