refactor: 整理demo页面+自动引入

src/pages/demo/index.vue

@@ -1,12 +1,25 @@
 <template>
   <view class="bg-slate-100">
     <view class="bg-slate-100 w-full">
-      <view v-for="item in list" :key="item.url" class="mt-3">
+      <view class="font-800 mt-4">基本功能</view>
+      <view v-for="item in baseDemos" :key="item.path" class="mt-3">
         <view
           class="flex bg-white items-center justify-between p-3 mb-2"
-          @click="goDetailPage(item.url)"
+          @click="goDetailPage(item.path)"
         >
-          <text class="flex-1 text-4 text-dark">{{ item.name }}</text>
+          <text class="flex-1 text-4 text-dark">{{ item.title }}</text>
+          <text class="i-carbon-chevron-right"></text>
+        </view>
+      </view>
+    </view>
+    <view class="bg-slate-100 w-full">
+      <view class="font-800 mt-4">页面功能</view>
+      <view v-for="item in pageDemos" :key="item.path" class="mt-3">
+        <view
+          class="flex bg-white items-center justify-between p-3 mb-2"
+          @click="goDetailPage(item.path)"
+        >
+          <text class="flex-1 text-4 text-dark">{{ item.title }}</text>
           <text class="i-carbon-chevron-right"></text>
         </view>
       </view>
@@ -15,49 +28,26 @@
 </template>
 
 <script setup lang="ts" name="TestIndex">
-import { ref } from 'vue'
+import pagesJson from '@/pages.json'
+
+console.log(pagesJson)
+/** 基本功能 */
+const baseDemos = pagesJson.pages
+  .filter((e) => e.path.startsWith('pages/demo/base'))
+  .map((e) => ({
+    title: e.style?.navigationBarTitleText || '默认页面标题',
+    path: e.path,
+  }))
+/** 页面功能 */
+const pageDemos = pagesJson.pages
+  .filter((e) => e.path.startsWith('pages/demo/page'))
+  .map((e) => ({
+    title: e.style?.navigationBarTitleText || '默认页面标题',
+    path: e.path,
+  }))
 
-// TODO: 通过pages.json 文件里面的 path 和 navigationBarTitleText，生成数组
-const list = ref([
-  {
-    name: 'UnoCSS',
-    url: 'unocss',
-  },
-  {
-    name: 'UnoCSS Icons',
-    url: 'unocss-icons',
-  },
-  {
-    name: 'UniUI',
-    url: 'uni-ui',
-  },
-  {
-    name: 'UniUI Icons',
-    url: 'uni-ui-icons',
-  },
-  {
-    name: 'Pinia+持久化',
-    url: 'pinia',
-  },
-  {
-    name: '微信分享',
-    url: 'mp-weixin-share',
-  },
-  {
-    name: '自定义导航栏',
-    url: 'navbar',
-  },
-  {
-    name: '自定义导航栏渐变',
-    url: 'throughout',
-  },
-  {
-    name: '请求封装+请求拦截器',
-    url: 'request',
-  },
-])
 const goDetailPage = (path: string) => {
-  const url = `/pages/demo/demo/${path}`
+  const url = `/${path}`
   uni.navigateTo({
     url,
   })

src/pages/demo/page/floating-bubble.vue

@@ -1,3 +1,10 @@
+<route lang="json5">
+{
+  layout: 'default',
+  style: { navigationBarTitleText: '页面悬浮球' },
+}
+</route>
+
 <template>
   <view>
     <movable-area class="movable-area">